IO-2564 LEGACY Row Expander Drawers

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>

client/src/components/job-detail-lines/job-lines-expander.component.jsx

@@ -2,13 +2,25 @@ import { useQuery } from "@apollo/client";
 import { Col, Row, Skeleton, Timeline, Typography } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
 import { Link } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
 import { GET_JOB_LINE_ORDERS } from "../../graphql/jobs.queries";
+import { selectTechnician } from "../../redux/tech/tech.selectors.js";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import AlertComponent from "../alert/alert.component";
+import BillDetailEditcontainer from "../bill-detail-edit/bill-detail-edit.container.jsx";
 
-export default function JobLinesExpander({ jobline, jobid }) {
+const mapStateToProps = createStructuredSelector({
+  technician: selectTechnician,
+});
+
+const mapDispatchToProps = (dispatch) => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(JobLinesExpander);
+
+export function JobLinesExpander({ jobline, jobid, technician }) {
   const { t } = useTranslation();
   const { loading, error, data } = useQuery(GET_JOB_LINE_ORDERS, {
     fetchPolicy: "network-only",
@@ -33,11 +45,15 @@ export default function JobLinesExpander({ jobline, jobid }) {
               <Timeline.Item key={line.id}>
                 <Row wrap>
                   <Col span={4}>
-                    <Link
+                    {!technician ? (
-                      to={`/manage/jobs/${jobid}?partsorderid=${line.parts_order.id}`}
+                      <Link
-                    >
+                        to={`/manage/jobs/${jobid}?partsorderid=${line.parts_order.id}`}
-                      {line.parts_order.order_number}
+                      >
-                    </Link>
+                        {line.parts_order.order_number}
+                      </Link>
+                    ) : (
+                      `${line.parts_order.order_number}`
+                    )}
                   </Col>
                   <Col span={4}>
                     <DateFormatter>{line.parts_order.order_date}</DateFormatter>
@@ -63,17 +79,22 @@ export default function JobLinesExpander({ jobline, jobid }) {
       </Col>
       <Col md={24} lg={12}>
         <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
+        <BillDetailEditcontainer />
         <Timeline>
           {data.billlines.length > 0 ? (
             data.billlines.map((line) => (
               <Timeline.Item key={line.id}>
                 <Row wrap>
                   <Col span={4}>
-                    <Link
+                    {!technician ? (
-                      to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}
+                      <Link
-                    >
+                        to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}
-                      {line.bill.invoice_number}
+                      >
-                    </Link>
+                        {line.bill.invoice_number}
+                      </Link>
+                    ) : (
+                      `${line.bill.invoice_number}`
+                    )}
                   </Col>
                   <Col span={4}>
                     <span>
@@ -95,9 +116,7 @@ export default function JobLinesExpander({ jobline, jobid }) {
               </Timeline.Item>
             ))
           ) : (
-            <Timeline.Item>
+            <Timeline.Item>{t("bills.labels.nobilllines")}</Timeline.Item>
-              {t("bills.labels.nobilllines")}
-            </Timeline.Item>
           )}
         </Timeline>
       </Col>

client/src/components/job-detail-lines/job-lines.component.jsx

@@ -1,12 +1,12 @@
 import {
   DeleteFilled,
+  EditFilled,
   FilterFilled,
+  HomeOutlined,
+  MinusCircleTwoTone,
+  PlusCircleTwoTone,
   SyncOutlined,
   WarningFilled,
-  EditFilled,
-  PlusCircleTwoTone,
-  MinusCircleTwoTone,
-  HomeOutlined,
 } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
 import {
@@ -20,6 +20,8 @@ import {
   Tag,
 } from "antd";
 import axios from "axios";
+import _ from "lodash";
+import moment from "moment";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -28,23 +30,19 @@ import { DELETE_JOB_LINE_BY_PK } from "../../graphql/jobs-lines.queries";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import { onlyUnique } from "../../utils/arrayHelper";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { alphaSort } from "../../utils/sorters";
+import JobCreateIOU from "../job-create-iou/job-create-iou.component";
+import JobLineConvertToLabor from "../job-line-convert-to-labor/job-line-convert-to-labor.component";
 import JobLineLocationPopup from "../job-line-location-popup/job-line-location-popup.component";
 import JobLineNotePopup from "../job-line-note-popup/job-line-note-popup.component";
 import JobLineStatusPopup from "../job-line-status-popup/job-line-status-popup.component";
 import JobLinesBillRefernece from "../job-lines-bill-reference/job-lines-bill-reference.component";
-// import AllocationsAssignmentContainer from "../allocations-assignment/allocations-assignment.container";
+import PartsOrderDrawer from "../parts-order-list-table/parts-order-list-table-drawer.component";
-// import AllocationsBulkAssignmentContainer from "../allocations-bulk-assignment/allocations-bulk-assignment.container";
-// import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container";
 import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
-import _ from "lodash";
-import JobCreateIOU from "../job-create-iou/job-create-iou.component";
 import JobLinesExpander from "./job-lines-expander.component";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import moment from "moment";
-import JobLineConvertToLabor from "../job-line-convert-to-labor/job-line-convert-to-labor.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -57,6 +55,8 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(setModalContext({ context: context, modal: "jobLineEdit" })),
   setPartsOrderContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "partsOrder" })),
+  setPartsReceiveContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "partsReceive" })),
   setBillEnterContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "billEnter" })),
 });
@@ -66,6 +66,7 @@ export function JobLinesComponent({
   jobRO,
   technician,
   setPartsOrderContext,
+  setPartsReceiveContext,
   loading,
   refetch,
   jobLines,
@@ -74,6 +75,8 @@ export function JobLinesComponent({
   setJobLineEditContext,
   form,
   setBillEnterContext,
+  billsQuery,
+  handlePartsOrderOnRowClick,
 }) {
   const [deleteJobLine] = useMutation(DELETE_JOB_LINE_BY_PK);
 
@@ -341,7 +344,7 @@ export function JobLinesComponent({
       key: "actions",
       render: (text, record) => (
         <Space>
-          {(record.manual_line || jobIsPrivate) && (
+          {(record.manual_line || jobIsPrivate) && !technician && (
             <>
               <Button
                 disabled={jobRO}
@@ -424,6 +427,14 @@ export function JobLinesComponent({
   return (
     <div>
       <PartsOrderModalContainer />
+      {!technician && (
+        <PartsOrderDrawer
+          job={job}
+          billsQuery={billsQuery}
+          handleOnRowClick={handlePartsOrderOnRowClick}
+          setPartsReceiveContext={setPartsReceiveContext}
+        />
+      )}
       <PageHeader
         title={t("jobs.labels.estimatelines")}
         extra={

client/src/components/job-detail-lines/job-lines.container.jsx

@@ -1,6 +1,15 @@
 import React, { useMemo, useState } from "react";
 import JobLinesComponent from "./job-lines.component";
-function JobLinesContainer({ job, joblines, refetch, form, ...rest }) {
+function JobLinesContainer({
+  job,
+  joblines,
+  billsQuery,
+  handleBillOnRowClick,
+  handlePartsOrderOnRowClick,
+  refetch,
+  form,
+  ...rest
+}) {
   const [searchText, setSearchText] = useState("");
 
   const jobLines = useMemo(() => {
@@ -37,6 +46,9 @@ function JobLinesContainer({ job, joblines, refetch, form, ...rest }) {
     <JobLinesComponent
       refetch={refetch}
       jobLines={jobLines}
+      billsQuery={billsQuery}
+      handleBillOnRowClick={handleBillOnRowClick}
+      handlePartsOrderOnRowClick={handlePartsOrderOnRowClick}
       setSearchText={setSearchText}
       job={job}
       form={form}

client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx

@@ -23,14 +23,18 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
+  technician: selectTechnician,
 });
+
 const mapDispatchToProps = (dispatch) => ({
   insertAuditTrail: ({ jobid, operation, type }) =>
     dispatch(insertAuditTrail({ jobid, operation, type })),
 });
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps
@@ -41,6 +45,7 @@ export function JobLineConvertToLabor({
   jobline,
   job,
   insertAuditTrail,
+  technician,
   ...otherBtnProps
 }) {
   const { t } = useTranslation();
@@ -222,7 +227,7 @@ export function JobLineConvertToLabor({
   return (
     <>
       {children}
-      {jobline.act_price !== 0 && (
+      {jobline.act_price !== 0 && !technician && (
         <Popover
           disabled={jobline.convertedtolbr}
           content={overlay}

client/src/components/jobs-detail-pli/jobs-detail-pli.container.jsx

@@ -1,44 +1,12 @@
-import { useQuery } from "@apollo/client";
-import queryString from "query-string";
 import React from "react";
-import { useHistory, useLocation } from "react-router-dom";
-import { QUERY_BILLS_BY_JOBID } from "../../graphql/bills.queries";
 import JobsDetailPliComponent from "./jobs-detail-pli.component";
 
-export default function JobsDetailPliContainer({ job }) {
+export default function JobsDetailPliContainer({
-  const billsQuery = useQuery(QUERY_BILLS_BY_JOBID, {
+  job,
-    variables: { jobid: job.id },
+  billsQuery,
-    fetchPolicy: "network-only",
+  handleBillOnRowClick,
-    nextFetchPolicy: "network-only",
+  handlePartsOrderOnRowClick,
-  });
+}) {
-
-  const search = queryString.parse(useLocation().search);
-  const history = useHistory();
-
-  const handleBillOnRowClick = (record) => {
-    if (record) {
-      if (record.id) {
-        search.billid = record.id;
-        history.push({ search: queryString.stringify(search) });
-      }
-    } else {
-      delete search.billid;
-      history.push({ search: queryString.stringify(search) });
-    }
-  };
-
-  const handlePartsOrderOnRowClick = (record) => {
-    if (record) {
-      if (record.id) {
-        search.partsorderid = record.id;
-        history.push({ search: queryString.stringify(search) });
-      }
-    } else {
-      delete search.partsorderid;
-      history.push({ search: queryString.stringify(search) });
-    }
-  };
-
   return (
     <JobsDetailPliComponent
       job={job}

client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx

@@ -0,0 +1,455 @@
+import { DeleteFilled, EyeFilled } from "@ant-design/icons";
+import { useLazyQuery, useMutation } from "@apollo/client";
+import {
+  Button,
+  Drawer,
+  Grid,
+  PageHeader,
+  Popconfirm,
+  Space,
+  Table,
+} from "antd";
+import queryString from "query-string";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { FaTasks } from "react-icons/fa";
+import { connect } from "react-redux";
+import { useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { QUERY_BILL_BY_PK } from "../../graphql/bills.queries";
+import { DELETE_PARTS_ORDER } from "../../graphql/parts-orders.queries";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import { setModalContext } from "../../redux/modals/modals.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import { DateFormatter } from "../../utils/DateFormatter";
+import { TemplateList } from "../../utils/TemplateConstants";
+import { alphaSort } from "../../utils/sorters";
+import DataLabel from "../data-label/data-label.component";
+import FeatureWrapperComponent from "../feature-wrapper/feature-wrapper.component";
+import PartsOrderBackorderEta from "../parts-order-backorder-eta/parts-order-backorder-eta.component";
+import PartsOrderCmReceived from "../parts-order-cm-received/parts-order-cm-received.component";
+import PartsOrderDeleteLine from "../parts-order-delete-line/parts-order-delete-line.component";
+import PartsOrderLineBackorderButton from "../parts-order-line-backorder-button/parts-order-line-backorder-button.component";
+import PartsReceiveModalContainer from "../parts-receive-modal/parts-receive-modal.container";
+import PrintWrapper from "../print-wrapper/print-wrapper.component";
+
+const mapStateToProps = createStructuredSelector({
+  jobRO: selectJobReadOnly,
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setBillEnterContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "billEnter",
+      })
+    ),
+  setPartsReceiveContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "partsReceive",
+      })
+    ),
+  setTaskUpsertContext: (context) =>
+    dispatch(setModalContext({ context, modal: "taskUpsert" })),
+});
+
+export function PartsOrderListTableDrawerComponent({
+  setBillEnterContext,
+  bodyshop,
+  jobRO,
+  job,
+  billsQuery,
+  handleOnRowClick,
+  setPartsReceiveContext,
+  setTaskUpsertContext,
+}) {
+  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+    .filter((screen) => !!screen[1])
+    .slice(-1)[0];
+
+  const bpoints = {
+    xs: "100%",
+    sm: "100%",
+    md: "100%",
+    lg: "75%",
+    xl: "75%",
+    xxl: "65%",
+  };
+  const drawerPercentage = selectedBreakpoint
+    ? bpoints[selectedBreakpoint[0]]
+    : "100%";
+  const responsibilityCenters = bodyshop.md_responsibility_centers;
+  const Templates = TemplateList("partsorder", { job });
+
+  const { t } = useTranslation();
+  const [state, setState] = useState({
+    sortedInfo: {},
+  });
+
+  const [returnfrombill, setReturnFromBill] = useState();
+  const [billData, setBillData] = useState();
+  const search = queryString.parse(useLocation().search);
+  const selectedpartsorder = search.partsorderid;
+
+  const [billQuery] = useLazyQuery(QUERY_BILL_BY_PK);
+  const [deletePartsOrder] = useMutation(DELETE_PARTS_ORDER);
+  const parts_orders = billsQuery.data ? billsQuery.data.parts_orders : [];
+  const { refetch } = billsQuery;
+
+  useEffect(() => {
+    if (returnfrombill === null) {
+      setBillData(null);
+    } else {
+      const fetchData = async () => {
+        const result = await billQuery({
+          variables: { billid: returnfrombill },
+        });
+        setBillData(result.data);
+      };
+      fetchData();
+    }
+  }, [returnfrombill, billQuery]);
+
+  const recordActions = (record, showView = false) => (
+    <Space direction="horizontal" wrap>
+      {showView && (
+        <Button
+          onClick={() => {
+            if (record.returnfrombill) {
+              setReturnFromBill(record.returnfrombill);
+            } else {
+              setReturnFromBill(null);
+            }
+            handleOnRowClick(record);
+          }}
+        >
+          <EyeFilled />
+        </Button>
+      )}
+
+      <Button
+        disabled={
+          jobRO ||
+          record.return ||
+          record.vendor.id === bodyshop.inhousevendorid
+        }
+        onClick={() => {
+          logImEXEvent("parts_order_receive_bill");
+          setPartsReceiveContext({
+            actions: { refetch: refetch },
+            context: {
+              jobId: job.id,
+              job: job,
+              partsorderlines: record.parts_order_lines.map((pol) => {
+                return {
+                  joblineid: pol.job_line_id,
+                  id: pol.id,
+                  line_desc: pol.line_desc,
+                  quantity: pol.quantity,
+                  act_price: pol.act_price,
+                  oem_partno: pol.oem_partno,
+                };
+              }),
+            },
+          });
+        }}
+      >
+        {t("parts_orders.actions.receive")}
+      </Button>
+      <Button
+        title={t("tasks.buttons.create")}
+        onClick={() => {
+          setTaskUpsertContext({
+            context: {
+              jobid: job.id,
+              partsorderid: record.id,
+            },
+          });
+        }}
+      >
+        <FaTasks />
+      </Button>
+      <Popconfirm
+        title={t("parts_orders.labels.confirmdelete")}
+        disabled={jobRO}
+        onConfirm={async () => {
+          //Delete the parts return.!
+
+          await deletePartsOrder({
+            variables: { partsOrderId: record.id },
+            update(cache) {
+              cache.modify({
+                fields: {
+                  parts_orders(existingPartsOrders, { readField }) {
+                    return existingPartsOrders.filter(
+                      (billref) => record.id !== readField("id", billref)
+                    );
+                  },
+                },
+              });
+            },
+          });
+        }}
+      >
+        <Button disabled={jobRO}>
+          <DeleteFilled />
+        </Button>
+      </Popconfirm>
+      <FeatureWrapperComponent featureName="bills" noauth={() => null}>
+        <Button
+          disabled={
+            (jobRO ? !record.return : jobRO) ||
+            record.vendor.id === bodyshop.inhousevendorid
+          }
+          onClick={() => {
+            logImEXEvent("parts_order_receive_bill");
+
+            setBillEnterContext({
+              actions: { refetch: refetch },
+              context: {
+                job: job,
+                bill: {
+                  vendorid: record.vendor.id,
+                  is_credit_memo: record.return,
+                  billlines: record.parts_order_lines.map((pol) => {
+                    return {
+                      joblineid: pol.job_line_id || "noline",
+                      line_desc: pol.line_desc,
+                      quantity: pol.quantity,
+
+                      actual_price: pol.act_price,
+
+                      cost_center: pol.jobline?.part_type
+                        ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
+                          ? pol.jobline.part_type !== "PAE"
+                            ? pol.jobline.part_type
+                            : null
+                          : responsibilityCenters.defaults &&
+                            (responsibilityCenters.defaults.costs[
+                              pol.jobline.part_type
+                            ] ||
+                              null)
+                        : null,
+                    };
+                  }),
+                },
+              },
+            });
+          }}
+        >
+          {t("parts_orders.actions.receivebill")}
+        </Button>
+      </FeatureWrapperComponent>
+      <PrintWrapper
+        templateObject={{
+          name: record.return
+            ? Templates.parts_return_slip.key
+            : Templates.parts_order.key,
+          variables: { id: record.id },
+        }}
+        messageObject={{
+          subject: record.return
+            ? Templates.parts_return_slip.subject
+            : Templates.parts_order.subject,
+          to: record.vendor.email,
+        }}
+        id={job.id}
+      />
+    </Space>
+  );
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  const selectedPartsOrderRecord = parts_orders.find(
+    (r) => r.id === selectedpartsorder
+  );
+
+  const rowExpander = (record) => {
+    const columns = [
+      {
+        title: t("parts_orders.fields.line_desc"),
+        dataIndex: "line_desc",
+        key: "line_desc",
+        sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
+        sortOrder:
+          state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
+      },
+      {
+        title: t("parts_orders.fields.quantity"),
+        dataIndex: "quantity",
+        key: "quantity",
+        sorter: (a, b) => a.quantity - b.quantity,
+        sortOrder:
+          state.sortedInfo.columnKey === "quantity" && state.sortedInfo.order,
+      },
+      {
+        title: t("parts_orders.fields.act_price"),
+        dataIndex: "act_price",
+        key: "act_price",
+        sorter: (a, b) => a.act_price - b.act_price,
+        sortOrder:
+          state.sortedInfo.columnKey === "act_price" && state.sortedInfo.order,
+        render: (text, record) => (
+          <CurrencyFormatter>{record.act_price}</CurrencyFormatter>
+        ),
+      },
+      ...(selectedPartsOrderRecord && selectedPartsOrderRecord.return
+        ? [
+            {
+              title: t("parts_orders.fields.cost"),
+              dataIndex: "cost",
+              key: "cost",
+              sorter: (a, b) => a.cost - b.cost,
+              sortOrder:
+                state.sortedInfo.columnKey === "cost" && state.sortedInfo.order,
+              render: (text, record) => (
+                <CurrencyFormatter>{record.cost}</CurrencyFormatter>
+              ),
+            },
+          ]
+        : []),
+      {
+        title: t("parts_orders.fields.part_type"),
+        dataIndex: "part_type",
+        key: "part_type",
+        render: (text, record) =>
+          record.part_type
+            ? t(`joblines.fields.part_types.${record.part_type}`)
+            : null,
+      },
+      {
+        title: t("parts_orders.fields.oem_partno"),
+        dataIndex: "oem_partno",
+        key: "oem_partno",
+        sorter: (a, b) => alphaSort(a.oem_partno, b.oem_partno),
+        sortOrder:
+          state.sortedInfo.columnKey === "oem_partno" && state.sortedInfo.order,
+      },
+      {
+        title: t("parts_orders.fields.line_remarks"),
+        dataIndex: "line_remarks",
+        key: "line_remarks",
+      },
+      {
+        title: t("parts_orders.fields.status"),
+        dataIndex: "status",
+        key: "status",
+      },
+
+      ...(selectedPartsOrderRecord && selectedPartsOrderRecord.return
+        ? [
+            {
+              title: t("parts_orders.fields.cm_received"),
+              dataIndex: "cm_received",
+              key: "cm_received",
+              render: (text, record) => (
+                <PartsOrderCmReceived
+                  orderLineId={record.id}
+                  checked={record.cm_received}
+                  partsorderid={selectedPartsOrderRecord.id}
+                />
+              ),
+            },
+          ]
+        : []),
+      {
+        title: t("parts_orders.fields.backordered_on"),
+        dataIndex: "backordered_on",
+        key: "backordered_on",
+        render: (text, record) => <DateFormatter>{text}</DateFormatter>,
+      },
+      {
+        title: t("parts_orders.fields.backordered_eta"),
+        dataIndex: "backordered_eta",
+        key: "backordered_eta",
+        render: (text, record) => (
+          <PartsOrderBackorderEta
+            backordered_eta={record.backordered_eta}
+            disabled={jobRO}
+            partsOrderStatus={record.status}
+            partsLineId={record.id}
+            jobLineId={record.job_line_id}
+          />
+        ),
+      },
+
+      {
+        title: t("general.labels.actions"),
+        dataIndex: "actions",
+        key: "actions",
+        render: (text, record) => (
+          <Space wrap>
+            <PartsOrderDeleteLine
+              disabled={jobRO}
+              partsOrderStatus={record.status}
+              partsLineId={record.id}
+              partsOrderId={selectedpartsorder}
+              jobLineId={record.job_line_id}
+            />
+            <PartsOrderLineBackorderButton
+              disabled={jobRO}
+              partsOrderStatus={record.status}
+              partsLineId={record.id}
+              jobLineId={record.job_line_id}
+            />
+          </Space>
+        ),
+      },
+    ];
+
+    return (
+      <div>
+        <PageHeader
+          title={
+            billData
+              ? `${record.vendor.name} - ${record.order_number} - ${t(
+                  "bills.labels.returnfrombill"
+                )}: ${billData.bills_by_pk.invoice_number}`
+              : `${record.vendor.name} - ${record.order_number}`
+          }
+          extra={recordActions(record)}
+        />
+        <Table
+          scroll={{
+            x: true, //y: "50rem"
+          }}
+          columns={columns}
+          rowKey="id"
+          dataSource={record.parts_order_lines}
+          onChange={handleTableChange}
+        />
+        <DataLabel label={t("parts_orders.fields.comments")}>
+          <div style={{ whiteSpace: "pre" }}>{record.comments}</div>
+        </DataLabel>
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      <PartsReceiveModalContainer />
+      <Drawer
+        placement="right"
+        onClose={() => handleOnRowClick(null)}
+        open={selectedpartsorder}
+        closable
+        width={drawerPercentage}
+      >
+        {selectedPartsOrderRecord && rowExpander(selectedPartsOrderRecord)}
+      </Drawer>
+    </div>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PartsOrderListTableDrawerComponent);

client/src/components/parts-order-list-table/parts-order-list-table.component.jsx

@@ -1,40 +1,21 @@
 import { DeleteFilled, EyeFilled, SyncOutlined } from "@ant-design/icons";
-import { useLazyQuery, useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client";
-import {
+import { Button, Card, Checkbox, Input, Popconfirm, Space, Table } from "antd";
-  Button,
+import React, { useState } from "react";
-  Card,
-  Checkbox,
-  Drawer,
-  Grid,
-  Input,
-  PageHeader,
-  Popconfirm,
-  Space,
-  Table,
-} from "antd";
-import queryString from "query-string";
-import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
-import { QUERY_BILL_BY_PK } from "../../graphql/bills.queries";
 import { DELETE_PARTS_ORDER } from "../../graphql/parts-orders.queries";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
 import { alphaSort } from "../../utils/sorters";
-import DataLabel from "../data-label/data-label.component";
-import PartsOrderBackorderEta from "../parts-order-backorder-eta/parts-order-backorder-eta.component";
-import PartsOrderCmReceived from "../parts-order-cm-received/parts-order-cm-received.component";
-import PartsOrderDeleteLine from "../parts-order-delete-line/parts-order-delete-line.component";
-import PartsOrderLineBackorderButton from "../parts-order-line-backorder-button/parts-order-line-backorder-button.component";
 import PartsReceiveModalContainer from "../parts-receive-modal/parts-receive-modal.container";
 import PrintWrapper from "../print-wrapper/print-wrapper.component";
+import PartsOrderDrawer from "./parts-order-list-table-drawer.component";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -57,21 +38,6 @@ export function PartsOrderListTableComponent({
   handleOnRowClick,
   setPartsReceiveContext,
 }) {
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
-
-  const bpoints = {
-    xs: "100%",
-    sm: "100%",
-    md: "100%",
-    lg: "75%",
-    xl: "75%",
-    xxl: "65%",
-  };
-  const drawerPercentage = selectedBreakpoint
-    ? bpoints[selectedBreakpoint[0]]
-    : "100%";
   const responsibilityCenters = bodyshop.md_responsibility_centers;
   const Templates = TemplateList("partsorder", { job });
 
@@ -80,42 +46,17 @@ export function PartsOrderListTableComponent({
     sortedInfo: {},
   });
 
-  const [returnfrombill, setReturnFromBill] = useState();
-  const [billData, setBillData] = useState();
-  const search = queryString.parse(useLocation().search);
-  const selectedpartsorder = search.partsorderid;
   const [searchText, setSearchText] = useState("");
-
-  const [billQuery] = useLazyQuery(QUERY_BILL_BY_PK);
   const [deletePartsOrder] = useMutation(DELETE_PARTS_ORDER);
 
   const parts_orders = billsQuery.data ? billsQuery.data.parts_orders : [];
   const { refetch } = billsQuery;
 
-  useEffect(() => {
-    if (returnfrombill === null) {
-      setBillData(null);
-    } else {
-      const fetchData = async () => {
-        const result = await billQuery({
-          variables: { billid: returnfrombill },
-        });
-        setBillData(result.data);
-      };
-      fetchData();
-    }
-  }, [returnfrombill, billQuery]);
-
   const recordActions = (record, showView = false) => (
     <Space wrap>
       {showView && (
         <Button
           onClick={() => {
-            if (record.returnfrombill) {
-              setReturnFromBill(record.returnfrombill);
-            } else {
-              setReturnFromBill(null);
-            }
             handleOnRowClick(record);
           }}
         >
@@ -305,168 +246,6 @@ export function PartsOrderListTableComponent({
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
-  const selectedPartsOrderRecord = parts_orders.find(
-    (r) => r.id === selectedpartsorder
-  );
-
-  const rowExpander = (record) => {
-    const columns = [
-      {
-        title: t("parts_orders.fields.line_desc"),
-        dataIndex: "line_desc",
-        key: "line_desc",
-        sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
-        sortOrder:
-          state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
-      },
-      {
-        title: t("parts_orders.fields.quantity"),
-        dataIndex: "quantity",
-        key: "quantity",
-        sorter: (a, b) => a.quantity - b.quantity,
-        sortOrder:
-          state.sortedInfo.columnKey === "quantity" && state.sortedInfo.order,
-      },
-      {
-        title: t("parts_orders.fields.act_price"),
-        dataIndex: "act_price",
-        key: "act_price",
-        sorter: (a, b) => a.act_price - b.act_price,
-        sortOrder:
-          state.sortedInfo.columnKey === "act_price" && state.sortedInfo.order,
-        render: (text, record) => (
-          <CurrencyFormatter>{record.act_price}</CurrencyFormatter>
-        ),
-      },
-      ...(selectedPartsOrderRecord && selectedPartsOrderRecord.return
-        ? [
-            {
-              title: t("parts_orders.fields.cost"),
-              dataIndex: "cost",
-              key: "cost",
-              sorter: (a, b) => a.cost - b.cost,
-              sortOrder:
-                state.sortedInfo.columnKey === "cost" && state.sortedInfo.order,
-              render: (text, record) => (
-                <CurrencyFormatter>{record.cost}</CurrencyFormatter>
-              ),
-            },
-          ]
-        : []),
-      {
-        title: t("parts_orders.fields.part_type"),
-        dataIndex: "part_type",
-        key: "part_type",
-        render: (text, record) =>
-          record.part_type
-            ? t(`joblines.fields.part_types.${record.part_type}`)
-            : null,
-      },
-      {
-        title: t("parts_orders.fields.oem_partno"),
-        dataIndex: "oem_partno",
-        key: "oem_partno",
-        sorter: (a, b) => alphaSort(a.oem_partno, b.oem_partno),
-        sortOrder:
-          state.sortedInfo.columnKey === "oem_partno" && state.sortedInfo.order,
-      },
-      {
-        title: t("parts_orders.fields.line_remarks"),
-        dataIndex: "line_remarks",
-        key: "line_remarks",
-      },
-      {
-        title: t("parts_orders.fields.status"),
-        dataIndex: "status",
-        key: "status",
-      },
-
-      ...(selectedPartsOrderRecord && selectedPartsOrderRecord.return
-        ? [
-            {
-              title: t("parts_orders.fields.cm_received"),
-              dataIndex: "cm_received",
-              key: "cm_received",
-              render: (text, record) => (
-                <PartsOrderCmReceived
-                  orderLineId={record.id}
-                  checked={record.cm_received}
-                  partsorderid={selectedPartsOrderRecord.id}
-                />
-              ),
-            },
-          ]
-        : []),
-      {
-        title: t("parts_orders.fields.backordered_on"),
-        dataIndex: "backordered_on",
-        key: "backordered_on",
-        render: (text, record) => <DateFormatter>{text}</DateFormatter>,
-      },
-      {
-        title: t("parts_orders.fields.backordered_eta"),
-        dataIndex: "backordered_eta",
-        key: "backordered_eta",
-        render: (text, record) => (
-          <PartsOrderBackorderEta
-            backordered_eta={record.backordered_eta}
-            disabled={jobRO}
-            partsOrderStatus={record.status}
-            partsLineId={record.id}
-            jobLineId={record.job_line_id}
-          />
-        ),
-      },
-
-      {
-        title: t("general.labels.actions"),
-        dataIndex: "actions",
-        key: "actions",
-        render: (text, record) => (
-          <Space wrap>
-            <PartsOrderDeleteLine
-              disabled={jobRO}
-              partsOrderStatus={record.status}
-              partsLineId={record.id}
-              partsOrderId={selectedpartsorder}
-              jobLineId={record.job_line_id}
-            />
-            <PartsOrderLineBackorderButton
-              disabled={jobRO}
-              partsOrderStatus={record.status}
-              partsLineId={record.id}
-              jobLineId={record.job_line_id}
-            />
-          </Space>
-        ),
-      },
-    ];
-
-    return (
-      <div>
-        <PageHeader
-          title={
-            billData
-              ? `${record.vendor.name} - ${record.order_number} - ${t("bills.labels.returnfrombill")}: ${billData.bills_by_pk.invoice_number}`
-              : `${record.vendor.name} - ${record.order_number}`
-          }
-          extra={recordActions(record)}
-        />
-        <Table
-          scroll={{
-            x: true, //y: "50rem"
-          }}
-          columns={columns}
-          rowKey="id"
-          dataSource={record.parts_order_lines}
-        />
-        <DataLabel label={t("parts_orders.fields.comments")}>
-          <div style={{ whiteSpace: "pre" }}>{record.comments}</div>
-        </DataLabel>
-      </div>
-    );
-  };
-
   const filteredPartsOrders = parts_orders
     ? searchText === ""
       ? parts_orders
@@ -502,15 +281,12 @@ export function PartsOrderListTableComponent({
       }
     >
       <PartsReceiveModalContainer />
-      <Drawer
+      <PartsOrderDrawer
-        placement="right"
+        job={job}
-        onClose={() => handleOnRowClick(null)}
+        billsQuery={billsQuery}
-        visible={selectedpartsorder}
+        handleOnRowClick={handleOnRowClick}
-        closable
+        setPartsReceiveContext={setPartsReceiveContext}
-        width={drawerPercentage}
+      />
-      >
-        {selectedPartsOrderRecord && rowExpander(selectedPartsOrderRecord)}
-      </Drawer>
       <Table
         loading={billsQuery.loading}
         scroll={{

client/src/graphql/bills.queries.js

@@ -58,7 +58,7 @@ export const QUERY_ALL_BILLS_PAGINATED = gql`
   }
 `;
 
-export const QUERY_BILLS_BY_JOBID = gql`
+export const QUERY_PARTS_BILLS_BY_JOBID = gql`
   query QUERY_PARTS_BILLS_BY_JOBID($jobid: uuid!) {
     parts_orders(
       where: { jobid: { _eq: $jobid } }

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

@@ -8,6 +8,7 @@ import Icon, {
   SyncOutlined,
   ToolFilled,
 } from "@ant-design/icons";
+import { useQuery } from "@apollo/client";
 import {
   Button,
   Divider,
@@ -48,6 +49,7 @@ import JobsDocumentsLocalGallery from "../../components/jobs-documents-local-gal
 import JobNotesContainer from "../../components/jobs-notes/jobs-notes.container";
 import NoteUpsertModalComponent from "../../components/note-upsert-modal/note-upsert-modal.container";
 import ScheduleJobModalContainer from "../../components/schedule-job-modal/schedule-job-modal.container";
+import { QUERY_PARTS_BILLS_BY_JOBID } from "../../graphql/bills.queries.js";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -78,19 +80,49 @@ export function JobsDetailPage({
 }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
-  const history = useHistory();
   const [loading, setLoading] = useState(false);
   const search = queryString.parse(useLocation().search);
+  const history = useHistory();
 
   const formItemLayout = {
     layout: "vertical",
   };
 
+  const billsQuery = useQuery(QUERY_PARTS_BILLS_BY_JOBID, {
+    variables: { jobid: job.id },
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+  });
+
   useEffect(() => {
     //form.setFieldsValue(transormJobToForm(job));
     form.resetFields();
   }, [form, job]);
 
+  const handleBillOnRowClick = (record) => {
+    if (record) {
+      if (record.id) {
+        search.billid = record.id;
+        history.push({ search: queryString.stringify(search) });
+      }
+    } else {
+      delete search.billid;
+      history.push({ search: queryString.stringify(search) });
+    }
+  };
+
+  const handlePartsOrderOnRowClick = (record) => {
+    if (record) {
+      if (record.id) {
+        search.partsorderid = record.id;
+        history.push({ search: queryString.stringify(search) });
+      }
+    } else {
+      delete search.partsorderid;
+      history.push({ search: queryString.stringify(search) });
+    }
+  };
+
   //useKeyboardSaveShortcut(form.submit);
 
   const handleFinish = async (values) => {
@@ -286,6 +318,9 @@ export function JobsDetailPage({
             <JobsLinesContainer
               job={job}
               joblines={job.joblines}
+              billsQuery={billsQuery}
+              handleBillOnRowClick={handleBillOnRowClick}
+              handlePartsOrderOnRowClick={handlePartsOrderOnRowClick}
               refetch={refetch}
               form={form}
             />
@@ -322,7 +357,12 @@ export function JobsDetailPage({
             }
             key="partssublet"
           >
-            <JobsDetailPliContainer job={job} />
+            <JobsDetailPliContainer
+              job={job}
+              billsQuery={billsQuery}
+              handleBillOnRowClick={handleBillOnRowClick}
+              handlePartsOrderOnRowClick={handlePartsOrderOnRowClick}
+            />
           </Tabs.TabPane>
           <Tabs.TabPane
             tab={