[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-merchant-backoffice] 05/07: improve sidebar to show instance id a
From: |
gnunet |
Subject: |
[taler-merchant-backoffice] 05/07: improve sidebar to show instance id and navbar to show a title |
Date: |
Wed, 03 Mar 2021 18:44:12 +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 6ca26ca2dafa4db313e436a022082bc79f9c08ee
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Wed Mar 3 14:38:10 2021 -0300
improve sidebar to show instance id and navbar to show a title
---
.../frontend/src/components/menu/LangSelector.tsx | 6 +--
.../frontend/src/components/menu/NavigationBar.tsx | 5 ++-
packages/frontend/src/components/menu/SideBar.tsx | 45 +++++++++++++---------
packages/frontend/src/components/menu/index.tsx | 11 +++---
packages/frontend/src/components/modal/index.tsx | 5 ++-
5 files changed, 42 insertions(+), 30 deletions(-)
diff --git a/packages/frontend/src/components/menu/LangSelector.tsx
b/packages/frontend/src/components/menu/LangSelector.tsx
index 27a58a0..50a2199 100644
--- a/packages/frontend/src/components/menu/LangSelector.tsx
+++ b/packages/frontend/src/components/menu/LangSelector.tsx
@@ -15,8 +15,8 @@
*/
import { h, VNode } from "preact";
-import { useContext, useState } from "preact/hooks";
-import { BackendContext } from "../../context/backend";
+import { useState } from "preact/hooks";
+import { useBackendContext } from "../../context/backend";
import langIcon from '../../assets/icons/languageicon.svg'
import * as messages from '../../messages'
@@ -36,7 +36,7 @@ function getLangName(s: keyof LangsNames | string) {
export function LangSelector(): VNode {
const [updatingLang, setUpdatingLang] = useState(false)
- const { lang, setLang } = useContext(BackendContext)
+ const { lang, setLang } = useBackendContext()
return <div class="dropdown is-active ">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true"
aria-controls="dropdown-menu" onClick={() => setUpdatingLang(!updatingLang)}>
diff --git a/packages/frontend/src/components/menu/NavigationBar.tsx
b/packages/frontend/src/components/menu/NavigationBar.tsx
index bb9719b..22d432e 100644
--- a/packages/frontend/src/components/menu/NavigationBar.tsx
+++ b/packages/frontend/src/components/menu/NavigationBar.tsx
@@ -25,12 +25,13 @@ import { LangSelector } from './LangSelector';
interface Props {
onMobileMenu: () => void;
+ title: string;
}
-export function NavigationBar({ onMobileMenu }: Props): VNode {
+export function NavigationBar({ onMobileMenu, title }: 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>
+ <span class="navbar-item" style={{ fontSize: 24, fontWeight: 900
}}>{title}</span>
<a role="button" class="navbar-burger" aria-label="menu"
aria-expanded="false" onClick={(e) => {
onMobileMenu()
diff --git a/packages/frontend/src/components/menu/SideBar.tsx
b/packages/frontend/src/components/menu/SideBar.tsx
index 983eb86..5967117 100644
--- a/packages/frontend/src/components/menu/SideBar.tsx
+++ b/packages/frontend/src/components/menu/SideBar.tsx
@@ -20,25 +20,26 @@
*/
-import { h, VNode } from 'preact';
+import { Fragment, h, VNode } from 'preact';
import { useContext } from 'preact/hooks';
-import { BackendContext, useConfigContext } from '../../context/backend';
+import { useBackendContext, useConfigContext } from '../../context/backend';
import { LangSelector } from './LangSelector';
interface Props {
onLogout: () => void;
mobile?: boolean;
+ instance?: string;
}
-export function Sidebar({ mobile, onLogout }: Props): VNode {
+export function Sidebar({ mobile, instance, onLogout }: Props): VNode {
const config = useConfigContext();
- const backend = useContext(BackendContext);
+ const backend = useBackendContext();
return (
<aside class="aside is-placed-left is-expanded">
- { mobile && <div class="footer" onClick={(e)=>{return
e.stopImmediatePropagation()}}>
+ { mobile && <div class="footer" onClick={(e) => { return
e.stopImmediatePropagation() }}>
<LangSelector />
- </div> }
+ </div>}
<div class="aside-tools">
<div class="aside-tools-label">
<div><b>Taler</b> Merchant Office</div>
@@ -46,17 +47,25 @@ export function Sidebar({ mobile, onLogout }: Props): VNode
{
</div>
</div>
<div class="menu is-menu-main">
- <p class="menu-label">General</p>
- <ul class="menu-list">
- <li>
- <a href="/" class="is-active router-link-active has-icon">
- <span class="icon"><i class="mdi mdi-desktop-mac" /></span>
- <span class="menu-item-label">Instances</span>
- </a>
- </li>
- </ul>
+ {!instance && <Fragment>
+ <p class="menu-label">General</p>
+ <ul class="menu-list">
+ <li>
+ <a href="/" class="is-active router-link-active has-icon">
+ <span class="icon"><i class="mdi mdi-desktop-mac" /></span>
+ <span class="menu-item-label">Instances</span>
+ </a>
+ </li>
+ </ul>
+ </Fragment>}
<p class="menu-label">Instance</p>
<ul class="menu-list">
+ { instance && <li>
+ <a href="/update" class="has-icon">
+ <span class="icon"><i class="mdi mdi-square-edit-outline"
/></span>
+ <span class="menu-item-label">Settings</span>
+ </a>
+ </li> }
<li>
<a href="/forms" class="has-icon">
<span class="icon"><i class="mdi mdi-square-edit-outline"
/></span>
@@ -88,16 +97,16 @@ export function Sidebar({ mobile, onLogout }: Props): VNode
{
<div >
<span style={{ width: '3rem' }} class="icon"><i class="mdi
mdi-web" /></span>
<span class="menu-item-label">
- {new URL(backend.url).hostname} / default
+ {new URL(backend.url).hostname} / {!instance ? "default" :
instance}
</span>
</div>
</li>
- {!backend.token ? null : <li>
+ <li>
<a class="has-icon is-state-info is-hoverable" onClick={(): void
=> onLogout()}>
<span class="icon"><i class="mdi mdi-logout default" /></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
index 413cfa1..6353854 100644
--- a/packages/frontend/src/components/menu/index.tsx
+++ b/packages/frontend/src/components/menu/index.tsx
@@ -20,15 +20,16 @@ import { NavigationBar } from "./NavigationBar";
import { Sidebar } from "./SideBar";
interface Props {
- sidebar?: boolean;
- onLogout: () => void;
+ instance?: string;
+ onLogout?: () => void;
}
-export function Menu({ sidebar, onLogout }: Props): VNode {
+export function Menu({ onLogout, instance }: Props): VNode {
const [mobileOpen, setMobileOpen] = useState(false)
+ const title = !onLogout ? "Welcome!" : ( !instance ? "Admin" : instance)
return <div class={mobileOpen ? "has-aside-mobile-expanded" : ""}
onClick={() => setMobileOpen(false)}>
- <NavigationBar onMobileMenu={() => setMobileOpen(!mobileOpen)} />
- {sidebar && <Sidebar onLogout={onLogout} mobile={mobileOpen} />}
+ <NavigationBar onMobileMenu={() => setMobileOpen(!mobileOpen)}
title={title}/>
+ {onLogout && <Sidebar onLogout={onLogout} instance={instance}
mobile={mobileOpen} />}
</div>
}
\ No newline at end of file
diff --git a/packages/frontend/src/components/modal/index.tsx
b/packages/frontend/src/components/modal/index.tsx
index 682c1ed..aaa50fc 100644
--- a/packages/frontend/src/components/modal/index.tsx
+++ b/packages/frontend/src/components/modal/index.tsx
@@ -23,6 +23,7 @@
import { h, VNode } from "preact";
import { Message } from "preact-messages";
import { useState } from "preact/hooks";
+import { MerchantBackend } from "../../declaration";
import { FormProvider } from "../form/Field";
import { Input } from "../form/Input";
@@ -92,7 +93,7 @@ export function DeleteModal({ element, onCancel, onConfirm }:
DeleteModalProps):
interface UpdateTokenModalProps {
element: { id: string, name: string };
- oldToken: string;
+ oldToken?: string;
onCancel: () => void;
onConfirm: (value: string) => void;
onClear: () => void;
@@ -105,7 +106,7 @@ export function UpdateTokenModal({ element, onCancel,
onClear, onConfirm, oldTok
})
const errors = {
- old_token: oldToken !== form.old_token ? { message: 'should be the same' }
: undefined,
+ old_token: oldToken && oldToken !== form.old_token ? { message: 'should be
the same' } : undefined,
new_token: !form.new_token ? { message: 'should be the same' } : (
form.new_token === form.old_token ? { message: 'cant repeat' } : undefined ),
}
--
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 <=
- [taler-merchant-backoffice] 01/07: fixed some comments, gnunet, 2021/03/03
- [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