Create report validations and implement

Author: Antonio Contreras LEMONCODE

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;
 }
 
 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,21 @@
+import { ValidationSchema, Validators } from '@lemoncode/fonk';
+import { createFormikValidation } from '@lemoncode/fonk-formik';
+
+const validationSchema: ValidationSchema = {
+  field: {
+    month: [
+      {
+        validator: Validators.required,
+        message: 'Campo obligatorio',
+      },
+    ],
+    year: [
+      {
+        validator: Validators.required,
+        message: 'Campo obligatorio',
+      },
+    ],
+  },
+};
+
+export const formValidation = createFormikValidation(validationSchema);

src/pods/employee/employee.component.tsx

@@ -6,12 +6,13 @@ 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;
@@ -20,6 +21,7 @@ interface Props {
 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 () => {
@@ -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: '',
+});