fix: project & task dialog.

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 = {

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

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;

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: '',
 };
 
 /**

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}

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,

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;
+    }
+  }
+`;

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

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;

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: '',
 };
 

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';
 

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>

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';
 

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();

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 (

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",
 }

src/style/pages/Projects/ProjectFormDialog.scss

@@ -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;
-  }
-}