diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/admin/AccountList.tsx')
| -rw-r--r-- | packages/demobank-ui/src/pages/admin/AccountList.tsx | 120 |
1 files changed, 120 insertions, 0 deletions
diff --git a/packages/demobank-ui/src/pages/admin/AccountList.tsx b/packages/demobank-ui/src/pages/admin/AccountList.tsx new file mode 100644 index 000000000..56b15818b --- /dev/null +++ b/packages/demobank-ui/src/pages/admin/AccountList.tsx @@ -0,0 +1,120 @@ +import { h, VNode } from "preact"; +import { useBusinessAccounts } from "../../hooks/circuit.js"; +import { handleNotOkResult } from "../HomePage.js"; +import { AccountAction } from "./Home.js"; +import { Amounts } from "@gnu-taler/taler-util"; +import { useTranslationContext } from "@gnu-taler/web-util/browser"; + +interface Props { + onAction: (type: AccountAction, account: string) => void; + account: string | undefined; + onRegister: () => void; + +} + +export function AccountList({ account, onAction, onRegister }: Props): VNode { + const result = useBusinessAccounts({ account }); + const { i18n } = useTranslationContext(); + + if (result.loading) return <div />; + if (!result.ok) { + return handleNotOkResult(i18n, onRegister)(result); + } + + const { customers } = result.data; + return <section + id="main" + style={{ width: 600, marginLeft: "auto", marginRight: "auto" }} + > + {!customers.length ? ( + <div></div> + ) : ( + <article> + <h2>{i18n.str`Accounts:`}</h2> + <div class="results"> + <table class="pure-table pure-table-striped"> + <thead> + <tr> + <th>{i18n.str`Username`}</th> + <th>{i18n.str`Name`}</th> + <th>{i18n.str`Balance`}</th> + <th>{i18n.str`Actions`}</th> + </tr> + </thead> + <tbody> + {customers.map((item, idx) => { + const balance = !item.balance + ? undefined + : Amounts.parse(item.balance.amount); + const balanceIsDebit = + item.balance && + item.balance.credit_debit_indicator == "debit"; + return ( + <tr key={idx}> + <td> + <a + href="#" + onClick={(e) => { + e.preventDefault(); + onAction("show-details", item.username) + }} + > + {item.username} + </a> + </td> + <td>{item.name}</td> + <td> + {!balance ? ( + i18n.str`unknown` + ) : ( + <span class="amount"> + {balanceIsDebit ? <b>-</b> : null} + <span class="value">{`${Amounts.stringifyValue( + balance, + )}`}</span> + + <span class="currency">{`${balance.currency}`}</span> + </span> + )} + </td> + <td> + <a + href="#" + onClick={(e) => { + e.preventDefault(); + onAction("update-password", item.username) + }} + > + change password + </a> + + <a + href="#" + onClick={(e) => { + e.preventDefault(); + onAction("show-cashout", item.username) + }} + > + cashouts + </a> + + <a + href="#" + onClick={(e) => { + e.preventDefault(); + onAction("remove-account", item.username) + }} + > + remove + </a> + </td> + </tr> + ); + })} + </tbody> + </table> + </div> + </article> + )} + </section> +}
\ No newline at end of file |