Create employee row component and refactor other components

Author: Antonio Contreras LEMONCODE

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;
 }

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',
   },
 ];
 

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>
   );
 };

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,
         },
       ],

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 => ({

src/pods/project/api/project.api-model.ts

@@ -10,5 +10,5 @@ export interface Project {
 export interface EmployeeSummary {
   id: string;
   isAssigned?: boolean;
-  employeeName: string;
+  employeeId: string;
 }

src/pods/project/api/project.mock-data.ts

@@ -3,22 +3,22 @@ import { Project, EmployeeSummary } from './project.api-model';
 const mockEmployeeSummaryList: EmployeeSummary[] = [
   {
     id: '1',
-    employeeName: 'Daniel Perez',
+    employeeId: 'Daniel Perez',
     isAssigned: true,
   },
   {
     id: '2',
-    employeeName: 'Jose Sanchez',
+    employeeId: 'Jose Sanchez',
     isAssigned: false,
   },
   {
     id: '3',
-    employeeName: 'Javier Benitez',
+    employeeId: 'Javier Benitez',
     isAssigned: false,
   },
   {
     id: '4',
-    employeeName: 'María Peña',
+    employeeId: 'María Peña',
     isAssigned: true,
   },
 ];

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>
+  );
+};

src/pods/project/components/employee.component.tsx

@@ -1,5 +1,8 @@
 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[];
@@ -10,5 +13,16 @@ export const EmployeeComponent: React.FunctionComponent<Props> = ({
   employeeSummaryList,
   onCancel,
 }) => {
-  return <h1>Hello Employee Component</h1>;
+  return (
+    <>
+      <TableContainer
+        columns={['Asignado', 'Proyecto']}
+        rows={employeeSummaryList}
+        rowRenderer={(rowProps: RowRendererProps<EmployeeSummary>) => (
+          <ProjectRowComponent {...rowProps} />
+        )}
+      />
+      <CommandFooterComponent onCancel={onCancel} />
+    </>
+  );
 };