[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-merchant-backoffice] 01/07: fixed some comments
From: |
gnunet |
Subject: |
[taler-merchant-backoffice] 01/07: fixed some comments |
Date: |
Wed, 03 Mar 2021 18:44:08 +0100 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository merchant-backoffice.
commit 2560ef581f3be82b563695c22cef8de130519ede
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Mon Mar 1 16:17:56 2021 -0300
fixed some comments
---
packages/frontend/preact.config.js | 9 ++-
packages/frontend/src/components/auth/index.tsx | 4 +-
.../frontend/src/components/menu/LangSelector.tsx | 47 +++++++++++
.../frontend/src/components/menu/NavigationBar.tsx | 54 +++++++++++++
.../{sidebar/index.tsx => menu/SideBar.tsx} | 34 ++++----
packages/frontend/src/components/menu/index.tsx | 18 +++++
packages/frontend/src/components/navbar/index.tsx | 93 ----------------------
packages/frontend/src/index.tsx | 44 +++++-----
.../frontend/src/routes/instances/list/Table.tsx | 6 +-
.../frontend/src/routes/instances/list/View.tsx | 29 -------
.../src/routes/instances/update/UpdatePage.tsx | 32 +-------
packages/frontend/src/scss/_aside.scss | 4 +-
packages/frontend/src/template.html | 2 +-
packages/frontend/tests/header.test.tsx | 2 +-
14 files changed, 178 insertions(+), 200 deletions(-)
diff --git a/packages/frontend/preact.config.js
b/packages/frontend/preact.config.js
index 5e42bc6..f37d757 100644
--- a/packages/frontend/preact.config.js
+++ b/packages/frontend/preact.config.js
@@ -19,13 +19,16 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
-// import { DefinePlugin } from 'webpack';
-// import { config } from 'dotenv';
-// const { parsed } = config();
+import { DefinePlugin } from 'webpack';
export default {
webpack(config, env, helpers, options) {
config.node.process = 'mock'
+ config.plugins.push(
+ new DefinePlugin({
+ 'process.env.__VERSION__':
JSON.stringify(require("./package.json").version),
+ }),
+ );
config.resolve.extensions.push('.po');
config.module.rules.push({
enforce: 'pre',
diff --git a/packages/frontend/src/components/auth/index.tsx
b/packages/frontend/src/components/auth/index.tsx
index fd5e717..8eaa659 100644
--- a/packages/frontend/src/components/auth/index.tsx
+++ b/packages/frontend/src/components/auth/index.tsx
@@ -39,8 +39,8 @@ export function LoginModal({ onConfirm, withMessage }:
Props): VNode {
const i18n = useMessageTemplate()
return <div class="columns is-centered">
- <div class="column is-two-thirds ">
- <div class="modal-card">
+ <div class="column is-two-thirds " >
+ <div class="modal-card" style={{width:'100%',margin:0 }}>
{withMessage && <div class={withMessage.type === 'ERROR' ?
"notification is-danger" : "notification is-info"}>
<div class="columns is-vcentered">
<div class="column is-12">
diff --git a/packages/frontend/src/components/menu/LangSelector.tsx
b/packages/frontend/src/components/menu/LangSelector.tsx
new file mode 100644
index 0000000..25a5de7
--- /dev/null
+++ b/packages/frontend/src/components/menu/LangSelector.tsx
@@ -0,0 +1,47 @@
+import { h, VNode } from "preact";
+import { useContext, useState } from "preact/hooks";
+import { BackendContext } from "../../context/backend";
+import langIcon from '../../assets/icons/languageicon.svg'
+import * as messages from '../../messages'
+
+interface Props {
+}
+
+type LangsNames = {
+ [P in keyof typeof messages]: string
+}
+
+const names: LangsNames = {
+ es: 'Español [es]',
+ en: 'English [en]',
+}
+
+function getLangName(s: keyof LangsNames | string) {
+ if (s === 'es' || s === 'en') return names[s]
+ return s
+}
+
+export function LangSelector(): VNode {
+ const [updatingLang, setUpdatingLang] = useState(false)
+ const { lang, setLang } = useContext(BackendContext)
+ return <div class="dropdown is-active ">
+ <div class="dropdown-trigger">
+ <button class="button" aria-haspopup="true"
aria-controls="dropdown-menu" onClick={() => setUpdatingLang(!updatingLang)}>
+ <div class="icon is-small is-left">
+ <img src={langIcon} />
+ </div>
+ <span>{getLangName(lang)}</span>
+ <div class="icon is-right">
+ <i class="mdi mdi-chevron-down" />
+ </div>
+ </button>
+ </div>
+ {updatingLang && <div class="dropdown-menu" id="dropdown-menu" role="menu">
+ <div class="dropdown-content">
+ {Object.keys(messages)
+ .filter((l) => l !== lang)
+ .map(l => <a class="dropdown-item" value={l} onClick={() => {
setLang(l); setUpdatingLang(false) }}>{getLangName(l)}</a>)}
+ </div>
+ </div>}
+ </div>
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/menu/NavigationBar.tsx
b/packages/frontend/src/components/menu/NavigationBar.tsx
new file mode 100644
index 0000000..740d78a
--- /dev/null
+++ b/packages/frontend/src/components/menu/NavigationBar.tsx
@@ -0,0 +1,54 @@
+/*
+ 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 <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+import { h, VNode } from 'preact';
+import logo from '../../assets/logo.jpeg';
+import { LangSelector } from './LangSelector';
+
+interface Props {
+ onMobileMenu: () => void;
+}
+
+export function NavigationBar({ onMobileMenu }: Props): VNode {
+ return (<nav class="navbar is-fixed-top" role="navigation" aria-label="main
navigation">
+ <div class="navbar-brand">
+ <span class="navbar-item" style={{ fontSize: 24, fontWeight: 900
}}>Instances</span>
+
+ <a role="button" class="navbar-burger" aria-label="menu"
aria-expanded="false" onClick={onMobileMenu}>
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ </a>
+ </div>
+
+ <div class="navbar-menu ">
+ <a class="navbar-start is-justify-content-center is-flex-grow-1"
href="https://taler.net">
+ <img src={logo} style={{ height: 50, maxHeight: 50 }} />
+ </a>
+ <div class="navbar-end">
+ <div class="navbar-item">
+ <LangSelector />
+ </div>
+ </div>
+ </div>
+ </nav>
+ );
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/sidebar/index.tsx
b/packages/frontend/src/components/menu/SideBar.tsx
similarity index 75%
rename from packages/frontend/src/components/sidebar/index.tsx
rename to packages/frontend/src/components/menu/SideBar.tsx
index 5bc415c..d95ae81 100644
--- a/packages/frontend/src/components/sidebar/index.tsx
+++ b/packages/frontend/src/components/menu/SideBar.tsx
@@ -23,19 +23,27 @@
import { h, VNode } from 'preact';
import { useContext } from 'preact/hooks';
import { BackendContext, useConfigContext } from '../../context/backend';
+import { LangSelector } from './LangSelector';
interface Props {
onLogout: () => void;
+ onClick: () => void;
+ mobile?: boolean;
}
-export function Sidebar({ onLogout }: Props): VNode {
+export function Sidebar({ onLogout, onClick }: Props): VNode {
const config = useConfigContext();
const backend = useContext(BackendContext);
+
return (
- <aside class="aside is-placed-left is-expanded">
+ <aside class="aside is-placed-left is-expanded" onClick={onClick}>
+ <div class="footer" onClick={(e)=>{return e.stopImmediatePropagation()}}>
+ <LangSelector />
+ </div>
<div class="aside-tools">
<div class="aside-tools-label">
- <span><b>Taler</b> Merchant Backend</span>
+ <div><b>Taler</b> Merchant Office</div>
+ <div class="is-size-7 has-text-right " style={{ lineHeight: 0,
marginTop: -10 }}>v{process.env.__VERSION__} ({config.version})</div>
</div>
</div>
<div class="menu is-menu-main">
@@ -73,28 +81,24 @@ export function Sidebar({ onLogout }: Props): VNode {
<ul class="menu-list">
<li>
<div>
- <span class="icon"><i class="mdi mdi-currency-eur" /></span>
+ <span style={{ width: '3rem' }} class="icon"><i class="mdi
mdi-currency-eur" /></span>
<span class="menu-item-label">{config.currency}</span>
</div>
</li>
<li>
- <div>
- <span class="icon"><i class="mdi mdi-web" /></span>
- <span class="menu-item-label">{backend.url}</span>
+ <div >
+ <span style={{ width: '3rem' }} class="icon"><i class="mdi
mdi-web" /></span>
+ <span class="menu-item-label">
+ {new URL(backend.url).hostname} / default
+ </span>
</div>
</li>
- <li>
- <div>
- <span class="icon">V</span>
- <span class="menu-item-label">{config.version}</span>
- </div>
- </li>
- <li>
+ {!backend.token ? null : <li>
<a class="has-icon is-state-info is-hoverable" onClick={(): void
=> onLogout()}>
<span class="icon"><i class="mdi mdi-logout default"></i></span>
<span class="menu-item-label">Log out</span>
</a>
- </li>
+ </li>}
</ul>
</div>
</aside>
diff --git a/packages/frontend/src/components/menu/index.tsx
b/packages/frontend/src/components/menu/index.tsx
new file mode 100644
index 0000000..ec23f7e
--- /dev/null
+++ b/packages/frontend/src/components/menu/index.tsx
@@ -0,0 +1,18 @@
+import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { NavigationBar } from "./NavigationBar";
+import { Sidebar } from "./SideBar";
+
+interface Props {
+ sidebar?: boolean;
+ onLogout: () => void;
+}
+
+export function Menu({ sidebar, onLogout }: Props): VNode {
+ const [mobileOpen, setMobileOpen] = useState(false)
+ return <div class={mobileOpen ? "has-aside-mobile-expanded" : ""}>
+ <NavigationBar onMobileMenu={() => setMobileOpen(!mobileOpen)} />
+ {sidebar && <Sidebar onLogout={onLogout} mobile={mobileOpen} onClick={()
=> setMobileOpen(false)} />}
+ </div>
+
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/navbar/index.tsx
b/packages/frontend/src/components/navbar/index.tsx
deleted file mode 100644
index eb7857e..0000000
--- a/packages/frontend/src/components/navbar/index.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
- 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 <http://www.gnu.org/licenses/>
- */
-
-/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
-
-import { h, VNode } from 'preact';
-import * as messages from '../../messages'
-import logo from '../../assets/logo.jpeg';
-import langIcon from '../../assets/icons/languageicon.svg'
-import { useState } from 'preact/hooks';
-
-interface Props {
- lang: string;
- setLang: (l: string) => void;
-}
-
-type LangsNames = {
- [P in keyof typeof messages]: string
-}
-
-const names: LangsNames = {
- es: 'Español [es]',
- en: 'English [en]',
-}
-
-function getLangName(s: keyof LangsNames | string) {
- if (s === 'es' || s === 'en') return names[s]
- return s
-}
-
-
-export function NavigationBar({ lang, setLang }: Props): VNode {
- const [updatingLang, setUpdatingLang] = useState(false)
- return (<nav class="navbar is-fixed-top" role="navigation" aria-label="main
navigation">
- <div class="navbar-brand">
- <a class="navbar-item" href="https://taler.net">
- <img src={logo} style={{ height: 50, maxHeight: 50 }} />
- </a>
-
- <a role="button" class="navbar-burger" aria-label="menu"
aria-expanded="false" data-target="navbarBasicExample">
- <span aria-hidden="true" />
- <span aria-hidden="true" />
- <span aria-hidden="true" />
- </a>
- </div>
-
- <div class="navbar-menu">
-
- <div class="navbar-end">
- <div class="navbar-item">
-
- <div class="dropdown is-active ">
- <div class="dropdown-trigger">
- <button class="button" aria-haspopup="true"
aria-controls="dropdown-menu" onClick={() => setUpdatingLang(!updatingLang)}>
- <div class="icon is-small is-left">
- <img src={langIcon} />
- </div>
- <span>{getLangName(lang)}</span>
- <div class="icon is-right">
- <i class="mdi mdi-chevron-down" />
- </div>
- </button>
- </div>
- { updatingLang && <div class="dropdown-menu" id="dropdown-menu"
role="menu">
- <div class="dropdown-content">
- {Object.keys(messages)
- .filter((l) => l !== lang)
- .map(l => <a class="dropdown-item" value={l} onClick={() =>
{setLang(l); setUpdatingLang(false)}}>{getLangName(l)}</a>)}
- </div>
- </div> }
- </div>
- </div>
- </div>
- </div>
- </nav>
- );
-}
\ No newline at end of file
diff --git a/packages/frontend/src/index.tsx b/packages/frontend/src/index.tsx
index 62e96f9..19b6bd7 100644
--- a/packages/frontend/src/index.tsx
+++ b/packages/frontend/src/index.tsx
@@ -26,8 +26,6 @@ import { useCallback, useContext, useEffect, useMemo,
useState } from "preact/ho
import { Route, route } from 'preact-router';
import { MessageProvider, useMessageTemplate } from 'preact-messages';
-import { Sidebar } from './components/sidebar';
-import { NavigationBar } from './components/navbar';
import { Notifications } from './components/notifications';
import * as messages from './messages'
import { useBackendContextState } from './hooks';
@@ -38,6 +36,7 @@ import { hasKey, onTranslationError } from
"./utils/functions";
import LoginPage from './routes/login';
import { ApplicationReadyRoutes } from "./ApplicationReadyRoutes";
+import { Menu } from "./components/menu";
export enum RootPaths {
root = '/',
@@ -71,7 +70,7 @@ export default function Application(): VNode {
function ApplicationStatusRoutes(): VNode {
const { notifications, pushNotification, removeNotification } =
useNotifications()
- const { lang, setLang, changeBackend, updateToken, token } =
useContext(BackendContext)
+ const { changeBackend, updateToken, token } = useContext(BackendContext)
const backendConfig = useBackendConfig();
const i18n = useMessageTemplate()
@@ -84,25 +83,31 @@ function ApplicationStatusRoutes(): VNode {
const v = backendConfig.data?.currency + ' ' + backendConfig.data?.version
const ctx = useMemo(() => ({ currency: backendConfig.data?.currency || '',
version: backendConfig.data?.version || '' }), [v])
- if (!token) {
- return <div id="app">
- <NavigationBar lang={lang} setLang={setLang} />
- <LoginPage
- onConfirm={(url: string, token?: string) => {
- changeBackend(url)
- if (token) updateToken(token)
- route(RootPaths.list_instances)
- }}
- />
- </div>
- }
-
if (!backendConfig.data) {
+
if (!backendConfig.error) return <div class="is-loading"></div>
- if (backendConfig.unauthorized) return <div class="asd">asd </div>
+
+ if (backendConfig.unauthorized) {
+ return <div id="app">
+ <Menu onLogout={() => {
+ cleaners.forEach(c => c())
+ route(RootPaths.list_instances)
+ }} />
+ <LoginPage
+ onConfirm={(url: string, token?: string) => {
+ changeBackend(url)
+ if (token) updateToken(token)
+ route(RootPaths.list_instances)
+ }}
+ />
+ </div>
+ }
return <div id="app">
- <NavigationBar lang={lang} setLang={setLang} />
+ <Menu onLogout={() => {
+ cleaners.forEach(c => c())
+ route(RootPaths.list_instances)
+ }} />
<LoginPage
withMessage={{
message: i18n`Couldnt access the server`,
@@ -120,8 +125,7 @@ function ApplicationStatusRoutes(): VNode {
return <div id="app" class="has-navbar-fixed-top">
<ConfigContext.Provider value={ctx}>
- <NavigationBar lang={lang} setLang={setLang} />
- <Sidebar onLogout={() => {
+ <Menu sidebar onLogout={() => {
cleaners.forEach(c => c())
route(RootPaths.list_instances)
}} />
diff --git a/packages/frontend/src/routes/instances/list/Table.tsx
b/packages/frontend/src/routes/instances/list/Table.tsx
index 3270806..2c00668 100644
--- a/packages/frontend/src/routes/instances/list/Table.tsx
+++ b/packages/frontend/src/routes/instances/list/Table.tsx
@@ -111,15 +111,15 @@ function Table({ rowSelection, rowSelectionHandler,
instances, onUpdate, onDelet
</thead>
<tbody>
{instances.map(i => {
- return <tr onClick={(): void => onUpdate(i.id)} style={{cursor:
'pointer'}}>
+ return <tr>
<td class="is-checkbox-cell">
<label class="b-checkbox checkbox">
<input type="checkbox" checked={rowSelection.indexOf(i.id) !=
-1} onClick={(): void => rowSelectionHandler(toggleSelected(i.id))} />
<span class="check" />
</label>
</td>
- <td >{i.id}</td>
- <td >{i.name}</td>
+ <td onClick={(): void => onUpdate(i.id)} style={{cursor:
'pointer'}} >{i.id}</td>
+ <td onClick={(): void => onUpdate(i.id)} style={{cursor:
'pointer'}} >{i.name}</td>
<td class="is-actions-cell">
<div class="buttons is-right">
<button class="button is-small is-danger jb-modal"
type="button" onClick={(): void => onDelete(i)}>
diff --git a/packages/frontend/src/routes/instances/list/View.tsx
b/packages/frontend/src/routes/instances/list/View.tsx
index d224980..a66fb5e 100644
--- a/packages/frontend/src/routes/instances/list/View.tsx
+++ b/packages/frontend/src/routes/instances/list/View.tsx
@@ -36,36 +36,7 @@ interface Props {
export function View({ instances, isLoading, onCreate, onDelete, onUpdate,
selected }: Props): VNode {
return <div id="app">
- <section class="section is-title-bar">
- <div class="level">
- <div class="level-left">
- <div class="level-item">
- <ul>
- <li><Message id="Merchant" /></li>
- <li><Message id="Instances" /></li>
- </ul>
- </div>
- </div>
- </div>
- </section>
-
- <section class={isLoading ? "hero is-hero-bar" : "hero is-hero-bar
is-loading"}>
- <div class="hero-body">
- <div class="level">
- <div class="level-left">
- <div class="level-item">
- <h1 class="title">
- <Message id="List of configured instances" />
- </h1>
- </div>
- </div>
- <div class="level-right" style="display: none;">
- <div class="level-item" />
- </div>
- </div>
- </div>
- </section>
<section class="section is-main-section">
<CardTable instances={instances} onDelete={onDelete} onUpdate={onUpdate}
selected={selected} onCreate={onCreate} />
</section>
diff --git a/packages/frontend/src/routes/instances/update/UpdatePage.tsx
b/packages/frontend/src/routes/instances/update/UpdatePage.tsx
index cb7fcb6..1a7554f 100644
--- a/packages/frontend/src/routes/instances/update/UpdatePage.tsx
+++ b/packages/frontend/src/routes/instances/update/UpdatePage.tsx
@@ -75,37 +75,7 @@ export function UpdatePage({ onUpdate, isLoading, selected,
onBack }: Props): VN
const config = useContext(ConfigContext)
return <div>
- <section class="section is-title-bar">
-
- <div class="level">
- <div class="level-left">
- <div class="level-item">
- <ul>
- <li><Message id="Merchant" /></li>
- <li><Message id="Instances" /></li>
- </ul>
- </div>
- </div>
- </div>
- </section>
-
- <section class={isLoading ? "hero is-hero-bar" : "hero is-hero-bar
is-loading"}>
- <div class="hero-body">
- <div class="level">
- <div class="level-left">
- <div class="level-item">
- <h1 class="title">
- <Message id="Update this instance" />
- </h1>
- </div>
- </div>
- <div class="level-right" style="display: none;">
- <div class="level-item" />
- </div>
- </div>
- </div>
- </section>
-
+
<section class="section is-main-section">
<div class="columns">
<div class="column" />
diff --git a/packages/frontend/src/scss/_aside.scss
b/packages/frontend/src/scss/_aside.scss
index 9598c60..21fe189 100644
--- a/packages/frontend/src/scss/_aside.scss
+++ b/packages/frontend/src/scss/_aside.scss
@@ -171,8 +171,8 @@ aside.aside {
}
}
}
- html.has-aside-mobile-expanded {
- nav.navbar {
+ div.has-aside-mobile-expanded {
+ nav.navbar {
margin-left: $aside-mobile-width;
}
aside.aside {
diff --git a/packages/frontend/src/template.html
b/packages/frontend/src/template.html
index ade6507..49c1c88 100644
--- a/packages/frontend/src/template.html
+++ b/packages/frontend/src/template.html
@@ -9,7 +9,7 @@
<link rel="apple-touch-icon"
href="/assets/icons/apple-touch-icon.png">
<% preact.headEnd %>
</head>
- <body class="has-navbar-fixed-top">
+ <body>
<% preact.bodyEnd %>
</body>
</html>
diff --git a/packages/frontend/tests/header.test.tsx
b/packages/frontend/tests/header.test.tsx
index 42e23ec..f163960 100644
--- a/packages/frontend/tests/header.test.tsx
+++ b/packages/frontend/tests/header.test.tsx
@@ -20,7 +20,7 @@
*/
import { h } from 'preact';
-import { Sidebar, } from '../src/components/sidebar';
+import { Sidebar } from '../src/components/menu/SideBar';
// See: https://github.com/preactjs/enzyme-adapter-preact-pure
import { shallow } from 'enzyme';
import * as backend from '../src/context/backend';
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
- [taler-merchant-backoffice] branch master updated (6c363c9 -> f3aea32), gnunet, 2021/03/03
- [taler-merchant-backoffice] 06/07: add left label to inputsecured, gnunet, 2021/03/03
- [taler-merchant-backoffice] 04/07: login modal should be sent on update, gnunet, 2021/03/03
- [taler-merchant-backoffice] 02/07: lang selector behavior, gnunet, 2021/03/03
- [taler-merchant-backoffice] 05/07: improve sidebar to show instance id and navbar to show a title, gnunet, 2021/03/03
- [taler-merchant-backoffice] 01/07: fixed some comments,
gnunet <=
- [taler-merchant-backoffice] 03/07: improve app routing, gnunet, 2021/03/03
- [taler-merchant-backoffice] 07/07: refactor backend mutate api to use token from instance id, implemented new passwod endpoint, gnunet, 2021/03/03