From 64e3705669e7c12b8013704654f17cf8eaf659d4 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 25 May 2023 18:08:20 -0300 Subject: cases, account details and new-form screen --- .../exchange-backoffice-ui/src/pages/Cases.tsx | 282 +++++++++++++++++++++ 1 file changed, 282 insertions(+) create mode 100644 packages/exchange-backoffice-ui/src/pages/Cases.tsx (limited to 'packages/exchange-backoffice-ui/src/pages/Cases.tsx') diff --git a/packages/exchange-backoffice-ui/src/pages/Cases.tsx b/packages/exchange-backoffice-ui/src/pages/Cases.tsx new file mode 100644 index 000000000..1983769ed --- /dev/null +++ b/packages/exchange-backoffice-ui/src/pages/Cases.tsx @@ -0,0 +1,282 @@ +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 "./AccountDetails.js"; +import { useState } from "preact/hooks"; + +const response: AmlRecords = { + records: [ + { + current_state: 0, + h_payto: "QWEQWEQWEQWEWQE", + rowid: 1, + threshold: "USD 100", + }, + { + current_state: 1, + h_payto: "ASDASDASD", + rowid: 1, + threshold: "USD 100", + }, + { + current_state: 2, + h_payto: "ZXCZXCZXCXZC", + rowid: 1, + threshold: "USD 1000", + }, + { + current_state: 0, + h_payto: "QWEQWEQWEQWEWQE", + rowid: 1, + threshold: "USD 100", + }, + { + current_state: 1, + h_payto: "ASDASDASD", + rowid: 1, + threshold: "USD 100", + }, + { + current_state: 2, + h_payto: "ZXCZXCZXCXZC", + rowid: 1, + threshold: "USD 1000", + }, + ].map((e, idx) => { + e.rowid = idx; + e.threshold = `${e.threshold}${idx}`; + return e; + }), +}; + +function doFilter( + list: typeof response.records, + filter: AmlState | undefined, +): typeof response.records { + if (filter === undefined) return list; + return list.filter((r) => r.current_state === filter); +} + +export function Cases() { + const form = createNewForm<{ + state: AmlState; + }>(); + const initial = { state: AmlState.pending }; + const [list, setList] = useState(doFilter(response.records, initial.state)); + return ( +
+
+
+
+

+ Cases +

+

+ A list of all the account with the status +

+
+ { + setList(doFilter(response.records, v.state)); + }} + onSubmit={(v) => {}} + > + + +
+
+
+
+ + + + + + + + + + + {list.map((r) => { + return ( + + + + + + ); + })} + +
+ Account Id + + Status + + Threshold +
+
+ + {r.h_payto} + +
+ 		+ {((state: AmlState): VNode => { + switch (state) { + case AmlState.normal: { + return ( + + Normal + + ); + } + case AmlState.pending: { + return ( + + Pending + + ); + } + case AmlState.frozen: { + return ( + + Frozen + + ); + } + } + })(r.current_state)} + + {r.threshold} +
+ +
+
+
+
+
+ ); +} + +function Pagination() { + return ( + + ); +} -- cgit v1.2.3