fix search, filtering & sorting

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.
 

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": {

src/routes/clients.tsx

@@ -5,26 +5,40 @@ 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<string>("");
 
 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") {
       setClients();
     }
   }, [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 (
     <>
       <Row>
@@ -47,10 +61,11 @@ const Clients = () => {
       </Row>
       <Row>
         <Col span={24}>
-          <Table dataSource={clients} pagination={false} rowKey="id">
+          <Table dataSource={search ? searchClients() : clients} pagination={false} rowKey="id">
             <Table.Column
               title={<Trans>Name</Trans>}
               key="name"
+              sorter={(a: any, b: any) => (a.name < b.name ? -1 : a.name === b.name ? 0 : 1)}
               render={(client) => (
                 <Link to={`/clients`} state={{ clientModal: true, clientId: client.id }}>
                   {client.name}

src/routes/invoices/index.tsx

@@ -6,14 +6,19 @@ 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";
 import InvoiceStateSelect from "src/components/invoices/state-select";
 
 const { Title } = Typography;
 
-const searchAtom = atom("");
+const searchAtom = atom<string>("");
 
 const stateFilter = [
   {
@@ -40,14 +45,23 @@ 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") {
       setInvoices();
     }
   }, [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 (
     <>
       <Row>
@@ -69,39 +83,39 @@ const Invoices = () => {
         </Col>
       </Row>
 
-      <Table dataSource={invoices} pagination={false} rowKey="id">
+      <Table dataSource={search ? searchInvoices() : invoices} pagination={false} rowKey="id">
         <Table.Column
           title={<Trans>Number</Trans>}
           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) => <Link to={`/invoices/${invoice.id}`}>{number}</Link>}
         />
         <Table.Column
           title={<Trans>Client</Trans>}
           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 : "-")}
         />
         <Table.Column
           title={<Trans>Date</Trans>}
           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") : "-")}
         />
         <Table.Column
           title={<Trans>Due date</Trans>}
           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") : "-")}
         />
         <Table.Column
           title={<Trans>Total</Trans>}
           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)}
         />
         <Table.Column