From 180f749e7b52dab8b1b650e16c30e39c5cec7e8a Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Mon, 8 Feb 2021 12:00:05 -0800
Subject: [PATCH] Added dates to job admin and locked down dates on detail.
 IO-628

---
 .../jobs-admin-dates.component.jsx            | 125 ++++++++++++++++++
 .../jobs-detail-dates.component.jsx           |   4 +-
 .../src/pages/jobs-admin/jobs-admin.page.jsx  |   2 +
 3 files changed, 129 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx

diff --git a/client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx b/client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx
new file mode 100644
index 000000000..ddc95bc48
--- /dev/null
+++ b/client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx
@@ -0,0 +1,125 @@
+import { useMutation } from "@apollo/react-hooks";
+import { Button, Form, notification, DatePicker } from "antd";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { UPDATE_JOB } from "../../graphql/jobs.queries";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+import moment from "moment";
+export default function JobsAdminDatesChange({ job }) {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  const [form] = Form.useForm();
+  const [updateJob] = useMutation(UPDATE_JOB);
+
+  const handleFinish = async (values) => {
+    console.log(values);
+    setLoading(true);
+    const result = await updateJob({
+      variables: { jobId: job.id, job: values },
+    });
+
+    if (!!!result.errors) {
+      notification["success"]({ message: t("jobs.successes.save") });
+    } else {
+      notification["error"]({
+        message: t("jobs.errors.saving", {
+          error: JSON.stringify(result.errors),
+        }),
+      });
+    }
+    setLoading(false);
+    //Get the owner details, populate it all back into the job.
+  };
+
+  useEffect(() => {
+    //form.resetFields();
+  }, [form, job]);
+
+  return (
+    <div>
+      <div>{t("jobs.labels.ownerassociation")}</div>
+      <Form
+        onFinish={handleFinish}
+        autoComplete={"off"}
+        form={form}
+        layout="vertical"
+        initialValues={{
+          ...job,
+          date_estimated: job.date_estimated
+            ? moment(job.date_estimated)
+            : null,
+        }}
+      >
+        <LayoutFormRow header={t("jobs.forms.estdates")}>
+          <Form.Item
+            label={t("jobs.fields.date_estimated")}
+            name="date_estimated"
+          >
+            <DatePicker />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.date_open")} name="date_open">
+            <DateTimePicker />
+          </Form.Item>
+
+          <Form.Item
+            label={t("jobs.fields.date_scheduled")}
+            name="date_scheduled"
+          >
+            <DateTimePicker />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.scheduled_in")} name="scheduled_in">
+            <DateTimePicker />
+          </Form.Item>
+
+          <Form.Item label={t("jobs.fields.actual_in")} name="actual_in">
+            <DateTimePicker />
+          </Form.Item>
+
+          <Form.Item
+            label={t("jobs.fields.scheduled_completion")}
+            name="scheduled_completion"
+          >
+            <DateTimePicker />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.actual_completion")}
+            name="actual_completion"
+          >
+            <DateTimePicker />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.scheduled_delivery")}
+            name="scheduled_delivery"
+          >
+            <DateTimePicker />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.actual_delivery")}
+            name="actual_delivery"
+          >
+            <DateTimePicker />
+          </Form.Item>
+
+          <Form.Item
+            label={t("jobs.fields.date_invoiced")}
+            name="date_invoiced"
+          >
+            <DateTimePicker />
+          </Form.Item>
+
+          <Form.Item
+            label={t("jobs.fields.date_exported")}
+            name="date_exported"
+          >
+            <DateTimePicker />
+          </Form.Item>
+        </LayoutFormRow>
+      </Form>
+
+      <Button loading={loading} onClick={() => form.submit()}>
+        {t("general.actions.save")}
+      </Button>
+    </div>
+  );
+}
diff --git a/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx b/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx
index d75d907e1..9625544c6 100644
--- a/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx
+++ b/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx
@@ -73,11 +73,11 @@ export function JobsDetailDatesComponent({ jobRO, job }) {
       </FormRow>
       <FormRow header={t("jobs.forms.admindates")}>
         <Form.Item label={t("jobs.fields.date_invoiced")} name="date_invoiced">
-          <DateTimePicker disabled={jobRO} />
+          <DateTimePicker disabled={true || jobRO} />
         </Form.Item>
 
         <Form.Item label={t("jobs.fields.date_exported")} name="date_exported">
-          <DateTimePicker disabled={jobRO} />
+          <DateTimePicker disabled={true || jobRO} />
         </Form.Item>
       </FormRow>
     </div>
diff --git a/client/src/pages/jobs-admin/jobs-admin.page.jsx b/client/src/pages/jobs-admin/jobs-admin.page.jsx
index fe3611c41..00b83262d 100644
--- a/client/src/pages/jobs-admin/jobs-admin.page.jsx
+++ b/client/src/pages/jobs-admin/jobs-admin.page.jsx
@@ -18,6 +18,7 @@ import {
   setSelectedHeader,
 } from "../../redux/application/application.actions";
 import JobsAdminDeleteIntake from "../../components/jobs-admin-delete-intake/jobs-admin-delete-intake.component";
+import JobsAdminDatesChange from "../../components/jobs-admin-dates/jobs-admin-dates.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -75,6 +76,7 @@ export function JobsCloseContainer({ setBreadcrumbs, setSelectedHeader }) {
         <LayoutFormRow>
           <JobsAdminDeleteIntake job={data ? data.jobs_by_pk : {}} />
         </LayoutFormRow>
+        <JobsAdminDatesChange job={data ? data.jobs_by_pk : {}} />
       </div>
     </RbacWrapper>
   );