From 813637872542a0bef1859e1058b56d23672744bb Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sun, 12 Jun 2022 11:56:06 +0200
Subject: [PATCH] fix: project & task dialog.

---
 src/common/tables.js                          |  4 +--
 .../containers/ProjectDialogContent.tsx       |  4 +--
 .../containers/ProjectForm.schema.tsx         | 18 +++++++---
 .../ProjectDialog/containers/ProjectForm.tsx  | 13 +++----
 .../containers/ProjectFormFields.tsx          | 16 ++++-----
 .../containers/ProjectFormProvider.tsx        |  2 --
 .../Dialogs/ProjectDialog/index.tsx           | 35 +++++++++----------
 .../containers/TaskDialogContent.tsx          |  3 +-
 .../TaskDialog/containers/TaskForm.schema.tsx | 10 +++---
 .../TaskDialog/containers/TaskForm.tsx        | 11 +++---
 .../TaskDialog/containers/TaskFormContent.tsx |  1 -
 .../TaskDialog/containers/TaskFormFields.tsx  |  9 +++--
 .../containers/TaskFormFloatingActions.tsx    |  1 -
 .../containers/TaskFormProvider.tsx           |  1 -
 src/containers/Dialogs/TaskDialog/index.tsx   |  2 +-
 src/lang/en/index.json                        | 11 +++++-
 .../pages/Projects/ProjectFormDialog.scss     | 20 -----------
 17 files changed, 72 insertions(+), 89 deletions(-)
 delete mode 100644 src/style/pages/Projects/ProjectFormDialog.scss

diff --git a/src/common/tables.js b/src/common/tables.js
index 0d26d3ace..419b0e9bb 100644
--- a/src/common/tables.js
+++ b/src/common/tables.js
@@ -16,8 +16,8 @@ export const TABLES = {
   CASHFLOW_Transactions: 'cashflow_transactions',
   CREDIT_NOTES: 'credit_notes',
   VENDOR_CREDITS: 'vendor_credits',
-  WAREHOUSE_TRANSFERS:'warehouse_transfers',
-  PROJECTS:'projects'
+  WAREHOUSE_TRANSFERS: 'warehouse_transfers',
+  PROJECTS: 'projects',
 };
 
 export const TABLE_SIZE = {
diff --git a/src/containers/Dialogs/ProjectDialog/containers/ProjectDialogContent.tsx b/src/containers/Dialogs/ProjectDialog/containers/ProjectDialogContent.tsx
index e4aa08c56..97397608d 100644
--- a/src/containers/Dialogs/ProjectDialog/containers/ProjectDialogContent.tsx
+++ b/src/containers/Dialogs/ProjectDialog/containers/ProjectDialogContent.tsx
@@ -1,13 +1,11 @@
 import React from 'react';
 
-import 'style/pages/Projects/ProjectFormDialog.scss';
-
 import { ProjectFormProvider } from './ProjectFormProvider';
 import ProjectForm from './ProjectForm';
 
 /**
  * Project dialog content.
- * @returns
+ * @returns {ReactNode}
  */
 export default function ProjectDialogContent({
   // #ownProps
diff --git a/src/containers/Dialogs/ProjectDialog/containers/ProjectForm.schema.tsx b/src/containers/Dialogs/ProjectDialog/containers/ProjectForm.schema.tsx
index 6738904f0..530fec56b 100644
--- a/src/containers/Dialogs/ProjectDialog/containers/ProjectForm.schema.tsx
+++ b/src/containers/Dialogs/ProjectDialog/containers/ProjectForm.schema.tsx
@@ -3,11 +3,19 @@ import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
-  contact: Yup.string(),
-  project_name: Yup.string(),
-  project_deadline: Yup.date(),
-  project_state: Yup.boolean(),
-  project_cost: Yup.number(),
+  contact: Yup.string().label(intl.get('project.schema.label.contact')),
+  projectName: Yup.string()
+    .label(intl.get('project.schema.label.project_name'))
+    .required(),
+  projectDeadline: Yup.date()
+    .label(intl.get('project.schema.label.deadline'))
+    .required(),
+  projectState: Yup.boolean().label(
+    intl.get('project.schema.label.project_state'),
+  ),
+  projectCost: Yup.number().label(
+    intl.get('project.schema.label.project_cost'),
+  ),
 });
 
 export const CreateProjectFormSchema = Schema;
diff --git a/src/containers/Dialogs/ProjectDialog/containers/ProjectForm.tsx b/src/containers/Dialogs/ProjectDialog/containers/ProjectForm.tsx
index 15603a219..115e8a0ff 100644
--- a/src/containers/Dialogs/ProjectDialog/containers/ProjectForm.tsx
+++ b/src/containers/Dialogs/ProjectDialog/containers/ProjectForm.tsx
@@ -2,24 +2,21 @@
 import React from 'react';
 import moment from 'moment';
 import intl from 'react-intl-universal';
-
 import { Formik } from 'formik';
-
 import { AppToaster } from 'components';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-
 import ProjectFormContent from './ProjectFormContent';
 import { CreateProjectFormSchema } from './ProjectForm.schema';
 import { useProjectFormContext } from './ProjectFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import { compose } from 'utils';
 
 const defaultInitialValues = {
   contact: '',
-  project_name: '',
-  project_deadline: moment(new Date()).format('YYYY-MM-DD'),
-  project_state: false,
-  project_cost: '',
+  projectName: '',
+  projectDeadline: moment(new Date()).format('YYYY-MM-DD'),
+  projectState: true,
+  projectCost: '',
 };
 
 /**
diff --git a/src/containers/Dialogs/ProjectDialog/containers/ProjectFormFields.tsx b/src/containers/Dialogs/ProjectDialog/containers/ProjectFormFields.tsx
index 9ab610bf1..7047ae048 100644
--- a/src/containers/Dialogs/ProjectDialog/containers/ProjectFormFields.tsx
+++ b/src/containers/Dialogs/ProjectDialog/containers/ProjectFormFields.tsx
@@ -4,7 +4,6 @@ import intl from 'react-intl-universal';
 
 import { Classes, Position, FormGroup, ControlGroup } from '@blueprintjs/core';
 import { FastField } from 'formik';
-import { DateInput } from '@blueprintjs/datetime';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import {
@@ -58,19 +57,19 @@ function ProjectFormFields() {
       {/*------------ Project Name -----------*/}
       <FFormGroup
         label={intl.get('projects.label.project_name')}
-        name={'project_name'}
+        name={'projectName'}
       >
-        <FInputGroup name="project_name" />
+        <FInputGroup name="projectName" />
       </FFormGroup>
       {/*------------ DeadLine -----------*/}
       <FFormGroup
         label={intl.get('projects.label.deadline')}
-        name={'project_deadline'}
+        name={'projectDeadline'}
         className={classNames(CLASSES.FILL, 'form-group--date')}
       >
         <FDateInput
           {...momentFormatter('YYYY/MM/DD')}
-          name="project_deadline"
+          name="projectDeadline"
           formatDate={(date) => date.toLocaleString()}
           popoverProps={{
             position: Position.BOTTOM,
@@ -80,20 +79,21 @@ function ProjectFormFields() {
       </FFormGroup>
 
       {/*------------ CheckBox -----------*/}
-      <FFormGroup name={'project_state'}>
+      <FFormGroup name={'projectState'}>
         <FCheckbox
-          name="project_state"
+          name="projectState"
           label={intl.get('projects.label.calculator_expenses')}
         />
       </FFormGroup>
       {/*------------ Cost Estimate -----------*/}
       <FFormGroup
-        name={'project_cost'}
+        name={'projectCost'}
         label={intl.get('projects.label.cost_estimate')}
       >
         <ControlGroup>
           <InputPrependText text={'USD'} />
           <FMoneyInputGroup
+            // disabled={true}
             name={'project_cost'}
             allowDecimals={true}
             allowNegativeValue={true}
diff --git a/src/containers/Dialogs/ProjectDialog/containers/ProjectFormProvider.tsx b/src/containers/Dialogs/ProjectDialog/containers/ProjectFormProvider.tsx
index 9f9379e05..3c68c865a 100644
--- a/src/containers/Dialogs/ProjectDialog/containers/ProjectFormProvider.tsx
+++ b/src/containers/Dialogs/ProjectDialog/containers/ProjectFormProvider.tsx
@@ -1,7 +1,6 @@
 // @ts-nocheck
 import React from 'react';
 import { useCustomers } from 'hooks/query';
-
 import { DialogContent } from 'components';
 
 const ProjectFormContext = React.createContext();
@@ -10,7 +9,6 @@ const ProjectFormContext = React.createContext();
  * Project form provider.
  * @returns
  */
-
 function ProjectFormProvider({
   // #ownProps
   dialogName,
diff --git a/src/containers/Dialogs/ProjectDialog/index.tsx b/src/containers/Dialogs/ProjectDialog/index.tsx
index 6c5b95595..0d777c323 100644
--- a/src/containers/Dialogs/ProjectDialog/index.tsx
+++ b/src/containers/Dialogs/ProjectDialog/index.tsx
@@ -14,38 +14,37 @@ const ProjectDialogContent = React.lazy(
  */
 function ProjectDialog({ dialogName, payload: { projectId = null }, isOpen }) {
   return (
-    <Dialog
+    <ProjectDialogRoot
       name={dialogName}
       title={<T id={'projects.label.new_project'} />}
       isOpen={isOpen}
       autoFocus={true}
       canEscapeKeyClose={true}
-      className={'dialog--project-form'}
       style={{ width: '400px' }}
     >
       <DialogSuspense>
         <ProjectDialogContent dialogName={dialogName} project={projectId} />
       </DialogSuspense>
-    </Dialog>
+    </ProjectDialogRoot>
   );
 }
 
 export default compose(withDialogRedux())(ProjectDialog);
 
-// const ProjectDialogRoot = styled(Dialog)`
-//   .bp3-dialog-body {
-//     .bp3-form-group {
-//       margin-bottom: 15px;
-//       margin-top: 15px;
+const ProjectDialogRoot = styled(Dialog)`
+  .bp3-dialog-body {
+    .bp3-form-group {
+      margin-bottom: 15px;
+      margin-top: 15px;
 
-//       label.bp3-label {
-//         margin-bottom: 3px;
-//         font-size: 13px;
-//       }
-//     }
+      label.bp3-label {
+        margin-bottom: 3px;
+        font-size: 13px;
+      }
+    }
 
-//     .bp3-dialog-footer {
-//       padding-top: 10px;
-//     }
-//   }
-// `;
+    .bp3-dialog-footer {
+      padding-top: 10px;
+    }
+  }
+`;
diff --git a/src/containers/Dialogs/TaskDialog/containers/TaskDialogContent.tsx b/src/containers/Dialogs/TaskDialog/containers/TaskDialogContent.tsx
index 04e0a86bc..79b721e02 100644
--- a/src/containers/Dialogs/TaskDialog/containers/TaskDialogContent.tsx
+++ b/src/containers/Dialogs/TaskDialog/containers/TaskDialogContent.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
-
 import { TaskFormProvider } from './TaskFormProvider';
 import TaskForm from './TaskForm';
+
 /**
  * Task dialog content.
- * @returns
  */
 export default function TaskDialogContent({
   // #ownProps
diff --git a/src/containers/Dialogs/TaskDialog/containers/TaskForm.schema.tsx b/src/containers/Dialogs/TaskDialog/containers/TaskForm.schema.tsx
index f1c3ecd3b..85b5954ab 100644
--- a/src/containers/Dialogs/TaskDialog/containers/TaskForm.schema.tsx
+++ b/src/containers/Dialogs/TaskDialog/containers/TaskForm.schema.tsx
@@ -3,10 +3,12 @@ import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
-  taks_name: Yup.string(),
-  task_house: Yup.string(),
-  change: Yup.string(),
-  amount: Yup.number(),
+  taksName: Yup.string()
+    .label(intl.get('task.schema.label.task_name'))
+    .required(),
+  taskHouse: Yup.string().label(intl.get('task.schema.label.task_house')),
+  change: Yup.string().label(intl.get('task.schema.label.charge')).required(),
+  amount: Yup.number().label(intl.get('task.schema.label.amount')),
 });
 
 export const CreateTaskFormSchema = Schema;
diff --git a/src/containers/Dialogs/TaskDialog/containers/TaskForm.tsx b/src/containers/Dialogs/TaskDialog/containers/TaskForm.tsx
index 0fc7381e1..2cc6fbd59 100644
--- a/src/containers/Dialogs/TaskDialog/containers/TaskForm.tsx
+++ b/src/containers/Dialogs/TaskDialog/containers/TaskForm.tsx
@@ -1,22 +1,19 @@
 //@ts-nocheck
 import React from 'react';
-
 import { Formik } from 'formik';
-
 import { CreateTaskFormSchema } from './TaskForm.schema';
 import { useTaskFormContext } from './TaskFormProvider';
-import TaskFormContent from './TaskFormContent';
-
 import { AppToaster } from 'components';
+import TaskFormContent from './TaskFormContent';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import { compose } from 'utils';
 
 const defaultInitialValues = {
-  taks_name: '',
-  task_house: '00:00',
+  taksName: '',
+  taskHouse: '00:00',
   change: 'Hourly Rate',
-  change_amount: '100000000',
+  changeAmount: '100000000',
   amount: '',
 };
 
diff --git a/src/containers/Dialogs/TaskDialog/containers/TaskFormContent.tsx b/src/containers/Dialogs/TaskDialog/containers/TaskFormContent.tsx
index 49c8dd088..1d1f371f5 100644
--- a/src/containers/Dialogs/TaskDialog/containers/TaskFormContent.tsx
+++ b/src/containers/Dialogs/TaskDialog/containers/TaskFormContent.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Form } from 'formik';
-
 import TaskFormFields from './TaskFormFields';
 import TaskFormFloatingActions from './TaskFormFloatingActions';
 
diff --git a/src/containers/Dialogs/TaskDialog/containers/TaskFormFields.tsx b/src/containers/Dialogs/TaskDialog/containers/TaskFormFields.tsx
index 4969b86b9..5a053ac6a 100644
--- a/src/containers/Dialogs/TaskDialog/containers/TaskFormFields.tsx
+++ b/src/containers/Dialogs/TaskDialog/containers/TaskFormFields.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import styled from 'styled-components';
-
 import { Classes, ControlGroup } from '@blueprintjs/core';
 import {
   FFormGroup,
@@ -19,16 +18,16 @@ function TaskFormFields() {
     <div className={Classes.DIALOG_BODY}>
       {/*------------ Task Name -----------*/}
       <FFormGroup label={<T id={'task.label.task_name'} />} name={'task_name'}>
-        <FInputGroup name="task_name" />
+        <FInputGroup name="taskName" />
       </FFormGroup>
       {/*------------ Estimated Hours -----------*/}
       <Row>
         <Col xs={4}>
           <FFormGroup
             label={<T id={'task.label.estimated_hours'} />}
-            name={'task_house'}
+            name={'taskHouse'}
           >
-            <FInputGroup name="task_house" />
+            <FInputGroup name="taskHouse" />
           </FFormGroup>
         </Col>
         {/*------------ Charge -----------*/}
@@ -36,7 +35,7 @@ function TaskFormFields() {
           <FFormGroup label={<T id={'task.label.charge'} />} name={'Charge'}>
             <ControlGroup>
               <FInputGroup name="change" />
-              <FInputGroup name="change_amount" />
+              <FInputGroup name="changeAmount" />
             </ControlGroup>
           </FFormGroup>
         </Col>
diff --git a/src/containers/Dialogs/TaskDialog/containers/TaskFormFloatingActions.tsx b/src/containers/Dialogs/TaskDialog/containers/TaskFormFloatingActions.tsx
index 45344bdc3..c9c30a6a9 100644
--- a/src/containers/Dialogs/TaskDialog/containers/TaskFormFloatingActions.tsx
+++ b/src/containers/Dialogs/TaskDialog/containers/TaskFormFloatingActions.tsx
@@ -4,7 +4,6 @@ import { useFormikContext } from 'formik';
 import { Intent, Button, Classes } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
 import { useTaskFormContext } from './TaskFormProvider';
-
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
diff --git a/src/containers/Dialogs/TaskDialog/containers/TaskFormProvider.tsx b/src/containers/Dialogs/TaskDialog/containers/TaskFormProvider.tsx
index 1f3384dd0..ea9bf5be3 100644
--- a/src/containers/Dialogs/TaskDialog/containers/TaskFormProvider.tsx
+++ b/src/containers/Dialogs/TaskDialog/containers/TaskFormProvider.tsx
@@ -1,6 +1,5 @@
 //@ts-nocheck
 import React from 'react';
-
 import { DialogContent } from 'components';
 
 const TaskFormContext = React.createContext();
diff --git a/src/containers/Dialogs/TaskDialog/index.tsx b/src/containers/Dialogs/TaskDialog/index.tsx
index cd21e0229..61dbbcbfd 100644
--- a/src/containers/Dialogs/TaskDialog/index.tsx
+++ b/src/containers/Dialogs/TaskDialog/index.tsx
@@ -11,7 +11,7 @@ const TaskDialogContent = React.lazy(
 
 /**
  * Task dialog.
- * @returns
+ * @returns {ReactNode}
  */
 function TaskDialog({ dialogName, payload: { taskId = null }, isOpen }) {
   return (
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 2a1315ea7..f13743593 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -2060,5 +2060,14 @@
   "task.label.task_name": "Task Name",
   "task.label.estimated_hours": "Task Name",
   "task.label.charge": "Charge",
-  "task.label.estimated_amount": "Estimated Amount"
+  "task.label.estimated_amount": "Estimated Amount",
+  "project.schema.label.contact": "Contact",
+  "project.schema.label.project_name": "Project name",
+  "project.schema.label.deadline": "Deadline",
+  "project.schema.label.project_state": "Project state",
+  "project.schema.label.project_cost": "Project cost",
+  "task.schema.label.task_name": "Task name",
+  "task.schema.label.task_house": "Task house",
+  "task.schema.label.charge": "Charge",
+  "task.schema.label.amount": "Amount",
 }
\ No newline at end of file
diff --git a/src/style/pages/Projects/ProjectFormDialog.scss b/src/style/pages/Projects/ProjectFormDialog.scss
deleted file mode 100644
index 31801f7ee..000000000
--- a/src/style/pages/Projects/ProjectFormDialog.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.dialog--project-form {
-  width: 650px;
-
-  .bp3-dialog-body {
-    .bp3-form-group {
-      margin-bottom: 15px;
-      margin-top: 15px;
-
-      label.bp3-label {
-        margin-bottom: 3px;
-        font-size: 13px;
-      }
-    }
-  
-
-  }
-  .bp3-dialog-footer {
-    padding-top: 10px;
-  }
-}