IO-828 Parts Queue Pagination

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}