IO-1554 Paginate active jobs list.

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

@@ -1,6 +1,6 @@
 import { SyncOutlined, ExclamationCircleFilled } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
-import { Button, Card, Input, Space, Table } from "antd";
+import { Button, Card, Grid, Input, Space, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -22,7 +22,9 @@ const mapStateToProps = createStructuredSelector({
 export function JobsList({ bodyshop }) {
   const searchParams = queryString.parse(useLocation().search);
   const { selected } = searchParams;
-
+  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+    .filter((screen) => !!screen[1])
+    .slice(-1)[0];
   const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
     variables: {
       statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
@@ -115,6 +117,9 @@ export function JobsList({ bodyshop }) {
       title: t("jobs.fields.owner"),
       dataIndex: "owner",
       key: "owner",
+      ellipsis: true,
+
+      responsive: ["md"],
       sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
       sortOrder:
         state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
@@ -160,6 +165,8 @@ export function JobsList({ bodyshop }) {
       title: t("jobs.fields.status"),
       dataIndex: "status",
       key: "status",
+      ellipsis: true,
+
       sorter: (a, b) => alphaSort(a.status, b.status),
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
@@ -204,6 +211,8 @@ export function JobsList({ bodyshop }) {
       title: t("vehicles.fields.plate_no"),
       dataIndex: "plate_no",
       key: "plate_no",
+      ellipsis: true,
+
       responsive: ["md"],
       sorter: (a, b) => alphaSort(a.plate_no, b.plate_no),
       sortOrder:
@@ -228,11 +237,15 @@ export function JobsList({ bodyshop }) {
       dataIndex: "ins_co_nm",
       key: "ins_co_nm",
       ellipsis: true,
+      responsive: ["md"],
     },
     {
       title: t("jobs.fields.clm_total"),
       dataIndex: "clm_total",
       key: "clm_total",
+      responsive: ["md"],
+      ellipsis: true,
+
       sorter: (a, b) => a.clm_total - b.clm_total,
       sortOrder:
         state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
@@ -251,6 +264,15 @@ export function JobsList({ bodyshop }) {
     // },
   ];
 
+  const scrollMapper = {
+    xs: true,
+    sm: true,
+    md: true,
+    lg: "100%",
+    xl: "100%",
+    xxl: "100%",
+  };
+
   return (
     <Card
       title={t("titles.bc.jobs-active")}
@@ -272,11 +294,13 @@ export function JobsList({ bodyshop }) {
     >
       <Table
         loading={loading}
-        pagination={false}
+        pagination={{ defaultPageSize: 50 }}
         columns={columns}
         rowKey="id"
         dataSource={jobs}
-        // scroll={{ x: true }}
+        scroll={{
+          x: selectedBreakpoint ? scrollMapper[selectedBreakpoint[0]] : "100%",
+        }}
         rowSelection={{
           onSelect: (record) => {
             handleOnRowClick(record);