From 5883d42d800c7b444c59d626bcaa5abca7dc83d0 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 19 Oct 2021 10:56:52 -0300 Subject: add template from merchant backoffice --- packages/anastasis-webui/src/components/app.tsx | 11 ++- .../src/components/menu/LangSelector.tsx | 73 +++++++++++++++ .../src/components/menu/NavigationBar.tsx | 58 ++++++++++++ .../src/components/menu/SideBar.tsx | 101 ++++++++++++++++++++ .../anastasis-webui/src/components/menu/index.tsx | 104 +++++++++++++++++++++ 5 files changed, 343 insertions(+), 4 deletions(-) create mode 100644 packages/anastasis-webui/src/components/menu/LangSelector.tsx create mode 100644 packages/anastasis-webui/src/components/menu/NavigationBar.tsx create mode 100644 packages/anastasis-webui/src/components/menu/SideBar.tsx create mode 100644 packages/anastasis-webui/src/components/menu/index.tsx (limited to 'packages/anastasis-webui/src/components') diff --git a/packages/anastasis-webui/src/components/app.tsx b/packages/anastasis-webui/src/components/app.tsx index 45c9035f0..c6b4cfc14 100644 --- a/packages/anastasis-webui/src/components/app.tsx +++ b/packages/anastasis-webui/src/components/app.tsx @@ -1,12 +1,15 @@ import { FunctionalComponent, h } from "preact"; +import { TranslationProvider } from "../context/translation"; -import AnastasisClient from "../routes/home"; +import AnastasisClient from "../pages/home"; const App: FunctionalComponent = () => { return ( -
- -
+ +
+ +
+ ); }; diff --git a/packages/anastasis-webui/src/components/menu/LangSelector.tsx b/packages/anastasis-webui/src/components/menu/LangSelector.tsx new file mode 100644 index 000000000..41d08a58b --- /dev/null +++ b/packages/anastasis-webui/src/components/menu/LangSelector.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 { 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) { + if (names[s]) return names[s] + return s +} + +export function LangSelector(): VNode { + const [updatingLang, setUpdatingLang] = useState(false) + const { lang, changeLanguage } = useTranslationContext() + + return
+
+ +
+ {updatingLang && } +
+} \ No newline at end of file diff --git a/packages/anastasis-webui/src/components/menu/NavigationBar.tsx b/packages/anastasis-webui/src/components/menu/NavigationBar.tsx new file mode 100644 index 000000000..e1bb4c7c0 --- /dev/null +++ b/packages/anastasis-webui/src/components/menu/NavigationBar.tsx @@ -0,0 +1,58 @@ +/* + 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 { LangSelector } from './LangSelector'; + +interface Props { + onMobileMenu: () => void; + title: string; +} + +export function NavigationBar({ onMobileMenu, title }: Props): VNode { + return ( + ); +} \ No newline at end of file diff --git a/packages/anastasis-webui/src/components/menu/SideBar.tsx b/packages/anastasis-webui/src/components/menu/SideBar.tsx new file mode 100644 index 000000000..628adb571 --- /dev/null +++ b/packages/anastasis-webui/src/components/menu/SideBar.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 } from 'preact'; +import { Translate } from '../../i18n'; +import { LangSelector } from './LangSelector'; + +interface Props { + mobile?: boolean; +} + +export function Sidebar({ mobile }: Props): VNode { + // const config = useConfigContext(); + const config = { version: 'none' } + const process = { env : { __VERSION__: '0.0.0'}} + + return ( + + ); +} + diff --git a/packages/anastasis-webui/src/components/menu/index.tsx b/packages/anastasis-webui/src/components/menu/index.tsx new file mode 100644 index 000000000..d15bf9264 --- /dev/null +++ b/packages/anastasis-webui/src/components/menu/index.tsx @@ -0,0 +1,104 @@ +/* + 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 = `Taler Backoffice: ${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