diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/accounts/list/Table.tsx')
| -rw-r--r-- | packages/merchant-backoffice-ui/src/paths/instance/accounts/list/Table.tsx | 473 |
1 files changed, 248 insertions, 225 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/Table.tsx index a9cb2805b..0e813f4d2 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/Table.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/Table.tsx @@ -19,12 +19,21 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { parsePaytoUri, PaytoType, PaytoUri, PaytoUriBitcoin, PaytoUriIBAN, PaytoUriTalerBank, PaytoUriUnknown, TalerMerchantApi } from "@gnu-taler/taler-util"; +import { + parsePaytoUri, + PaytoType, + PaytoUri, + PaytoUriBitcoin, + PaytoUriIBAN, + PaytoUriTalerBank, + PaytoUriUnknown, + TalerMerchantApi, +} from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { Fragment, h, VNode } from "preact"; import { StateUpdater, useState } from "preact/hooks"; -type Entity = TalerMerchantApi.BankAccountSummaryEntry; +type Entity = TalerMerchantApi.BankAccountEntry; interface Props { accounts: Entity[]; @@ -93,241 +102,255 @@ interface TableProps { rowSelectionHandler: StateUpdater<string[]>; } -function Table({ - accounts, - onDelete, - onSelect, -}: TableProps): VNode { +function Table({ accounts, onDelete, onSelect }: TableProps): VNode { const { i18n } = useTranslationContext(); - const emptyList: Record<PaytoType | "unknown", { parsed: PaytoUri, acc: Entity }[]> = { "bitcoin": [], "x-taler-bank": [], "iban": [], "unknown": [], } + const emptyList: Record< + PaytoType | "unknown", + { parsed: PaytoUri; acc: Entity }[] + > = { bitcoin: [], "x-taler-bank": [], iban: [], unknown: [] }; const accountsByType = accounts.reduce((prev, acc) => { - const parsed = parsePaytoUri(acc.payto_uri) - if (!parsed) return prev //skip - if (parsed.targetType !== "bitcoin" && parsed.targetType !== "x-taler-bank" && parsed.targetType !== "iban") { - prev["unknown"].push({ parsed, acc }) + const parsed = parsePaytoUri(acc.payto_uri); + if (!parsed) return prev; //skip + if ( + parsed.targetType !== "bitcoin" && + parsed.targetType !== "x-taler-bank" && + parsed.targetType !== "iban" + ) { + prev["unknown"].push({ parsed, acc }); } else { - prev[parsed.targetType].push({ parsed, acc }) + prev[parsed.targetType].push({ parsed, acc }); } - return prev - }, emptyList) - - const bitcoinAccounts = accountsByType["bitcoin"] - const talerbankAccounts = accountsByType["x-taler-bank"] - const ibanAccounts = accountsByType["iban"] - const unkownAccounts = accountsByType["unknown"] + return prev; + }, emptyList); + const bitcoinAccounts = accountsByType["bitcoin"]; + const talerbankAccounts = accountsByType["x-taler-bank"]; + const ibanAccounts = accountsByType["iban"]; + const unkownAccounts = accountsByType["unknown"]; return ( <Fragment> + {bitcoinAccounts.length > 0 && ( + <div class="table-container"> + <p class="card-header-title"> + <i18n.Translate>Bitcoin type accounts</i18n.Translate> + </p> + <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> + <thead> + <tr> + <th> + <i18n.Translate>Address</i18n.Translate> + </th> + <th> + <i18n.Translate>Sewgit 1</i18n.Translate> + </th> + <th> + <i18n.Translate>Sewgit 2</i18n.Translate> + </th> + <th /> + </tr> + </thead> + <tbody> + {bitcoinAccounts.map(({ parsed, acc }, idx) => { + const ac = parsed as PaytoUriBitcoin; + return ( + <tr key={idx}> + <td + onClick={(): void => onSelect(acc)} + style={{ cursor: "pointer" }} + > + {ac.targetPath} + </td> + <td + onClick={(): void => onSelect(acc)} + style={{ cursor: "pointer" }} + > + {ac.segwitAddrs[0]} + </td> + <td + onClick={(): void => onSelect(acc)} + style={{ cursor: "pointer" }} + > + {ac.segwitAddrs[1]} + </td> + <td class="is-actions-cell right-sticky"> + <div class="buttons is-right"> + <button + class="button is-danger is-small has-tooltip-left" + data-tooltip={i18n.str`delete selected accounts from the database`} + onClick={() => onDelete(acc)} + > + Delete + </button> + </div> + </td> + </tr> + ); + })} + </tbody> + </table> + </div> + )} - {bitcoinAccounts.length > 0 && <div class="table-container"> - <p class="card-header-title"><i18n.Translate>Bitcoin type accounts</i18n.Translate></p> - <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> - <thead> - <tr> - <th> - <i18n.Translate>Address</i18n.Translate> - </th> - <th> - <i18n.Translate>Sewgit 1</i18n.Translate> - </th> - <th> - <i18n.Translate>Sewgit 2</i18n.Translate> - </th> - <th /> - </tr> - </thead> - <tbody> - {bitcoinAccounts.map(({ parsed, acc }, idx) => { - const ac = parsed as PaytoUriBitcoin - return ( - <tr key={idx}> - <td - onClick={(): void => onSelect(acc)} - style={{ cursor: "pointer" }} - > - {ac.targetPath} - </td> - <td - onClick={(): void => onSelect(acc)} - style={{ cursor: "pointer" }} - > - {ac.segwitAddrs[0]} - </td> - <td - onClick={(): void => onSelect(acc)} - style={{ cursor: "pointer" }} - > - {ac.segwitAddrs[1]} - </td> - <td class="is-actions-cell right-sticky"> - <div class="buttons is-right"> - <button - class="button is-danger is-small has-tooltip-left" - data-tooltip={i18n.str`delete selected accounts from the database`} - onClick={() => onDelete(acc)} - > - Delete - </button> - </div> - </td> - </tr> - ); - })} - </tbody> - </table> - </div>} - - - - {talerbankAccounts.length > 0 && <div class="table-container"> - <p class="card-header-title"><i18n.Translate>Taler type accounts</i18n.Translate></p> - <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> - <thead> - <tr> - <th> - <i18n.Translate>Host</i18n.Translate> - </th> - <th> - <i18n.Translate>Account name</i18n.Translate> - </th> - <th /> - </tr> - </thead> - <tbody> - {talerbankAccounts.map(({ parsed, acc }, idx) => { - const ac = parsed as PaytoUriTalerBank - return ( - <tr key={idx}> - <td - onClick={(): void => onSelect(acc)} - style={{ cursor: "pointer" }} - > - {ac.host} - </td> - <td - onClick={(): void => onSelect(acc)} - style={{ cursor: "pointer" }} - > - {ac.account} - </td> - <td class="is-actions-cell right-sticky"> - <div class="buttons is-right"> - <button - class="button is-danger is-small has-tooltip-left" - data-tooltip={i18n.str`delete selected accounts from the database`} - onClick={() => onDelete(acc)} - > - Delete - </button> - </div> - </td> - </tr> - ); - })} - </tbody> - </table> - </div>} + {talerbankAccounts.length > 0 && ( + <div class="table-container"> + <p class="card-header-title"> + <i18n.Translate>Taler type accounts</i18n.Translate> + </p> + <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> + <thead> + <tr> + <th> + <i18n.Translate>Host</i18n.Translate> + </th> + <th> + <i18n.Translate>Account name</i18n.Translate> + </th> + <th /> + </tr> + </thead> + <tbody> + {talerbankAccounts.map(({ parsed, acc }, idx) => { + const ac = parsed as PaytoUriTalerBank; + return ( + <tr key={idx}> + <td + onClick={(): void => onSelect(acc)} + style={{ cursor: "pointer" }} + > + {ac.host} + </td> + <td + onClick={(): void => onSelect(acc)} + style={{ cursor: "pointer" }} + > + {ac.account} + </td> + <td class="is-actions-cell right-sticky"> + <div class="buttons is-right"> + <button + class="button is-danger is-small has-tooltip-left" + data-tooltip={i18n.str`delete selected accounts from the database`} + onClick={() => onDelete(acc)} + > + Delete + </button> + </div> + </td> + </tr> + ); + })} + </tbody> + </table> + </div> + )} - {ibanAccounts.length > 0 && <div class="table-container"> - <p class="card-header-title"><i18n.Translate>IBAN type accounts</i18n.Translate></p> - <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> - <thead> - <tr> - <th> - <i18n.Translate>Account name</i18n.Translate> - </th> - <th> - <i18n.Translate>IBAN</i18n.Translate> - </th> - <th /> - </tr> - </thead> - <tbody> - {ibanAccounts.map(({ parsed, acc }, idx) => { - const ac = parsed as PaytoUriIBAN - return ( - <tr key={idx}> - <td - onClick={(): void => onSelect(acc)} - style={{ cursor: "pointer" }} - > - {ac.params["receiver-name"]} - </td> - <td - onClick={(): void => onSelect(acc)} - style={{ cursor: "pointer" }} - > - {ac.iban} - </td> - <td class="is-actions-cell right-sticky"> - <div class="buttons is-right"> - <button - class="button is-danger is-small has-tooltip-left" - data-tooltip={i18n.str`delete selected accounts from the database`} - onClick={() => onDelete(acc)} - > - Delete - </button> - </div> - </td> - </tr> - ); - })} - </tbody> - </table> - </div>} + {ibanAccounts.length > 0 && ( + <div class="table-container"> + <p class="card-header-title"> + <i18n.Translate>IBAN type accounts</i18n.Translate> + </p> + <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> + <thead> + <tr> + <th> + <i18n.Translate>Account name</i18n.Translate> + </th> + <th> + <i18n.Translate>IBAN</i18n.Translate> + </th> + <th /> + </tr> + </thead> + <tbody> + {ibanAccounts.map(({ parsed, acc }, idx) => { + const ac = parsed as PaytoUriIBAN; + return ( + <tr key={idx}> + <td + onClick={(): void => onSelect(acc)} + style={{ cursor: "pointer" }} + > + {ac.params["receiver-name"]} + </td> + <td + onClick={(): void => onSelect(acc)} + style={{ cursor: "pointer" }} + > + {ac.iban} + </td> + <td class="is-actions-cell right-sticky"> + <div class="buttons is-right"> + <button + class="button is-danger is-small has-tooltip-left" + data-tooltip={i18n.str`delete selected accounts from the database`} + onClick={() => onDelete(acc)} + > + Delete + </button> + </div> + </td> + </tr> + ); + })} + </tbody> + </table> + </div> + )} - {unkownAccounts.length > 0 && <div class="table-container"> - <p class="card-header-title"><i18n.Translate>Other type accounts</i18n.Translate></p> - <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> - <thead> - <tr> - <th> - <i18n.Translate>Type</i18n.Translate> - </th> - <th> - <i18n.Translate>Path</i18n.Translate> - </th> - <th /> - </tr> - </thead> - <tbody> - {unkownAccounts.map(({ parsed, acc }, idx) => { - const ac = parsed as PaytoUriUnknown - return ( - <tr key={idx}> - <td - onClick={(): void => onSelect(acc)} - style={{ cursor: "pointer" }} - > - {ac.targetType} - </td> - <td - onClick={(): void => onSelect(acc)} - style={{ cursor: "pointer" }} - > - {ac.targetPath} - </td> - <td class="is-actions-cell right-sticky"> - <div class="buttons is-right"> - <button - class="button is-danger is-small has-tooltip-left" - data-tooltip={i18n.str`delete selected accounts from the database`} - onClick={() => onDelete(acc)} - > - Delete - </button> - </div> - </td> - </tr> - ); - })} - </tbody> - </table> - </div>} + {unkownAccounts.length > 0 && ( + <div class="table-container"> + <p class="card-header-title"> + <i18n.Translate>Other type accounts</i18n.Translate> + </p> + <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> + <thead> + <tr> + <th> + <i18n.Translate>Type</i18n.Translate> + </th> + <th> + <i18n.Translate>Path</i18n.Translate> + </th> + <th /> + </tr> + </thead> + <tbody> + {unkownAccounts.map(({ parsed, acc }, idx) => { + const ac = parsed as PaytoUriUnknown; + return ( + <tr key={idx}> + <td + onClick={(): void => onSelect(acc)} + style={{ cursor: "pointer" }} + > + {ac.targetType} + </td> + <td + onClick={(): void => onSelect(acc)} + style={{ cursor: "pointer" }} + > + {ac.targetPath} + </td> + <td class="is-actions-cell right-sticky"> + <div class="buttons is-right"> + <button + class="button is-danger is-small has-tooltip-left" + data-tooltip={i18n.str`delete selected accounts from the database`} + onClick={() => onDelete(acc)} + > + Delete + </button> + </div> + </td> + </tr> + ); + })} + </tbody> + </table> + </div> + )} </Fragment> - ); } |