IO-1210 Jobs Close Updates

client/src/pages/jobs-close/jobs-close.component.jsx

@@ -1,5 +1,14 @@
 import { useApolloClient, useMutation } from "@apollo/client";
-import { Button, Form, notification, Popconfirm, Space } from "antd";
+import {
+  Button,
+  Form,
+  notification,
+  Popconfirm,
+  Space,
+  Alert,
+  Divider,
+  PageHeader,
+} from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -13,6 +22,9 @@ import { generateJobLinesUpdatesForInvoicing } from "../../graphql/jobs-lines.qu
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import LayoutFormRow from "../../components/layout-form-row/layout-form-row.component";
+import DateTimePicker from "../../components/form-date-time-picker/form-date-time-picker.component";
+import moment from "moment";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   jobRO: selectJobReadOnly,
@@ -82,31 +94,110 @@ export function JobsCloseComponent({ job, bodyshop, jobRO }) {
         layout="vertical"
         form={form}
         onFinish={handleFinish}
-        initialValues={{ joblines: job.joblines }}
+        initialValues={{
+          joblines: job.joblines,
+          actual_in: job.actual_in
+            ? moment(job.actual_in)
+            : job.scheduled_in && moment(job.scheduled_in),
+          actual_completion: job.actual_completion
+            ? moment(job.actual_completion)
+            : job.scheduled_completion && moment(job.scheduled_completion),
+          actual_delivery: job.actual_delivery
+            ? moment(job.actual_delivery)
+            : job.scheduled_delivery && moment(job.scheduled_delivery),
+        }}
         scrollToFirstError
       >
-        <Space>
-          <JobsCloseAutoAllocate
-            joblines={job.joblines}
-            form={form}
-            disabled={!!job.date_exported || jobRO}
-          />
+        <PageHeader
+          title={t("jobs.labels.closejob", { ro_number: job.ro_number })}
+          extra={
+            <Space>
+              <JobsCloseAutoAllocate
+                joblines={job.joblines}
+                form={form}
+                disabled={!!job.date_exported || jobRO}
+              />
 
-          <Popconfirm
-            onConfirm={() => form.submit()}
-            disabled={jobRO}
-            okText={t("general.labels.yes")}
-            cancelText={t("general.labels.no")}
-            title={t("jobs.labels.closeconfirm")}
-          >
-            <Button loading={loading} type="danger" disabled={jobRO}>
-              {t("general.actions.close")}
-            </Button>
-          </Popconfirm>
+              <Popconfirm
+                onConfirm={() => form.submit()}
+                disabled={jobRO}
+                okText={t("general.labels.yes")}
+                cancelText={t("general.labels.no")}
+                title={t("jobs.labels.closeconfirm")}
+              >
+                <Button loading={loading} type="danger" disabled={jobRO}>
+                  {t("general.actions.close")}
+                </Button>
+              </Popconfirm>
 
-          <JobsScoreboardAdd job={job} disabled={false} />
+              <JobsScoreboardAdd job={job} disabled={false} />
+            </Space>
+          }
+        />
+
+        <Space wrap direction="vertical">
+          <FormsFieldChanged form={form} />
+          {!job.actual_in && job.scheduled_in && (
+            <Alert
+              type="warning"
+              message={t("jobs.labels.actual_in_inferred")}
+            />
+          )}
+          {!job.actual_completion && job.scheduled_completion && (
+            <Alert
+              type="warning"
+              message={t("jobs.labels.actual_completion_inferred")}
+            />
+          )}
+          {!job.actual_delivery && job.scheduled_delivery && (
+            <Alert
+              type="warning"
+              message={t("jobs.labels.actual_delivery_inferred")}
+            />
+          )}
         </Space>
-        <FormsFieldChanged form={form} />
+        <LayoutFormRow>
+          <Form.Item
+            label={t("jobs.fields.actual_in")}
+            rules={[
+              {
+                required: true,
+              },
+            ]}
+            name="actual_in"
+          >
+            <DateTimePicker disabled={jobRO} />
+          </Form.Item>
+          <Form.Item shouldUpdate>
+            {() => {
+              return (
+                <Form.Item
+                  label={t("jobs.fields.actual_completion")}
+                  name="actual_completion"
+                  rules={[
+                    {
+                      required: true,
+                    },
+                  ]}
+                >
+                  <DateTimePicker disabled={jobRO} />
+                </Form.Item>
+              );
+            }}
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.actual_delivery")}
+            name="actual_delivery"
+            rules={[
+              {
+                required: true,
+              },
+            ]}
+          >
+            <DateTimePicker disabled={jobRO} />
+          </Form.Item>
+        </LayoutFormRow>
+        <Divider />
         <JobsCloseLines job={job} />
       </Form>
     </div>