Merged in feature/IO-2630-Parts-Queue-Mods (pull request #1269)

Feature/IO-2630 Parts Queue Mods

Approved-by: Dave Richer

client/src/components/parts-queue-card/parts-queue-card.component.jsx

@@ -0,0 +1,77 @@
+import { useQuery } from "@apollo/client";
+import { Card, Divider, Drawer, Grid } from "antd";
+import queryString from "query-string";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useHistory, useLocation } from "react-router-dom";
+import { QUERY_PARTS_QUEUE_CARD_DETAILS } from "../../graphql/jobs.queries";
+import AlertComponent from "../alert/alert.component";
+import JobsDetailHeader from "../jobs-detail-header/jobs-detail-header.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import PartsQueueJobLinesComponent from "./parts-queue-job-lines.component";
+
+export default function PartsQueueDetailCard() {
+  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: "60%",
+  };
+  const drawerPercentage = selectedBreakpoint
+    ? bpoints[selectedBreakpoint[0]]
+    : "100%";
+
+  const searchParams = queryString.parse(useLocation().search);
+  const { selected } = searchParams;
+  const history = useHistory();
+  const { loading, error, data } = useQuery(QUERY_PARTS_QUEUE_CARD_DETAILS, {
+    variables: { id: selected },
+    skip: !selected,
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+  });
+
+  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 ? (
+        <Card
+          title={
+            <Link to={`/manage/jobs/${data.jobs_by_pk.id}`}>
+              {data.jobs_by_pk.ro_number || t("general.labels.na")}
+            </Link>
+          }
+        >
+          <JobsDetailHeader job={data ? data.jobs_by_pk : null} />
+          <Divider type="horizontal" />
+          <PartsQueueJobLinesComponent
+            jobLines={data.jobs_by_pk ? data.jobs_by_pk.joblines : null}
+          />
+        </Card>
+      ) : null}
+    </Drawer>
+  );
+}

client/src/components/parts-queue-card/parts-queue-job-lines.component.jsx

@@ -0,0 +1,208 @@
+import { Card, Table } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import { onlyUnique } from "../../utils/arrayHelper";
+import { alphaSort } from "../../utils/sorters";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  jobRO: selectJobReadOnly,
+});
+
+const mapDispatchToProps = (dispatch) => ({});
+
+export function PartsQueueJobLinesComponent({ jobRO, loading, jobLines }) {
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: {},
+  });
+  const { t } = useTranslation();
+
+  const columns = [
+    {
+      title: "#",
+      dataIndex: "line_no",
+      key: "line_no",
+      sorter: (a, b) => a.line_no - b.line_no,
+      sortOrder:
+        state.sortedInfo.columnKey === "line_no" && state.sortedInfo.order,
+    },
+    {
+      title: t("joblines.fields.line_desc"),
+      dataIndex: "line_desc",
+      key: "line_desc",
+      sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
+      onCell: (record) => ({
+        className: record.manual_line && "job-line-manual",
+        style: {
+          ...(record.critical ? { boxShadow: " -.5em 0 0 #FFC107" } : {}),
+        },
+      }),
+      sortOrder:
+        state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
+      ellipsis: true,
+    },
+    {
+      title: t("joblines.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,
+      ellipsis: true,
+      render: (text, record) =>
+        `${record.oem_partno || ""} ${
+          record.alt_partno ? `(${record.alt_partno})` : ""
+        }`.trim(),
+    },
+    {
+      title: t("joblines.fields.part_type"),
+      dataIndex: "part_type",
+      key: "part_type",
+      filteredValue: state.filteredInfo.part_type || null,
+      sorter: (a, b) => alphaSort(a.part_type, b.part_type),
+      sortOrder:
+        state.sortedInfo.columnKey === "part_type" && state.sortedInfo.order,
+      filters: [
+        {
+          text: t("jobs.labels.partsfilter"),
+          value: [
+            "PAN",
+            "PAC",
+            "PAR",
+            "PAL",
+            "PAA",
+            "PAM",
+            "PAP",
+            "PAS",
+            "PASL",
+            "PAG",
+          ],
+        },
+        {
+          text: t("joblines.fields.part_types.PAN"),
+          value: ["PAN"],
+        },
+        {
+          text: t("joblines.fields.part_types.PAP"),
+          value: ["PAP"],
+        },
+        {
+          text: t("joblines.fields.part_types.PAL"),
+          value: ["PAL"],
+        },
+        {
+          text: t("joblines.fields.part_types.PAA"),
+          value: ["PAA"],
+        },
+        {
+          text: t("joblines.fields.part_types.PAG"),
+          value: ["PAG"],
+        },
+        {
+          text: t("joblines.fields.part_types.PAS"),
+          value: ["PAS"],
+        },
+        {
+          text: t("joblines.fields.part_types.PASL"),
+          value: ["PASL"],
+        },
+        {
+          text: t("joblines.fields.part_types.PAC"),
+          value: ["PAC"],
+        },
+        {
+          text: t("joblines.fields.part_types.PAR"),
+          value: ["PAR"],
+        },
+        {
+          text: t("joblines.fields.part_types.PAM"),
+          value: ["PAM"],
+        },
+      ],
+      onFilter: (value, record) => value.includes(record.part_type),
+      render: (text, record) =>
+        record.part_type
+          ? t(`joblines.fields.part_types.${record.part_type}`)
+          : null,
+    },
+    {
+      title: t("joblines.fields.part_qty"),
+      dataIndex: "part_qty",
+      key: "part_qty",
+    },
+    {
+      title: t("joblines.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,
+      ellipsis: true,
+      render: (text, record) => (
+        <CurrencyFormatter>
+          {record.db_ref === "900510" || record.db_ref === "900511"
+            ? record.prt_dsmk_m
+            : record.act_price}
+        </CurrencyFormatter>
+      ),
+    },
+    {
+      title: t("joblines.fields.location"),
+      dataIndex: "location",
+      key: "location",
+    },
+    {
+      title: t("joblines.fields.status"),
+      dataIndex: "status",
+      key: "status",
+      sorter: (a, b) => alphaSort(a.status, b.status),
+      sortOrder:
+        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      filteredValue: state.filteredInfo.status || null,
+      filters:
+        (jobLines &&
+          jobLines
+            .map((l) => l.status)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || "No Status*",
+                value: [s],
+              };
+            })) ||
+        [],
+      onFilter: (value, record) => value.includes(record.status),
+    },
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState((state) => ({
+      ...state,
+      filteredInfo: filters,
+      sortedInfo: sorter,
+    }));
+  };
+
+  return (
+    <Card title={t("jobs.labels.parts_lines")}>
+      <Table
+        columns={columns}
+        rowKey="id"
+        loading={loading}
+        pagination={false}
+        dataSource={jobLines}
+        onChange={handleTableChange}
+      />
+    </Card>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PartsQueueJobLinesComponent);

client/src/components/parts-queue-list/parts-queue.list.component.jsx

@@ -8,30 +8,28 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import AlertComponent from "../../components/alert/alert.component";
-import JobPartsQueueCount from "../../components/job-parts-queue-count/job-parts-queue-count.component";
-import JobRemoveFromPartsQueue from "../../components/job-remove-from-parst-queue/job-remove-from-parts-queue.component";
-import OwnerNameDisplay from "../../components/owner-name-display/owner-name-display.component";
-import ProductionListColumnComment from "../../components/production-list-columns/production-list-columns.comment.component";
 import { QUERY_PARTS_QUEUE } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateTimeFormatter, TimeAgoFormatter } from "../../utils/DateFormatter";
+import { onlyUnique } from "../../utils/arrayHelper";
+import { pageLimit } from "../../utils/config";
 import { alphaSort, dateSort } from "../../utils/sorters";
 import useLocalStorage from "../../utils/useLocalStorage";
-import {pageLimit} from "../../utils/config";
+import AlertComponent from "../alert/alert.component";
+import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
+import JobRemoveFromPartsQueue from "../job-remove-from-parst-queue/job-remove-from-parts-queue.component";
+import OwnerNameDisplay, {
+  OwnerNameDisplayFunction,
+} from "../owner-name-display/owner-name-display.component";
+import ProductionListColumnComment from "../production-list-columns/production-list-columns.comment.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
 
-export function PartsQueuePageComponent({ bodyshop }) {
+export function PartsQueueListComponent({ bodyshop }) {
   const searchParams = queryString.parse(useLocation().search);
-  const {
+  const { selected, sortcolumn, sortorder, statusFilters } = searchParams;
-    //page,
-    sortcolumn,
-    sortorder,
-    statusFilters,
-  } = searchParams;
   const history = useHistory();
   const [filter, setFilter] = useLocalStorage("filter_parts_queue", null);
 
@@ -39,19 +37,8 @@ export function PartsQueuePageComponent({ bodyshop }) {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
     variables: {
-      // offset: page ? (page - 1) * 25 : 0,
-      // limit: 25,
       statuses: (statusFilters && JSON.parse(statusFilters)) ||
         bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
-      order: [
-        {
-          [sortcolumn || "ro_number"]: sortorder
-            ? sortorder === "descend"
-              ? "desc"
-              : "asc"
-            : "desc",
-        },
-      ],
     },
   });
 
@@ -107,6 +94,19 @@ export function PartsQueuePageComponent({ bodyshop }) {
     history.push({ search: queryString.stringify(searchParams) });
   };
 
+  const handleOnRowClick = (record) => {
+    if (record) {
+      if (record.id) {
+        history.push({
+          search: queryString.stringify({
+            ...searchParams,
+            selected: record.id,
+          }),
+        });
+      }
+    }
+  };
+
   const columns = [
     {
       title: t("jobs.fields.ro_number"),
@@ -125,7 +125,8 @@ export function PartsQueuePageComponent({ bodyshop }) {
       title: t("jobs.fields.owner"),
       dataIndex: "ownr_ln",
       key: "ownr_ln",
-      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
+      sorter: (a, b) =>
+        alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
       sortOrder: sortcolumn === "ownr_ln" && sortorder,
       render: (text, record) => {
         return record.ownerid ? (
@@ -139,6 +140,56 @@ export function PartsQueuePageComponent({ bodyshop }) {
         );
       },
     },
+    {
+      title: t("jobs.fields.vehicle"),
+      dataIndex: "vehicle",
+      key: "vehicle",
+      ellipsis: true,
+      sorter: (a, b) =>
+        alphaSort(
+          `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${
+            a.v_model_desc || ""
+          }`,
+          `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
+        ),
+      sortOrder: sortcolumn === "vehicle" && sortorder,
+      render: (text, record) => {
+        return record.vehicleid ? (
+          <Link to={"/manage/vehicles/" + record.vehicleid}>
+            {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+              record.v_model_desc || ""
+            }`}
+          </Link>
+        ) : (
+          <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+            record.v_model_desc || ""
+          }`}</span>
+        );
+      },
+    },
+    {
+      title: t("jobs.fields.ins_co_nm_short"),
+      dataIndex: "ins_co_nm",
+      key: "ins_co_nm",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.ins_co_nm, b.ins_co_nm),
+      sortOrder: sortcolumn === "ins_co_nm" && sortorder,
+      filteredValue: filter?.ins_co_nm || null,
+      filters:
+        (jobs &&
+          jobs
+            .map((j) => j.ins_co_nm)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || "No Ins. Co.*",
+                value: [s],
+              };
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
+        [],
+      onFilter: (value, record) => value.includes(record.ins_co_nm),
+    },
     {
       title: t("jobs.fields.status"),
       dataIndex: "status",
@@ -170,23 +221,16 @@ export function PartsQueuePageComponent({ bodyshop }) {
       ),
     },
     {
-      title: t("jobs.fields.vehicle"),
+      title: t("jobs.fields.scheduled_completion"),
-      dataIndex: "vehicle",
+      dataIndex: "scheduled_completion",
-      key: "vehicle",
+      key: "scheduled_completion",
       ellipsis: true,
-      render: (text, record) => {
+      sorter: (a, b) =>
-        return record.vehicleid ? (
+        dateSort(a.scheduled_completion, b.scheduled_completion),
-          <Link to={"/manage/vehicles/" + record.vehicleid}>
+      sortOrder: sortcolumn === "scheduled_completion" && sortorder,
-            {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+      render: (text, record) => (
-              record.v_model_desc || ""
+        <DateTimeFormatter>{record.scheduled_completion}</DateTimeFormatter>
-            }`}
+      ),
-          </Link>
-        ) : (
-          <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
-            record.v_model_desc || ""
-          }`}</span>
-        );
-      },
     },
     // {
     //   title: t("vehicles.fields.plate_no"),
@@ -198,14 +242,6 @@ export function PartsQueuePageComponent({ bodyshop }) {
     //     return record.plate_no ? record.plate_no : "";
     //   },
     // },
-    {
-      title: t("jobs.fields.clm_no"),
-      dataIndex: "clm_no",
-      key: "clm_no",
-      ellipsis: true,
-      sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
-      sortOrder: sortcolumn === "clm_no" && sortorder,
-    },
     // {
     //   title: t("jobs.fields.clm_total"),
     //   dataIndex: "clm_total",
@@ -307,9 +343,16 @@ export function PartsQueuePageComponent({ bodyshop }) {
         style={{ height: "100%" }}
         scroll={{ x: true }}
         onChange={handleTableChange}
+        rowSelection={{
+          onSelect: (record) => {
+            handleOnRowClick(record);
+          },
+          selectedRowKeys: [selected],
+          type: "radio",
+        }}
       />
     </Card>
   );
 }
 
-export default connect(mapStateToProps, null)(PartsQueuePageComponent);
+export default connect(mapStateToProps, null)(PartsQueueListComponent);

client/src/graphql/jobs.queries.js

@@ -108,12 +108,7 @@ export const QUERY_ALL_ACTIVE_JOBS = gql`
 `;
 
 export const QUERY_PARTS_QUEUE = gql`
-  query QUERY_PARTS_QUEUE(
+  query QUERY_PARTS_QUEUE($statuses: [String!]!, $offset: Int, $limit: Int) {
-    $statuses: [String!]!
-    $offset: Int
-    $limit: Int
-    $order: [jobs_order_by!]
-  ) {
     jobs_aggregate(where: { _and: [{ status: { _in: $statuses } }] }) {
       aggregate {
         count(distinct: true)
@@ -125,7 +120,7 @@ export const QUERY_PARTS_QUEUE = gql`
       }
       offset: $offset
       limit: $limit
-      order_by: $order
+      order_by: { ro_number: desc }
     ) {
       ownr_fn
       ownr_ln
@@ -142,7 +137,9 @@ export const QUERY_PARTS_QUEUE = gql`
       v_color
       vehicleid
       scheduled_in
+      scheduled_completion
       id
+      ins_co_nm
       clm_no
       ro_number
       status
@@ -2338,3 +2335,166 @@ export const MARK_JOB_AS_UNINVOICED = gql`
     }
   }
 `;
+
+export const QUERY_PARTS_QUEUE_CARD_DETAILS = gql`
+  query QUERY_JOB_CARD_DETAILS($id: uuid!) {
+    jobs_by_pk(id: $id) {
+      actual_completion
+      actual_delivery
+      actual_in
+      alt_transport
+      available_jobs {
+        id
+      }
+      area_of_damage
+      ca_gst_registrant
+      cccontracts {
+        agreementnumber
+        courtesycar {
+          id
+          make
+          model
+          year
+          plate
+          fleetnumber
+        }
+        id
+        scheduledreturn
+        start
+        status
+      }
+      clm_no
+      clm_total
+      comment
+      date_estimated
+      date_exported
+      date_invoiced
+      date_last_contacted
+      date_next_contact
+      date_open
+      date_repairstarted
+      date_scheduled
+      ded_amt
+      employee_body
+      employee_body_rel {
+        id
+        first_name
+        last_name
+      }
+      employee_csr
+      employee_csr_rel {
+        id
+        first_name
+        last_name
+      }
+      employee_prep
+      employee_prep_rel {
+        id
+        first_name
+        last_name
+      }
+      employee_refinish
+      employee_refinish_rel {
+        id
+        first_name
+        last_name
+      }
+      est_co_nm
+      est_ct_fn
+      est_ct_ln
+      est_ea
+      est_ph1
+      id
+      ins_co_nm
+      ins_ct_fn
+      ins_ct_ln
+      ins_ea
+      ins_ph1
+      inproduction
+      job_totals
+      joblines(
+        order_by: { line_no: asc }
+        where: {
+          act_price: { _neq: 0 }
+          part_type: {
+            _in: [
+              "PAN"
+              "PAC"
+              "PAR"
+              "PAL"
+              "PAA"
+              "PAM"
+              "PAP"
+              "PAS"
+              "PASL"
+              "PAG"
+            ]
+          }
+          removed: { _eq: false }
+        }
+      ) {
+        act_price
+        alt_partno
+        db_ref
+        id
+        line_desc
+        line_no
+        location
+        mod_lbr_ty
+        mod_lb_hrs
+        oem_partno
+        part_qty
+        part_type
+        prt_dsmk_m
+        status
+      }
+      lbr_adjustments
+      ownr_co_nm
+      ownr_ea
+      ownr_fn
+      ownr_ln
+      ownr_ph1
+      ownr_ph2
+      owner {
+        id
+        allow_text_message
+        preferred_contact
+        tax_number
+      }
+      owner_owing
+      plate_no
+      plate_st
+      po_number
+      production_vars
+      ro_number
+      scheduled_completion
+      scheduled_delivery
+      scheduled_in
+      special_coverage_policy
+      status
+      suspended
+      updated_at
+      vehicle {
+        id
+        jobs {
+          id
+          clm_no
+          ro_number
+        }
+        notes
+        plate_no
+        v_color
+        v_make_desc
+        v_model_desc
+        v_model_yr
+      }
+      vehicleid
+      v_color
+      v_make_desc
+      v_model_desc
+      v_model_yr
+      v_vin
+      voided
+    }
+  }
+`;

client/src/pages/parts-queue/parts-queue.page.container.jsx

@@ -1,12 +1,13 @@
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import PartsQueueDetailCard from "../../components/parts-queue-card/parts-queue-card.component";
+import PartsQueueList from "../../components/parts-queue-list/parts-queue.list.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import {
   setBreadcrumbs,
   setSelectedHeader,
 } from "../../redux/application/application.actions";
-import PartsQueuePage from "./parts-queue.page.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -26,7 +27,8 @@ export function PartsQueuePageContainer({ setBreadcrumbs, setSelectedHeader }) {
 
   return (
     <RbacWrapper action="jobs:partsqueue">
-      <PartsQueuePage />
+      <PartsQueueList />
+      <PartsQueueDetailCard />
     </RbacWrapper>
   );
 }

client/src/translations/en_us/common.json

@@ -1829,6 +1829,7 @@
 				"override_header": "Override estimate header on import?",
 				"ownerassociation": "Owner Association",
 				"parts": "Parts",
+				"parts_lines": "Parts Lines",
 				"parts_received": "Parts Rec.",
 				"parts_tax_rates": "Parts Tax rates",
 				"partsfilter": "Parts Only",

client/src/translations/es/common.json

@@ -1829,6 +1829,7 @@
 				"override_header": "¿Anular encabezado estimado al importar?",
 				"ownerassociation": "",
 				"parts": "Partes",
+				"parts_lines": "",
 				"parts_received": "",
 				"parts_tax_rates": "",
 				"partsfilter": "",

client/src/translations/fr/common.json

@@ -1829,6 +1829,7 @@
 				"override_header": "Remplacer l'en-tête d'estimation à l'importation?",
 				"ownerassociation": "",
 				"parts": "les pièces",
+				"parts_lines": "",
 				"parts_received": "",
 				"parts_tax_rates": "",
 				"partsfilter": "",