Feature/implement project list

config/webpack/dev.js

@@ -28,6 +28,9 @@ module.exports = merge.strategy({
     port: 8080,
     stats: 'minimal',
     hot: true,
+    proxy: {
+      '/graphql': 'http://localhost:8081',
+    },
   },
   plugins: [
     new Dotenv({

dev.env

@@ -1,2 +1,2 @@
 NODE_ENV=development
-GRAPHQL_URL=http://localhost:8081/graphql/employee
+GRAPHQL_URL=/graphql/admin

prod.env

@@ -1,2 +1,2 @@
 NODE_ENV=production
-GRAPHQL_URL=/graphql/employee
+GRAPHQL_URL=/graphql/admin

src/core/api/graphql.client.ts

@@ -0,0 +1,4 @@
+import { GraphQLClient } from 'graphql-request';
+
+const url = process.env.GRAPHQL_URL;
+export const graphQLClient = new GraphQLClient(url);

src/core/api/index.ts

@@ -0,0 +1 @@
+export * from './graphql.client';

src/core/router/index.ts

@@ -1,2 +1,3 @@
 export * from './router.component';
 export * from './routes';
+export * from './route-params.vm';

src/core/router/route-params.vm.ts

@@ -0,0 +1,3 @@
+export interface EditParams {
+  id: string;
+}

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

@@ -1,13 +1,40 @@
+import { graphQLClient } from 'core/api';
 import { Employee } from './employee-list.api-model';
-import { mockEmployeeList } from './employee-list.mock-data';
 
-let employeeList = [...mockEmployeeList];
+interface GetEmployeeListResponse {
+  employees: Employee[];
+}
 
 export const getEmployeeList = async (): Promise<Employee[]> => {
-  return employeeList;
+  const query = `
+    query {
+      employees {
+        id
+        name
+        isActive
+        email
+        lastDateIncurred
+      }
+    }
+  `;
+  const { employees } = await graphQLClient.request<GetEmployeeListResponse>(
+    query
+  );
+  return employees;
 };
 
+interface DeleteEmployeeResponse {
+  deleteEmployee: boolean;
+}
+
 export const deleteEmployee = async (id: string): Promise<boolean> => {
-  employeeList = employeeList.filter(e => e.id !== id);
-  return true;
+  const query = `
+    mutation {
+      deleteEmployee(id: "${id}")
+    }
+  `;
+  const { deleteEmployee } = await graphQLClient.request<
+    DeleteEmployeeResponse
+  >(query);
+  return deleteEmployee;
 };

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

@@ -4,11 +4,15 @@ export interface Employee {
   email: string;
   isActive: boolean;
   temporalPassword?: string;
-  projects?: ProjectSummary[];
+  projects?: EmployeeProject[];
 }
 
-export interface ProjectSummary {
+export interface EmployeeProject {
   id: string;
   isAssigned?: boolean;
-  projectName: string;
+}
+
+export interface Project {
+  id: string;
+  name: string;
 }

src/pods/employee/api/employee.api.ts

@@ -1,6 +1,85 @@
-import { Employee } from './employee.api-model';
-import { mockEmployee } from './employee.mock-data';
+import { Employee, EmployeeProject, Project } from './employee.api-model';
+import { graphQLClient } from 'core/api';
+
+interface GetEmployeeResponse {
+  employee: Employee;
+}
 
 export const getEmployeeById = async (id: string): Promise<Employee> => {
-  return mockEmployee;
+  const query = `
+    query {
+      employee(id: "${id}") {
+        id
+        name
+        isActive
+        email
+        projects {
+          id
+          isAssigned
+        }
+      }
+    }
+  `;
+
+  const { employee } = await graphQLClient.request<GetEmployeeResponse>(query);
+
+  return employee;
+};
+
+interface GetProjectListResponse {
+  projects: Project[];
+}
+
+export const getProjects = async (): Promise<Project[]> => {
+  const query = `
+    query {
+      projects {
+        id
+        name
+      }
+    }
+    `;
+  const { projects } = await graphQLClient.request<GetProjectListResponse>(
+    query
+  );
+  return projects;
+};
+
+interface SaveEmployeeResponse {
+  saveEmployee: Employee;
+}
+
+export const saveEmployee = async (employee: Employee): Promise<string> => {
+  const query = `
+    mutation($employee: EmployeeInput!) {
+      saveEmployee(employee: $employee) {
+        id
+      }
+    }
+  `;
+
+  const { saveEmployee } = await graphQLClient.request<SaveEmployeeResponse>(
+    query,
+    {
+      employee,
+    }
+  );
+
+  return saveEmployee.id;
+};
+
+export const saveEmployeeProjectList = async (
+  id: string,
+  employeeProjectList: EmployeeProject[]
+): Promise<void> => {
+  const query = `mutation($employeeProjectList: [EmployeeProjectInput!]!) {
+    saveEmployeeProjectList(
+      id: "${id}",
+      employeeProjectList: $employeeProjectList,
+    ) {
+      id
+    }
+  }`;
+
+  await graphQLClient.request(query, { employeeProjectList });
 };

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

@@ -5,19 +5,31 @@ import {
   CellComponent,
 } from 'common/components';
 import Checkbox from '@material-ui/core/Checkbox';
-import { ProjectSummary } from '../employee.vm';
+import { EmployeeProject } from '../employee.vm';
 
-type Props = RowRendererProps<ProjectSummary>;
+interface RowProps extends RowRendererProps<EmployeeProject> {
+  onChangeProject: (project: EmployeeProject) => void;
+}
 
-export const EmployeeRowComponent: React.FunctionComponent<Props> = ({
+export const EmployeeRowComponent: React.FunctionComponent<RowProps> = ({
   row,
+  onChangeProject,
 }) => {
   return (
     <RowComponent>
       <CellComponent>
-        <Checkbox checked={row.isAssigned} color="primary" />
+        <Checkbox
+          color="primary"
+          onChange={(_, checked) =>
+            onChangeProject({
+              ...row,
+              isAssigned: checked,
+            })
+          }
+          checked={row.isAssigned}
+        />
       </CellComponent>
-      <CellComponent>{row.projectName}</CellComponent>
+      <CellComponent>{row.name}</CellComponent>
     </RowComponent>
   );
 };

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

@@ -1,31 +1,52 @@
 import React from 'react';
 import { TableContainer, RowRendererProps } from 'common/components';
-import { ProjectSummary } from '../employee.vm';
+import { EmployeeProject } from '../employee.vm';
 import { EmployeeRowComponent } from './project-row.component';
 import { CommandFooterComponent } from 'common-app/command-footer';
 
 interface Props {
-  projectSummaryList: ProjectSummary[];
-  className?: string;
+  employeeProjectList: EmployeeProject[];
+  onSave: (project: EmployeeProject[]) => void;
   onCancel: () => void;
+  className?: string;
 }
 
 export const ProjectComponent: React.FunctionComponent<Props> = ({
-  projectSummaryList,
-  className,
+  employeeProjectList,
+  onSave,
   onCancel,
+  className,
 }) => {
+  const [projectList, setProjectList] = React.useState<EmployeeProject[]>(
+    employeeProjectList
+  );
+
+  React.useEffect(() => {
+    setProjectList(employeeProjectList);
+  }, [employeeProjectList]);
+
+  const handleChangeProject = (id: string) => (project: EmployeeProject) => {
+    const updateProjectList = projectList.map(p => (p.id === id ? project : p));
+    setProjectList(updateProjectList);
+  };
+
+  const handleSave = () => onSave(projectList);
   return (
     <>
       <TableContainer
-        columns={['Asignado', 'Nombre y Apellido']}
-        rows={projectSummaryList}
+        columns={['Asignado', 'Nombre']}
+        rows={projectList}
         className={className}
-        rowRenderer={(rowProps: RowRendererProps<ProjectSummary>) => (
-          <EmployeeRowComponent {...rowProps} />
+        rowRenderer={(rowProps: RowRendererProps<EmployeeProject>) => (
+          <EmployeeRowComponent
+            {...rowProps}
+            onChangeProject={handleChangeProject(rowProps.row.id)}
+          />
         )}
+        enablePagination={true}
+        pageSize={5}
       />
-      <CommandFooterComponent onCancel={onCancel} />
+      <CommandFooterComponent onSave={handleSave} onCancel={onCancel} />
     </>
   );
 };