Merge pull request #5 from Lemoncode/feature/Create_project_list

Feature/create project list

Author: brauliodiez

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

@@ -24,7 +24,7 @@ export const EmployeeListComponent: React.FunctionComponent<Props> = ({
     'name',
   ]);
 
-  const renderContent = ({ itemName }) => {
+  const contentRender = ({ itemName }) => {
     return (
       <>
         ¿Seguro que quiere borrar a <strong>{itemName}</strong>?
@@ -46,7 +46,7 @@ export const EmployeeListComponent: React.FunctionComponent<Props> = ({
         searchPlaceholder: 'Buscar empleado',
         createButton: 'Nuevo empleado',
         deleteTitle: 'Eliminar Empleado',
-        deleteContent: props => renderContent(props),
+        deleteContent: props => contentRender(props),
         closeButton: 'Cancelar',
         acceptButton: 'Aceptar',
       }}

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

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

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

@@ -0,0 +1,8 @@
+export interface Project {
+  id: string;
+  active: boolean;
+  code: string;
+  name: string;
+  lastDateIncurred: string;
+  creationDate: string;
+}

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

@@ -0,0 +1,13 @@
+import { Project } from './project-list.api-model';
+import { mockProjectList } from './project-list.mock-data';
+
+let projectList = [...mockProjectList];
+
+export const getProjectList = async (): Promise<Project[]> => {
+  return projectList;
+};
+
+export const deleteProject = async (id: string): Promise<boolean> => {
+  projectList = projectList.filter(p => p.id !== id);
+  return true;
+};

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

@@ -0,0 +1,68 @@
+import { Project } from './project-list.api-model';
+
+export const mockProjectList: Project[] = [
+  {
+    id: '1',
+    active: true,
+    code: '23212',
+    name: 'Bankia',
+    lastDateIncurred: '02/02/2020',
+    creationDate: '01/08/2018',
+  },
+  {
+    id: '2',
+    active: true,
+    code: '4323',
+    name: 'Mapfre',
+    lastDateIncurred: '05/02/2020',
+    creationDate: '01/04/2018',
+  },
+  {
+    id: '3',
+    active: true,
+    code: '002',
+    name: 'Vacaciones',
+    lastDateIncurred: '05/02/2020',
+    creationDate: '01/04/2018',
+  },
+  {
+    id: '4',
+    active: true,
+    code: '003',
+    name: 'Baja Médica',
+    lastDateIncurred: '05/03/2018',
+    creationDate: '01/05/2019',
+  },
+  {
+    id: '5',
+    active: false,
+    code: '2586',
+    name: 'Proyecto interno',
+    lastDateIncurred: '05/08/2020',
+    creationDate: '01/10/2018',
+  },
+  {
+    id: '6',
+    active: false,
+    code: '3025',
+    name: 'BBVA',
+    lastDateIncurred: '06/05/2020',
+    creationDate: '01/03/2019',
+  },
+  {
+    id: '7',
+    active: false,
+    code: '8563',
+    name: 'Baja Médica',
+    lastDateIncurred: '02/08/2018',
+    creationDate: '01/11/2020',
+  },
+  {
+    id: '8',
+    active: true,
+    code: '4125',
+    name: 'Microsoft España',
+    lastDateIncurred: '11/10/2018',
+    creationDate: '01/07/2020',
+  },
+];

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

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

src/pods/project-list/components/project-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 { Project } from '../project-list.vm';
+
+type Props = RowRendererProps<Project>;
+
+export const ProjectRowComponent: React.FunctionComponent<Props> = ({
+  row,
+  onEdit,
+  onDelete,
+}) => {
+  return (
+    <RowComponent>
+      <CellComponent>
+        <Checkbox checked={row.active} disabled />
+      </CellComponent>
+      <CellComponent>{row.code}</CellComponent>
+      <CellComponent>{row.name}</CellComponent>
+      <CellComponent>{row.lastDateIncurred}</CellComponent>
+      <CellComponent>
+        {row.creationDate}
+        <IconButton onClick={() => onEdit(row.id)}>
+          <EditIcon />
+        </IconButton>
+        <IconButton onClick={() => onDelete(row)}>
+          <DeleteIcon />
+        </IconButton>
+      </CellComponent>
+    </RowComponent>
+  );
+};

src/pods/project-list/index.ts

@@ -1 +1 @@
-export * from './project-list.component';
+export * from './project-list.container';

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

@@ -1,21 +1,66 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
-import { routes } from 'core/router';
+import {
+  TableContainer,
+  RowRendererProps,
+  useSearchBar,
+} from 'common/components';
+import { Project } from './project-list.vm';
+import { ProjectRowComponent } from './components';
 
-export const ProjectListComponent: React.FunctionComponent = () => {
-  const history = useHistory();
-  const goToProject = (
-    event: React.MouseEvent<HTMLParagraphElement, MouseEvent>
-  ) => {
-    event.preventDefault();
-    history.push({
-      pathname: routes.editProject('1'),
-    });
+interface Props {
+  projectList: Project[];
+  onCreate: () => void;
+  onEdit: (id: string) => void;
+  onDelete: (id: string) => void;
+}
+
+export const ProjectListComponent: React.FunctionComponent<Props> = ({
+  projectList,
+  onCreate,
+  onEdit,
+  onDelete,
+}) => {
+  const { filteredList, onSearch, search } = useSearchBar(projectList, [
+    'projectName',
+  ]);
+
+  const contentRender = ({ itemName }) => {
+    return (
+      <>
+        ¿Seguro que quiere borrar a <strong>{itemName}</strong>?
+      </>
+    );
   };
+
   return (
-    <>
-      <h1>Hello Project list component</h1>
-      <p onClick={goToProject}>Go to edit project component</p>
-    </>
+    <TableContainer
+      columns={[
+        'Activo',
+        'Código',
+        'Proyecto',
+        'Fecha Ultimo incurrido',
+        'Fecha creación',
+      ]}
+      rows={filteredList}
+      rowRenderer={(rowProps: RowRendererProps<Project>) => (
+        <ProjectRowComponent {...rowProps} />
+      )}
+      onCreate={onCreate}
+      onEdit={onEdit}
+      onDelete={onDelete}
+      labels={{
+        searchPlaceholder: 'Buscar proyecto',
+        createButton: 'Nuevo proyecto',
+        deleteTitle: 'Eliminar Proyecto',
+        deleteContent: props => contentRender(props),
+        closeButton: 'Cancelar',
+        acceptButton: 'Aceptar',
+      }}
+      enableSearch={true}
+      search={search}
+      onSearch={onSearch}
+      enablePagination={true}
+      pageSize={5}
+    />
   );
 };

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { ProjectListComponent } from './project-list.component';
+import { getProjectList, deleteProject } from './api';
+import { Project } from './project-list.vm';
+import { useSnackbarContext } from 'common/components';
+import { trackPromise } from 'react-promise-tracker';
+import { mapProjectListFromApiToVm } from './project-list.mappers';
+import { routes } from 'core/router';
+import { useHistory } from 'react-router-dom';
+const editProjectId = '0';
+
+export const ProjectListContainer: React.FunctionComponent = () => {
+  const [projects, setProjects] = React.useState<Project[]>([]);
+  const { showMessage } = useSnackbarContext();
+  const history = useHistory();
+
+  const onLoadProjectList = async () => {
+    try {
+      const apiProjectList = await trackPromise(getProjectList());
+      const viewModelProjectList = mapProjectListFromApiToVm(apiProjectList);
+      setProjects(viewModelProjectList);
+    } catch (error) {
+      error &&
+        showMessage('Ha ocurrido un error al cargar los proyectos', 'error');
+    }
+  };
+
+  const handleCreate = () => {
+    history.push(routes.editProject(editProjectId));
+  };
+
+  const handleEdit = (id: string) => {
+    history.push(routes.editProject(id));
+  };
+
+  const handleDelete = async (id: string) => {
+    const errorMessage = 'Error al eliminar un proyecto';
+    try {
+      const isDeleted = await trackPromise(deleteProject(id));
+      isDeleted ? onLoadProjectList() : showMessage(errorMessage, 'error');
+    } catch (error) {
+      error && showMessage(errorMessage, 'error');
+    }
+  };
+
+  React.useEffect(() => {
+    onLoadProjectList();
+  }, []);
+
+  return (
+    <ProjectListComponent
+      projectList={projects}
+      onCreate={handleCreate}
+      onEdit={handleEdit}
+      onDelete={handleDelete}
+    />
+  );
+};