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

client/src/components/owners-list/owners-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";
@@ -8,7 +9,7 @@ import { alphaSort } from "../../utils/sorters";
 export default function OwnersListComponent({ loading, owners, refetch }) {
   const [state, setState] = useState({
     sortedInfo: {},
-    filteredInfo: { text: "" }
+    filteredInfo: { text: "" },
   });
 
   const { t } = useTranslation();
@@ -18,17 +19,14 @@ export default function OwnersListComponent({ loading, owners, refetch }) {
       title: t("owners.fields.name"),
       dataIndex: "name",
       key: "name",
-      // onFilter: (value, record) => record.ro_number.includes(value),
-      // filteredValue: state.filteredInfo.text || null,
       sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
       sortOrder:
         state.sortedInfo.columnKey === "name" && state.sortedInfo.order,
-
       render: (text, record) => (
         <Link to={"/manage/owners/" + record.id}>
           {`${record.ownr_fn} ${record.ownr_ln}`}
         </Link>
-      )
+      ),
     },
     {
       title: t("owners.fields.ownr_ph1"),
@@ -39,12 +37,12 @@ export default function OwnersListComponent({ loading, owners, refetch }) {
         state.sortedInfo.columnKey === "ownr_ph1" && state.sortedInfo.order,
       render: (text, record) => {
         return <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>;
-      }
+      },
     },
     {
       title: t("owners.fields.ownr_ea"),
       dataIndex: "ownr_ea",
-      key: "ownr_ea"
+      key: "ownr_ea",
     },
     {
       title: t("owners.fields.address"),
@@ -52,36 +50,43 @@ export default function OwnersListComponent({ loading, owners, refetch }) {
       key: "address",
       render: (text, record) => {
         return (
-          <div>{`${record.ownr_addr1 || ""} ${record.ownr_addr2 ||
-            ""} ${record.ownr_city || ""} ${record.ownr_st ||
-            ""} ${record.ownr_zip || ""}`}</div>
+          <div>{`${record.ownr_addr1 || ""} ${record.ownr_addr2 || ""} ${
+            record.ownr_city || ""
+          } ${record.ownr_st || ""} ${record.ownr_zip || ""}`}</div>
         );
-      }
-    }
+      },
+    },
   ];
 
   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={owners}
       onChange={handleTableChange}
     />

client/src/components/owners-list/owners-list.container.jsx

@@ -1,15 +1,15 @@
-import React from "react";
 import { useQuery } from "@apollo/react-hooks";
+import React from "react";
 import { QUERY_ALL_OWNERS } from "../../graphql/owners.queries";
 import AlertComponent from "../alert/alert.component";
 import OwnersListComponent from "./owners-list.component";
 
 export default function OwnersListContainer() {
   const { loading, error, data, refetch } = useQuery(QUERY_ALL_OWNERS, {
-    fetchPolicy: "network-only"
+    fetchPolicy: "network-only",
   });
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
   return (
     <OwnersListComponent
       loading={loading}