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

client/src/components/jobs-ready-list/jobs-ready-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 { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -17,6 +17,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";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -25,7 +26,6 @@ const mapStateToProps = createStructuredSelector({
 export function JobsReadyList({ bodyshop }) {
   const searchParams = queryString.parse(useLocation().search);
   const { selected } = searchParams;
-  const screens = Grid.useBreakpoint();
 
   const readyStatuses = useMemo(() => {
     if (bodyshop.md_ro_statuses.ready_statuses) return bodyshop.md_ro_statuses.ready_statuses;
@@ -280,15 +280,6 @@ export function JobsReadyList({ bodyshop }) {
     // },
   ];
 
-  const scrollMapper = {
-    xs: true,
-    sm: true,
-    md: true,
-    lg: "100%",
-    xl: "100%",
-    xxl: "100%"
-  };
-
   return (
     <Card
       title={t("titles.bc.jobs-ready")}
@@ -307,25 +298,13 @@ export function JobsReadyList({ bodyshop }) {
         </Space>
       }
     >
-      <Table
+      <ResponsiveTable
         loading={loading}
         pagination={{ defaultPageSize: pageLimit }}
         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);