diff options
Diffstat (limited to 'packages/demobank-ui/src/components/Transactions')
3 files changed, 39 insertions, 40 deletions
diff --git a/packages/demobank-ui/src/components/Transactions/index.ts b/packages/demobank-ui/src/components/Transactions/index.ts index 46b38ce74..9df1a70e5 100644 --- a/packages/demobank-ui/src/components/Transactions/index.ts +++ b/packages/demobank-ui/src/components/Transactions/index.ts @@ -46,6 +46,8 @@ export namespace State { status: "ready"; error: undefined; transactions: Transaction[]; + onPrev?: () => void; + onNext?: () => void; } } diff --git a/packages/demobank-ui/src/components/Transactions/state.ts b/packages/demobank-ui/src/components/Transactions/state.ts index d2a512b08..30c48aa45 100644 --- a/packages/demobank-ui/src/components/Transactions/state.ts +++ b/packages/demobank-ui/src/components/Transactions/state.ts @@ -14,7 +14,7 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { AbsoluteTime, Amounts } from "@gnu-taler/taler-util"; +import { AbsoluteTime, Amounts, parsePaytoUri } from "@gnu-taler/taler-util"; import { useTransactions } from "../../hooks/access.js"; import { Props, State, Transaction } from "./index.js"; @@ -34,45 +34,19 @@ export function useComponentState({ account }: Props): State { } const transactions = result.data.transactions - .map((item: unknown) => { - if ( - !item || - typeof item !== "object" || - !("direction" in item) || - !("creditorIban" in item) || - !("debtorIban" in item) || - !("date" in item) || - !("subject" in item) || - !("currency" in item) || - !("amount" in item) - ) { - //not valid - return; - } - const anyItem = item as any; - if ( - !(typeof anyItem.creditorIban === "string") || - !(typeof anyItem.debtorIban === "string") || - !(typeof anyItem.date === "string") || - !(typeof anyItem.subject === "string") || - !(typeof anyItem.currency === "string") || - !(typeof anyItem.amount === "string") - ) { - return; - } + .map((tx) => { - const negative = anyItem.direction === "DEBIT"; - const counterpart = negative ? anyItem.creditorIban : anyItem.debtorIban; + const negative = tx.direction === "debit"; + const cp = parsePaytoUri(negative ? tx.creditor_payto_uri : tx.debtor_payto_uri); + const counterpart = (cp === undefined || !cp.isKnown ? undefined : + cp.targetType === "iban" ? cp.iban : + cp.targetType === "x-taler-bank" ? cp.account : + cp.targetType === "bitcoin" ? `${cp.targetPath.substring(0, 6)}...` : undefined) ?? + "unkown"; - let date = anyItem.date ? parseInt(anyItem.date, 10) : 0; - if (isNaN(date) || !isFinite(date)) { - date = 0; - } - const when: AbsoluteTime = !date - ? AbsoluteTime.never() - : AbsoluteTime.fromMilliseconds(date); - const amount = Amounts.parse(`${anyItem.currency}:${anyItem.amount}`); - const subject = anyItem.subject; + const when = AbsoluteTime.fromMilliseconds(tx.date / 1000); + const amount = Amounts.parse(tx.amount); + const subject = tx.subject; return { negative, counterpart, @@ -87,5 +61,7 @@ export function useComponentState({ account }: Props): State { status: "ready", error: undefined, transactions, + onNext: result.isReachingEnd ? undefined : result.loadMore, + onPrev: result.isReachingStart ? undefined : result.loadMorePrev, }; } diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx index e34120e34..f8b2e3113 100644 --- a/packages/demobank-ui/src/components/Transactions/views.tsx +++ b/packages/demobank-ui/src/components/Transactions/views.tsx @@ -30,7 +30,7 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode { ); } -export function ReadyView({ transactions }: State.Ready): VNode { +export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode { const { i18n } = useTranslationContext(); if (!transactions.length) return <div /> const txByDate = transactions.reduce((prev, cur) => { @@ -50,7 +50,7 @@ export function ReadyView({ transactions }: State.Ready): VNode { <h1 class="text-base font-semibold leading-6 text-gray-900"><i18n.Translate>Latest transactions</i18n.Translate></h1> </div> </div> - <div class="-mx-4 mt-5 ring-1 ring-gray-300 sm:mx-0 sm:rounded-lg min-w-fit bg-white"> + <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> <tr> @@ -89,9 +89,30 @@ export function ReadyView({ transactions }: State.Ready): VNode { </tr>) })} </Fragment> + })} </tbody> + </table> + + <nav class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6 rounded-lg" aria-label="Pagination"> + <div class="flex flex-1 justify-between sm:justify-end"> + <button + class="relative disabled:bg-gray-100 disabled:text-gray-500 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0" + disabled={!onPrev} + onClick={onPrev} + > + <i18n.Translate>First page</i18n.Translate> + </button> + <button + class="relative disabled:bg-gray-100 disabled:text-gray-500 ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0" + disabled={!onNext} + onClick={onNext} + > + <i18n.Translate>Next</i18n.Translate> + </button> + </div> + </nav> </div> </div> ); |