Load the list of movements on webui

moneymgr_web/src/api/MovementsApi.ts

@@ -13,6 +13,18 @@ export interface MovementUpdate {
   checked: boolean;
 }
 
+export interface Movement {
+  id: number;
+  account_id: number;
+  time: number;
+  label: string;
+  file_id?: number;
+  amount: number;
+  checked: boolean;
+  time_create: number;
+  time_update: number;
+}
+
 export class MovementApi {
   /**
    * Get all accounts balances
@@ -36,4 +48,16 @@ export class MovementApi {
       jsonData: q,
     });
   }
+
+  /**
+   * Get all the movements of an account
+   */
+  static async GetAccountMovements(account_id: number): Promise<Movement[]> {
+    return (
+      await APIClient.exec({
+        uri: `/account/${account_id}/movements`,
+        method: "GET",
+      })
+    ).data;
+  }
 }

moneymgr_web/src/routes/AccountRoute.tsx

@@ -6,15 +6,29 @@ import { AccountWidget } from "../widgets/AccountWidget";
 import { AmountWidget } from "../widgets/AmountWidget";
 import { Typography } from "@mui/material";
 import { NewMovementWidget } from "../widgets/NewMovementWidget";
+import { Movement, MovementApi } from "../api/MovementsApi";
+import React from "react";
+import { AsyncWidget } from "../widgets/AsyncWidget";
 
 export function AccountRoute(): React.ReactElement {
   const { accountId } = useParams();
 
+  const loadKey = React.useRef(0);
+
   const accounts = useAccounts();
   const account = accounts.get(Number(accountId));
 
+  const [movements, setMovements] = React.useState<Movement[] | undefined>();
+
+  const load = async () => {
+    setMovements(undefined);
+    setMovements(await MovementApi.GetAccountMovements(account!.id));
+  };
+
   const reload = async () => {
     accounts.reloadBalances();
+    setMovements(undefined);
+    loadKey.current += 1;
   };
 
   if (account === null) return <NotFoundRoute />;
@@ -34,7 +48,13 @@ export function AccountRoute(): React.ReactElement {
         </span>
       }
     >
-      TODO : table
+      <AsyncWidget
+        loadKey={`${account.id}-${loadKey.current}`}
+        load={load}
+        ready={movements !== null}
+        errMsg="Failed to load the list of movements!"
+        build={() => <>TODO : table count={movements?.length}</>}
+      />
       <NewMovementWidget account={account} onCreated={reload} />
     </MoneyMgrWebRouteContainer>
   );