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

import Icon, {
  BarsOutlined,
  CalendarFilled,
  DollarCircleOutlined,
  FileImageFilled,
  PrinterFilled,
  ToolFilled,
} from "@ant-design/icons";
import {
  Button,
  Divider,
  Form,
  notification,
  PageHeader,
  Space,
  Tabs,
} from "antd";
import Axios from "axios";
import moment from "moment";
import queryString from "query-string";
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 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 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,
}) {
  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",
  };

  useEffect(() => {
    //form.setFieldsValue(transormJobToForm(job));
    form.resetFields();
  }, [form, job]);

  //useKeyboardSaveShortcut(form.submit);

  const handleFinish = async (values) => {
    setLoading(true);
    const result = await mutationUpdateJob({
      variables: {
        jobId: job.id,
        job: {
          ...values,
          parts_tax_rates: {
            ...job.parts_tax_rates,
            ...values.parts_tax_rates,
          },
        },
      },
    });
    const newTotals = await Axios.post("/job/totalsssu", {
      id: job.id,
    });

    if (newTotals.status !== 200 || result.errors) {
      notification["error"]({
        message: t("jobs.errors.totalscalc"),
      });
    } else {
      notification["success"]({
        message: t("jobs.successes.savetitle"),
      });
      await refetch();
      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 (
    <div>
      <ScheduleJobModalContainer />
      <JobReconciliationModal />
      <JobLineUpsertModalContainer />
      <Form
        form={form}
        name="JobDetailForm"
        onFinish={handleFinish}
        {...formItemLayout}
        autoComplete={"off"}
        initialValues={transormJobToForm(job)}
      >
        <PageHeader
          onBack={() => window.history.back()}
          title={job.ro_number || t("general.labels.na")}
          extra={menuExtra}
        />
        <JobsDetailHeader job={job} />
        <Divider type="horizontal" />
        <FormFieldsChanged form={form} />
        <Tabs
          defaultActiveKey={search.tab}
          onChange={(key) => history.push({ search: `?tab=${key}` })}
          tabBarStyle={{ fontWeight: "bold", borderBottom: "10px" }}
        >
          <Tabs.TabPane
            forceRender
            tab={
              <span>
                <Icon component={FaShieldAlt} />
                {t("menus.jobsdetail.general")}
              </span>
            }
            key="general"
          >
            <JobsDetailGeneral job={job} form={form} />
          </Tabs.TabPane>
          <Tabs.TabPane
            forceRender
            tab={
              <span>
                <BarsOutlined />
                {t("menus.jobsdetail.repairdata")}
              </span>
            }
            key="repairdata"
          >
            <JobsLinesContainer
              job={job}
              joblines={job.joblines}
              refetch={refetch}
              form={form}
            />
          </Tabs.TabPane>
          <Tabs.TabPane
            forceRender
            tab={
              <span>
                <DollarCircleOutlined />
                {t("menus.jobsdetail.rates")}
              </span>
            }
            key="rates"
          >
            <JobsDetailRates job={job} form={form} />
          </Tabs.TabPane>
          <Tabs.TabPane
            tab={
              <span>
                <DollarCircleOutlined />
                {t("menus.jobsdetail.totals")}
              </span>
            }
            key="totals"
          >
            <JobsDetailTotals job={job} refetch={refetch} />
          </Tabs.TabPane>
          <Tabs.TabPane
            tab={
              <span>
                <ToolFilled />
                {t("menus.jobsdetail.partssublet")}
              </span>
            }
            key="partssublet"
          >
            <JobsDetailPliContainer job={job} />
          </Tabs.TabPane>
          <Tabs.TabPane
            tab={
              <span>
                <Icon component={FaHardHat} />
                {t("menus.jobsdetail.labor")}
              </span>
            }
            key="labor"
          >
            <JobsDetailLaborContainer jobId={job.id} />
          </Tabs.TabPane>
          <Tabs.TabPane
            forceRender
            tab={
              <span>
                <CalendarFilled />
                {t("menus.jobsdetail.dates")}
              </span>
            }
            key="dates"
          >
            <JobsDetailDatesComponent job={job} />
          </Tabs.TabPane>
          <Tabs.TabPane
            tab={
              <span>
                <FileImageFilled />
                {t("jobs.labels.documents")}
              </span>
            }
            key="documents"
          >
            <JobsDocumentsGalleryContainer jobId={job.id} />
          </Tabs.TabPane>
          <Tabs.TabPane
            tab={
              <span>
                <Icon component={FaRegStickyNote} />
                {t("jobs.labels.notes")}
              </span>
            }
            key="notes"
          >
            <JobNotesContainer jobId={job.id} />
          </Tabs.TabPane>
        </Tabs>
      </Form>
    </div>
  );
}
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,
  };
};