feature/feature/IO-3554-Form-Row-Layout - Responsive overhaul

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

@@ -1,6 +1,6 @@
 import { BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined, SyncOutlined } from "@ant-design/icons";
 import { useQuery } from "@apollo/client/react";
-import { Button, Card, Grid, Input, Space, Table, Tooltip } from "antd";
+import { Button, Card, Input, Space, Tooltip } from "antd";
 import queryString from "query-string";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -16,6 +16,7 @@ import useLocalStorage from "../../utils/useLocalStorage";
 import AlertComponent from "../alert/alert.component";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { OwnerNameDisplayFunction } from "./../owner-name-display/owner-name-display.component";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 
@@ -28,7 +29,6 @@ const mapDispatchToProps = () => ({});
 export function JobsList({ bodyshop }) {
   const searchParams = queryString.parse(useLocation().search);
   const { selected } = searchParams;
-  const screens = Grid.useBreakpoint();
   const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
     variables: {
       statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"]
@@ -296,15 +296,6 @@ export function JobsList({ bodyshop }) {
     // },
   ];
 
-  const scrollMapper = {
-    xs: true,
-    sm: true,
-    md: true,
-    lg: "100%",
-    xl: "100%",
-    xxl: "100%"
-  };
-
   return (
     <Card
       id="active-jobs-list"
@@ -323,25 +314,13 @@ export function JobsList({ bodyshop }) {
         </Space>
       }
     >
-      <Table
+      <ResponsiveTable
         loading={loading}
         pagination={{ defaultPageSize: 50 }}
         columns={columns}
         rowKey="id"
         dataSource={jobs}
-        scroll={{
-          x: screens.xxl
-            ? scrollMapper.xxl
-            : screens.xl
-              ? scrollMapper.xl
-              : screens.lg
-                ? scrollMapper.lg
-                : screens.md
-                  ? scrollMapper.md
-                  : screens.sm
-                    ? scrollMapper.sm
-                    : scrollMapper.xs
-        }}
+        mobileColumnKeys={["ro_number", "owner", "status", "vehicle"]}
         rowSelection={{
           onSelect: (record) => {
             handleOnRowClick(record);