Added vendor table filtering.

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

@@ -1,4 +1,5 @@
-import { Button, Table } from "antd";
+import { SyncOutlined } from "@ant-design/icons";
+import { Button, Input, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -10,6 +11,7 @@ export default function VendorsListComponent({
   loading,
   handleOnRowClick,
   vendors,
+  refetch,
 }) {
   const search = queryString.parse(useLocation().search);
   const { selectedvendor } = search;
@@ -18,7 +20,7 @@ export default function VendorsListComponent({
     sortedInfo: {},
     filteredInfo: { text: "" },
   });
-
+  const [searchText, setSearchText] = useState("");
   const { t } = useTranslation();
 
   const columns = [
@@ -39,13 +41,13 @@ export default function VendorsListComponent({
         state.sortedInfo.columnKey === "cost_center" && state.sortedInfo.order,
     },
     {
-      title: t("vendors.fields.street1"),
+      title: t("vendors.fields.phone"),
-      dataIndex: "street1",
+      dataIndex: "phone",
-      key: "street1",
+      key: "phone",
       width: "10%",
-      sorter: (a, b) => alphaSort(a.street1, b.street1),
+      sorter: (a, b) => alphaSort(a.phone, b.phone),
       sortOrder:
-        state.sortedInfo.columnKey === "street1" && state.sortedInfo.order,
+        state.sortedInfo.columnKey === "phone" && state.sortedInfo.order,
     },
     {
       title: t("vendors.fields.city"),
@@ -58,24 +60,51 @@ export default function VendorsListComponent({
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
+  const filteredVendors = vendors
+    ? searchText === ""
+      ? vendors
+      : vendors.filter(
+          (j) =>
+            (j.name || "")
+              .toString()
+              .toLowerCase()
+              .includes(searchText.toLowerCase()) ||
+            (j.phone || "").toLowerCase().includes(searchText.toLowerCase()) ||
+            (j.city || "").toLowerCase().includes(searchText.toLowerCase())
+        )
+    : [];
+
   return (
     <Table
       loading={loading}
       title={() => {
         return (
-          <div>
+          <div className="imex-table-header">
             <Button onClick={handleNewVendor}>
               {t("vendors.actions.new")}
             </Button>
+
+            <Button onClick={() => refetch()}>
+              <SyncOutlined />
+            </Button>
+            <Input.Search
+              className="imex-table-header__search"
+              placeholder={t("general.labels.search")}
+              onChange={(e) => {
+                setSearchText(e.target.value);
+              }}
+              value={searchText}
+              enterButton
+            />
           </div>
         );
       }}
       size="small"
       pagination={{ position: "top" }}
-      columns={columns.map((item) => ({ ...item }))}
+      columns={columns}
       rowKey="id"
       onChange={handleTableChange}
-      dataSource={vendors}
+      dataSource={filteredVendors}
       rowSelection={{
         onSelect: handleOnRowClick,
         type: "radio",

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

@@ -7,7 +7,7 @@ import queryString from "query-string";
 import { useHistory, useLocation } from "react-router-dom";
 
 export default function VendorsListContainer() {
-  const { loading, error, data } = useQuery(QUERY_ALL_VENDORS);
+  const { loading, error, data, refetch } = useQuery(QUERY_ALL_VENDORS);
   const search = queryString.parse(useLocation().search);
   const history = useHistory();
 
@@ -26,13 +26,14 @@ export default function VendorsListContainer() {
     }
   };
 
-  if (error) return <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
   return (
     <VendorsListComponent
       handleNewVendor={handleNewVendor}
       handleOnRowClick={handleOnRowClick}
       loading={loading}
       vendors={data ? data.vendors : null}
+      refetch={refetch}
     />
   );
 }

client/src/graphql/timetickets.queries.js

@@ -46,7 +46,6 @@ export const QUERY_TIME_TICKETS_IN_RANGE = gql`
         id
         employee_number
         first_name
-        cost_center
         last_name
       }
     }

client/src/graphql/vendors.queries.js

@@ -39,9 +39,9 @@ export const QUERY_ALL_VENDORS = gql`
     vendors(order_by: { name: asc }) {
       name
       id
-      street1
       cost_center
       city
+      phone
     }
   }
 `;