diff options
author | Sebastian <sebasjm@gmail.com> | 2021-11-30 17:29:33 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-11-30 17:29:33 -0300 |
commit | 54d4a1efe0a55a80ed594f14698da16dfded8c47 (patch) | |
tree | f0e70c6c389f009eccd230cfd63cf647de6e2f78 /packages/taler-wallet-webextension/src/wallet | |
parent | 045a7c0aa10d8e7b3cb5fa139e868b327680f846 (diff) | |
download | wallet-core-54d4a1efe0a55a80ed594f14698da16dfded8c47.tar.xz |
add a taler action from the history page
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/History.stories.tsx | 5 | ||||
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/History.tsx | 60 |
2 files changed, 45 insertions, 20 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx index 0f471ac30..ce4b0fb74 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx @@ -127,6 +127,11 @@ export const Empty = createExample(TestedComponent, { ], }); +export const EmptyWithNoBalance = createExample(TestedComponent, { + list: [], + balances: [], +}); + export const One = createExample(TestedComponent, { list: [exampleData.withdraw], balances: [ diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx index bc8ef734a..58db0360b 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.tsx @@ -21,10 +21,12 @@ import { Transaction, } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; -import { DateSeparator } from "../components/styled"; +import { useState } from "preact/hooks"; +import { ButtonPrimary, DateSeparator } from "../components/styled"; import { Time } from "../components/Time"; import { TransactionItem } from "../components/TransactionItem"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; +import { AddNewActionView } from "../popup/AddNewActionView"; import * as wxApi from "../wxApi"; export function HistoryPage(): VNode { @@ -37,6 +39,12 @@ export function HistoryPage(): VNode { NotificationType.WithdrawGroupFinished, ]); + const [addingAction, setAddingAction] = useState(false); + + if (addingAction) { + return <AddNewActionView onCancel={() => setAddingAction(false)} />; + } + if (!transactionQuery) { return <div>Loading ...</div>; } @@ -48,6 +56,7 @@ export function HistoryPage(): VNode { <HistoryView balances={balanceWithoutError} list={[...transactionQuery.response.transactions].reverse()} + onAddNewAction={() => setAddingAction(true)} /> ); } @@ -65,9 +74,11 @@ function normalizeToDay(x: number): number { export function HistoryView({ list, balances, + onAddNewAction, }: { list: Transaction[]; balances: Balance[]; + onAddNewAction: () => void; }): VNode { const byDate = list.reduce((rv, x) => { const theDate = @@ -83,25 +94,34 @@ export function HistoryView({ return ( <Fragment> - {balances.length > 0 && ( - <header> - {balances.length === 1 && ( - <div class="title"> - Balance: <span>{amountToString(balances[0].available)}</span> - </div> - )} - {balances.length > 1 && ( - <div class="title"> - Balance:{" "} - <ul style={{ margin: 0 }}> - {balances.map((b, i) => ( - <li key={i}>{b.available}</li> - ))} - </ul> - </div> - )} - </header> - )} + <header> + {balances.length > 0 ? ( + <Fragment> + {balances.length === 1 && ( + <div class="title"> + Balance: <span>{amountToString(balances[0].available)}</span> + </div> + )} + {balances.length > 1 && ( + <div class="title"> + Balance:{" "} + <ul style={{ margin: 0 }}> + {balances.map((b, i) => ( + <li key={i}>{b.available}</li> + ))} + </ul> + </div> + )} + </Fragment> + ) : ( + <div /> + )} + <div> + <ButtonPrimary onClick={onAddNewAction}> + <b>+</b> + </ButtonPrimary> + </div> + </header> <section> {Object.keys(byDate).map((d, i) => { return ( |