diff options
Diffstat (limited to 'packages/aml-backoffice-ui/src/pages/Cases.tsx')
-rw-r--r-- | packages/aml-backoffice-ui/src/pages/Cases.tsx | 204 |
1 files changed, 112 insertions, 92 deletions
diff --git a/packages/aml-backoffice-ui/src/pages/Cases.tsx b/packages/aml-backoffice-ui/src/pages/Cases.tsx index 28b9d2a88..d96e7a90c 100644 --- a/packages/aml-backoffice-ui/src/pages/Cases.tsx +++ b/packages/aml-backoffice-ui/src/pages/Cases.tsx @@ -1,15 +1,18 @@ -import { VNode, h } from "preact"; -import { Pages } from "../pages.js"; -import { AmlRecords, AmlState } from "../types.js"; -import { InputChoiceHorizontal } from "../handlers/InputChoiceHorizontal.js"; -import { createNewForm } from "../handlers/forms.js"; import { TranslatedString } from "@gnu-taler/taler-util"; -import { amlStateConverter as amlStateConverter } from "./CaseDetails.js"; +import { VNode, h } from "preact"; import { useState } from "preact/hooks"; -import { HandleAccountNotReady } from "./HandleAccountNotReady.js"; +import { createNewForm } from "../handlers/forms.js"; +import { useCases } from "../hooks/useCases.js"; import { useOfficer } from "../hooks/useOfficer.js"; +import { Pages } from "../pages.js"; +import { AmlExchangeBackend } from "../types.js"; +import { amlStateConverter } from "./CaseDetails.js"; +import { HandleAccountNotReady } from "./HandleAccountNotReady.js"; +import { buildQuerySignature } from "../account.js"; +import { handleNotOkResult } from "../utils/errors.js"; +import { useTranslationContext } from "@gnu-taler/web-util/browser"; -const response: AmlRecords = { +const response: AmlExchangeBackend.AmlRecords = { records: [ { current_state: 0, @@ -56,7 +59,7 @@ const response: AmlRecords = { function doFilter( list: typeof response.records, - filter: AmlState | undefined, + filter: AmlExchangeBackend.AmlState | undefined, ): typeof response.records { if (filter === undefined) return list; return list.filter((r) => r.current_state === filter); @@ -64,14 +67,27 @@ function doFilter( export function Cases() { const officer = useOfficer(); + const { i18n } = useTranslationContext(); if (officer.state !== "ready") { return <HandleAccountNotReady officer={officer} />; } const form = createNewForm<{ - state: AmlState; + state: AmlExchangeBackend.AmlState; }>(); - const initial = { state: AmlState.pending }; - const [list, setList] = useState(doFilter(response.records, initial.state)); + + const signature = + officer.state === "ready" + ? buildQuerySignature(officer.account.signingKey) + : undefined; + + const initial = AmlExchangeBackend.AmlState.pending; + const [stateFilter, setStateFilter] = useState(initial); + const list = useCases(officer.account.accountId, stateFilter, signature); + + if (!list.ok && !list.loading) { + return handleNotOkResult(i18n)(list); + } + return ( <div> <div class="px-4 sm:px-6 lg:px-8"> @@ -85,9 +101,9 @@ export function Cases() { </p> </div> <form.Provider - initialValue={initial} + initialValue={{ state: stateFilter }} onUpdate={(v) => { - setList(doFilter(response.records, v.state)); + setStateFilter(v.state ?? initial); }} onSubmit={(v) => {}} > @@ -98,15 +114,15 @@ export function Cases() { choices={[ { label: "Pending" as TranslatedString, - value: AmlState.pending, + value: AmlExchangeBackend.AmlState.pending, }, { label: "Frozen" as TranslatedString, - value: AmlState.frozen, + value: AmlExchangeBackend.AmlState.frozen, }, { label: "Normal" as TranslatedString, - value: AmlState.normal, + value: AmlExchangeBackend.AmlState.normal, }, ]} /> @@ -114,82 +130,86 @@ export function Cases() { </div> <div class="mt-8 flow-root"> <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> - <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> - <Pagination /> - <table class="min-w-full divide-y divide-gray-300"> - <thead> - <tr> - <th - scope="col" - class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900" - > - Account Id - </th> - <th - scope="col" - class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900" - > - Status - </th> - <th - scope="col" - class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900" - > - Threshold - </th> - </tr> - </thead> - <tbody class="divide-y divide-gray-200 bg-white"> - {list.map((r) => { - return ( - <tr class="hover:bg-gray-100 "> - <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500 "> - <div class="text-gray-900"> - <a - href={Pages.details.url({ account: r.h_payto })} - class="text-indigo-600 hover:text-indigo-900" - > - {r.h_payto} - </a> - </div> - </td> - <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500"> - {((state: AmlState): VNode => { - switch (state) { - case AmlState.normal: { - return ( - <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20"> - Normal - </span> - ); - } - case AmlState.pending: { - return ( - <span class="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-green-600/20"> - Pending - </span> - ); - } - case AmlState.frozen: { - return ( - <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-green-600/20"> - Frozen - </span> - ); + {!list.data.records.length ? ( + <div>empty result </div> + ) : ( + <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> + <Pagination /> + <table class="min-w-full divide-y divide-gray-300"> + <thead> + <tr> + <th + scope="col" + class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900" + > + Account Id + </th> + <th + scope="col" + class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900" + > + Status + </th> + <th + scope="col" + class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900" + > + Threshold + </th> + </tr> + </thead> + <tbody class="divide-y divide-gray-200 bg-white"> + {list.data.records.map((r) => { + return ( + <tr class="hover:bg-gray-100 "> + <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500 "> + <div class="text-gray-900"> + <a + href={Pages.details.url({ account: r.h_payto })} + class="text-indigo-600 hover:text-indigo-900" + > + {r.h_payto} + </a> + </div> + </td> + <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500"> + {((state: AmlExchangeBackend.AmlState): VNode => { + switch (state) { + case AmlExchangeBackend.AmlState.normal: { + return ( + <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20"> + Normal + </span> + ); + } + case AmlExchangeBackend.AmlState.pending: { + return ( + <span class="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-green-600/20"> + Pending + </span> + ); + } + case AmlExchangeBackend.AmlState.frozen: { + return ( + <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-green-600/20"> + Frozen + </span> + ); + } } - } - })(r.current_state)} - </td> - <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-900"> - {r.threshold} - </td> - </tr> - ); - })} - </tbody> - </table> - <Pagination /> - </div> + })(r.current_state)} + </td> + <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-900"> + {r.threshold} + </td> + </tr> + ); + })} + </tbody> + </table> + <Pagination /> + </div> + )} </div> </div> </div> |