All CC screen improvements + date type changes. BOD-235 BOD-233

client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx

@@ -9,7 +9,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
     sortedInfo: {},
     filteredInfo: { text: "" },
   });
-
+  const [searchText, setSearchText] = useState("");
   const { t } = useTranslation();
 
   const columns = [
@@ -36,6 +36,17 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       dataIndex: "status",
       key: "status",
       sorter: (a, b) => alphaSort(a.status, b.status),
+      filters: [
+        {
+          text: t("courtesycars.status.in"),
+          value: "courtesycars.status.in",
+        },
+        {
+          text: t("courtesycars.status.out"),
+          value: "courtesycars.status.out",
+        },
+      ],
+      onFilter: (value, record) => value.includes(record.status),
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
       render: (text, record) => t(record.status),
@@ -64,17 +75,45 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       sortOrder:
         state.sortedInfo.columnKey === "model" && state.sortedInfo.order,
     },
+    {
+      title: t("courtesycars.fields.outwith"),
+      dataIndex: "outwith",
+      key: "outwith",
+      // sorter: (a, b) => alphaSort(a.model, b.model),
+      sortOrder:
+        state.sortedInfo.columnKey === "model" && state.sortedInfo.order,
+      render: (text, record) => (
+        <div>
+          {record.cccontracts.length === 1
+            ? record.cccontracts[0].job.ro_number
+            : null}
+        </div>
+      ),
+    },
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
+  const tableData = searchText
+    ? courtesycars.filter(
+        (c) =>
+          (c.fleetnumber || "")
+            .toLowerCase()
+            .includes(searchText.toLowerCase()) ||
+          (c.vin || "").toLowerCase().includes(searchText.toLowerCase()) ||
+          (c.year || "").toLowerCase().includes(searchText.toLowerCase()) ||
+          (c.make || "").toLowerCase().includes(searchText.toLowerCase()) ||
+          (c.model || "").toLowerCase().includes(searchText.toLowerCase()) ||
+          (t(c.status) || "").toLowerCase().includes(searchText.toLowerCase())
+      )
+    : courtesycars;
   return (
     <Table
       loading={loading}
       title={() => (
-        <div className='imex-table-header'>
+        <div className="imex-table-header">
           <Button onClick={() => refetch()}>
             <SyncOutlined />
           </Button>
@@ -82,21 +121,21 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
             <Button>{t("courtesycars.actions.new")}</Button>
           </Link>
           <Input.Search
-            className='imex-table-header__search'
+            className="imex-table-header__search"
             placeholder={t("general.labels.search")}
             onChange={(e) => {
-              //setSearchText(e.target.value);
+              setSearchText(e.target.value);
             }}
-            //value={searchText}
+            value={searchText}
             enterButton
           />
         </div>
       )}
-      size='small'
+      size="small"
       pagination={{ position: "top" }}
       columns={columns.map((item) => ({ ...item }))}
-      rowKey='id'
-      dataSource={courtesycars}
+      rowKey="id"
+      dataSource={tableData}
       onChange={handleTableChange}
     />
   );