Added job lookup framework to tech console. BOD-95 BOD-96

2020-06-30 09:58:24 -07:00
parent 0e9cc9620b
commit f1f9d7424b
7 changed files with 448 additions and 24 deletions
--- a/client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx
+++ b/client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx
@@ -0,0 +1,127 @@
+import { PrinterFilled } from "@ant-design/icons";
+import { useQuery } from "@apollo/react-hooks";
+import { Button, Col, Drawer, Grid, PageHeader, Row, Tag } 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 { QUERY_JOB_CARD_DETAILS } 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";
+
+const mapDispatchToProps = (dispatch) => ({
+  setPrintCenterContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "printCenter" })),
+});
+
+const colBreakPoints = {
+  xs: {
+    span: 24,
+  },
+  sm: {
+    span: 12,
+  },
+};
+
+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(QUERY_JOB_CARD_DETAILS, {
+    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}></Col>
+            <Col {...colBreakPoints}></Col>
+            <Col {...colBreakPoints}></Col>
+          </Row>
+        </PageHeader>
+      ) : null}
+    </Drawer>
+  );
+}
+export default connect(null, mapDispatchToProps)(JobDetailCards);