Fix text field component and login pod and fix other components

Author: Antonio Contreras LEMONCODE

src/common/components/form/text-field.component.tsx

@@ -1,32 +1,23 @@
 import React from 'react';
-import { FieldRenderProps } from 'react-final-form';
+import { useField } from 'formik';
 import MuiTextField, { TextFieldProps } from '@material-ui/core/TextField';
 
-type Props = Partial<FieldRenderProps<any, any>>;
-
-export const TextFieldComponent: React.FunctionComponent<Props &
-  TextFieldProps> = props => {
-  const { input, meta, ...rest } = props;
-  const textFieldProps = Boolean(input) ? input : rest;
-  let inputProps = rest.inputProps;
-  if (input) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { name, onChange, value, ...restInputProps } = input;
-    inputProps = restInputProps;
-  }
-
+export const TextFieldComponent: React.FunctionComponent<TextFieldProps> = props => {
+  const [field, meta] = useField(props.name);
+  const textFieldProps = Boolean(field) ? field : props;
   const hasError = Boolean(meta && meta.touched && meta.error);
 
   return (
     <MuiTextField
-      {...rest}
+      {...props}
       name={textFieldProps.name}
       onChange={textFieldProps.onChange}
+      onBlur={textFieldProps.onBlur}
       value={textFieldProps.value}
       error={hasError}
       helperText={hasError ? meta.error : ''}
-      inputProps={inputProps}
       fullWidth={true}
+      margin="normal"
     />
   );
 };

src/common/constants/index.ts

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

src/common/constants/months.ts

@@ -0,0 +1,52 @@
+import { Lookup } from '../models';
+
+export const monthList: Lookup[] = [
+  {
+    id: '1',
+    name: 'Enero',
+  },
+  {
+    id: '2',
+    name: 'Febrero',
+  },
+  {
+    id: '3',
+    name: 'Marzo',
+  },
+  {
+    id: '4',
+    name: 'Abril',
+  },
+  {
+    id: '5',
+    name: 'Mayo',
+  },
+  {
+    id: '6',
+    name: 'Junio',
+  },
+  {
+    id: '7',
+    name: 'Julio',
+  },
+  {
+    id: '8',
+    name: 'Agosto',
+  },
+  {
+    id: '9',
+    name: 'Septiembre',
+  },
+  {
+    id: '10',
+    name: 'Octubre',
+  },
+  {
+    id: '11',
+    name: 'Noviembre',
+  },
+  {
+    id: '12',
+    name: 'Dicienbre',
+  },
+];

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

@@ -3,12 +3,12 @@ export interface Employee {
   name: string;
   email: string;
   isActive: boolean;
-  temporalKey: string;
-  projects: ProjectSummary[];
+  temporalPassword?: string;
+  projects?: ProjectSummary[];
 }
 
 export interface ProjectSummary {
   id: string;
-  isAssigned: boolean;
+  isAssigned?: boolean;
   employeeName: string;
 }

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

@@ -28,6 +28,6 @@ export const mockEmployee: Employee = {
   name: 'Prueba Nombre',
   email: 'prueba@email.com',
   isActive: true,
-  temporalKey: 'clave',
+  temporalPassword: 'admin',
   projects: mockProjectSummaryList,
 };

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

@@ -9,8 +9,8 @@ import { Employee } from '../employee.vm';
 interface Props {
   employee: Employee;
   className?: string;
-  onSave: (employee: Employee) => void;
   isEditMode: boolean;
+  onSave: (employee: Employee) => void;
   onCancel: () => void;
 }
 
@@ -21,7 +21,6 @@ export const DataComponent: React.FunctionComponent<Props> = ({
   isEditMode,
   onCancel,
 }) => {
-  console.log(employee);
   return (
     <Formik
       initialValues={employee}
@@ -37,38 +36,29 @@ export const DataComponent: React.FunctionComponent<Props> = ({
             InputProps={{
               readOnly: true,
             }}
-            value={employee.id}
           />
           {!isEditMode && (
             <TextFieldComponent
               label="Clave Temporal"
-              name="temporalKey"
-              className={classes.temporalKey}
-              disabled
-              value={employee.temporalKey}
+              name="temporalPassword"
+              className={classes.temporalPassword}
             />
           )}
           <TextFieldComponent
             label="Nombre"
             name="name"
             className={classes.name}
-            disabled
-            value={employee.name}
           />
           <TextFieldComponent
             label="Email"
             name="email"
             className={classes.email}
-            disabled
-            value={employee.email}
           />
           <CheckboxComponent
             name="isActive"
             label="Activo"
             color="primary"
             className={classes.isActive}
-            disabled
-            value={employee.isActive}
           />
           <CommandFooterComponent
             onCancel={onCancel}

src/pods/employee/components/data.styles.ts

@@ -8,15 +8,15 @@ interface Props {
 const getDynamicAreaNames = (props: Props) => {
   return props.isEditMode
     ? `'id employeeName'`
-    : `'id temporalKey' 'employeeName .'`;
+    : `'id temporalPassword' 'employeeName .'`;
 };
 
 export const form = (props: Props) => css`
   display: grid;
   grid-template-columns: 1fr;
   grid-template-areas:
     'id'
-    ${props.isEditMode ? '' : `'temporalKey'`}
+    ${props.isEditMode ? '' : `'temporalPassword'`}
     'employeeName'
     'email'
     'isActive'
@@ -39,8 +39,8 @@ export const id = css`
   grid-area: id;
 `;
 
-export const temporalKey = css`
-  grid-area: temporalKey;
+export const temporalPassword = css`
+  grid-area: temporalPassword;
 `;
 
 export const name = css`

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

@@ -15,7 +15,7 @@ export const EmployeeRowComponent: React.FunctionComponent<Props> = ({
   return (
     <RowComponent>
       <CellComponent>
-        <Checkbox checked={row.isAssigned} disabled />
+        <Checkbox checked={row.isAssigned} color="primary" />
       </CellComponent>
       <CellComponent>{row.employeeName}</CellComponent>
     </RowComponent>

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Formik, Form } from 'formik';
 import { SelectComponent } from 'common/components';
+import { monthList } from 'common/constants';
 import * as classes from './report.styles';
 import { CommandFooterComponent } from 'common-app/command-footer';
 import { cx } from 'emotion';
@@ -27,16 +28,21 @@ export const ReportComponent: React.FunctionComponent<Props> = ({
           <SelectComponent
             name="month"
             label="Mes"
-            items={[]}
-            disabled
+            items={monthList}
             className={classes.month}
+            disabled
           />
           <SelectComponent
             name="year"
             label="Año"
-            items={[]}
-            disabled
+            items={[
+              {
+                id: '2020',
+                name: '2020',
+              },
+            ]}
             className={classes.year}
+            disabled
           />
           <CommandFooterComponent
             onCancel={onCancel}

src/pods/employee/employee.vm.ts

@@ -3,13 +3,13 @@ export interface Employee {
   name: string;
   email: string;
   isActive: boolean;
-  temporalKey: string;
+  temporalPassword?: string;
   projects: ProjectSummary[];
 }
 
 export interface ProjectSummary {
   id: string;
-  isAssigned: boolean;
+  isAssigned?: boolean;
   employeeName: string;
 }
 
@@ -18,6 +18,6 @@ export const createEmptyEmployee = (): Employee => ({
   name: '',
   email: '',
   isActive: false,
-  temporalKey: '',
+  temporalPassword: '',
   projects: [],
 });