Merge pull request #8 from Lemoncode/feature/Implement_validations_to_employee

Feature/implement validations to employee

Author: brauliodiez

package.json

@@ -40,9 +40,9 @@
   },
   "dependencies": {
     "@lemoncode/fonk": "^1.3.0",
-    "@lemoncode/fonk-final-form": "^2.3.1",
     "@lemoncode/fonk-formik": "^4.0.1",
     "@lemoncode/fonk-match-field-validator": "^1.0.1",
+    "@lemoncode/fonk-required-by-field-validator": "^1.0.1",
     "@material-ui/core": "4.9.11",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.47",
@@ -51,6 +51,7 @@
     "final-form": "^4.18.6",
     "formik": "^2.1.4",
     "graphql-request": "^1.8.2",
+    "immer": "^6.0.3",
     "lodash.flowright": "^3.5.0",
     "lodash.get": "^4.4.2",
     "lodash.merge": "^4.6.2",

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

@@ -1,10 +1,13 @@
 import React from 'react';
 import { Formik, Form } from 'formik';
 import { TextFieldComponent, CheckboxComponent } from 'common/components';
+import produce from 'immer';
 import { CommandFooterComponent } from '../../../common-app/command-footer';
 import * as classes from './data.styles';
 import { cx } from 'emotion';
 import { Employee } from '../employee.vm';
+import { formValidation, validationSchema } from './data.validations';
+import { Validators } from '@lemoncode/fonk';
 
 interface Props {
   employee: Employee;
@@ -21,11 +24,19 @@ export const DataComponent: React.FunctionComponent<Props> = ({
   isEditMode,
   onCancel,
 }) => {
+  React.useEffect(() => {
+    const newValidationSchema = produce(validationSchema, darft => {
+      darft.field.temporalPassword = isEditMode ? [] : [Validators.required];
+    });
+    formValidation.updateValidationSchema(newValidationSchema);
+  }, [isEditMode]);
+
   return (
     <Formik
       initialValues={employee}
       enableReinitialize={true}
       onSubmit={onSave}
+      validate={formValidation.validateForm}
     >
       {() => (
         <Form className={cx(classes.form({ isEditMode }), className)}>

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

@@ -0,0 +1,28 @@
+import { ValidationSchema, Validators } from '@lemoncode/fonk';
+import { createFormikValidation } from '@lemoncode/fonk-formik';
+import { requiredByField } from '@lemoncode/fonk-required-by-field-validator';
+
+export const validationSchema: ValidationSchema = {
+  field: {
+    name: [Validators.required],
+    email: [
+      {
+        validator: Validators.required,
+      },
+      {
+        validator: Validators.email,
+      },
+    ],
+    temporalPassword: [
+      {
+        validator: requiredByField.validator,
+        customArgs: {
+          field: 'id',
+          condition: fieldValue => fieldValue === '',
+        },
+      },
+    ],
+  },
+};
+
+export const formValidation = createFormikValidation(validationSchema);

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

@@ -5,32 +5,36 @@ import { monthList } from 'common/constants';
 import * as classes from './report.styles';
 import { CommandFooterComponent } from 'common-app/command-footer';
 import { cx } from 'emotion';
+import { formValidation } from './report.validations';
+import { Report } from '../employee.vm';
 
 interface Props {
+  report: Report;
   className?: string;
   onCancel: () => void;
-  onGenerateExcel: () => void;
+  onGenerateExcel: (report: Report) => void;
 }
 
 export const ReportComponent: React.FunctionComponent<Props> = ({
+  report,
   className,
   onCancel,
   onGenerateExcel,
 }) => {
   return (
     <Formik
-      initialValues={{}}
+      initialValues={report}
       enableReinitialize={true}
       onSubmit={onGenerateExcel}
+      validate={formValidation.validateForm}
     >
-      {({ values }) => (
+      {() => (
         <Form className={cx(classes.form, className)}>
           <SelectComponent
             name="month"
             label="Mes"
             items={monthList}
             className={classes.month}
-            disabled
           />
           <SelectComponent
             name="year"
@@ -42,7 +46,6 @@ export const ReportComponent: React.FunctionComponent<Props> = ({
               },
             ]}
             className={classes.year}
-            disabled
           />
           <CommandFooterComponent
             onCancel={onCancel}

src/pods/employee/components/report.validations.ts

@@ -0,0 +1,11 @@
+import { ValidationSchema, Validators } from '@lemoncode/fonk';
+import { createFormikValidation } from '@lemoncode/fonk-formik';
+
+const validationSchema: ValidationSchema = {
+  field: {
+    month: [Validators.required],
+    year: [Validators.required],
+  },
+};
+
+export const formValidation = createFormikValidation(validationSchema);

src/pods/employee/employee.component.tsx

@@ -6,20 +6,22 @@ import {
 } from 'common/components';
 import AppBar from '@material-ui/core/AppBar';
 import { DataComponent, ProjectComponent, ReportComponent } from './components';
-import { Employee } from './employee.vm';
+import { Employee, Report } from './employee.vm';
 import * as classes from './employee.styles';
 
 interface Props {
   employee: Employee;
   isEditMode: boolean;
+  report: Report;
   onSave: (employee: Employee) => void;
   onCancel: () => void;
-  onGenerateExcel: () => void;
+  onGenerateExcel: (report: Report) => void;
 }
 
 export const EmployeeComponent: React.FunctionComponent<Props> = ({
   employee,
   isEditMode,
+  report,
   onSave,
   onCancel,
   onGenerateExcel,
@@ -52,6 +54,7 @@ export const EmployeeComponent: React.FunctionComponent<Props> = ({
       </TabPanelComponent>
       <TabPanelComponent value={tab} index={2}>
         <ReportComponent
+          report={report}
           className={classes.root}
           onGenerateExcel={onGenerateExcel}
           onCancel={onCancel}

src/pods/employee/employee.container.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import { EmployeeComponent } from './employee.component';
-import { Employee, createEmptyEmployee } from './employee.vm';
+import {
+  Employee,
+  Report,
+  createEmptyEmployee,
+  createEmptyReport,
+} from './employee.vm';
 import { useSnackbarContext } from 'common/components';
 import { trackPromise } from 'react-promise-tracker';
 import { getEmployeeById } from './api';
@@ -14,6 +19,7 @@ export const EmployeeContainer: React.FunctionComponent = () => {
     createEmptyEmployee()
   );
   const [isEditMode, setIsEditMode] = React.useState<boolean>(false);
+  const [report, setReport] = React.useState<Report>(createEmptyReport());
   const { showMessage } = useSnackbarContext();
 
   const onLoadEmployee = async () => {
@@ -35,7 +41,7 @@ export const EmployeeContainer: React.FunctionComponent = () => {
     history.back();
   };
 
-  const handleGenerateExcel = () => {
+  const handleGenerateExcel = (report: Report) => {
     // Pending to create real implementation
     console.log('Excel creado');
   };
@@ -52,6 +58,7 @@ export const EmployeeContainer: React.FunctionComponent = () => {
     <EmployeeComponent
       employee={employee}
       isEditMode={isEditMode}
+      report={report}
       onSave={handleSave}
       onCancel={handleCancel}
       onGenerateExcel={handleGenerateExcel}

src/pods/employee/employee.vm.ts

@@ -13,6 +13,11 @@ export interface ProjectSummary {
   projectName: string;
 }
 
+export interface Report {
+  month: string;
+  year: string;
+}
+
 export const createEmptyEmployee = (): Employee => ({
   id: '',
   name: '',
@@ -21,3 +26,8 @@ export const createEmptyEmployee = (): Employee => ({
   temporalPassword: '',
   projects: [],
 });
+
+export const createEmptyReport = (): Report => ({
+  month: '',
+  year: '',
+});

src/pods/login/login.validation.ts

@@ -1,5 +1,5 @@
 import { ValidationSchema, Validators } from '@lemoncode/fonk';
-import { createFinalFormValidation } from '@lemoncode/fonk-final-form';
+import { createFormikValidation } from '@lemoncode/fonk-formik';
 
 const validationSchema: ValidationSchema = {
   field: {
@@ -8,4 +8,4 @@ const validationSchema: ValidationSchema = {
   },
 };
 
-export const formValidation = createFinalFormValidation(validationSchema);
+export const formValidation = createFormikValidation(validationSchema);