UI fixes for manual job creation + owners pages + vehicles pages + all jobs BOD-155

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

@@ -1,4 +1,5 @@
-import { Input, Table } from "antd";
+import { SyncOutlined } from "@ant-design/icons";
+import { Button, Input, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -7,7 +8,7 @@ import { alphaSort } from "../../utils/sorters";
 export default function VehiclesListComponent({ loading, vehicles, refetch }) {
   const [state, setState] = useState({
     sortedInfo: {},
-    filteredInfo: { text: "" }
+    filteredInfo: { text: "" },
   });
 
   const { t } = useTranslation();
@@ -17,15 +18,13 @@ export default function VehiclesListComponent({ loading, vehicles, refetch }) {
       title: t("vehicles.fields.v_vin"),
       dataIndex: "v_vin",
       key: "v_vin",
-      // onFilter: (value, record) => record.ro_number.includes(value),
-      // filteredValue: state.filteredInfo.text || null,
       sorter: (a, b) => alphaSort(a.v_vin, b.v_vin),
       sortOrder:
         state.sortedInfo.columnKey === "v_vin" && state.sortedInfo.order,
 
       render: (text, record) => (
         <Link to={"/manage/vehicles/" + record.id}>{record.v_vin}</Link>
-      )
+      ),
     },
     {
       title: t("vehicles.fields.description"),
@@ -35,7 +34,7 @@ export default function VehiclesListComponent({ loading, vehicles, refetch }) {
         return (
           <span>{`${record.v_model_yr} ${record.v_make_desc} ${record.v_model_desc} ${record.v_color}`}</span>
         );
-      }
+      },
     },
     {
       title: t("vehicles.fields.plate_no"),
@@ -43,32 +42,40 @@ export default function VehiclesListComponent({ loading, vehicles, refetch }) {
       key: "plate",
       render: (text, record) => {
         return <span>{`${record.plate_st} | ${record.plate_no}`}</span>;
-      }
-    }
+      },
+    },
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
-  //TODO Implement searching & pagination
+
   return (
     <Table
       loading={loading}
       title={() => {
         return (
-          <Input.Search
-            placeholder="Search..."
-            onSearch={value => {
-              console.log(value);
-            }}
-            enterButton
-          />
+          <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);
+              }}
+              //vale={searchText}
+              enterButton
+            />
+          </div>
         );
       }}
-      size="small"
+      size='small'
       pagination={{ position: "top" }}
-      columns={columns.map(item => ({ ...item }))}
-      rowKey="id"
+      columns={columns}
+      rowKey='id'
+      scroll={{ x: true }}
       dataSource={vehicles}
       onChange={handleTableChange}
     />