IO-828 Parts Queue Pagination

bodyshop_translations.babel

@@ -19828,6 +19828,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>deleteintake</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>deliverchecklist</name>
                                         <definition_loaded>false</definition_loaded>

client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx

@@ -178,7 +178,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
-    console.log("filters :>> ", filters);
     search.page = pagination.current;
     search.sortcolumn = sorter.columnKey;
     search.sortorder = sorter.order;

client/src/graphql/jobs.queries.js

@@ -53,7 +53,24 @@ export const QUERY_ALL_ACTIVE_JOBS = gql`
 `;
 
 export const QUERY_PARTS_QUEUE = gql`
-  query QUERY_PARTS_QUEUE($statuses: [String!]!) {
+  query QUERY_PARTS_QUEUE(
+    $statuses: [String!]!
+    $offset: Int
+    $limit: Int
+    $order: [jobs_order_by!]
+  ) {
+    jobs_aggregate(
+      where: {
+        _and: [
+          { status: { _in: $statuses } }
+          { queued_for_parts: { _eq: true } }
+        ]
+      }
+    ) {
+      aggregate {
+        count(distinct: true)
+      }
+    }
     jobs(
       where: {
         _and: [
@@ -61,17 +78,14 @@ export const QUERY_PARTS_QUEUE = gql`
           { queued_for_parts: { _eq: true } }
         ]
       }
-      order_by: { updated_at: asc }
+      offset: $offset
+      limit: $limit
+      order_by: $order
     ) {
       ownr_fn
       ownr_ln
       ownr_ph1
       ownr_ea
-      owner {
-        id
-        allow_text_message
-        preferred_contact
-      }
       plate_no
       plate_st
       v_vin
@@ -83,28 +97,13 @@ export const QUERY_PARTS_QUEUE = gql`
       actual_completion
       actual_delivery
       actual_in
-
       id
-      ins_co_nm
-      ins_ct_fn
-      ins_ct_ln
-      ins_ph1
-      ins_ea
-      est_co_nm
-      est_ph1
-      est_ea
-      est_ct_fn
-      est_ct_ln
       clm_no
       clm_total
       owner_owing
       ro_number
-      scheduled_completion
-      scheduled_in
-      scheduled_delivery
       status
       updated_at
-      ded_amt
       vehicleid
     }
   }

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

@@ -4,7 +4,7 @@ import { Button, Card, Input, Space, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import JobRemoveFromPartsQueue from "../../components/job-remove-from-parst-queue/job-remove-from-parts-queue.component";
@@ -14,23 +14,37 @@ import { onlyUnique } from "../../utils/arrayHelper";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { TimeAgoFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
+import { useLocation } from "react-router-dom";
+import queryString from "query-string";
+import _ from "lodash";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
 
 export function PartsQueuePageComponent({ bodyshop }) {
+  const searchParams = queryString.parse(useLocation().search);
+  const { page, sortcolumn, sortorder, statusFilters } = searchParams;
+  const history = useHistory();
+
   const { loading, error, data, refetch } = useQuery(QUERY_PARTS_QUEUE, {
     variables: {
-      statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
+      offset: page ? (page - 1) * 25 : 0,
+      limit: 25,
+      statuses: (statusFilters && JSON.parse(statusFilters)) ||
+        bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
+      order: sortcolumn && [
+        {
+          [sortcolumn || "updated_at"]: sortorder
+            ? sortorder === "descend"
+              ? "desc"
+              : "asc"
+            : "desc",
+        },
+      ],
     },
   });
 
-  const [state, setState] = useState({
-    sortedInfo: {},
-    filteredInfo: { text: "" },
-  });
-
   const { t } = useTranslation();
   const [searchText, setSearchText] = useState("");
 
@@ -68,7 +82,17 @@ export function PartsQueuePageComponent({ bodyshop }) {
     : [];
 
   const handleTableChange = (pagination, filters, sorter) => {
-    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+    searchParams.page = pagination.current;
+    searchParams.sortcolumn = sorter.columnKey;
+    searchParams.sortorder = sorter.order;
+    if (filters.status) {
+      searchParams.statusFilters = JSON.stringify(
+        _.flattenDeep(filters.status)
+      );
+    } else {
+      delete searchParams.statusFilters;
+    }
+    history.push({ search: queryString.stringify(searchParams) });
   };
 
   const columns = [
@@ -77,8 +101,7 @@ export function PartsQueuePageComponent({ bodyshop }) {
       dataIndex: "ro_number",
       key: "ro_number",
       sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
-      sortOrder:
-        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+      sortOrder: sortcolumn === "ro_number" && sortorder,
 
       render: (text, record) => (
         <Link to={"/manage/jobs/" + record.id}>
@@ -90,9 +113,8 @@ export function PartsQueuePageComponent({ bodyshop }) {
       title: t("jobs.fields.owner"),
       dataIndex: "owner",
       key: "owner",
-      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
-      sortOrder:
-        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
+      // sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
+      // sortOrder: sortcolumn === "owner" && sortorder,
       render: (text, record) => {
         return record.owner ? (
           <Link to={"/manage/owners/" + record.owner.id}>
@@ -112,8 +134,7 @@ export function PartsQueuePageComponent({ bodyshop }) {
       dataIndex: "status",
       key: "status",
       sorter: (a, b) => alphaSort(a.status, b.status),
-      sortOrder:
-        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      sortOrder: sortcolumn === "status" && sortorder,
       filters:
         (jobs &&
           jobs
@@ -156,8 +177,7 @@ export function PartsQueuePageComponent({ bodyshop }) {
       dataIndex: "plate_no",
       key: "plate_no",
       sorter: (a, b) => alphaSort(a.plate_no, b.plate_no),
-      sortOrder:
-        state.sortedInfo.columnKey === "plate_no" && state.sortedInfo.order,
+      sortOrder: sortcolumn === "plate_no" && sortorder,
       render: (text, record) => {
         return record.plate_no ? record.plate_no : "";
       },
@@ -168,8 +188,7 @@ export function PartsQueuePageComponent({ bodyshop }) {
       key: "clm_no",
       ellipsis: true,
       sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
-      sortOrder:
-        state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
+      sortOrder: sortcolumn === "clm_no" && sortorder,
       render: (text, record) => {
         return record.clm_no ? (
           <span>{record.clm_no}</span>
@@ -183,8 +202,7 @@ export function PartsQueuePageComponent({ bodyshop }) {
       dataIndex: "clm_total",
       key: "clm_total",
       sorter: (a, b) => a.clm_total - b.clm_total,
-      sortOrder:
-        state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
+      sortOrder: sortcolumn === "clm_total" && sortorder,
       render: (text, record) => {
         return record.clm_total ? (
           <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
@@ -232,7 +250,12 @@ export function PartsQueuePageComponent({ bodyshop }) {
     >
       <Table
         loading={loading}
-        pagination={false}
+        pagination={{
+          position: "top",
+          pageSize: 25,
+          current: parseInt(page || 1),
+          total: data && data.jobs_aggregate.aggregate.count,
+        }}
         columns={columns}
         rowKey="id"
         dataSource={jobs}

client/src/translations/en_us/common.json

@@ -1197,6 +1197,7 @@
 					"waived": "Waived"
 				},
 				"deleteconfirm": "Are you sure you want to delete this job? This cannot be undone. ",
+				"deleteintake": "Delete Intake",
 				"deliverchecklist": "Deliver Checklist",
 				"difference": "Difference",
 				"diskscan": "Scan Disk for Estimates",

client/src/translations/es/common.json

@@ -1197,6 +1197,7 @@
 					"waived": ""
 				},
 				"deleteconfirm": "",
+				"deleteintake": "",
 				"deliverchecklist": "",
 				"difference": "",
 				"diskscan": "",

client/src/translations/fr/common.json

@@ -1197,6 +1197,7 @@
 					"waived": ""
 				},
 				"deleteconfirm": "",
+				"deleteintake": "",
 				"deliverchecklist": "",
 				"difference": "",
 				"diskscan": "",