From cb0a315ca62f9f59e4a9405bc6c8bc7f3ec07c84 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sat, 11 Jun 2022 00:45:31 +0200
Subject: [PATCH] feat: add task form dialog.

---
 .../containers/TaskDialogContent.tsx          | 19 +++++
 .../TaskDialog/containers/TaskForm.schema.tsx | 12 ++++
 .../TaskDialog/containers/TaskForm.tsx        | 66 +++++++++++++++++
 .../TaskDialog/containers/TaskFormContent.tsx | 18 +++++
 .../TaskDialog/containers/TaskFormFields.tsx  | 70 +++++++++++++++++++
 .../containers/TaskFormFloatingActions.tsx    | 49 +++++++++++++
 .../containers/TaskFormProvider.tsx           | 29 ++++++++
 src/containers/Dialogs/TaskDialog/index.tsx   | 33 +++++++++
 8 files changed, 296 insertions(+)
 create mode 100644 src/containers/Dialogs/TaskDialog/containers/TaskDialogContent.tsx
 create mode 100644 src/containers/Dialogs/TaskDialog/containers/TaskForm.schema.tsx
 create mode 100644 src/containers/Dialogs/TaskDialog/containers/TaskForm.tsx
 create mode 100644 src/containers/Dialogs/TaskDialog/containers/TaskFormContent.tsx
 create mode 100644 src/containers/Dialogs/TaskDialog/containers/TaskFormFields.tsx
 create mode 100644 src/containers/Dialogs/TaskDialog/containers/TaskFormFloatingActions.tsx
 create mode 100644 src/containers/Dialogs/TaskDialog/containers/TaskFormProvider.tsx
 create mode 100644 src/containers/Dialogs/TaskDialog/index.tsx

diff --git a/src/containers/Dialogs/TaskDialog/containers/TaskDialogContent.tsx b/src/containers/Dialogs/TaskDialog/containers/TaskDialogContent.tsx
new file mode 100644
index 000000000..04e0a86bc
--- /dev/null
+++ b/src/containers/Dialogs/TaskDialog/containers/TaskDialogContent.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { TaskFormProvider } from './TaskFormProvider';
+import TaskForm from './TaskForm';
+/**
+ * Task dialog content.
+ * @returns
+ */
+export default function TaskDialogContent({
+  // #ownProps
+  dialogName,
+  task,
+}) {
+  return (
+    <TaskFormProvider taskId={task} dialogName={dialogName}>
+      <TaskForm />
+    </TaskFormProvider>
+  );
+}
diff --git a/src/containers/Dialogs/TaskDialog/containers/TaskForm.schema.tsx b/src/containers/Dialogs/TaskDialog/containers/TaskForm.schema.tsx
new file mode 100644
index 000000000..f1c3ecd3b
--- /dev/null
+++ b/src/containers/Dialogs/TaskDialog/containers/TaskForm.schema.tsx
@@ -0,0 +1,12 @@
+import * as Yup from 'yup';
+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(),
+});
+
+export const CreateTaskFormSchema = Schema;
diff --git a/src/containers/Dialogs/TaskDialog/containers/TaskForm.tsx b/src/containers/Dialogs/TaskDialog/containers/TaskForm.tsx
new file mode 100644
index 000000000..0fc7381e1
--- /dev/null
+++ b/src/containers/Dialogs/TaskDialog/containers/TaskForm.tsx
@@ -0,0 +1,66 @@
+//@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 withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+  taks_name: '',
+  task_house: '00:00',
+  change: 'Hourly Rate',
+  change_amount: '100000000',
+  amount: '',
+};
+
+/**
+ * Task form.
+ * @returns
+ */
+function TaskForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // task form dialog context.
+  const { dialogName } = useTaskFormContext();
+
+  // Initial form values
+  const initialValues = {
+    ...defaultInitialValues,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = {};
+
+    // Handle request response success.
+    const onSuccess = (response) => {};
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateTaskFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={TaskFormContent}
+    />
+  );
+}
+
+export default compose(withDialogActions)(TaskForm);
diff --git a/src/containers/Dialogs/TaskDialog/containers/TaskFormContent.tsx b/src/containers/Dialogs/TaskDialog/containers/TaskFormContent.tsx
new file mode 100644
index 000000000..49c8dd088
--- /dev/null
+++ b/src/containers/Dialogs/TaskDialog/containers/TaskFormContent.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import TaskFormFields from './TaskFormFields';
+import TaskFormFloatingActions from './TaskFormFloatingActions';
+
+/**
+ * Task form content.
+ * @returns
+ */
+export default function TaskFormContent() {
+  return (
+    <Form>
+      <TaskFormFields />
+      <TaskFormFloatingActions />
+    </Form>
+  );
+}
diff --git a/src/containers/Dialogs/TaskDialog/containers/TaskFormFields.tsx b/src/containers/Dialogs/TaskDialog/containers/TaskFormFields.tsx
new file mode 100644
index 000000000..0dc877c10
--- /dev/null
+++ b/src/containers/Dialogs/TaskDialog/containers/TaskFormFields.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Classes, ControlGroup } from '@blueprintjs/core';
+import {
+  FFormGroup,
+  FInputGroup,
+  Col,
+  Row,
+  FormattedMessage as T,
+} from 'components';
+
+/**
+ * Task form fields.
+ * @returns
+ */
+function TaskFormFields() {
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/*------------ Task Name -----------*/}
+      <FFormGroup label={'Task Name'} name={'task_name'}>
+        <FInputGroup name="task_name" />
+      </FFormGroup>
+      {/*------------ Estimated Hours -----------*/}
+      <Row>
+        <Col xs={4}>
+          <FFormGroup label={'Estimated Hours'} name={'task_house'}>
+            <FInputGroup name="task_house" />
+          </FFormGroup>
+        </Col>
+        {/*------------ Charge -----------*/}
+        <Col xs={8}>
+          <FFormGroup label={'Charge'} name={'Charge'}>
+            <ControlGroup>
+              <FInputGroup name="change" />
+              <FInputGroup name="change_amount" />
+            </ControlGroup>
+          </FFormGroup>
+        </Col>
+      </Row>
+      {/*------------ Estimated Amount -----------*/}
+      <EstimatedAmountBase>
+        <EstimatedAmountContent>
+          Estimated Amount:
+          <EstimateAmount>$100000</EstimateAmount>
+        </EstimatedAmountContent>
+      </EstimatedAmountBase>
+    </div>
+  );
+}
+
+export default TaskFormFields;
+
+const EstimatedAmountBase = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  font-size: 12px;
+  /* opacity: 0.7; */
+`;
+
+const EstimatedAmountContent = styled.span`
+  background-color: #fffdf5;
+  padding: 0.1rem 0;
+`;
+
+const EstimateAmount = styled.span`
+  font-size: 13px;
+  font-weight: 700;
+  margin-left: 10px;
+`;
diff --git a/src/containers/Dialogs/TaskDialog/containers/TaskFormFloatingActions.tsx b/src/containers/Dialogs/TaskDialog/containers/TaskFormFloatingActions.tsx
new file mode 100644
index 000000000..45344bdc3
--- /dev/null
+++ b/src/containers/Dialogs/TaskDialog/containers/TaskFormFloatingActions.tsx
@@ -0,0 +1,49 @@
+// @ts-nocheck
+import React from 'react';
+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';
+
+/**
+ * Task form floating actions.
+ * @returns
+ */
+function TaskFormFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  // Task form dialog context.
+  const { dialogName } = useTaskFormContext();
+
+  // Handle close button click.
+  const handleCancelBtnClick = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          style={{ minWidth: '75px' }}
+          type="submit"
+        >
+          {<T id={'save'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(TaskFormFloatingActions);
diff --git a/src/containers/Dialogs/TaskDialog/containers/TaskFormProvider.tsx b/src/containers/Dialogs/TaskDialog/containers/TaskFormProvider.tsx
new file mode 100644
index 000000000..bdd933cfb
--- /dev/null
+++ b/src/containers/Dialogs/TaskDialog/containers/TaskFormProvider.tsx
@@ -0,0 +1,29 @@
+//@ts-nocheck
+import React from 'react';
+
+import { DialogContent } from 'components';
+
+const TaskFormContext = React.createContext();
+
+/**
+ * Task form provider.
+ * @returns
+ */
+function TaskFormProvider({
+  // #ownProps
+  dialogName,
+  taskId,
+  ...props
+}) {
+  // State provider.
+  const provider = {};
+  return (
+    <DialogContent>
+      <TaskFormContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useTaskFormContext = () => React.useContext(TaskFormContext);
+
+export { TaskFormProvider, useTaskFormContext };
diff --git a/src/containers/Dialogs/TaskDialog/index.tsx b/src/containers/Dialogs/TaskDialog/index.tsx
new file mode 100644
index 000000000..7cef6e748
--- /dev/null
+++ b/src/containers/Dialogs/TaskDialog/index.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const TaskDialogContent = React.lazy(() =>
+  import('./containers/TaskDialogContent'),
+);
+
+/**
+ * Task dialog.
+ * @returns
+ */
+function TaskDialog({ dialogName, payload: { taskId = null }, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'New Task'}
+      isOpen={isOpen}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      style={{ width: '500px' }}
+    >
+      <DialogSuspense>
+        <TaskDialogContent dialogName={dialogName} task={taskId} />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+export default compose(withDialogRedux())(TaskDialog);
+
+const TaskDialogRoot = styled(Dialog)``;