diff --git a/client/src/components/vendors-list/vendors-list.component.jsx b/client/src/components/vendors-list/vendors-list.component.jsx index 6fa9681a5..7335b60dc 100644 --- a/client/src/components/vendors-list/vendors-list.component.jsx +++ b/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"), - dataIndex: "street1", - key: "street1", + title: t("vendors.fields.phone"), + dataIndex: "phone", + 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 ( { return ( -
+
+ + + { + setSearchText(e.target.value); + }} + value={searchText} + enterButton + />
); }} 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", diff --git a/client/src/components/vendors-list/vendors-list.container.jsx b/client/src/components/vendors-list/vendors-list.container.jsx index a62017e7c..7b542ed90 100644 --- a/client/src/components/vendors-list/vendors-list.container.jsx +++ b/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 ; + if (error) return ; return ( ); } diff --git a/client/src/graphql/timetickets.queries.js b/client/src/graphql/timetickets.queries.js index 8e312815e..33f1f2e75 100644 --- a/client/src/graphql/timetickets.queries.js +++ b/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 } } diff --git a/client/src/graphql/vendors.queries.js b/client/src/graphql/vendors.queries.js index 976be68fc..feb4b5452 100644 --- a/client/src/graphql/vendors.queries.js +++ b/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 } } `;