WIP Styling Changes

2021-03-26 12:32:17 -07:00
parent 6688121b21
commit 89d4eb28b6
30 changed files with 486 additions and 498 deletions
--- a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx
+++ b/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,
+  };
+};
--- a/client/src/pages/jobs/jobs.page.jsx
+++ b/client/src/pages/jobs/jobs.page.jsx
@@ -3,11 +3,11 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import JobDetailCards from "../../components/job-detail-cards/job-detail-cards.component";
 import JobsList from "../../components/jobs-list/jobs-list.component";
+import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import {
  setBreadcrumbs,
  setSelectedHeader,
 } from "../../redux/application/application.actions";
-import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";

 const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -27,10 +27,8 @@ export function JobsPage({ setBreadcrumbs, setSelectedHeader }) {

  return (
    <RbacWrapper action="jobs:list-active">
-      <div className="jobs-list-container">
-        <JobsList />
-        <JobDetailCards />
-      </div>
+      <JobsList />
+      <JobDetailCards />
    </RbacWrapper>
  );
 }
--- a/client/src/pages/manage/manage.page.component.jsx
+++ b/client/src/pages/manage/manage.page.component.jsx
@@ -12,15 +12,14 @@ import ChatAffixContainer from "../../components/chat-affix/chat-affix.container
 import ConflictComponent from "../../components/conflict/conflict.component";
 import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
 import FcmNotification from "../../components/fcm-notification/fcm-notification.component";
-import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component";
 //import FooterComponent from "../../components/footer/footer.component";
 //Component Imports
-
 import HeaderContainer from "../../components/header/header.container";
 import JiraSupportComponent from "../../components/jira-support-widget/jira-support-widget.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import PartnerPingComponent from "../../components/partner-ping/partner-ping.component";
 import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
+import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component";
 import TestComponent from "../../components/_test/test.component";
 import { QUERY_STRIPE_ID } from "../../graphql/bodyshop.queries";
 import {
@@ -34,6 +33,7 @@ const ManageRootPage = lazy(() =>
  import("../manage-root/manage-root.page.container")
 );
 const JobsPage = lazy(() => import("../jobs/jobs.page"));
+
 const JobsDetailPage = lazy(() =>
  import("../jobs-detail/jobs-detail.page.container")
 );
@@ -154,7 +154,7 @@ const EmailTest = lazy(() =>
  import("../../components/email-test/email-test-component")
 );

-const { Content, Header } = Layout;
+const { Content, Footer } = Layout;

 const stripePromise = new Promise((resolve, reject) => {
  client.query({ query: QUERY_STRIPE_ID }).then((resp) => {
@@ -197,7 +197,6 @@ export function Manage({ match, conflict, bodyshop }) {
      <PrintCenterModalContainer />
      <Route exact path={`${match.path}/_test`} component={TestComponent} />
      <Route exact path={`${match.path}`} component={ManageRootPage} />
-
      <Route exact path={`${match.path}/jobs`} component={JobsPage} />
      <Switch>
        <Route
@@ -365,27 +364,27 @@ export function Manage({ match, conflict, bodyshop }) {

  return (
    <Layout className="layout-container">
-      <Header>
-        <HeaderContainer />
-      </Header>
+      <HeaderContainer />
+
      <Content className="content-container">
        <FcmNotification />
        <PartnerPingComponent />
        <ErrorBoundary>{PageContent}</ErrorBoundary>
        <ChatAffixContainer />
-
        <BackTop />
-        <div style={{ textAlign: "center", margin: "1rem 0rem" }}>
-          <div>
-            {`ImEX Online V.${process.env.NODE_ENV} - ${
-              process.env.REACT_APP_GIT_SHA
-            } - ${preval`module.exports = new Date().toLocaleString();`}`}
+        <Footer>
+          <div style={{ textAlign: "center", margin: "1rem 0rem" }}>
+            <div>
+              {`ImEX Online V.${process.env.NODE_ENV} - ${
+                process.env.REACT_APP_GIT_SHA
+              } - ${preval`module.exports = new Date().toLocaleString();`}`}
+            </div>
+            <Link to="/about" target="_blank" style={{ color: "#ccc" }}>
+              Disclaimer
+            </Link>
+            <JiraSupportComponent />
          </div>
-          <Link to="/about" target="_blank" style={{ color: "#ccc" }}>
-            Disclaimer
-          </Link>
-          <JiraSupportComponent />
-        </div>
+        </Footer>
      </Content>
    </Layout>
  );
--- a/client/src/pages/manage/manage.page.container.jsx
+++ b/client/src/pages/manage/manage.page.container.jsx
@@ -2,21 +2,17 @@ import { useQuery } from "@apollo/client";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
 import { setBodyshop } from "../../redux/user/user.actions";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import ManagePage from "./manage.page.component";

-const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop });
-
 const mapDispatchToProps = (dispatch) => ({
  setBodyshop: (bs) => dispatch(setBodyshop(bs)),
 });

-function ManagePageContainer({ match, setBodyshop, bodyshop }) {
+function ManagePageContainer({ match, setBodyshop }) {
  const { loading, error, data } = useQuery(QUERY_BODYSHOP, {
    fetchPolicy: "network-only",
  });
@@ -34,7 +30,4 @@ function ManagePageContainer({ match, setBodyshop, bodyshop }) {
  return <ManagePage match={match} />;
 }

-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ManagePageContainer);
+export default connect(null, mapDispatchToProps)(ManagePageContainer);
--- a/client/src/pages/manage/manage.page.styles.scss
+++ b/client/src/pages/manage/manage.page.styles.scss
@@ -1,12 +1,8 @@
 .content-container {
-  overflow-y: auto;
-  margin: 1rem 1rem 0rem 1rem;
-  padding: 0.25rem 2.5rem 1rem 2.5rem;
-  border-radius: 4px;
-  background: #fff;
-  padding-bottom: 3rem;
+  padding: 1rem;
 }

 .layout-container {
  height: 100vh;
+  overflow-y: auto;
 }