Add Global search to Active Jobs.

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

@@ -1,8 +1,8 @@
 import {BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined, SyncOutlined,} from "@ant-design/icons";
 import {useQuery} from "@apollo/client";
-import {Button, Card, Grid, Input, Space, Table, Tooltip} from "antd";
+import {Button, Card, Grid, Input, Space, Table, Tooltip, Typography} from "antd";
 import queryString from "query-string";
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import {useTranslation} from "react-i18next";
 import {connect} from "react-redux";
 import {Link, useHistory, useLocation} from "react-router-dom";
@@ -15,22 +15,27 @@ import AlertComponent from "../alert/alert.component";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import _ from "lodash";
+import { pageLimit } from '../../utils/config';
+import axios from "axios";
 
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop,
 });
 
+const mapDispatchToProps = () => ({
+});
+
 export function JobsList({bodyshop,}) {
-    const pageLimit = 10;
-    const searchParams = queryString.parse(useLocation().search);
-    const {page, selected, sortorder, sortcolumn} = searchParams;
-    console.dir({page, selected, sortorder, sortcolumn});
+    const search = queryString.parse(useLocation().search);
+    const [openSearchResults, setOpenSearchResults] = useState([]);
+    const [searchLoading, setSearchLoading] = useState(false);
+    const {page, selected, sortorder, sortcolumn} = search;
+
     const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
         .filter((screen) => !!screen[1])
         .slice(-1)[0];
 
     const {loading, error, data, refetch} = useQuery(QUERY_ALL_ACTIVE_JOBS_PAGINATED, {
-
         variables: {
             offset: page ? (page - 1) * pageLimit : 0,
             limit: 10,
@@ -58,34 +63,56 @@ export function JobsList({bodyshop,}) {
 
     const {t} = useTranslation();
     const history = useHistory();
-    const [searchText, setSearchText] = useState("");
-
-    if (error) return <AlertComponent message={error.message} type="error"/>;
 
     const jobs = data?.jobs || [];
 
     const handleTableChange = (pagination, filters, sorter) => {
+        // TODO: Is this needed?
         setState({...state, filteredInfo: filters});
 
-        searchParams.page = pagination.current;
-        searchParams.sortcolumn = sorter.column && sorter.column.key;
-        searchParams.sortorder = sorter.order;
+        search.page = pagination.current;
+        search.sortcolumn = sorter.column && sorter.column.key;
+        search.sortorder = sorter.order;
 
         if (filters.status) {
-            searchParams.statusFilters = JSON.stringify(_.flattenDeep(filters.status));
+            search.statusFilters = JSON.stringify(_.flattenDeep(filters.status));
         } else {
-            delete searchParams.statusFilters;
+            delete search.statusFilters;
         }
 
-        history.push({search: queryString.stringify(searchParams)});
+        history.push({search: queryString.stringify(search)});
     };
 
+    useEffect(() => {
+        if (search.search && search.search.trim() !== "") {
+            searchJobs();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    if (error) return <AlertComponent message={error.message} type="error"/>;
+
+    async function searchJobs(value) {
+        try {
+            setSearchLoading(true);
+            const searchData = await axios.post("/search", {
+                search: value || search.search,
+                index: "jobs",
+            });
+            setOpenSearchResults(searchData.data.hits.hits.map((s) => s._source));
+        } catch (error) {
+            console.log("Error while fetching search results", error);
+        } finally {
+            setSearchLoading(false);
+        }
+    }
+
     const handleOnRowClick = (record) => {
         if (record) {
             if (record.id) {
                 history.push({
                     search: queryString.stringify({
-                        ...searchParams,
+                        ...search,
                         selected: record.id,
                     }),
                 });
@@ -328,24 +355,42 @@ export function JobsList({bodyshop,}) {
             title={t("titles.bc.jobs-active")}
             extra={
                 <Space wrap>
+                    {search.search && (
+                        <>
+                            <Typography.Title level={4}>
+                                {t("general.labels.searchresults", { search: search.search })}
+                            </Typography.Title>
+                            <Button
+                                onClick={() => {
+                                    delete search.search;
+                                    delete search.page;
+                                    history.push({ search: queryString.stringify(search) });
+                                }}
+                            >
+                                {t("general.actions.clear")}
+                            </Button>
+                        </>
+                    )}
                     <Button onClick={() => refetch()}>
-                        <SyncOutlined/>
+                        <SyncOutlined />
                     </Button>
                     <Input.Search
-                        placeholder={t("general.labels.search")}
-                        onChange={(e) => {
-                            setSearchText(e.target.value);
+                        placeholder={search.search || t("general.labels.search")}
+                        onSearch={(value) => {
+                            search.search = value;
+                            history.push({ search: queryString.stringify(search) });
+                            searchJobs(value);
                         }}
-                        value={searchText}
+                        loading={loading || searchLoading}
                         enterButton
                     />
                 </Space>
             }
         >
             <Table
-                loading={loading}
+                loading={loading || searchLoading }
                 pagination={
-                    searchParams?.search
+                    search?.search
                         ? {
                             pageSize: pageLimit,
                             showSizeChanger: false,
@@ -360,7 +405,7 @@ export function JobsList({bodyshop,}) {
                 }
                 columns={columns}
                 rowKey="id"
-                dataSource={jobs}
+                dataSource={search?.search ? openSearchResults : jobs}
                 scroll={{
                     x: selectedBreakpoint ? scrollMapper[selectedBreakpoint[0]] : "100%",
                 }}
@@ -372,9 +417,9 @@ export function JobsList({bodyshop,}) {
                     type: "radio",
                 }}
                 onChange={handleTableChange}
-                onRow={(record, rowIndex) => {
+                onRow={(record) => {
                     return {
-                        onClick: (event) => {
+                        onClick: () => {
                             handleOnRowClick(record);
                         },
                     };
@@ -384,4 +429,4 @@ export function JobsList({bodyshop,}) {
     );
 }
 
-export default connect(mapStateToProps, null)(JobsList);
+export default connect(mapStateToProps, mapDispatchToProps)(JobsList);

client/src/utils/config.js

@@ -0,0 +1 @@
+export const pageLimit = 10;