WIP Styling Changes

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

@@ -1,6 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
-import { Button, Input, Table } from "antd";
+import { Button, Card, Input, Space, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -11,7 +11,6 @@ import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { onlyUnique } from "../../utils/arrayHelper";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import PhoneFormatter from "../../utils/PhoneFormatter";
 import { alphaSort } from "../../utils/sorters";
 import AlertComponent from "../alert/alert.component";
 import StartChatButton from "../chat-open-button/chat-open-button.component";
@@ -130,14 +129,10 @@ export function JobsList({ bodyshop }) {
       dataIndex: "ownr_ph1",
       key: "ownr_ph1",
       ellipsis: true,
-      render: (text, record) => {
-        return record.ownr_ph1 ? (
-          <span>
-            <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
-            <StartChatButton phone={record.ownr_ph1} jobid={record.id} />
-          </span>
-        ) : null;
-      },
+      responsive: ["md"],
+      render: (text, record) => (
+        <StartChatButton phone={record.ownr_ph1} jobid={record.id} />
+      ),
     },
 
     {
@@ -160,9 +155,6 @@ export function JobsList({ bodyshop }) {
             })) ||
         [],
       onFilter: (value, record) => value.includes(record.status),
-      render: (text, record) => {
-        return record.status || t("general.labels.na");
-      },
     },
 
     {
@@ -188,28 +180,20 @@ export function JobsList({ bodyshop }) {
       title: t("vehicles.fields.plate_no"),
       dataIndex: "plate_no",
       key: "plate_no",
+      responsive: ["md"],
       sorter: (a, b) => alphaSort(a.plate_no, b.plate_no),
       sortOrder:
         state.sortedInfo.columnKey === "plate_no" && state.sortedInfo.order,
-      render: (text, record) => {
-        return record.plate_no ? record.plate_no : "";
-      },
     },
     {
       title: t("jobs.fields.clm_no"),
       dataIndex: "clm_no",
       key: "clm_no",
       ellipsis: true,
+      responsive: ["md"],
       sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
       sortOrder:
         state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
-      render: (text, record) => {
-        return record.clm_no ? (
-          <span>{record.clm_no}</span>
-        ) : (
-          t("general.labels.unknown")
-        );
-      },
     },
     {
       title: t("jobs.fields.ins_co_nm"),
@@ -224,68 +208,65 @@ export function JobsList({ bodyshop }) {
       sorter: (a, b) => a.clm_total - b.clm_total,
       sortOrder:
         state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
-      render: (text, record) => {
-        return record.clm_total ? (
-          <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
-        ) : (
-          t("general.labels.unknown")
-        );
-      },
-    },
-    {
-      title: t("jobs.fields.owner_owing"),
-      dataIndex: "owner_owing",
-      key: "owner_owing",
       render: (text, record) => (
-        <CurrencyFormatter>{record.owner_owing}</CurrencyFormatter>
+        <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
       ),
     },
+    // {
+    //   title: t("jobs.fields.owner_owing"),
+    //   dataIndex: "owner_owing",
+    //   key: "owner_owing",
+    //   responsive: ["md"],
+    //   render: (text, record) => (
+    //     <CurrencyFormatter>{record.owner_owing}</CurrencyFormatter>
+    //   ),
+    // },
   ];
 
   return (
-    <Table
-      loading={loading}
-      size="small"
-      pagination={false}
-      columns={columns}
-      rowKey="id"
-      dataSource={jobs}
-      style={{ height: "100%" }}
-      scroll={{ x: true }}
-      title={() => {
-        return (
-          <div className="imex-table-header">
-            <Button onClick={() => refetch()}>
-              <SyncOutlined />
-            </Button>
-            <Input.Search
-              className="imex-table-header__search"
-              placeholder={t("general.labels.search")}
-              onChange={(e) => {
-                setSearchText(e.target.value);
-              }}
-              value={searchText}
-              enterButton
-            />
-          </div>
-        );
-      }}
-      rowSelection={{
-        onSelect: (record) => {
-          handleOnRowClick(record);
-        },
-        selectedRowKeys: [selected],
-        type: "radio",
-      }}
-      onChange={handleTableChange}
-      onRow={(record, rowIndex) => {
-        return {
-          onClick: (event) => {
+    <Card
+      title={t("titles.bc.jobs-active")}
+      extra={
+        <Space wrap>
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
+          <Input.Search
+            placeholder={t("general.labels.search")}
+            onChange={(e) => {
+              setSearchText(e.target.value);
+            }}
+            value={searchText}
+            enterButton
+          />
+        </Space>
+      }
+    >
+      <Table
+        loading={loading}
+        size="small"
+        pagination={false}
+        columns={columns}
+        rowKey="id"
+        dataSource={jobs}
+        // scroll={{ x: true }}
+        rowSelection={{
+          onSelect: (record) => {
             handleOnRowClick(record);
           },
-        };
-      }}
-    />
+          selectedRowKeys: [selected],
+          type: "radio",
+        }}
+        onChange={handleTableChange}
+        onRow={(record, rowIndex) => {
+          return {
+            onClick: (event) => {
+              handleOnRowClick(record);
+            },
+          };
+        }}
+      />
+    </Card>
   );
 }