WIP Styling Changes

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -3,140 +3,134 @@ import Icon, {
   CalendarFilled,
   DollarCircleOutlined,
   FileImageFilled,
+  PrinterFilled,
   ToolFilled,
 } from "@ant-design/icons";
-import { Form, notification, Tabs } from "antd";
+import { Button, Form, notification, PageHeader, Space, Tabs } from "antd";
 import Axios from "axios";
-import Dinero from "dinero.js";
 import moment from "moment";
 import queryString from "query-string";
-import React, { lazy, Suspense, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaHardHat, FaRegStickyNote, FaShieldAlt } from "react-icons/fa";
 import { connect } from "react-redux";
 import { useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import FormFieldsChanged from "../../components/form-fields-changed-alert/form-fields-changed-alert.component";
-import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
-//import JobsDetailChecklists from "../../components/jobs-detail-checklists/jobs-detail-checklists.component";
+import JobsLinesContainer from "../../components/job-detail-lines/job-lines.container";
+import JobLineUpsertModalContainer from "../../components/job-lines-upsert-modal/job-lines-upsert-modal.container";
+import JobReconciliationModal from "../../components/job-reconciliation-modal/job-reconciliation.modal.container";
+import JobSyncButton from "../../components/job-sync-button/job-sync-button.component";
+import JobsChangeStatus from "../../components/jobs-change-status/jobs-change-status.component";
+import JobsConvertButton from "../../components/jobs-convert-button/jobs-convert-button.component";
+import JobsDetailDatesComponent from "../../components/jobs-detail-dates/jobs-detail-dates.component";
+import JobsDetailGeneral from "../../components/jobs-detail-general/jobs-detail-general.component";
+import JobsDetailHeaderActions from "../../components/jobs-detail-header-actions/jobs-detail-header-actions.component";
+import JobsDetailHeader from "../../components/jobs-detail-header/jobs-detail-header.component";
+import JobsDetailLaborContainer from "../../components/jobs-detail-labor/jobs-detail-labor.container";
+import JobsDetailPliContainer from "../../components/jobs-detail-pli/jobs-detail-pli.container";
+import JobsDetailRates from "../../components/jobs-detail-rates/jobs-detail-rates.component";
+import JobsDetailTotals from "../../components/jobs-detail-totals/jobs-detail-totals.component";
+import JobsDocumentsGalleryContainer from "../../components/jobs-documents-gallery/jobs-documents-gallery.container";
+import JobNotesContainer from "../../components/jobs-notes/jobs-notes.container";
+import ScheduleJobModalContainer from "../../components/schedule-job-modal/schedule-job-modal.container";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 
-const JobsLinesContainer = lazy(() =>
-  import("../../components/job-detail-lines/job-lines.container")
-);
-
-const JobsDetailDatesComponent = lazy(() =>
-  import("../../components/jobs-detail-dates/jobs-detail-dates.component")
-);
-const JobsDetailTotals = lazy(() =>
-  import("../../components/jobs-detail-totals/jobs-detail-totals.component")
-);
-const JobsDetailRates = lazy(() =>
-  import("../../components/jobs-detail-rates/jobs-detail-rates.component")
-);
-const JobsDetailHeader = lazy(() =>
-  import("../../components/jobs-detail-header/jobs-detail-header.component")
-);
-const JobsDetailGeneral = lazy(() =>
-  import("../../components/jobs-detail-general/jobs-detail-general.component")
-);
-const JobsDocumentsGalleryContainer = lazy(() =>
-  import(
-    "../../components/jobs-documents-gallery/jobs-documents-gallery.container"
-  )
-);
-const JobNotesContainer = lazy(() =>
-  import("../../components/jobs-notes/jobs-notes.container")
-);
-const ScheduleJobModalContainer = lazy(() =>
-  import("../../components/schedule-job-modal/schedule-job-modal.container")
-);
-const JobLineUpsertModalContainer = lazy(() =>
-  import(
-    "../../components/job-lines-upsert-modal/job-lines-upsert-modal.container"
-  )
-);
-const JobsDetailPliContainer = lazy(() =>
-  import("../../components/jobs-detail-pli/jobs-detail-pli.container")
-);
-// const JobsDetailAuditContainer = lazy(() =>
-//   import("../../components/audit-trail-list/audit-trail-list.container")
-// );
-const JobsDetailLaborContainer = lazy(() =>
-  import("../../components/jobs-detail-labor/jobs-detail-labor.container")
-);
-const JobReconciliationModal = lazy(() =>
-  import(
-    "../../components/job-reconciliation-modal/job-reconciliation.modal.container"
-  )
-);
-
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   jobRO: selectJobReadOnly,
 });
-
+const mapDispatchToProps = (dispatch) => ({
+  setPrintCenterContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "printCenter" })),
+});
 export function JobsDetailPage({
+  setPrintCenterContext,
+  jobRO,
   job,
   mutationUpdateJob,
   handleSubmit,
   refetch,
-  jobRO,
 }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const history = useHistory();
   const [loading, setLoading] = useState(false);
   const search = queryString.parse(useLocation().search);
+
   const formItemLayout = {
     layout: "vertical",
-    // size: "small",
   };
 
   useEffect(() => {
-    form.resetFields();
+    //form.setFieldsValue(transormJobToForm(job));
     form.resetFields();
   }, [form, job]);
 
   const handleFinish = async (values) => {
     setLoading(true);
-    //const newTotals = CalculateJob({ ...job, ...values }, bodyshop.shoprates);
-    const newTotals = (
-      await Axios.post("/job/totals", {
-        job: { ...job, ...values },
-      })
-    ).data;
-
     const result = await mutationUpdateJob({
       variables: {
         jobId: job.id,
-        job: {
-          ...values,
-          clm_total: Dinero(newTotals.totals.total_repairs).toFormat("0.00"),
-          owner_owing: Dinero(newTotals.totals.custPayable.total).toFormat(
-            "0.00"
-          ),
-          job_totals: newTotals, //JSON.stringify(newTotals),
-        },
+        job: values,
       },
     });
+    const newTotals = await Axios.post("/job/totalsssu", {
+      id: job.id,
+    });
 
-    if (!!!result.errors) {
+    if (newTotals.status !== 200 || result.errors) {
+      notification["error"]({
+        message: t("jobs.errors.totalscalc"),
+      });
+    } else {
       notification["success"]({
         message: t("jobs.successes.savetitle"),
       });
       await refetch();
-      form.resetFields();
+      form.setFieldsValue(transormJobToForm(job));
       form.resetFields();
     }
     setLoading(false);
   };
 
+  const menuExtra = (
+    <Space wrap>
+      <JobsChangeStatus job={job} />
+      <JobSyncButton job={job} />
+      <Button
+        onClick={() => {
+          setPrintCenterContext({
+            actions: { refetch: refetch },
+            context: {
+              id: job.id,
+              job: job,
+              type: "job",
+            },
+          });
+        }}
+        key="printing"
+      >
+        <PrinterFilled />
+        {t("jobs.actions.printCenter")}
+      </Button>
+      <JobsConvertButton job={job} refetch={refetch} />
+      <JobsDetailHeaderActions key="actions" job={job} refetch={refetch} />
+      <Button
+        type="primary"
+        loading={loading}
+        disabled={jobRO}
+        onClick={() => form.submit()}
+      >
+        {t("general.actions.save")}
+      </Button>
+    </Space>
+  );
+
   return (
-    <Suspense
-      fallback={<LoadingSpinner message={t("general.labels.loadingapp")} />}
-    >
+    <div>
       <ScheduleJobModalContainer />
       <JobReconciliationModal />
       <JobLineUpsertModalContainer />
@@ -146,23 +140,16 @@ export function JobsDetailPage({
         onFinish={handleFinish}
         {...formItemLayout}
         autoComplete={"off"}
-        initialValues={{
-          ...job,
-          loss_date: job.loss_date ? moment(job.loss_date) : null,
-          date_estimated: job.date_estimated
-            ? moment(job.date_estimated)
-            : null,
-        }}
+        initialValues={transormJobToForm(job)}
       >
-        <FormFieldsChanged form={form} />
-
-        <JobsDetailHeader
-          form={form}
-          job={job}
-          refetch={refetch}
-          handleSubmit={handleSubmit}
-          loading={loading}
+        <PageHeader
+          onBack={() => window.history.back()}
+          title={job.ro_number || t("general.labels.na")}
+          extra={menuExtra}
         />
+        <JobsDetailHeader job={job} />
+
+        <FormFieldsChanged form={form} />
         <Tabs
           defaultActiveKey={search.tab}
           onChange={(key) => history.push({ search: `?tab=${key}` })}
@@ -271,33 +258,17 @@ export function JobsDetailPage({
           >
             <JobNotesContainer jobId={job.id} />
           </Tabs.TabPane>
-          {
-            //   <Tabs.TabPane
-            //     tab={
-            //       <span>
-            //         <Icon component={FaHistory} />
-            //         {t("jobs.labels.audit")}
-            //       </span>
-            //     }
-            //     key="audit"
-            //   >
-            //     <JobsDetailAuditContainer recordId={job.id} />
-            //   </Tabs.TabPane>
-            //   <Tabs.TabPane
-            //     tab={
-            //       <span>
-            //         <CheckSquareFilled />
-            //         {t("jobs.labels.checklists")}
-            //       </span>
-            //     }
-            //     key="checklists"
-            //   >
-            //     <JobsDetailChecklists job={job} />
-            //   </Tabs.TabPane>
-          }
         </Tabs>
       </Form>
-    </Suspense>
+    </div>
   );
 }
-export default connect(mapStateToProps, null)(JobsDetailPage);
+export default connect(mapStateToProps, mapDispatchToProps)(JobsDetailPage);
+
+const transormJobToForm = (job) => {
+  return {
+    ...job,
+    loss_date: job.loss_date ? moment(job.loss_date) : null,
+    date_estimated: job.date_estimated ? moment(job.date_estimated) : null,
+  };
+};