taler-typescript-core

commit 6a040b6cc85cade5d92416343d356d6b11eaf601
parent 1eb266b5236c286b6a8cb96d4a320d7abfb440ce
Author: Sebastian <sebasjm@gmail.com>
Date:   Thu, 20 Feb 2025 10:18:07 -0300

transfer list

Diffstat:
M
packages/aml-backoffice-ui/src/hooks/transfers.ts
 | 
23
+++++++++++++++++++----
M
packages/aml-backoffice-ui/src/pages/Transfers.tsx
 | 
55
+++++++++++++++++++++++++++++++++++++++++++++++++------

2 files changed, 68 insertions(+), 10 deletions(-)
diff --git a/packages/aml-backoffice-ui/src/hooks/transfers.ts b/packages/aml-backoffice-ui/src/hooks/transfers.ts
@@ -17,6 +17,7 @@ import { useState } from "preact/hooks";
 
 // FIX default import https://github.com/microsoft/TypeScript/issues/49189
 import {
+  AmountJson,
   OfficerAccount,
   OperationOk,
   opFixedSuccess,
@@ -85,7 +86,10 @@ export function useTransferDebit() {
  * @param args
  * @returns
  */
-export function useTransferCredit() {
+export function useTransferList({
+  account,
+  direction,
+}: { direction?: "credit" | "debit"; account?: AmountJson } = {}) {
   const officer = useOfficer();
   const session = officer.state === "ready" ? officer.account : undefined;
   const {
@@ -93,12 +97,20 @@ export function useTransferCredit() {
   } = useExchangeApiContext();
 
   const [offset, setOffset] = useState<string>();
+  const isDebit = "debit" === direction;
 
-  async function fetcher([officer, offset]: [
+  async function fetcher([officer, offset, isDebit]: [
     OfficerAccount,
     string,
-    string | undefined,
+    boolean,
   ]) {
+    if (isDebit) {
+      return await api.getTransfersDebit(officer, {
+        order: "dec",
+        offset,
+        limit: PAGINATED_LIST_REQUEST,
+      });
+    }
     return await api.getTransfersCredit(officer, {
       order: "dec",
       offset,
@@ -109,7 +121,10 @@ export function useTransferCredit() {
   const { data, error } = useSWR<
     TalerExchangeResultByMethod<"getTransfersCredit">,
     TalerHttpError
-  >(!session ? undefined : [session, offset, "getTransfersCredit"], fetcher);
+  >(
+    !session ? undefined : [session, offset, isDebit, "getTransfersCredit"],
+    fetcher,
+  );
 
   if (error) return error;
   if (data === undefined) return undefined;
diff --git a/packages/aml-backoffice-ui/src/pages/Transfers.tsx b/packages/aml-backoffice-ui/src/pages/Transfers.tsx
@@ -1,12 +1,16 @@
 import {
   Attention,
+  FormDesign,
+  FormUI,
   Loading,
   Time,
+  UIHandlerId,
   useExchangeApiContext,
+  useForm,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, h, VNode } from "preact";
-import { useTransferCredit } from "../hooks/transfers.js";
+import { useTransferList } from "../hooks/transfers.js";
 import {
   AbsoluteTime,
   AmountJson,
@@ -23,8 +27,44 @@ import { format } from "date-fns";
 export function Transfers(): VNode {
   const { i18n, dateLocale } = useTranslationContext();
   const { config } = useExchangeApiContext();
-  const resp = useTransferCredit();
-  const isDebit = true; //FIXME: shoud be an option debit/credit
+
+  const design: FormDesign = {
+    type: "single-column",
+    fields: [
+      {
+        type: "choiceHorizontal",
+        id: "direction" as UIHandlerId,
+        label: i18n.str`Direction`,
+        choices: [
+          {
+            label: i18n.str`Credit`,
+            value: "credit",
+          },
+          {
+            label: i18n.str`Debit`,
+            value: "debit",
+          },
+        ],
+      },
+    ],
+  };
+
+  const form = useForm(
+    design,
+    { direction: "credit" },
+    // createFormValidator(i18n),
+  );
+
+  const direction = form.status.result.direction as
+    | "credit"
+    | "debit"
+    | undefined;
+
+  const resp = useTransferList({
+    direction,
+  });
+
+  const isDebit = direction === "debit";
 
   if (!resp) {
     return <Loading />;
@@ -78,7 +118,7 @@ export function Transfers(): VNode {
 
   if (!transactions.length) {
     return (
-      <div class="px-4 mt-4">
+      <div class="px-4 mt-8">
         <div class="sm:flex sm:items-center">
           <div class="sm:flex-auto">
             <h1 class="text-base font-semibold leading-6 text-gray-900">
@@ -86,6 +126,7 @@ export function Transfers(): VNode {
             </h1>
           </div>
         </div>
+        <FormUI design={design} handler={form.handler} />
 
         <Attention type="low" title={i18n.str`No transfers yet.`}>
           <i18n.Translate>
@@ -125,6 +166,8 @@ export function Transfers(): VNode {
           </h1>
         </div>
       </div>
+      <FormUI design={design} handler={form.handler} />
+
       <div class="-mx-4 mt-5 ring-1 ring-gray-300 sm:mx-0 rounded-lg min-w-fit bg-white">
         <table class="min-w-full divide-y divide-gray-300">
           <thead>
@@ -140,7 +183,7 @@ export function Transfers(): VNode {
               <th
                 scope="col"
                 class="hidden sm:table-cell pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 "
-              >{i18n.str`Counterpart`}</th>
+              >{i18n.str`Account`}</th>
               {/* <th
                 scope="col"
                 class="hidden sm:table-cell pl-2 py-3.5 text-left text-sm font-semibold text-gray-900 "
@@ -200,7 +243,7 @@ export function Transfers(): VNode {
                             </dd>
 
                             <dt class="sr-only sm:hidden">
-                              <i18n.Translate>Counterpart</i18n.Translate>
+                              <i18n.Translate>Account</i18n.Translate>
                             </dt>
                             <dd class="mt-1 truncate text-gray-500 sm:hidden">
                               {isDebit ? i18n.str`to` : i18n.str`from`}{" "}