Feature/implement validations to project

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

@@ -3,6 +3,7 @@ import { Formik, Form } from 'formik';
 import { TextFieldComponent, CheckboxComponent } from 'common/components';
 import { CommandFooterComponent } from '../../../common-app/command-footer';
 import { Project } from '../project.vm';
+import { formValidation } from './data.validations';
 
 interface Props {
   project: Project;
@@ -18,7 +19,12 @@ export const DataComponent: React.FunctionComponent<Props> = ({
   className,
 }) => {
   return (
-    <Formik initialValues={project} enableReinitialize={true} onSubmit={onSave}>
+    <Formik
+      initialValues={project}
+      enableReinitialize={true}
+      onSubmit={onSave}
+      validate={formValidation.validateForm}
+    >
       {() => (
         <Form className={className}>
           <TextFieldComponent

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

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

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

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

src/pods/project/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/project/project.component.tsx

@@ -10,19 +10,23 @@ import {
   EmployeeComponent,
   ReportComponent,
 } from './components';
-import { Project } from './project.vm';
+import { Project, Report } from './project.vm';
 import * as classes from './project.styles';
 
 interface Props {
   isEditMode: boolean;
   project: Project;
+  report: Report;
+  onGenerateExcel: (report: Report) => void;
   onSave: (project: Project) => void;
   onCancel: () => void;
 }
 
 export const ProjectComponent: React.FunctionComponent<Props> = ({
   isEditMode,
   project,
+  report,
+  onGenerateExcel,
   onSave,
   onCancel,
 }) => {
@@ -52,7 +56,12 @@ export const ProjectComponent: React.FunctionComponent<Props> = ({
         />
       </TabPanelComponent>
       <TabPanelComponent value={tab} index={2}>
-        <ReportComponent onCancel={onCancel} className={classes.root} />
+        <ReportComponent
+          report={report}
+          onCancel={onCancel}
+          className={classes.root}
+          onGenerateExcel={onGenerateExcel}
+        />
       </TabPanelComponent>
     </>
   );

src/pods/project/project.container.tsx

@@ -5,13 +5,19 @@ import { useSnackbarContext } from 'common/components';
 import { getProjectById } from './api';
 import { trackPromise } from 'react-promise-tracker';
 import { mapProjectFromApiToVm } from './project.mapper';
-import { Project, createEmptyProject } from './project.vm';
+import {
+  Project,
+  createEmptyProject,
+  Report,
+  createEmptyReport,
+} from './project.vm';
 import { isEditModeHelper } from 'common/helpers';
 
 export const ProjectContainer: React.FunctionComponent = () => {
   const { id } = useParams();
   const [project, setProject] = React.useState<Project>(createEmptyProject());
   const [isEditMode, setIsEditMode] = React.useState<boolean>(false);
+  const [report, setReport] = React.useState<Report>(createEmptyReport());
   const { showMessage } = useSnackbarContext();
 
   const onLoadProject = async () => {
@@ -25,14 +31,19 @@ export const ProjectContainer: React.FunctionComponent = () => {
     }
   };
 
-  const handleSave = (Project: Project) => {
+  const handleSave = (project: Project) => {
     console.log('Guardado');
   };
 
   const handleCancel = () => {
     history.back();
   };
 
+  const handleGenerateExcel = (report: Report) => {
+    // Pending to create real implementation
+    console.log('Excel creado');
+  };
+
   React.useEffect(() => {
     const isEditMode = isEditModeHelper(id);
     setIsEditMode(isEditMode);
@@ -45,8 +56,10 @@ export const ProjectContainer: React.FunctionComponent = () => {
     <ProjectComponent
       isEditMode={isEditMode}
       project={project}
+      report={report}
       onSave={handleSave}
       onCancel={handleCancel}
+      onGenerateExcel={handleGenerateExcel}
     />
   );
 };

src/pods/project/project.vm.ts

@@ -13,6 +13,11 @@ export interface EmployeeSummary {
   employeeName: string;
 }
 
+export interface Report {
+  month: string;
+  year: string;
+}
+
 export const createEmptyProject = (): Project => ({
   id: '',
   name: '',
@@ -21,3 +26,8 @@ export const createEmptyProject = (): Project => ({
   isActive: false,
   employees: [],
 });
+
+export const createEmptyReport = (): Report => ({
+  month: '',
+  year: '',
+});