bodyshop/client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx

import { PrinterFilled } from "@ant-design/icons";
import { useQuery } from "@apollo/react-hooks";
import { Button, Col, Drawer, Grid, PageHeader, Row, Tag, Tabs } from "antd";
import queryString from "query-string";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link, useHistory, useLocation } from "react-router-dom";
import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
import { setModalContext } from "../../redux/modals/modals.actions";
import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import OwnerTagPopoverComponent from "../owner-tag-popover/owner-tag-popover.component";
import VehicleTagPopoverComponent from "../vehicle-tag-popover/vehicle-tag-popover.component";
import JobLinesContainer from "../job-detail-lines/job-lines.container";
import JobsDocumentsGalleryContainer from "../jobs-documents-gallery/jobs-documents-gallery.container";
import JobNotesContainer from "../jobs-notes/jobs-notes.container";

const mapDispatchToProps = (dispatch) => ({
  setPrintCenterContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "printCenter" })),
});

const colBreakPoints = {
  xs: {
    span: 24,
  },
  sm: {
    span: 8,
  },
};

export function JobDetailCards({ setPrintCenterContext }) {
  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
    .filter((screen) => !!screen[1])
    .slice(-1)[0];

  const bpoints = {
    xs: "100%",
    sm: "100%",
    md: "100%",
    lg: "70%",
    xl: "70%",
    xxl: "70%",
  };
  const drawerPercentage = selectedBreakpoint
    ? bpoints[selectedBreakpoint[0]]
    : "100%";

  const searchParams = queryString.parse(useLocation().search);
  const { selected } = searchParams;
  const history = useHistory();
  const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
    fetchPolicy: "network-only",
    variables: { id: selected },
    skip: !selected,
  });

  const { t } = useTranslation();
  const handleDrawerClose = () => {
    delete searchParams.selected;
    history.push({
      search: queryString.stringify({
        ...searchParams,
      }),
    });
  };

  return (
    <Drawer
      visible={!!selected}
      destroyOnClose
      width={drawerPercentage}
      placement="right"
      onClose={handleDrawerClose}
    >
      {loading ? <LoadingSpinner /> : null}
      {error ? <AlertComponent message={error.message} type="error" /> : null}
      {data ? (
        <PageHeader
          ghost={true}
          tags={[
            <OwnerTagPopoverComponent key="owner" job={data.jobs_by_pk} />,
            <VehicleTagPopoverComponent key="vehicle" job={data.jobs_by_pk} />,
            <Tag
              color="#f50"
              key="production"
              style={{ display: data.jobs_by_pk.inproduction ? "" : "none" }}
            >
              {t("jobs.labels.inproduction")}
            </Tag>,
          ]}
          title={
            <Link to={`/manage/jobs/${data.jobs_by_pk.id}`}>
              {data.jobs_by_pk.ro_number
                ? `${t("jobs.fields.ro_number")} ${data.jobs_by_pk.ro_number}`
                : `${t("jobs.fields.est_number")} ${
                    data.jobs_by_pk.est_number
                  }`}
            </Link>
          }
          subTitle={data.jobs_by_pk.status}
          extra={
            <Button
              onClick={() => {
                setPrintCenterContext({
                  actions: { refetch: refetch },
                  context: {
                    id: data.jobs_by_pk.id,
                    type: "job",
                  },
                });
              }}
            >
              <PrinterFilled />
              {t("jobs.actions.printCenter")}
            </Button>
          }
        >
          <Row gutter={[16, 16]}>
            <Col {...colBreakPoints}> What would be good to have here?</Col>
            <Col {...colBreakPoints}> What would be good to have here?</Col>
            <Col {...colBreakPoints}> What would be good to have here?</Col>
          </Row>
          <Tabs size="large">
            <Tabs.TabPane key="lines" tab={t("jobs.labels.lines")}>
              <JobLinesContainer
                jobId={selected}
                joblines={data.jobs_by_pk.joblines}
                refetch={refetch}
              />
            </Tabs.TabPane>
            <Tabs.TabPane key="documents" tab={t("jobs.labels.documents")}>
              <JobsDocumentsGalleryContainer jobId={searchParams.selected} />
            </Tabs.TabPane>
            <Tabs.TabPane key="notes" tab={t("jobs.labels.notes")}>
              <JobNotesContainer jobId={searchParams.selected} />
            </Tabs.TabPane>
          </Tabs>
        </PageHeader>
      ) : null}
    </Drawer>
  );
}
export default connect(null, mapDispatchToProps)(JobDetailCards);