Pagination Fix

Reversion

Approved-by: Allan Carr

client/src/components/inventory-list/inventory-list.container.jsx

@@ -11,6 +11,7 @@ import {
 } from "../../redux/application/application.actions";
 import AlertComponent from "../alert/alert.component";
 import InventoryListPaginated from "./inventory-list.component";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   //bodyshop: selectBodyshop,
@@ -32,8 +33,8 @@ export function InventoryList({ setBreadcrumbs, setSelectedHeader }) {
       nextFetchPolicy: "network-only",
       variables: {
         search: search || "",
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
         consumedIsNull: showall === "true" ? null : true,
         order: [
           {

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

@@ -29,7 +29,7 @@ export function JobsList({bodyshop,}) {
     const search = queryString.parse(useLocation().search);
     const [openSearchResults, setOpenSearchResults] = useState([]);
     const [searchLoading, setSearchLoading] = useState(false);
-    const {page, selected, sortorder, sortcolumn} = search;
+    const {page, selected, sortorder, sortcolumn,statusFilters} = search;
 
     const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
         .filter((screen) => !!screen[1])
@@ -38,8 +38,8 @@ export function JobsList({bodyshop,}) {
     const {loading, error, data, refetch} = useQuery(QUERY_ALL_ACTIVE_JOBS_PAGINATED, {
         variables: {
             offset: page ? (page - 1) * pageLimit : 0,
-            limit: 10,
-            statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
+            limit: pageLimit,
+            statusFilters: statusFilters ? JSON.parse(statusFilters) : bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
             order: [
                 {
                     [sortcolumn || "ro_number"]:
@@ -67,9 +67,6 @@ export function JobsList({bodyshop,}) {
     const jobs = data?.jobs || [];
 
     const handleTableChange = (pagination, filters, sorter) => {
-        // TODO: Is this needed?
-        setState({...state, filteredInfo: filters});
-
         search.page = pagination.current;
         search.sortcolumn = sorter.column && sorter.column.key;
         search.sortorder = sorter.order;
@@ -205,19 +202,13 @@ export function JobsList({bodyshop,}) {
             sorter: true,
             sortOrder:
                 sortcolumn === "status" && sortorder,
-            filters:
-                (jobs &&
-                    jobs
-                        .map((j) => j.status)
-                        .filter(onlyUnique)
-                        .map((s) => {
-                            return {
-                                text: s || "No Status*",
-                                value: [s],
-                            };
-                        })) ||
-                [],
+            filters:bodyshop.md_ro_statuses.statuses.map((s) => {
+                return { text: s, value: [s] };
+            }),
             onFilter: (value, record) => value.includes(record.status),
+            render: (text, record) => {
+                return record.status || t("general.labels.na");
+            },
         },
         {
             title: t("jobs.fields.vehicle"),
@@ -270,19 +261,20 @@ export function JobsList({bodyshop,}) {
             dataIndex: "ins_co_nm",
             key: "ins_co_nm",
             ellipsis: true,
-            filters:
-                (jobs &&
-                    jobs
-                        .map((j) => j.ins_co_nm)
-                        .filter(onlyUnique)
-                        .map((s) => {
-                            return {
-                                text: s,
-                                value: [s],
-                            };
-                        })) ||
-                [],
-            onFilter: (value, record) => value.includes(record.ins_co_nm),
+            // TODO: Restore Filters?
+            // filters:
+            //     (jobs &&
+            //         jobs
+            //             .map((j) => j.ins_co_nm)
+            //             .filter(onlyUnique)
+            //             .map((s) => {
+            //                 return {
+            //                     text: s,
+            //                     value: [s],
+            //                 };
+            //             })) ||
+            //     [],
+            // onFilter: (value, record) => value.includes(record.ins_co_nm),
             responsive: ["md"],
         },
         {
@@ -304,23 +296,24 @@ export function JobsList({bodyshop,}) {
             key: "jobs.labels.estimator",
             ellipsis: true,
             responsive: ["xl"],
-            filterSearch: true,
-            filters:
-                (jobs &&
-                    jobs
-                        .map((j) => `${j.est_ct_fn || ""} ${j.est_ct_ln || ""}`.trim())
-                        .filter(onlyUnique)
-                        .map((s) => {
-                            return {
-                                text: s || "N/A",
-                                value: [s],
-                            };
-                        })) ||
-                [],
-            onFilter: (value, record) =>
-                value.includes(
-                    `${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim()
-                ),
+            // TODO Restore Filters?
+            // filterSearch: true,
+            // filters:
+            //     (jobs &&
+            //         jobs
+            //             .map((j) => `${j.est_ct_fn || ""} ${j.est_ct_ln || ""}`.trim())
+            //             .filter(onlyUnique)
+            //             .map((s) => {
+            //                 return {
+            //                     text: s || "N/A",
+            //                     value: [s],
+            //                 };
+            //             })) ||
+            //     [],
+            // onFilter: (value, record) =>
+            //     value.includes(
+            //         `${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim()
+            //     ),
             render: (text, record) =>
                 `${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim(),
         },

client/src/components/owners-list/owners-list.container.jsx

@@ -5,6 +5,7 @@ import AlertComponent from "../alert/alert.component";
 import OwnersListComponent from "./owners-list.component";
 import queryString from "query-string";
 import { useLocation } from "react-router-dom";
+import {pageLimit} from "../../utils/config";
 
 export default function OwnersListContainer() {
   const searchParams = queryString.parse(useLocation().search);
@@ -16,8 +17,8 @@ export default function OwnersListContainer() {
       nextFetchPolicy: "network-only",
       variables: {
         search: search || "",
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
         order: [
           {
             [sortcolumn || "created_at"]: sortorder

client/src/components/vehicles-list/vehicles-list.container.jsx

@@ -5,6 +5,7 @@ import AlertComponent from "../alert/alert.component";
 import { QUERY_ALL_VEHICLES_PAGINATED } from "../../graphql/vehicles.queries";
 import queryString from "query-string";
 import { useLocation } from "react-router-dom";
+import {pageLimit} from "../../utils/config";
 
 export default function VehiclesListContainer() {
   const searchParams = queryString.parse(useLocation().search);
@@ -15,8 +16,8 @@ export default function VehiclesListContainer() {
     {
       variables: {
         search: search || "",
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
         order: [
           {
             [sortcolumn || "created_at"]: sortorder

client/src/graphql/jobs.queries.js

@@ -5,13 +5,13 @@ export const QUERY_ALL_ACTIVE_JOBS_PAGINATED = gql`
     $offset: Int
     $limit: Int
     $order: [jobs_order_by!]
-    $statuses: [String!]!, 
+    $statusFilters: [String!]!, 
     $isConverted: Boolean
   ) {
     jobs(
       offset: $offset
       limit: $limit
-      where: { status: { _in: $statuses }, converted: { _eq: $isConverted } }
+      where: { status: { _in: $statusFilters }, converted: { _eq: $isConverted } }
       order_by: $order
     ) {
       iouparent
@@ -52,7 +52,7 @@ export const QUERY_ALL_ACTIVE_JOBS_PAGINATED = gql`
       est_ct_fn
       est_ct_ln
     }
-    jobs_aggregate(where: { status: { _in: $statuses } }) {
+    jobs_aggregate(where: { status: { _in: $statusFilters } }) {
       aggregate {
         count(distinct: true)
       }

client/src/pages/bills/bills.page.container.jsx

@@ -13,6 +13,7 @@ import {
   setSelectedHeader,
 } from "../../redux/application/application.actions";
 import BillsPageComponent from "./bills.page.component";
+import {pageLimit} from "../../utils/config";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -38,8 +39,8 @@ export function BillsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
       fetchPolicy: "network-only",
       nextFetchPolicy: "network-only",
       variables: {
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
         order: [
           searchObj
             ? JSON.parse(searchObj)

client/src/pages/contracts/contracts.page.container.jsx

@@ -12,6 +12,7 @@ import {
   setSelectedHeader,
 } from "../../redux/application/application.actions";
 import ContractsPageComponent from "./contracts.page.component";
+import {pageLimit} from "../../utils/config";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -29,8 +30,8 @@ export function ContractsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
       nextFetchPolicy: "network-only",
       variables: {
         search: search || "",
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
         order: [
           {
             [sortcolumn || "start"]: sortorder

client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx

@@ -19,6 +19,7 @@ import NotFound from "../../components/not-found/not-found.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import queryString from "query-string";
 import { useLocation } from "react-router-dom";
+import {pageLimit} from "../../utils/config";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -41,8 +42,8 @@ export function CourtesyCarDetailPageContainer({
   const { loading, error, data } = useQuery(QUERY_CC_BY_PK, {
     variables: {
       id: ccId,
-      offset: page ? (page - 1) * 25 : 0,
-      limit: 25,
+      offset: page ? (page - 1) * pageLimit : 0,
+      limit: pageLimit,
       order: [
         {
           [sortcolumn || "start"]: sortorder

client/src/pages/export-logs/export-logs.page.component.jsx

@@ -30,8 +30,8 @@ export function ExportLogsPageComponent({ bodyshop }) {
       nextFetchPolicy: "network-only",
       variables: {
         search: search || "",
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
         order: [
           {
             [sortcolumn || "created_at"]: sortorder

client/src/pages/jobs-all/jobs-all.container.jsx

@@ -13,6 +13,7 @@ import {
   setBreadcrumbs,
   setSelectedHeader,
 } from "../../redux/application/application.actions";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   //bodyshop: selectBodyshop,
@@ -33,8 +34,8 @@ export function AllJobs({ setBreadcrumbs, setSelectedHeader }) {
       fetchPolicy: "network-only",
       nextFetchPolicy: "network-only",
       variables: {
-        offset: page ? (page - 1) * 10 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
         ...(statusFilters ? { statusList: JSON.parse(statusFilters) } : {}),
         order: [
           {

client/src/pages/payments-all/payments-all.container.page.jsx

@@ -14,6 +14,7 @@ import {
   setSelectedHeader,
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -34,8 +35,8 @@ export function AllJobs({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
       fetchPolicy: "network-only",
       nextFetchPolicy: "network-only",
       variables: {
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
         order: [
           searchObj
           ? JSON.parse(searchObj)

client/src/pages/phonebook/phonebook.page.component.jsx

@@ -36,8 +36,8 @@ export function PhonebookPageComponent({ bodyshop, authLevel }) {
       nextFetchPolicy: "network-only",
       variables: {
         search: search || "",
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
         order: [
           {
             [sortcolumn || "lastname"]: sortorder

client/src/pages/shop-csi/shop-csi.container.page.jsx

@@ -16,6 +16,7 @@ import {
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
+import {pageLimit} from "../../utils/config";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -42,8 +43,8 @@ export function ShopCsiContainer({
       nextFetchPolicy: "network-only",
       variables: {
         //search: search || "",
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
         order: [
           {
             [sortcolumn || "completedon"]: sortorder

client/src/utils/config.js

@@ -1,4 +1,4 @@
 
 // Sometimes referred to as PageSize, this variable controls the amount of records
 // to show on one page during pagination.
-export const pageLimit = 50;
+export const pageLimit = 10;