diff options
Diffstat (limited to 'packages/demobank-ui/src/components/Cashouts')
4 files changed, 32 insertions, 9 deletions
diff --git a/packages/demobank-ui/src/components/Cashouts/index.ts b/packages/demobank-ui/src/components/Cashouts/index.ts index 1410267be..3ca7d9026 100644 --- a/packages/demobank-ui/src/components/Cashouts/index.ts +++ b/packages/demobank-ui/src/components/Cashouts/index.ts @@ -23,7 +23,8 @@ import { useComponentState } from "./state.js"; import { LoadingUriView, ReadyView } from "./views.js"; export interface Props { - empty?: boolean; + account: string; + onSelected: (id: string) => void; } export type State = State.Loading | State.LoadingUriError | State.Ready; @@ -45,7 +46,8 @@ export namespace State { export interface Ready extends BaseInfo { status: "ready"; error: undefined; - cashouts: SandboxBackend.Circuit.CashoutStatusResponse[]; + cashouts: SandboxBackend.Circuit.CashoutStatusResponseWithId[]; + onSelected: (id: string) => void; } } diff --git a/packages/demobank-ui/src/components/Cashouts/state.ts b/packages/demobank-ui/src/components/Cashouts/state.ts index 178a1e815..124f9bf9c 100644 --- a/packages/demobank-ui/src/components/Cashouts/state.ts +++ b/packages/demobank-ui/src/components/Cashouts/state.ts @@ -14,12 +14,11 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { AbsoluteTime, Amounts } from "@gnu-taler/taler-util"; import { useCashouts } from "../../hooks/circuit.js"; -import { Props, State, Transaction } from "./index.js"; +import { Props, State } from "./index.js"; -export function useComponentState({ empty }: Props): State { - const result = useCashouts(); +export function useComponentState({ account, onSelected }: Props): State { + const result = useCashouts(account); if (result.loading) { return { status: "loading", @@ -37,5 +36,6 @@ export function useComponentState({ empty }: Props): State { status: "ready", error: undefined, cashouts: result.data, + onSelected, }; } diff --git a/packages/demobank-ui/src/components/Cashouts/test.ts b/packages/demobank-ui/src/components/Cashouts/test.ts index 78450ed2d..e91116378 100644 --- a/packages/demobank-ui/src/components/Cashouts/test.ts +++ b/packages/demobank-ui/src/components/Cashouts/test.ts @@ -31,7 +31,7 @@ describe("Transaction states", () => { const env = new SwrMockEnvironment(); const props: Props = { - + account: "123", }; env.addRequestExpectation(TRANSACTION_API_EXAMPLE.LIST_FIRST_PAGE, { @@ -115,6 +115,7 @@ describe("Transaction states", () => { const env = new SwrMockEnvironment(); const props: Props = { + account: "123", }; env.addRequestExpectation(TRANSACTION_API_EXAMPLE.LIST_NOT_FOUND, {}); @@ -147,6 +148,7 @@ describe("Transaction states", () => { const env = new SwrMockEnvironment(false); const props: Props = { + account: "123", }; env.addRequestExpectation(TRANSACTION_API_EXAMPLE.LIST_ERROR, {}); diff --git a/packages/demobank-ui/src/components/Cashouts/views.tsx b/packages/demobank-ui/src/components/Cashouts/views.tsx index 16ae8a58f..af1d9ed2c 100644 --- a/packages/demobank-ui/src/components/Cashouts/views.tsx +++ b/packages/demobank-ui/src/components/Cashouts/views.tsx @@ -30,8 +30,15 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode { ); } -export function ReadyView({ cashouts }: State.Ready): VNode { +export function ReadyView({ cashouts, onSelected }: State.Ready): VNode { const { i18n } = useTranslationContext(); + if (!cashouts.length) { + return ( + <div> + <i18n.Translate>No cashout at the moment</i18n.Translate> + </div> + ); + } return ( <div class="results"> <table class="pure-table pure-table-striped"> @@ -39,6 +46,8 @@ export function ReadyView({ cashouts }: State.Ready): VNode { <tr> <th>{i18n.str`Created`}</th> <th>{i18n.str`Confirmed`}</th> + <th>{i18n.str`Total debit`}</th> + <th>{i18n.str`Total credit`}</th> <th>{i18n.str`Status`}</th> <th>{i18n.str`Subject`}</th> </tr> @@ -56,7 +65,17 @@ export function ReadyView({ cashouts }: State.Ready): VNode { <td>{Amounts.stringifyValue(item.amount_debit)}</td> <td>{Amounts.stringifyValue(item.amount_credit)}</td> <td>{item.status}</td> - <td>{item.subject}</td> + <td> + <a + href="#" + onClick={(e) => { + e.preventDefault(); + onSelected(item.id); + }} + > + {item.subject} + </a> + </td> </tr> ); })} |