From 5c1a193af6398e14efb7e28ae41205e138aaff4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Madis=20V=C3=A4in?= Date: Mon, 8 Jul 2024 16:05:23 +0300 Subject: [PATCH] fix search, filtering & sorting --- README.md | 2 +- src-tauri/tauri.conf.json | 2 +- src/routes/clients.tsx | 21 ++++++++++++++++++--- src/routes/invoices/index.tsx | 30 ++++++++++++++++++++++-------- 4 files changed, 42 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 0966cff..665c79a 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ Happy to announce that I'm nearing the long overdue release of Upcount with impr NB! It's not backwards compatible with the current version and will require a new installation. The new version is currently in alpha and not recommended for production use. -## 🚀 [Upcount 2.0.0-alpha.1](https://github.com/madisvain/upcount/releases/tag/v2.0.0-alpha.1) +## 🚀 [Upcount 2.0.0-alpha.2](https://github.com/madisvain/upcount/releases/tag/v2.0.0-alpha.2) Source code can be found on [Tauri](https://github.com/madisvain/upcount/tree/tauri) branch of the repository. diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 0d3f1e5..a758406 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -8,7 +8,7 @@ }, "package": { "productName": "Upcount", - "version": "2.0.0-alpha.1" + "version": "2.0.0-alpha.2" }, "tauri": { "allowlist": { diff --git a/src/routes/clients.tsx b/src/routes/clients.tsx index 061a134..8952219 100644 --- a/src/routes/clients.tsx +++ b/src/routes/clients.tsx @@ -5,19 +5,24 @@ import { atom, useAtom, useAtomValue, useSetAtom } from "jotai"; import { Trans, t } from "@lingui/macro"; import { PhoneOutlined, TeamOutlined } from "@ant-design/icons"; import isEmpty from "lodash/isEmpty"; +import filter from "lodash/filter"; +import get from "lodash/get"; +import includes from "lodash/includes"; +import some from "lodash/some"; +import toString from "lodash/toString"; import { clientsAtom, setClientsAtom } from "src/atoms"; import ClientForm from "src/components/clients/form"; const { Title } = Typography; -const searchAtom = atom(""); +const searchAtom = atom(""); const Clients = () => { const location = useLocation(); const clients = useAtomValue(clientsAtom); const setClients = useSetAtom(setClientsAtom); - const [, setSearch] = useAtom(searchAtom); + const [search, setSearch] = useAtom(searchAtom); useEffect(() => { if (location.pathname === "/clients") { @@ -25,6 +30,15 @@ const Clients = () => { } }, [location]); + const searchClients = () => { + return filter(clients, (client: any) => { + return some(["name", "registration_number", "address", "emails", "phone", "vatin", "website"], (field) => { + const value = get(client, field); + return includes(toString(value).toLowerCase(), search.toLowerCase()); + }); + }); + }; + return ( <> @@ -47,10 +61,11 @@ const Clients = () => { - +
Name} key="name" + sorter={(a: any, b: any) => (a.name < b.name ? -1 : a.name === b.name ? 0 : 1)} render={(client) => ( {client.name} diff --git a/src/routes/invoices/index.tsx b/src/routes/invoices/index.tsx index d6563ad..63b3b37 100644 --- a/src/routes/invoices/index.tsx +++ b/src/routes/invoices/index.tsx @@ -6,6 +6,11 @@ import { FileTextOutlined } from "@ant-design/icons"; import { Trans, t } from "@lingui/macro"; import { useLingui } from "@lingui/react"; import dayjs from "dayjs"; +import filter from "lodash/filter"; +import get from "lodash/get"; +import includes from "lodash/includes"; +import some from "lodash/some"; +import toString from "lodash/toString"; import { invoicesAtom, setInvoicesAtom, organizationAtom } from "src/atoms"; import { getFormattedNumber } from "src/utils/currencies"; @@ -13,7 +18,7 @@ import InvoiceStateSelect from "src/components/invoices/state-select"; const { Title } = Typography; -const searchAtom = atom(""); +const searchAtom = atom(""); const stateFilter = [ { @@ -40,7 +45,7 @@ const Invoices = () => { const organization = useAtomValue(organizationAtom); const invoices = useAtomValue(invoicesAtom); const setInvoices = useSetAtom(setInvoicesAtom); - const [, setSearch] = useAtom(searchAtom); + const [search, setSearch] = useAtom(searchAtom); useEffect(() => { if (location.pathname === "/invoices") { @@ -48,6 +53,15 @@ const Invoices = () => { } }, [location]); + const searchInvoices = () => { + return filter(invoices, (invoice: any) => { + return some(["clientName", "number", "customerNotes", "total"], (field) => { + const value = get(invoice, field); + return includes(toString(value).toLowerCase(), search.toLowerCase()); + }); + }); + }; + return ( <> @@ -69,31 +83,31 @@ const Invoices = () => { -
+
Number} dataIndex="number" - sorter={(a: string, b: string) => (a < b ? -1 : a === b ? 0 : 1)} + sorter={(a: any, b: any) => (a.number < b.nuber ? -1 : a.number === b.number ? 0 : 1)} render={(number, invoice: any) => {number}} /> Client} dataIndex="clientName" - sorter={(a: string, b: string) => (a < b ? -1 : a === b ? 0 : 1)} + sorter={(a: any, b: any) => (a.clientName < b.clientName ? -1 : a.clientName === b.clientName ? 0 : 1)} render={(clientName) => (clientName ? clientName : "-")} /> Date} dataIndex="date" key="date" - sorter={(a: string, b: string) => dayjs(a).valueOf() - dayjs(b).valueOf()} + sorter={(a: any, b: any) => dayjs(a.date).valueOf() - dayjs(b.date).valueOf()} render={(date) => (date ? dayjs(date).format("L") : "-")} /> Due date} dataIndex="dueDate" key="dueDate" - sorter={(a: string, b: string) => dayjs(a).valueOf() - dayjs(b).valueOf()} + sorter={(a: any, b: any) => dayjs(a.dueDate).valueOf() - dayjs(b.dueDate).valueOf()} render={(date) => (date ? dayjs(date).format("L") : "-")} /> { dataIndex="total" key="total" align="right" - sorter={(a: number, b: number) => a - b} + sorter={(a: any, b: any) => a.total - b.total} render={(total, invoice: any) => getFormattedNumber(total, invoice.currency, i18n.locale, organization)} />