From 4ee903eb5e639fa0e122a689cc431e8f18ca1197 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 6 Nov 2023 11:54:45 -0300 Subject: aml ui --- packages/aml-backoffice-ui/src/Dashboard.tsx | 564 ++++++--------------------- 1 file changed, 120 insertions(+), 444 deletions(-) (limited to 'packages/aml-backoffice-ui/src/Dashboard.tsx') diff --git a/packages/aml-backoffice-ui/src/Dashboard.tsx b/packages/aml-backoffice-ui/src/Dashboard.tsx index bd8a48c45..5d86836d4 100644 --- a/packages/aml-backoffice-ui/src/Dashboard.tsx +++ b/packages/aml-backoffice-ui/src/Dashboard.tsx @@ -1,13 +1,17 @@ -import { useNotifications } from "@gnu-taler/web-util/browser"; +import { Footer, GlobalNotificationsBanner, Header, LangSelector, notifyError, notifyException, useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser"; import { Dialog, Transition } from "@headlessui/react"; import { UserIcon, XCircleIcon } from "@heroicons/react/20/solid"; import { CheckCircleIcon, XMarkIcon } from "@heroicons/react/24/outline"; import { InformationCircleIcon } from "@heroicons/react/24/solid"; import { ComponentChildren, Fragment, VNode, h } from "preact"; -import { useState } from "preact/hooks"; +import { useEffect, useErrorBoundary, useState } from "preact/hooks"; import logo from "./assets/logo-2021.svg"; import { Pages } from "./pages.js"; -import { Router, useCurrentLocation } from "./route.js"; +import { PageEntry, Router, useCurrentLocation } from "./route.js"; +import { uiSettings } from "./settings.js"; +import { TranslatedString } from "@gnu-taler/taler-util"; +import { useOfficer } from "./hooks/useOfficer.js"; +import { getAllBooleanSettings, getLabelForSetting, useSettings } from "./hooks/useSettings.js"; function classNames(...classes: string[]) { return classes.filter(Boolean).join(" "); @@ -78,6 +82,7 @@ const versionText = VERSION * writing text with the correct format */ +const pageList = Object.values(Pages); function LeftMenu() { const currentLocation = useCurrentLocation(pageList); @@ -88,9 +93,9 @@ function LeftMenu() { - {/*
  • -
    - Info -
    -     -
    • */} - {/*
  • - - -
    • */} ); } + export function ExchangeAmlFrame({ children, }: { children?: ComponentChildren; }): VNode { - const [sidebarOpen, setSidebarOpen] = useState(false); + const { i18n } = useTranslationContext(); - return ( - - -
    -
    -
    -

    - Exchange AML Backoffice -

    -
    -
    - -
    -
    -     -
    - { - setSidebarOpen(true); - }} - /> - - {children} -
    -     - ); -} + const [error, resetError] = useErrorBoundary(); + + useEffect(() => { + if (error) { + if (error instanceof Error) { + notifyException(i18n.str`Internal error, please report.`, error) + } else { + notifyError(i18n.str`Internal error, please report.`, String(error) as TranslatedString) + } + resetError() + } + }, [error]) -export function Main(): VNode { - return
    -
    - { - return
    not found
    ; + const officer = useOfficer(); + const [settings, updateSettings] = useSettings(); + + return (
    +
    +
    { + officer.lock() }} - /> + sites={[]} + supportedLangs={["en", "es", "de"]} + > +
  • +
    + Preferences +
    +
      + {getAllBooleanSettings().map(set => { + const isOn: boolean = !!settings[set] + return
    • +
      + + + {getLabelForSetting(set, i18n)} + + + +
      +
      • + })} +
    +
    • +
    -
    -} -const pageList = Object.values(Pages); + -function NavigationBar({ - isOpen, - setOpen, - children, -}: { - isOpen: boolean; - setOpen: (v: boolean) => void; - children: ComponentChildren; -}) { - return ( - - - - -
    - +
    + {officer.state !== "ready" ? undefined : + + } +
    +
    + {children} +
    +
    -
    - - - -
    - -
    -     - {children} -     -     -
    -
    -     + - -     +