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
|
/*
This file is part of GNU Taler
(C) 2021-2023 Taler Systems S.A.
GNU Taler is free software; you can redistribute it and/or modify it under the
terms of the GNU General Public License as published by the Free Software
Foundation; either version 3, or (at your option) any later version.
GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
import { Amounts } from "@gnu-taler/taler-util";
import { h, VNode } from "preact";
import emptyImage from "../../assets/empty.png";
import { useTranslationContext } from "@gnu-taler/web-util/browser";
import { MerchantBackend } from "../../declaration.js";
interface Props {
list: MerchantBackend.Product[];
actions?: {
name: string;
tooltip: string;
handler: (d: MerchantBackend.Product, index: number) => void;
}[];
}
export function ProductList({ list, actions = [] }: Props): VNode {
const { i18n } = useTranslationContext();
return (
<div class="table-container">
<table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
<thead>
<tr>
<th>
<i18n.Translate>image</i18n.Translate>
</th>
<th>
<i18n.Translate>description</i18n.Translate>
</th>
<th>
<i18n.Translate>quantity</i18n.Translate>
</th>
<th>
<i18n.Translate>unit price</i18n.Translate>
</th>
<th>
<i18n.Translate>total price</i18n.Translate>
</th>
<th />
</tr>
</thead>
<tbody>
{list.map((entry, index) => {
const unitPrice = !entry.price ? "0" : entry.price;
const totalPrice = !entry.price
? "0"
: Amounts.stringify(
Amounts.mult(
Amounts.parseOrThrow(entry.price),
entry.quantity,
).amount,
);
return (
<tr key={index}>
<td>
<img
style={{ height: 32, width: 32 }}
src={entry.image ? entry.image : emptyImage}
/>
</td>
<td>{entry.description}</td>
<td>
{entry.quantity === 0
? "--"
: `${entry.quantity} ${entry.unit}`}
</td>
<td>{unitPrice}</td>
<td>{totalPrice}</td>
<td class="is-actions-cell right-sticky">
{actions.map((a, i) => {
return (
<div key={i} class="buttons is-right">
<button
class="button is-small is-danger has-tooltip-left"
data-tooltip={a.tooltip}
type="button"
onClick={() => a.handler(entry, index)}
>
{a.name}
</button>
</div>
);
})}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
}
|
