From 3e060b80428943c6562250a6ff77eff10a0259b7 Mon Sep 17 00:00:00 2001 From: Florian Dold Date: Mon, 24 Oct 2022 10:46:14 +0200 Subject: repo: integrate packages from former merchant-backoffice.git --- .../src/components/menu/LangSelector.tsx | 101 +++++++++++++++ .../src/components/menu/NavigationBar.tsx | 53 ++++++++ .../demobank-ui/src/components/menu/SideBar.tsx | 73 +++++++++++ packages/demobank-ui/src/components/menu/index.tsx | 135 +++++++++++++++++++++ 4 files changed, 362 insertions(+) create mode 100644 packages/demobank-ui/src/components/menu/LangSelector.tsx create mode 100644 packages/demobank-ui/src/components/menu/NavigationBar.tsx create mode 100644 packages/demobank-ui/src/components/menu/SideBar.tsx create mode 100644 packages/demobank-ui/src/components/menu/index.tsx (limited to 'packages/demobank-ui/src/components/menu') diff --git a/packages/demobank-ui/src/components/menu/LangSelector.tsx b/packages/demobank-ui/src/components/menu/LangSelector.tsx new file mode 100644 index 000000000..221237a5b --- /dev/null +++ b/packages/demobank-ui/src/components/menu/LangSelector.tsx @@ -0,0 +1,101 @@ +/* + This file is part of GNU Taler + (C) 2021 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 { h, VNode, Fragment } from 'preact'; +import { useCallback, useEffect, useState } from 'preact/hooks'; +import langIcon from '../../assets/icons/languageicon.svg'; +import { useTranslationContext } from '../../context/translation'; +import { strings as messages } from '../../i18n/strings'; + +type LangsNames = { + [P in keyof typeof messages]: string; +}; + +const names: LangsNames = { + es: 'Español [es]', + en: 'English [en]', + fr: 'Français [fr]', + de: 'Deutsch [de]', + sv: 'Svenska [sv]', + it: 'Italiano [it]', +}; + +function getLangName(s: keyof LangsNames | string): string { + if (names[s]) return names[s]; + return String(s); +} + +// FIXME: explain "like py". +export function LangSelectorLikePy(): VNode { + const [updatingLang, setUpdatingLang] = useState(false); + const { lang, changeLanguage } = useTranslationContext(); + const [hidden, setHidden] = useState(true) + useEffect(() => { + function bodyKeyPress(event:KeyboardEvent) { + if (event.code === 'Escape') + setHidden(true); + + } + function bodyOnClick(event:Event) { + setHidden(true); + } + document.body.addEventListener('click', bodyOnClick) + document.body.addEventListener('keydown', bodyKeyPress as any) + return () => { + document.body.removeEventListener('keydown', bodyKeyPress as any) + document.body.removeEventListener('click', bodyOnClick) + } + },[]) + return ( + + +
+
+
+ {Object.keys(messages) + .filter((l) => l !== lang) + .map((l) => ( + { + changeLanguage(l); + setUpdatingLang(false); + }}> + {getLangName(l)} + + ))} +
+
+
+
+ + ); +} diff --git a/packages/demobank-ui/src/components/menu/NavigationBar.tsx b/packages/demobank-ui/src/components/menu/NavigationBar.tsx new file mode 100644 index 000000000..9e540213d --- /dev/null +++ b/packages/demobank-ui/src/components/menu/NavigationBar.tsx @@ -0,0 +1,53 @@ +/* + This file is part of GNU Taler + (C) 2021 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 { h, VNode } from 'preact'; +import logo from '../../assets/logo.jpeg'; +import { LangSelectorLikePy as LangSelector } from './LangSelector'; + +interface Props { + onMobileMenu: () => void; + title: string; +} + +export function NavigationBar({ onMobileMenu, title }: Props): VNode { + return ( + + ); +} diff --git a/packages/demobank-ui/src/components/menu/SideBar.tsx b/packages/demobank-ui/src/components/menu/SideBar.tsx new file mode 100644 index 000000000..7f9981a1c --- /dev/null +++ b/packages/demobank-ui/src/components/menu/SideBar.tsx @@ -0,0 +1,73 @@ +/* + This file is part of GNU Taler + (C) 2021 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 { h, VNode } from 'preact'; +import { Translate } from '../../i18n'; + +interface Props { + mobile?: boolean; +} + +export function Sidebar({ mobile }: Props): VNode { + // const config = useConfigContext(); + const config = { version: 'none' }; + // FIXME: add replacement for __VERSION__ with the current version + const process = { env: { __VERSION__: '0.0.0' } }; + + return ( + + ); +} diff --git a/packages/demobank-ui/src/components/menu/index.tsx b/packages/demobank-ui/src/components/menu/index.tsx new file mode 100644 index 000000000..07e1c5265 --- /dev/null +++ b/packages/demobank-ui/src/components/menu/index.tsx @@ -0,0 +1,135 @@ +/* + This file is part of GNU Taler + (C) 2021 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 + */ + +import { ComponentChildren, Fragment, h, VNode } from 'preact'; +import Match from 'preact-router/match'; +import { useEffect, useState } from 'preact/hooks'; +import { NavigationBar } from './NavigationBar'; +import { Sidebar } from './SideBar'; + +interface MenuProps { + title: string; +} + +function WithTitle({ + title, + children, +}: { + title: string; + children: ComponentChildren; +}): VNode { + useEffect(() => { + document.title = `${title}`; + }, [title]); + return {children}; +} + +export function Menu({ title }: MenuProps): VNode { + const [mobileOpen, setMobileOpen] = useState(false); + + return ( + + {({ path }: { path: string }) => { + const titleWithSubtitle = title; // title ? title : (!admin ? getInstanceTitle(path, instance) : getAdminTitle(path, instance)) + return ( + +
setMobileOpen(false)} + > + setMobileOpen(!mobileOpen)} + title={titleWithSubtitle} + /> + + +
+ + ); + }} + + ); +} + +interface NotYetReadyAppMenuProps { + title: string; + onLogout?: () => void; +} + +interface NotifProps { + notification?: Notification; +} +export function NotificationCard({ + notification: n, +}: NotifProps): VNode | null { + if (!n) return null; + return ( +
+
+
+
+
+

{n.message}

+
+ {n.description &&
{n.description}
} +
+
+
+
+ ); +} + +export function NotYetReadyAppMenu({ + onLogout, + title, +}: NotYetReadyAppMenuProps): VNode { + const [mobileOpen, setMobileOpen] = useState(false); + + useEffect(() => { + document.title = `Taler Backoffice: ${title}`; + }, [title]); + + return ( +
setMobileOpen(false)} + > + setMobileOpen(!mobileOpen)} + title={title} + /> + {onLogout && } +
+ ); +} + +export interface Notification { + message: string; + description?: string | VNode; + type: MessageType; +} + +export type ValueOrFunction = T | ((p: T) => T); +export type MessageType = 'INFO' | 'WARN' | 'ERROR' | 'SUCCESS'; -- cgit v1.2.3