diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/components')
4 files changed, 65 insertions, 7 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx b/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx index 34feec202..d7b490a5d 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx @@ -107,8 +107,9 @@ export function InputWithAddon<T>({ {error && <p class="help is-danger">{error}</p>} <span class="has-text-grey">{help}</span> </div> - {side} + {expand ? <div>{side}</div> : side} </div> + </div> ); } diff --git a/packages/merchant-backoffice-ui/src/components/form/JumpToElementById.tsx b/packages/merchant-backoffice-ui/src/components/form/JumpToElementById.tsx new file mode 100644 index 000000000..2ff23dfd3 --- /dev/null +++ b/packages/merchant-backoffice-ui/src/components/form/JumpToElementById.tsx @@ -0,0 +1,59 @@ +import { TranslatedString } from "@gnu-taler/taler-util"; +import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { h, VNode } from "preact"; +import { useState } from "preact/hooks"; + +export function JumpToElementById({ testIfExist, onSelect, palceholder, description }: { palceholder: TranslatedString, description: TranslatedString, testIfExist: (id: string) => Promise<any>, onSelect: (id: string) => void }): VNode { + const { i18n } = useTranslationContext() + + const [error, setError] = useState<string | undefined>( + undefined, + ); + + const [id, setId] = useState<string>() + async function check(currentId: string | undefined): Promise<void> { + if (!currentId) { + setError(i18n.str`missing id`); + return; + } + try { + await testIfExist(currentId); + onSelect(currentId); + setError(undefined); + } catch { + setError(i18n.str`not found`); + } + } + + return <div class="level"> + <div class="level-left"> + <div class="level-item"> + <div class="field has-addons"> + <div class="control"> + <input + class={error ? "input is-danger" : "input"} + type="text" + value={id ?? ""} + onChange={(e) => setId(e.currentTarget.value)} + placeholder={palceholder} + /> + {error && <p class="help is-danger">{error}</p>} + </div> + <span + class="has-tooltip-bottom" + data-tooltip={description} + > + <button + class="button" + onClick={(e) => check(id)} + > + <span class="icon"> + <i class="mdi mdi-arrow-right" /> + </span> + </button> + </span> + </div> + </div> + </div> + </div> +} diff --git a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx index 402134096..6905cb4d0 100644 --- a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx +++ b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx @@ -177,12 +177,12 @@ export function Sidebar({ </a> </li> <li> - <a href={"/server"} class="has-icon"> + <a href={"/settings"} class="has-icon"> <span class="icon"> <i class="mdi mdi-square-edit-outline" /> </span> <span class="menu-item-label"> - <i18n.Translate>Server</i18n.Translate> + <i18n.Translate>Settings</i18n.Translate> </span> </a> </li> diff --git a/packages/merchant-backoffice-ui/src/components/menu/index.tsx b/packages/merchant-backoffice-ui/src/components/menu/index.tsx index b8ac2c9ab..0e881d7a5 100644 --- a/packages/merchant-backoffice-ui/src/components/menu/index.tsx +++ b/packages/merchant-backoffice-ui/src/components/menu/index.tsx @@ -24,7 +24,7 @@ import { Sidebar } from "./SideBar.js"; function getInstanceTitle(path: string, id: string): string { switch (path) { - case InstancePaths.server: + case InstancePaths.settings: return `${id}: Settings`; case InstancePaths.order_list: return `${id}: Orders`; @@ -64,9 +64,7 @@ function getInstanceTitle(path: string, id: string): string { return `${id}: Templates`; case InstancePaths.templates_use: return `${id}: Use template`; - case InstancePaths.settings: - return `${id}: Interface`; - case InstancePaths.settings: + case InstancePaths.interface: return `${id}: Interface`; default: return ""; |