From 0f7a3337a4259c1c28e35c2ff116942f533f5189 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 20 Nov 2023 23:33:37 -0300 Subject: merchant fixes --- .../src/paths/instance/otp_devices/list/Table.tsx | 211 +++++++++++++++++++++ 1 file changed, 211 insertions(+) create mode 100644 packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/Table.tsx (limited to 'packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/Table.tsx') diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/Table.tsx new file mode 100644 index 000000000..0c28027fe --- /dev/null +++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/Table.tsx @@ -0,0 +1,211 @@ +/* + 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 + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { h, VNode } from "preact"; +import { StateUpdater, useState } from "preact/hooks"; +import { MerchantBackend } from "../../../../declaration.js"; + +type Entity = MerchantBackend.OTP.OtpDeviceEntry; + +interface Props { + devices: Entity[]; + onDelete: (e: Entity) => void; + onSelect: (e: Entity) => void; + onCreate: () => void; + onLoadMoreBefore?: () => void; + hasMoreBefore?: boolean; + hasMoreAfter?: boolean; + onLoadMoreAfter?: () => void; +} + +export function CardTable({ + devices, + onCreate, + onDelete, + onSelect, + onLoadMoreAfter, + onLoadMoreBefore, + hasMoreAfter, + hasMoreBefore, +}: Props): VNode { + const [rowSelection, rowSelectionHandler] = useState([]); + + const { i18n } = useTranslationContext(); + + return ( +
+
+

+ + + + OTP Devices +

+
+ + + +
+
+
+
+
+ {devices.length > 0 ? ( + + ) : ( + + )} + + + + + ); +} +interface TableProps { + rowSelection: string[]; + instances: Entity[]; + onDelete: (e: Entity) => void; + onSelect: (e: Entity) => void; + rowSelectionHandler: StateUpdater; + onLoadMoreBefore?: () => void; + hasMoreBefore?: boolean; + hasMoreAfter?: boolean; + onLoadMoreAfter?: () => void; +} + +function toggleSelected(id: T): (prev: T[]) => T[] { + return (prev: T[]): T[] => + prev.indexOf(id) == -1 ? [...prev, id] : prev.filter((e) => e != id); +} + +function Table({ + instances, + onLoadMoreAfter, + onDelete, + onSelect, + onLoadMoreBefore, + hasMoreAfter, + hasMoreBefore, +}: TableProps): VNode { + const { i18n } = useTranslationContext(); + return ( +
+ {hasMoreBefore && ( + + )} +
+ + + + + + + + {instances.map((i) => { + return ( + + + + + + ); + })} + +
+ ID + + Description + +
onSelect(i)} + style={{ cursor: "pointer" }} + > + {i.otp_device_id} + onSelect(i)} + style={{ cursor: "pointer" }} + > + {i.otp_device_id} + +
+ +
+
+ {hasMoreAfter && ( + + )} +
+ ); +} + +function EmptyTable(): VNode { + const { i18n } = useTranslationContext(); + return ( +
+

+ + + +

+

+ + There is no devices yet, add more pressing the + sign + +

+
+ ); +} -- cgit v1.2.3