feat: Payee autocomplete

kajyr · Jan 18, 2022 · bfec3eb · bfec3eb
1 parent 94ef0bf
commit bfec3eb
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/frontend/src/pages/dashboard/entry-row.tsx b/frontend/src/pages/dashboard/entry-row.tsx
@@ -22,7 +22,6 @@ const useStyles = createStyles((theme) => {
 });
 
 const EntryRow: FC<{
-  accounts: string[];
   amountPlaceholder: string | null;
   canDelete: boolean;
   commodities: string[];
@@ -32,7 +31,6 @@ const EntryRow: FC<{
   suggestedCommodity: string | undefined;
   updateRow: (field: string, value: string) => void;
 }> = ({
-  accounts,
   amountPlaceholder,
   canDelete,
   commodities,

diff --git a/frontend/src/pages/dashboard/index.tsx b/frontend/src/pages/dashboard/index.tsx
@@ -178,7 +178,6 @@ const Dashboard: FC<{ journal: Api.BootstrapResponse }> = ({ journal }) => {
           {values.entries.map((entry, i) => (
             <EntryRow
               description={values.description}
-              accounts={journal.accounts}
               canDelete={i !== 0}
               commodities={journal.commodities}
               entry={entry}
@@ -190,7 +189,7 @@ const Dashboard: FC<{ journal: Api.BootstrapResponse }> = ({ journal }) => {
             />
           ))}
           <PaymentAccount
-            accounts={journal.accounts}
+            description={values.description}
             value={values.payingAccount}
             onChange={(value) => setFieldValue("payingAccount", value)}
           />

diff --git a/frontend/src/pages/dashboard/payment-acct-row.tsx b/frontend/src/pages/dashboard/payment-acct-row.tsx
@@ -2,7 +2,9 @@ import React, { FC } from 'react';
 
 import getAssets from 'helpers/get-assets';
 
-import { Autocomplete, createStyles, Group } from '@mantine/core';
+import AsyncAutocomplete from 'atoms/async-autocomplete';
+
+import { createStyles, Group } from '@mantine/core';
 
 const useStyles = createStyles((theme) => {
   return {
@@ -20,18 +22,25 @@ const useStyles = createStyles((theme) => {
 });
 
 const PaymentAccount: FC<{
-  accounts: string[];
-  value?: string;
+  description: string | undefined;
   onChange: (value: string) => void;
-}> = ({ accounts, value, onChange }) => {
+  value?: string;
+}> = ({ value, onChange, description }) => {
   const { classes } = useStyles();
+
+  const params = ["sort=assets"];
+  if (description) {
+    params.push(`description=${description}`);
+  }
+
   return (
     <Group className={classes.wrapper}>
-      <Autocomplete
+      <AsyncAutocomplete
         label="Paying account"
+        params={params.join("&")}
         placeholder="Account"
         value={value || ""}
-        data={accounts}
+        endpoint="/api/s/account"
         style={{ flex: 1 }}
         filter={(value, item) =>
           item.value.toLowerCase().includes(value.toLowerCase().trim())