packages/demobank-ui/src/pages/admin/AccountList.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
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>
                                                    &nbsp;
                                                    <span class="currency">{`${balance.currency}`}</span>
                                                </span>
                                            )}
                                        </td>
                                        <td>
                                            <a
                                                href="#"
                                                onClick={(e) => {
                                                    e.preventDefault();
                                                    onAction("update-password", item.username)
                                                }}
                                            >
                                                change password
                                            </a>
                                            &nbsp;
                                            <a
                                                href="#"
                                                onClick={(e) => {
                                                    e.preventDefault();
                                                    onAction("show-cashout", item.username)
                                                }}
                                            >
                                                cashouts
                                            </a>
                                            &nbsp;
                                            <a
                                                href="#"
                                                onClick={(e) => {
                                                    e.preventDefault();
                                                    onAction("remove-account", item.username)
                                                }}
                                            >
                                                remove
                                            </a>
                                        </td>
                                    </tr>
                                );
                            })}
                        </tbody>
                    </table>
                </div>
            </article>
        )}
    </section>
}