UI Fixes on Job list page. Refactored form row component. BOD-155

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

@@ -1,24 +1,35 @@
-import { Button, Input, Table } from "antd";
 import { SyncOutlined } from "@ant-design/icons";
+import { useQuery } from "@apollo/react-hooks";
+import { Button, Input, Table } from "antd";
+import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, withRouter } from "react-router-dom";
+import { connect } from "react-redux";
+import { Link, useHistory, useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+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";
-import { useHistory } from "react-router-dom";
-import queryString from "query-string";
 
-export default withRouter(function JobsList({
-  searchTextState,
-  refetch,
-  loading,
-  jobs,
-  searchParams,
-}) {
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+export function JobsList({ bodyshop }) {
+  const searchParams = queryString.parse(useLocation().search);
   const { selected } = searchParams;
 
+  const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
+    variables: {
+      statuses: bodyshop.md_ro_statuses.open_statuses || ["Open", "Open*"],
+    },
+  });
+
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" },
@@ -26,7 +37,55 @@ export default withRouter(function JobsList({
 
   const { t } = useTranslation();
   const history = useHistory();
-  const setSearchText = searchTextState[1];
+  const [searchText, setSearchText] = useState("");
+
+  if (error) return <AlertComponent message={error.message} type='error' />;
+
+  const jobs = data
+    ? searchText === ""
+      ? data.jobs
+      : data.jobs.filter(
+          (j) =>
+            (j.ro_number || "")
+              .toString()
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (j.ownr_fn || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (j.ownr_ln || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (j.clm_no || "").toLowerCase().includes(searchText.toLowerCase()) ||
+            (j.plate_no || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (j.v_model_desc || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (j.v_make_desc || "")
+              .toLowerCase()
+              .includes(searchText.toLowerCase())
+        )
+    : [];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  const handleOnRowClick = (record) => {
+    if (record) {
+      if (record.id) {
+        history.push({
+          search: queryString.stringify({
+            ...searchParams,
+            selected: record.id,
+          }),
+        });
+      }
+    }
+  };
+
   const columns = [
     {
       title: t("jobs.fields.ro_number"),
@@ -91,6 +150,19 @@ export default withRouter(function JobsList({
       sorter: (a, b) => alphaSort(a.status, b.status),
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      filters:
+        (jobs &&
+          jobs
+            .map((j) => j.status)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || "No Status*",
+                value: [s],
+              };
+            })) ||
+        [],
+      onFilter: (value, record) => value.includes(record.status),
       render: (text, record) => {
         return record.status || t("general.labels.na");
       },
@@ -167,69 +239,51 @@ export default withRouter(function JobsList({
     },
   ];
 
-  const handleTableChange = (pagination, filters, sorter) => {
-    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
-  };
-
-  const handleOnRowClick = (record) => {
-    if (record) {
-      if (record.id) {
-        console.log("searchParams", searchParams);
-        history.push({
-          search: queryString.stringify({
-            ...searchParams,
-            selected: record.id,
-          }),
-        });
-      }
-    }
-  };
-
   return (
-    <div>
-      <Table
-        loading={loading}
-        title={() => {
-          return (
-            <div style={{ display: "flex" }}>
-              <Button onClick={() => refetch()}>
-                <SyncOutlined />
-              </Button>
-              <Input.Search
-                placeholder={t("general.labels.search")}
-                onChange={(e) => {
-                  setSearchText(e.target.value);
-                }}
-                enterButton
-              />
-            </div>
-          );
-        }}
-        size='small'
-        pagination={{ position: "top" }}
-        columns={columns.map((item) => ({ ...item }))}
-        rowKey='id'
-        dataSource={jobs}
-        rowSelection={{
-          onSelect: (record) => {
+    <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);
+              }}
+              vale={searchText}
+              enterButton
+            />
+          </div>
+        );
+      }}
+      rowSelection={{
+        onSelect: (record) => {
+          handleOnRowClick(record);
+        },
+        selectedRowKeys: [selected],
+        type: "radio",
+      }}
+      onChange={handleTableChange}
+      onRow={(record, rowIndex) => {
+        return {
+          onClick: (event) => {
             handleOnRowClick(record);
           },
-          selectedRowKeys: [selected],
-          type: "radio",
-        }}
-        onChange={handleTableChange}
-        onRow={(record, rowIndex) => {
-          return {
-            onClick: (event) => {
-              handleOnRowClick(record);
-            }, // click row
-            onDoubleClick: (event) => {}, // double click row
-            onContextMenu: (event) => {}, // right button click row
-            onMouseEnter: (event) => {}, // mouse enter row
-            onMouseLeave: (event) => {}, // mouse leave row
-          };
-        }}
-      />
-    </div>
+        };
+      }}
+    />
   );
-});
+}
+
+export default connect(mapStateToProps, null)(JobsList);