Refactor components and apply styles to report and project

Author: Antonio Contreras LEMONCODE

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}

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

@@ -10,5 +10,5 @@ export interface Project {
 export interface EmployeeSummary {
   id: string;
   isAssigned?: boolean;
-  employeeId: string;
+  employeeName: 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',
-    employeeId: 'Daniel Perez',
+    employeeName: 'Daniel Perez',
     isAssigned: true,
   },
   {
     id: '2',
-    employeeId: 'Jose Sanchez',
+    employeeName: 'Jose Sanchez',
     isAssigned: false,
   },
   {
     id: '3',
-    employeeId: 'Javier Benitez',
+    employeeName: 'Javier Benitez',
     isAssigned: false,
   },
   {
     id: '4',
-    employeeId: 'María Peña',
+    employeeName: 'María Peña',
     isAssigned: true,
   },
 ];

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

@@ -8,17 +8,19 @@ 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>
+        <Form className={className}>
           <TextFieldComponent
             label="Id"
             name="id"

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

@@ -7,17 +7,20 @@ 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', 'Proyecto']}
+        columns={['Asignado', 'Empleado']}
         rows={employeeSummaryList}
+        className={className}
         rowRenderer={(rowProps: RowRendererProps<EmployeeSummary>) => (
           <ProjectRowComponent {...rowProps} />
         )}

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

@@ -3,23 +3,28 @@ 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>
+        <Form className={cx(classes.form, className)}>
           <SelectComponent
             name="month"
             label="Mes"
             items={monthList}
             disabled
+            className={classes.month}
           />
           <SelectComponent
             name="year"
@@ -31,10 +36,12 @@ export const ReportComponent: React.FunctionComponent<Props> = ({
               },
             ]}
             disabled
+            className={classes.year}
           />
           <CommandFooterComponent
             onCancel={onCancel}
             labels={{ saveButton: 'Generar', cancelButton: 'Cancelar' }}
+            className={classes.commands}
           />
         </Form>
       )}

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;
+`;

src/pods/project/project.component.tsx

@@ -4,13 +4,14 @@ import {
   TabListComponent,
   TabPanelComponent,
 } from 'common/components';
-import { AppBar } from '@material-ui/core';
+import AppBar from '@material-ui/core/AppBar';
 import {
   DataComponent,
   EmployeeComponent,
   ReportComponent,
 } from './components';
 import { Project } from './project.vm';
+import * as classes from './project.styles';
 
 interface Props {
   isEditMode: boolean;
@@ -36,16 +37,22 @@ export const ProjectComponent: React.FunctionComponent<Props> = ({
         </TabListComponent>
       </AppBar>
       <TabPanelComponent value={tab} index={0}>
-        <DataComponent project={project} onCancel={onCancel} onSave={onSave} />
+        <DataComponent
+          project={project}
+          onCancel={onCancel}
+          onSave={onSave}
+          className={classes.root}
+        />
       </TabPanelComponent>
       <TabPanelComponent value={tab} index={1}>
         <EmployeeComponent
           employeeSummaryList={project.employees}
           onCancel={onCancel}
+          className={classes.root}
         />
       </TabPanelComponent>
       <TabPanelComponent value={tab} index={2}>
-        <ReportComponent onCancel={onCancel} />
+        <ReportComponent onCancel={onCancel} className={classes.root} />
       </TabPanelComponent>
     </>
   );

src/pods/project/project.styles.ts

@@ -0,0 +1,6 @@
+import { css } from 'emotion';
+import { theme } from 'core/theme';
+
+export const root = css`
+  margin-top: ${theme.spacing(1.5)}px;
+`;