Merge pull request #4 from Lemoncode/feature/Create_employee_list

Feature/create employee list

Author: brauliodiez

config/test/jest.js

@@ -2,13 +2,6 @@ module.exports = {
   rootDir: '../../',
   preset: 'ts-jest',
   restoreMocks: true,
-  moduleNameMapper: {
-    '^common-app(.*)$': '<rootDir>/src/common-app/$1',
-    '^common(.*)$': '<rootDir>/src/common/$1',
-    '^core(.*)$': '<rootDir>/src/core/$1',
-    '^layouts(.*)$': '<rootDir>/src/layouts/$1',
-    '^pods(.*)$': '<rootDir>/src/pods/$1',
-    '^scenes(.*)$': '<rootDir>/src/scenes/$1',
-  },
+  moduleDirectories: ['<rootDir>/src', 'node_modules'],
   setupFilesAfterEnv: ['<rootDir>/config/test/setup.ts'],
 };

src/common/components/index.ts

@@ -4,3 +4,4 @@ export * from './form';
 export * from './snackbar';
 export * from './spinner';
 export * from './table';
+export * from './search-bar';

src/pods/employee-list/api/employee-list.api-model.ts

@@ -0,0 +1,7 @@
+export interface Employee {
+  id: string;
+  active: boolean;
+  name: string;
+  email: string;
+  lastDateIncurred: string;
+}

src/pods/employee-list/api/employee-list.api.ts

@@ -0,0 +1,13 @@
+import { Employee } from './employee-list.api-model';
+import { mockEmployeeList } from './employee-list.mock-data';
+
+let employeeList = [...mockEmployeeList];
+
+export const getEmployeeList = async (): Promise<Employee[]> => {
+  return employeeList;
+};
+
+export const deleteEmployee = async (id: string): Promise<boolean> => {
+  employeeList = employeeList.filter(e => e.id !== id);
+  return true;
+};

src/pods/employee-list/api/employee-list.mock-data.ts

@@ -0,0 +1,60 @@
+import { Employee } from './employee-list.api-model';
+
+export const mockEmployeeList: Employee[] = [
+  {
+    id: '1',
+    active: true,
+    name: 'Daniel Perez',
+    email: 'daniel.perez@empresa.com',
+    lastDateIncurred: '02/02/2020',
+  },
+  {
+    id: '2',
+    active: true,
+    name: 'Jose Gomez',
+    email: 'jose.gomez@empresa.com',
+    lastDateIncurred: '05/02/2020',
+  },
+  {
+    id: '3',
+    active: false,
+    name: 'Manuel Ruiz',
+    email: 'manuel.ruiz@empresa.com',
+    lastDateIncurred: '06/02/2020',
+  },
+  {
+    id: '4',
+    active: true,
+    name: 'Ramón Gomez',
+    email: 'ramon.gomez@empresa.com',
+    lastDateIncurred: '02/05/2020',
+  },
+  {
+    id: '5',
+    active: false,
+    name: 'María Lopez',
+    email: 'maria.lopez@empresa.com',
+    lastDateIncurred: '05/08/2020',
+  },
+  {
+    id: '6',
+    active: true,
+    name: 'Manuel Ortiz',
+    email: 'manuel.ortiz@empresa.com',
+    lastDateIncurred: '06/06/2020',
+  },
+  {
+    id: '7',
+    active: false,
+    name: 'David Martos',
+    email: 'david.martos@empresa.com',
+    lastDateIncurred: '14/08/2020',
+  },
+  {
+    id: '8',
+    active: true,
+    name: 'Luz Roca',
+    email: 'luz.roca@empresa.com',
+    lastDateIncurred: '20/06/2020',
+  },
+];

src/pods/employee-list/api/index.ts

@@ -0,0 +1 @@
+export * from './employee-list.api';

src/pods/employee-list/components/employee-row.component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {
+  RowRendererProps,
+  RowComponent,
+  CellComponent,
+} from 'common/components';
+import Checkbox from '@material-ui/core/Checkbox';
+import IconButton from '@material-ui/core/IconButton';
+import EditIcon from '@material-ui/icons/Edit';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { Employee } from '../employee-list.vm';
+
+type Props = RowRendererProps<Employee>;
+
+export const EmployeeRowComponent: React.FunctionComponent<Props> = ({
+  row,
+  onEdit,
+  onDelete,
+}) => {
+  return (
+    <RowComponent>
+      <CellComponent>
+        <Checkbox checked={row.active} disabled />
+      </CellComponent>
+      <CellComponent>{row.id}</CellComponent>
+      <CellComponent>{row.name}</CellComponent>
+      <CellComponent>{row.email}</CellComponent>
+      <CellComponent>
+        {row.lastDateIncurred}
+        <IconButton onClick={() => onEdit(row.id)}>
+          <EditIcon />
+        </IconButton>
+        <IconButton onClick={() => onDelete(row)}>
+          <DeleteIcon />
+        </IconButton>
+      </CellComponent>
+    </RowComponent>
+  );
+};

src/pods/employee-list/components/index.ts

@@ -0,0 +1 @@
+export * from './employee-row.component';

src/pods/employee-list/employee-list.component.tsx

@@ -1,36 +1,60 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
-import { routes } from 'core/router';
 import {
   TableContainer,
-  RowComponent,
   RowRendererProps,
-} from 'common/components/table';
-import { Typography } from '@material-ui/core';
+  useSearchBar,
+} from 'common/components';
+import { Employee } from './employee-list.vm';
+import { EmployeeRowComponent } from './components';
 
-export const EmployeeListComponent: React.FunctionComponent = () => {
-  const history = useHistory();
-  const goToEmployee = (
-    event: React.MouseEvent<HTMLParagraphElement, MouseEvent>
-  ) => {
-    event.preventDefault();
-    history.push({
-      pathname: routes.editEmployee('1'),
-    });
+interface Props {
+  employeeList: Employee[];
+  onCreate: () => void;
+  onEdit: (id: string) => void;
+  onDelete: (id: string) => void;
+}
+
+export const EmployeeListComponent: React.FunctionComponent<Props> = ({
+  employeeList,
+  onCreate,
+  onEdit,
+  onDelete,
+}) => {
+  const { filteredList, onSearch, search } = useSearchBar(employeeList, [
+    'name',
+  ]);
+
+  const renderContent = ({ itemName }) => {
+    return (
+      <>
+        ¿Seguro que quiere borrar a <strong>{itemName}</strong>?
+      </>
+    );
   };
+
   return (
-    <>
-      <h1>Hello Employee list component</h1>
-      <p onClick={goToEmployee}>Go to edit employee page</p>
-      <TableContainer
-        columns={['Column 1']}
-        rows={[{ id: '1', name: 'test 1' }]}
-        rowRenderer={(props: RowRendererProps<any>) => (
-          <RowComponent>
-            <Typography>{props.row.name}</Typography>
-          </RowComponent>
-        )}
-      />
-    </>
+    <TableContainer
+      columns={['Activo', 'Id', 'Nombre', 'Email', 'Fecha último incurrido']}
+      rows={filteredList}
+      rowRenderer={(rowProps: RowRendererProps<Employee>) => (
+        <EmployeeRowComponent {...rowProps} />
+      )}
+      onCreate={onCreate}
+      onEdit={onEdit}
+      onDelete={onDelete}
+      labels={{
+        searchPlaceholder: 'Buscar empleado',
+        createButton: 'Nuevo empleado',
+        deleteTitle: 'Eliminar Empleado',
+        deleteContent: props => renderContent(props),
+        closeButton: 'Cancelar',
+        acceptButton: 'Aceptar',
+      }}
+      enableSearch={true}
+      search={search}
+      onSearch={onSearch}
+      enablePagination={true}
+      pageSize={5}
+    />
   );
 };

src/pods/employee-list/employee-list.container.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { EmployeeListComponent } from './employee-list.component';
+import { getEmployeeList, deleteEmployee } from './api';
+import { Employee } from './employee-list.vm';
+import { useSnackbarContext } from 'common/components';
+import { trackPromise } from 'react-promise-tracker';
+import { mapEmployeeListFromApiToVm } from './employee-list.mappers';
+import { useHistory } from 'react-router-dom';
+import { routes } from 'core/router';
+const editEmployeeId = '0';
+
+export const EmployeeListContainer: React.FunctionComponent = () => {
+  const [employees, setEmployees] = React.useState<Employee[]>([]);
+  const { showMessage } = useSnackbarContext();
+  const history = useHistory();
+
+  const onLoadEmployeeList = async () => {
+    try {
+      const apiEmployeeList = await trackPromise(getEmployeeList());
+      const viewModelEmloyeeList = mapEmployeeListFromApiToVm(apiEmployeeList);
+      setEmployees(viewModelEmloyeeList);
+    } catch (error) {
+      error &&
+        showMessage('Ha ocurrido un error al cargar los empleados', 'error');
+    }
+  };
+
+  const handleCreate = () => {
+    history.push(routes.editEmployee(editEmployeeId));
+  };
+
+  const handleEdit = (id: string) => {
+    history.push(routes.editEmployee(id));
+  };
+
+  const handleDelete = async (id: string) => {
+    const errorMessage = 'Error al eliminar un empleado';
+    try {
+      const isDeleted = await trackPromise(deleteEmployee(id));
+      isDeleted ? onLoadEmployeeList() : showMessage(errorMessage, 'error');
+    } catch (error) {
+      error && showMessage(errorMessage, 'error');
+    }
+  };
+
+  React.useEffect(() => {
+    onLoadEmployeeList();
+  }, []);
+
+  return (
+    <EmployeeListComponent
+      employeeList={employees}
+      onCreate={handleCreate}
+      onEdit={handleEdit}
+      onDelete={handleDelete}
+    />
+  );
+};