Merge pull request #7 from Lemoncode/feature/Implement_projects_layout

brauliodiez · web-flow · commit 73172ab3d3eb · 2020-05-11T10:55:42.000+02:00
Feature/implement projects layout
diff --git a/src/pods/employee/api/employee.api-model.ts b/src/pods/employee/api/employee.api-model.ts
@@ -10,5 +10,5 @@ export interface Employee {
 export interface ProjectSummary {
   id: string;
   isAssigned?: boolean;
-  employeeName: string;
+  projectName: string;
 }
diff --git a/src/pods/employee/api/employee.mock-data.ts b/src/pods/employee/api/employee.mock-data.ts
@@ -4,22 +4,22 @@ const mockProjectSummaryList: ProjectSummary[] = [
   {
     id: '1',
     isAssigned: true,
-    employeeName: 'Mapfre',
+    projectName: 'Mapfre',
   },
   {
     id: '2',
     isAssigned: false,
-    employeeName: 'Bankia',
+    projectName: 'Bankia',
   },
   {
     id: '3',
     isAssigned: false,
-    employeeName: 'Vacaciones',
+    projectName: 'Vacaciones',
   },
   {
     id: '4',
     isAssigned: true,
-    employeeName: 'Baja',
+    projectName: 'Baja',
   },
 ];
 
diff --git a/src/pods/employee/components/project-row.component.tsx b/src/pods/employee/components/project-row.component.tsx
@@ -17,7 +17,7 @@ export const EmployeeRowComponent: React.FunctionComponent<Props> = ({
       <CellComponent>
         <Checkbox checked={row.isAssigned} color="primary" />
       </CellComponent>
-      <CellComponent>{row.employeeName}</CellComponent>
+      <CellComponent>{row.projectName}</CellComponent>
     </RowComponent>
   );
 };
diff --git a/src/pods/employee/employee.component.tsx b/src/pods/employee/employee.component.tsx
@@ -4,6 +4,7 @@ import {
   TabListComponent,
   TabPanelComponent,
 } from 'common/components';
+import AppBar from '@material-ui/core/AppBar';
 import { DataComponent, ProjectComponent, ReportComponent } from './components';
 import { Employee } from './employee.vm';
 import * as classes from './employee.styles';
@@ -26,11 +27,13 @@ export const EmployeeComponent: React.FunctionComponent<Props> = ({
   const [tab, setTab] = React.useState(0);
   return (
     <>
-      <TabListComponent value={tab} onChange={setTab}>
-        <TabComponent label="Datos" />
-        <TabComponent label="Proyectos" disabled={!isEditMode} />
-        <TabComponent label="Informes" disabled={!isEditMode} />
-      </TabListComponent>
+      <AppBar position="static">
+        <TabListComponent value={tab} onChange={setTab}>
+          <TabComponent label="Datos" />
+          <TabComponent label="Proyectos" disabled={!isEditMode} />
+          <TabComponent label="Informes" disabled={!isEditMode} />
+        </TabListComponent>
+      </AppBar>
       <TabPanelComponent value={tab} index={0}>
         <DataComponent
           employee={employee}
diff --git a/src/pods/employee/employee.container.tsx b/src/pods/employee/employee.container.tsx
@@ -16,14 +16,14 @@ export const EmployeeContainer: React.FunctionComponent = () => {
   const [isEditMode, setIsEditMode] = React.useState<boolean>(false);
   const { showMessage } = useSnackbarContext();
 
-  const onLoadProjectSummary = async () => {
+  const onLoadEmployee = async () => {
     try {
       const apiEmployee = await trackPromise(getEmployeeById(id));
       const viewModelEmployee = mapEmployeeFromApiToVm(apiEmployee);
       setEmployee(viewModelEmployee);
     } catch (error) {
       error &&
-        showMessage('Ha ocurrido un error al cargar los proyectos', 'error');
+        showMessage('Ha ocurrido un error al cargar el empleado', 'error');
     }
   };
 
@@ -44,7 +44,7 @@ export const EmployeeContainer: React.FunctionComponent = () => {
     const isEditMode = isEditModeHelper(id);
     setIsEditMode(isEditMode);
     if (isEditMode) {
-      onLoadProjectSummary();
+      onLoadEmployee();
     }
   }, []);
 
diff --git a/src/pods/employee/employee.mappers.spec.ts b/src/pods/employee/employee.mappers.spec.ts
@@ -90,7 +90,7 @@ describe('./pods/employee/employee.mappers', () => {
       projects: [
         {
           id: 'test id',
-          employeeName: 'test employee name',
+          projectName: 'test employee name',
           isAssigned: true,
         },
       ],
@@ -105,7 +105,7 @@ describe('./pods/employee/employee.mappers', () => {
       projects: [
         {
           id: 'test id',
-          employeeName: 'test employee name',
+          projectName: 'test employee name',
           isAssigned: true,
         },
       ],
diff --git a/src/pods/employee/employee.vm.ts b/src/pods/employee/employee.vm.ts
@@ -10,7 +10,7 @@ export interface Employee {
 export interface ProjectSummary {
   id: string;
   isAssigned?: boolean;
-  employeeName: string;
+  projectName: string;
 }
 
 export const createEmptyEmployee = (): Employee => ({
diff --git a/src/pods/project/api/employee.api.ts b/src/pods/project/api/employee.api.ts
@@ -0,0 +1,6 @@
+import { Project } from './project.api-model';
+import { mockProject } from './project.mock-data';
+
+export const getProjectById = async (id: string): Promise<Project> => {
+  return mockProject;
+};
diff --git a/src/pods/project/api/index.ts b/src/pods/project/api/index.ts
@@ -0,0 +1 @@
+export * from './employee.api';
diff --git a/src/pods/project/api/project.api-model.ts b/src/pods/project/api/project.api-model.ts
@@ -0,0 +1,14 @@
+export interface Project {
+  id: string;
+  name: string;
+  externalId?: string;
+  comments?: string;
+  isActive: boolean;
+  employees: EmployeeSummary[];
+}
+
+export interface EmployeeSummary {
+  id: string;
+  isAssigned?: boolean;
+  employeeName: string;
+}
diff --git a/src/pods/project/api/project.mock-data.ts b/src/pods/project/api/project.mock-data.ts
@@ -0,0 +1,33 @@
+import { Project, EmployeeSummary } from './project.api-model';
+
+const mockEmployeeSummaryList: EmployeeSummary[] = [
+  {
+    id: '1',
+    employeeName: 'Daniel Perez',
+    isAssigned: true,
+  },
+  {
+    id: '2',
+    employeeName: 'Jose Sanchez',
+    isAssigned: false,
+  },
+  {
+    id: '3',
+    employeeName: 'Javier Benitez',
+    isAssigned: false,
+  },
+  {
+    id: '4',
+    employeeName: 'María Peña',
+    isAssigned: true,
+  },
+];
+
+export const mockProject: Project = {
+  id: '1',
+  name: 'Nombre',
+  isActive: true,
+  comments: 'Comentario',
+  externalId: '1234',
+  employees: mockEmployeeSummaryList,
+};
diff --git a/src/pods/project/components/data.component.tsx b/src/pods/project/components/data.component.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Formik, Form } from 'formik';
+import { TextFieldComponent, CheckboxComponent } from 'common/components';
+import { CommandFooterComponent } from '../../../common-app/command-footer';
+import { Project } from '../project.vm';
+
+interface Props {
+  project: Project;
+  onSave: (project: Project) => void;
+  onCancel: () => void;
+  className: string;
+}
+
+export const DataComponent: React.FunctionComponent<Props> = ({
+  project,
+  onSave,
+  onCancel,
+  className,
+}) => {
+  return (
+    <Formik initialValues={project} enableReinitialize={true} onSubmit={onSave}>
+      {() => (
+        <Form className={className}>
+          <TextFieldComponent
+            label="Id"
+            name="id"
+            InputProps={{
+              readOnly: true,
+            }}
+          />
+          <TextFieldComponent label="Nombre" name="name" />
+          <TextFieldComponent label="Id Externo" name="externalId" />
+          <TextFieldComponent label="Comentarios" name="comments" multiline />
+          <CheckboxComponent label="Activo" name="isActive" color="primary" />
+          <CommandFooterComponent onCancel={onCancel} />
+        </Form>
+      )}
+    </Formik>
+  );
+};
diff --git a/src/pods/project/components/employee-row.component.tsx b/src/pods/project/components/employee-row.component.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import {
+  RowRendererProps,
+  RowComponent,
+  CellComponent,
+} from 'common/components';
+import Checkbox from '@material-ui/core/Checkbox';
+import { EmployeeSummary } from '../project.vm';
+
+type Props = RowRendererProps<EmployeeSummary>;
+
+export const ProjectRowComponent: React.FunctionComponent<Props> = ({
+  row,
+}) => {
+  return (
+    <RowComponent>
+      <CellComponent>
+        <Checkbox checked={row.isAssigned} color="primary" />
+      </CellComponent>
+      <CellComponent>{row.employeeName}</CellComponent>
+    </RowComponent>
+  );
+};
diff --git a/src/pods/project/components/employee.component.tsx b/src/pods/project/components/employee.component.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { TableContainer, RowRendererProps } from 'common/components';
+import { EmployeeSummary } from '../project.vm';
+import { CommandFooterComponent } from 'common-app/command-footer';
+import { ProjectRowComponent } from './employee-row.component';
+
+interface Props {
+  employeeSummaryList: EmployeeSummary[];
+  onCancel: () => void;
+  className: string;
+}
+
+export const EmployeeComponent: React.FunctionComponent<Props> = ({
+  employeeSummaryList,
+  onCancel,
+  className,
+}) => {
+  return (
+    <>
+      <TableContainer
+        columns={['Asignado', 'Empleado']}
+        rows={employeeSummaryList}
+        className={className}
+        rowRenderer={(rowProps: RowRendererProps<EmployeeSummary>) => (
+          <ProjectRowComponent {...rowProps} />
+        )}
+      />
+      <CommandFooterComponent onCancel={onCancel} />
+    </>
+  );
+};
diff --git a/src/pods/project/components/index.ts b/src/pods/project/components/index.ts
@@ -0,0 +1,3 @@
+export * from './data.component';
+export * from './employee.component';
+export * from './report.component';
diff --git a/src/pods/project/components/report.component.tsx b/src/pods/project/components/report.component.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Formik, Form } from 'formik';
+import { SelectComponent } from 'common/components';
+import { monthList } from 'common/constants';
+import { CommandFooterComponent } from 'common-app/command-footer';
+import { cx } from 'emotion';
+import * as classes from './report.styles';
+
+interface Props {
+  onCancel: () => void;
+  className: string;
+}
+
+export const ReportComponent: React.FunctionComponent<Props> = ({
+  onCancel,
+  className,
+}) => {
+  return (
+    <Formik initialValues={{}} enableReinitialize={true} onSubmit={console.log}>
+      {() => (
+        <Form className={cx(classes.form, className)}>
+          <SelectComponent
+            name="month"
+            label="Mes"
+            items={monthList}
+            disabled
+            className={classes.month}
+          />
+          <SelectComponent
+            name="year"
+            label="Año"
+            items={[
+              {
+                id: '2020',
+                name: '2020',
+              },
+            ]}
+            disabled
+            className={classes.year}
+          />
+          <CommandFooterComponent
+            onCancel={onCancel}
+            labels={{ saveButton: 'Generar', cancelButton: 'Cancelar' }}
+            className={classes.commands}
+          />
+        </Form>
+      )}
+    </Formik>
+  );
+};
diff --git a/src/pods/project/components/report.styles.ts b/src/pods/project/components/report.styles.ts
@@ -0,0 +1,26 @@
+import { css } from 'emotion';
+import { theme } from 'core/theme';
+
+export const form = css`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-areas: 'month' 'year' 'commands' 'commands';
+  grid-column-gap: ${theme.spacing(2)}px;
+
+  @media (min-width: ${theme.breakpoints.values.md}px) {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas: 'month year' 'commands commands';
+  }
+`;
+
+export const month = css`
+  grid-area: month;
+`;
+
+export const year = css`
+  grid-area: year;
+`;
+
+export const commands = css`
+  grid-area: commands;
+`;
diff --git a/src/pods/project/index.ts b/src/pods/project/index.ts
@@ -1 +1 @@
-export * from './project.component';
+export * from './project.container';
diff --git a/src/pods/project/project.component.tsx b/src/pods/project/project.component.tsx
diff --git a/src/pods/project/project.container.tsx b/src/pods/project/project.container.tsx
diff --git a/src/pods/project/project.mapper.ts b/src/pods/project/project.mapper.ts
diff --git a/src/pods/project/project.styles.ts b/src/pods/project/project.styles.ts
diff --git a/src/pods/project/project.vm.ts b/src/pods/project/project.vm.ts
diff --git a/src/scenes/project.scene.tsx b/src/scenes/project.scene.tsx

Original file line number	Diff line number	Diff line change
`@@ -10,5 +10,5 @@ export interface Employee {`
`10`	`10`	`export interface ProjectSummary {`
`11`	`11`	`id: string;`
`12`	`12`	`isAssigned?: boolean;`
`13`		`- employeeName: string;`
	`13`	`+ projectName: string;`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ export interface Employee {`
`10`	`10`	`export interface ProjectSummary {`
`11`	`11`	`id: string;`
`12`	`12`	`isAssigned?: boolean;`
`13`		`- employeeName: string;`
	`13`	`+ projectName: string;`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`export const createEmptyEmployee = (): Employee => ({`