diff options
Diffstat (limited to 'packages/aml-backoffice-ui/src/context')
-rw-r--r-- | packages/aml-backoffice-ui/src/context/settings.ts | 44 | ||||
-rw-r--r-- | packages/aml-backoffice-ui/src/context/ui-forms.ts | 507 | ||||
-rw-r--r-- | packages/aml-backoffice-ui/src/context/ui-settings.ts | 110 |
3 files changed, 617 insertions, 44 deletions
diff --git a/packages/aml-backoffice-ui/src/context/settings.ts b/packages/aml-backoffice-ui/src/context/settings.ts deleted file mode 100644 index 6c61a7b4a..000000000 --- a/packages/aml-backoffice-ui/src/context/settings.ts +++ /dev/null @@ -1,44 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2022-2024 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/> - */ - -import { ComponentChildren, createContext, h, VNode } from "preact"; -import { useContext } from "preact/hooks"; -import { UiSettings } from "../settings.js"; - -/** - * - * @author Sebastian Javier Marchano (sebasjm) - */ - -export type Type = UiSettings; - -const initial: UiSettings = {}; -const Context = createContext<Type>(initial); - -export const useSettingsContext = (): Type => useContext(Context); - -export const SettingsProvider = ({ - children, - value, -}: { - value: UiSettings; - children: ComponentChildren; -}): VNode => { - return h(Context.Provider, { - value, - children, - }); -}; diff --git a/packages/aml-backoffice-ui/src/context/ui-forms.ts b/packages/aml-backoffice-ui/src/context/ui-forms.ts new file mode 100644 index 000000000..2e0b8a76d --- /dev/null +++ b/packages/aml-backoffice-ui/src/context/ui-forms.ts @@ -0,0 +1,507 @@ +/* + This file is part of GNU Taler + (C) 2022-2024 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/> + */ + +import { + buildCodecForObject, + buildCodecForUnion, + Codec, + codecForBoolean, + codecForConstString, + codecForList, + codecForNumber, + codecForString, + codecForTimestamp, + codecOptional, + Integer, + TalerProtocolTimestamp, +} from "@gnu-taler/taler-util"; +import { ComponentChildren, createContext, h, VNode } from "preact"; +import { useContext } from "preact/hooks"; + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +export type Type = UiForms; + +const defaultForms: UiForms = { + forms: [] +}; +const Context = createContext<Type>(defaultForms); + +export type BaseForm = Record<string, unknown>; + +export const useUiFormsContext = (): Type => useContext(Context); + +export const UiFormsProvider = ({ + children, + value, +}: { + value: UiForms; + children: ComponentChildren; +}): VNode => { + return h(Context.Provider, { + value, + children, + }); +}; + +export type FormMetadata = { + label: string; + id: string; + version: number; + config: FlexibleForm; +}; + +type FlexibleForm = DoubleColumnForm; + +export interface DoubleColumnForm { + type: "double-column"; + design: Array<DoubleColumnFormSection>; + // behavior?: (form: Partial<T>) => FormState<T>; +} + +export type DoubleColumnFormSection = { + title: string; + description?: string; + fields: UIFormFieldConfig[]; +}; + +// export interface BaseForm { +// state: TalerExchangeApi.AmlState; +// threshold: AmountJson; +// } + +export interface UiForms { + // Where libeufin backend is localted + // default: window.origin without "webui/" + forms: Array<FormMetadata>; +} + +export type UIFormFieldConfig = + | UIFormFieldConfigAbsoluteTime + | UIFormFieldConfigAmount + | UIFormFieldConfigArray + | UIFormFieldConfigCaption + | UIFormFieldConfigChoiseHorizontal + | UIFormFieldConfigChoiseStacked + | UIFormFieldConfigFile + | UIFormFieldConfigGroup + | UIFormFieldConfigInteger + | UIFormFieldConfigSelectMultiple + | UIFormFieldConfigSelectOne + | UIFormFieldConfigText + | UIFormFieldConfigTextArea + | UIFormFieldConfigToggle; + +type UIFormFieldConfigAbsoluteTime = { + type: "absoluteTime"; + properties: UIFormFieldBaseConfig & { + max?: TalerProtocolTimestamp; + min?: TalerProtocolTimestamp; + pattern: string; + }; +}; + +type UIFormFieldConfigAmount = { + type: "amount"; + properties: UIFormFieldBaseConfig & { + max?: Integer; + min?: Integer; + currency: string; + }; +}; + +type UIFormFieldConfigArray = { + type: "array"; + properties: UIFormFieldBaseConfig & { + // id of the field shown when the array is collapsed + labelFieldId: UIHandlerId; + fields: UIFormFieldConfig[]; + }; +}; + +type UIFormFieldConfigCaption = { + type: "caption"; + properties: UIFieldBaseDescription; +}; + +type UIFormFieldConfigGroup = { + type: "group"; + properties: UIFormFieldBaseConfig & { + fields: UIFormFieldConfig[]; + }; +}; + +type UIFormFieldConfigChoiseHorizontal = { + type: "choiceHorizontal"; + properties: UIFormFieldBaseConfig & { + choices: Array<SelectUiChoice>; + }; +}; + +type UIFormFieldConfigChoiseStacked = { + type: "choiceStacked"; + properties: UIFormFieldBaseConfig & { + choices: Array<SelectUiChoice>; + }; +}; + +type UIFormFieldConfigFile = { + type: "file"; + properties: UIFormFieldBaseConfig & { + maxBytes?: Integer; + minBytes?: Integer; + // comma-separated list of one or more file types + // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers + accept?: string; + }; +}; +type UIFormFieldConfigInteger = { + type: "integer"; + properties: UIFormFieldBaseConfig & { + max?: Integer; + min?: Integer; + }; +}; + +interface SelectUiChoice { + label: string; + description?: string; + value: string; +} + +type UIFormFieldConfigSelectMultiple = { + type: "selectMultiple"; + properties: UIFormFieldBaseConfig & { + max?: Integer; + min?: Integer; + unique?: boolean; + choices: Array<SelectUiChoice>; + }; +}; +type UIFormFieldConfigSelectOne = { + type: "selectOne"; + properties: UIFormFieldBaseConfig & { + choices: Array<SelectUiChoice>; + }; +}; +type UIFormFieldConfigText = { + type: "text"; + properties: UIFormFieldBaseConfig; +}; +type UIFormFieldConfigTextArea = { + type: "textArea"; + properties: UIFormFieldBaseConfig; +}; +type UIFormFieldConfigToggle = { + type: "toggle"; + properties: UIFormFieldBaseConfig; +}; + +type UIFieldBaseDescription = { + /* label if the field, visible for the user */ + label: string; + /* long text to be shown on user demand */ + tooltip?: string; + + /* short text to be shown close to the field */ + help?: string; + + /* if the field should be initialy hidden */ + hidden?: boolean; + /* ui element to show before */ + addonBeforeId?: string; + /* ui element to show after */ + addonAfterId?: string; +}; + +type UIFormFieldBaseConfig = UIFieldBaseDescription & { + /* example to be shown inside the field */ + placeholder?: string; + + /* show a mark as required */ + required?: boolean; + + /* readonly and dim */ + disabled?: boolean; + + /* name of the field, useful for a11y */ + name: string; + + /* conversion id to conver the string into the value type + the id should be known to the ui impl + */ + converterId?: string; + + /* property id of the form */ + id: UIHandlerId; +}; + +declare const __handlerId: unique symbol; +export type UIHandlerId = string & { [__handlerId]: true }; + +// FIXME: validate well formed ui field id +const codecForUiFieldId = codecForString as () => Codec<UIHandlerId>; + +const codecForUIFormFieldBaseConfigTemplate = < + T extends UIFormFieldBaseConfig, +>() => + buildCodecForObject<T>() + .property("id", codecForUiFieldId()) + .property("addonAfterId", codecOptional(codecForString())) + .property("addonBeforeId", codecOptional(codecForString())) + .property("converterId", codecOptional(codecForString())) + .property("disabled", codecOptional(codecForBoolean())) + .property("hidden", codecOptional(codecForBoolean())) + .property("required", codecOptional(codecForBoolean())) + .property("help", codecOptional(codecForString())) + .property("label", codecForString()) + .property("name", codecForString()) + .property("placeholder", codecOptional(codecForString())) + .property("tooltip", codecOptional(codecForString())); + +const codecForUIFormFieldBaseConfig = (): Codec<UIFormFieldBaseConfig> => + codecForUIFormFieldBaseConfigTemplate().build("UIFieldToggleProperties"); + +const codecForUIFormFieldAbsoluteTimeConfig = (): Codec< + UIFormFieldConfigAbsoluteTime["properties"] +> => + codecForUIFormFieldBaseConfigTemplate< + UIFormFieldConfigAbsoluteTime["properties"] + >() + .property("pattern", codecForString()) + .property("max", codecOptional(codecForTimestamp)) + .property("min", codecOptional(codecForTimestamp)) + .build("UIFormFieldConfigAbsoluteTime.properties"); + +const codecForUiFormFieldAbsoluteTime = + (): Codec<UIFormFieldConfigAbsoluteTime> => + buildCodecForObject<UIFormFieldConfigAbsoluteTime>() + .property("type", codecForConstString("absoluteTime")) + .property("properties", codecForUIFormFieldAbsoluteTimeConfig()) + .build("UIFormFieldConfigAbsoluteTime"); + +const codecForUIFormFieldAmountConfig = (): Codec< + UIFormFieldConfigAmount["properties"] +> => + codecForUIFormFieldBaseConfigTemplate<UIFormFieldConfigAmount["properties"]>() + .property("currency", codecForString()) + .property("max", codecOptional(codecForNumber())) + .property("min", codecOptional(codecForNumber())) + .build("UIFormFieldConfigAmount.properties"); + +const codecForUiFormFieldAmount = (): Codec<UIFormFieldConfigAmount> => + buildCodecForObject<UIFormFieldConfigAmount>() + .property("type", codecForConstString("amount")) + .property("properties", codecForUIFormFieldAmountConfig()) + .build("UIFormFieldConfigAmount"); + +const codecForUIFormFieldArrayConfig = (): Codec< + UIFormFieldConfigArray["properties"] +> => + codecForUIFormFieldBaseConfigTemplate<UIFormFieldConfigArray["properties"]>() + .property("labelFieldId", codecForUiFieldId()) + .property("fields", codecForList(codecForUiFormField())) + .build("UIFormFieldConfigArray.properties"); + +const codecForUiFormFieldArray = (): Codec<UIFormFieldConfigArray> => + buildCodecForObject<UIFormFieldConfigArray>() + .property("type", codecForConstString("array")) + .property("properties", codecForUIFormFieldArrayConfig()) + .build("UIFormFieldConfigArray"); + +const codecForUiFormFieldCaption = (): Codec<UIFormFieldConfigCaption> => + buildCodecForObject<UIFormFieldConfigCaption>() + .property("type", codecForConstString("caption")) + .property("properties", codecForUIFormFieldBaseConfig()) + .build("UIFormFieldConfigCaption"); + +const codecForUiFormSelectUiChoice = (): Codec<SelectUiChoice> => + buildCodecForObject<SelectUiChoice>() + .property("description", codecForString()) + .property("label", codecForString()) + .property("value", codecForString()) + .build("SelectUiChoice"); + +const codecForUIFormFieldWithChoiseConfig = (): Codec< + UIFormFieldConfigChoiseHorizontal["properties"] +> => + codecForUIFormFieldBaseConfigTemplate< + UIFormFieldConfigChoiseHorizontal["properties"] + >() + .property("choices", codecForList(codecForUiFormSelectUiChoice())) + .build("UIFormFieldConfigChoiseHorizontal.properties"); + +const codecForUiFormFieldChoiceHorizontal = + (): Codec<UIFormFieldConfigChoiseHorizontal> => + buildCodecForObject<UIFormFieldConfigChoiseHorizontal>() + .property("type", codecForConstString("choiceHorizontal")) + .property("properties", codecForUIFormFieldWithChoiseConfig()) + .build("UIFormFieldConfigChoiseHorizontal"); + +const codecForUiFormFieldChoiceStacked = + (): Codec<UIFormFieldConfigChoiseStacked> => + buildCodecForObject<UIFormFieldConfigChoiseStacked>() + .property("type", codecForConstString("choiceStacked")) + .property("properties", codecForUIFormFieldWithChoiseConfig()) + .build("UIFormFieldConfigChoiseStacked"); + +const codecForUiFormFieldFile = (): Codec<UIFormFieldConfigFile> => + buildCodecForObject<UIFormFieldConfigFile>() + .property("type", codecForConstString("file")) + .property("properties", codecForUIFormFieldBaseConfig()) + .build("UIFormFieldConfigFile"); + +const codecForUIFormFieldWithFieldsConfig = (): Codec< + UIFormFieldConfigGroup["properties"] +> => + codecForUIFormFieldBaseConfigTemplate<UIFormFieldConfigGroup["properties"]>() + .property("fields", codecForList(codecForUiFormField())) + .build("UIFormFieldConfigGroup.properties"); + +const codecForUiFormFieldGroup = (): Codec<UIFormFieldConfigGroup> => + buildCodecForObject<UIFormFieldConfigGroup>() + .property("type", codecForConstString("group")) + .property("properties", codecForUIFormFieldWithFieldsConfig()) + .build("UiFormFieldGroup"); + +const codecForUiFormFieldInteger = (): Codec<UIFormFieldConfigInteger> => + buildCodecForObject<UIFormFieldConfigInteger>() + .property("type", codecForConstString("integer")) + .property("properties", codecForUIFormFieldBaseConfig()) + .build("UIFormFieldConfigInteger"); + +const codecForUIFormFieldSelectMultipleConfig = (): Codec< + UIFormFieldConfigSelectMultiple["properties"] +> => + codecForUIFormFieldBaseConfigTemplate< + UIFormFieldConfigSelectMultiple["properties"] + >() + .property("max", codecOptional(codecForNumber())) + .property("min", codecOptional(codecForNumber())) + .property("unique", codecOptional(codecForBoolean())) + .property("choices", codecForList(codecForUiFormSelectUiChoice())) + .build("UIFormFieldConfigSelectMultiple.properties"); + +const codecForUiFormFieldSelectMultiple = + (): Codec<UIFormFieldConfigSelectMultiple> => + buildCodecForObject<UIFormFieldConfigSelectMultiple>() + .property("type", codecForConstString("selectMultiple")) + .property("properties", codecForUIFormFieldSelectMultipleConfig()) + .build("UiFormFieldSelectMultiple"); + +const codecForUiFormFieldSelectOne = (): Codec<UIFormFieldConfigSelectOne> => + buildCodecForObject<UIFormFieldConfigSelectOne>() + .property("type", codecForConstString("selectOne")) + .property("properties", codecForUIFormFieldWithChoiseConfig()) + .build("UIFormFieldConfigSelectOne"); + +const codecForUiFormFieldText = (): Codec<UIFormFieldConfigText> => + buildCodecForObject<UIFormFieldConfigText>() + .property("type", codecForConstString("text")) + .property("properties", codecForUIFormFieldBaseConfig()) + .build("UIFormFieldConfigText"); + +const codecForUiFormFieldTextArea = (): Codec<UIFormFieldConfigTextArea> => + buildCodecForObject<UIFormFieldConfigTextArea>() + .property("type", codecForConstString("textArea")) + .property("properties", codecForUIFormFieldBaseConfig()) + .build("UIFormFieldConfigTextArea"); + +const codecForUiFormFieldToggle = (): Codec<UIFormFieldConfigToggle> => + buildCodecForObject<UIFormFieldConfigToggle>() + .property("type", codecForConstString("toggle")) + .property("properties", codecForUIFormFieldBaseConfig()) + .build("UIFormFieldConfigToggle"); + +const codecForUiFormField = (): Codec<UIFormFieldConfig> => + buildCodecForUnion<UIFormFieldConfig>() + .discriminateOn("type") + .alternative("absoluteTime", codecForUiFormFieldAbsoluteTime()) + .alternative("amount", codecForUiFormFieldAmount()) + .alternative("array", codecForUiFormFieldArray()) + .alternative("caption", codecForUiFormFieldCaption()) + .alternative("choiceHorizontal", codecForUiFormFieldChoiceHorizontal()) + .alternative("choiceStacked", codecForUiFormFieldChoiceStacked()) + .alternative("file", codecForUiFormFieldFile()) + .alternative("group", codecForUiFormFieldGroup()) + .alternative("integer", codecForUiFormFieldInteger()) + .alternative("selectMultiple", codecForUiFormFieldSelectMultiple()) + .alternative("selectOne", codecForUiFormFieldSelectOne()) + .alternative("text", codecForUiFormFieldText()) + .alternative("textArea", codecForUiFormFieldTextArea()) + .alternative("toggle", codecForUiFormFieldToggle()) + .build("UIFormField"); + +const codecForDoubleColumnFormSection = (): Codec<DoubleColumnFormSection> => + buildCodecForObject<DoubleColumnFormSection>() + .property("title", codecForString()) + .property("description", codecForString()) + .property("fields", codecForList(codecForUiFormField())) + .build("DoubleColumnFormSection"); + +const codecForDoubleColumnForm = (): Codec<DoubleColumnForm> => + buildCodecForObject<DoubleColumnForm>() + .property("type", codecForConstString("double-column")) + .property("design", codecForList(codecForDoubleColumnFormSection())) + .build("DoubleColumnForm"); + +const codecForFlexibleForm = (): Codec<FlexibleForm> => + buildCodecForUnion<FlexibleForm>() + .discriminateOn("type") + .alternative("double-column", codecForDoubleColumnForm()) + .build<FlexibleForm>("FlexibleForm"); + +const codecForFormMetadata = (): Codec<FormMetadata> => + buildCodecForObject<FormMetadata>() + .property("label", codecForString()) + .property("id", codecForString()) + .property("version", codecForNumber()) + .property("config", codecForFlexibleForm()) + .build("FormMetadata"); + +const codecForUIForms = (): Codec<UiForms> => + buildCodecForObject<UiForms>() + .property("forms", codecForList(codecForFormMetadata())) + .build("UiForms"); + +function removeUndefineField<T extends object>(obj: T): T { + const keys = Object.keys(obj) as Array<keyof T>; + return keys.reduce((prev, cur) => { + if (typeof prev[cur] === "undefined") { + delete prev[cur]; + } + return prev; + }, obj); +} + +export function fetchUiForms(listener: (s: UiForms) => void): void { + fetch("./forms.json") + .then((resp) => resp.json()) + .then((json) => codecForUIForms().decode(json)) + .then((result) => + listener({ + ...defaultForms, + ...removeUndefineField(result), + }), + ) + .catch((e) => { + console.log("failed to fetch forms", e); + listener(defaultForms); + }); +} diff --git a/packages/aml-backoffice-ui/src/context/ui-settings.ts b/packages/aml-backoffice-ui/src/context/ui-settings.ts new file mode 100644 index 000000000..aa318a918 --- /dev/null +++ b/packages/aml-backoffice-ui/src/context/ui-settings.ts @@ -0,0 +1,110 @@ +/* + This file is part of GNU Taler + (C) 2022-2024 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/> + */ + +import { buildCodecForObject, canonicalizeBaseUrl, Codec, codecForString, codecOptional } from "@gnu-taler/taler-util"; +import { ComponentChildren, createContext, h, VNode } from "preact"; +import { useContext } from "preact/hooks"; + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +export type Type = UiSettings; + +/** + * Global settings for the UI. + */ +const defaultSettings: UiSettings = { + backendBaseURL: buildDefaultBackendBaseURL(), + signupEmail: undefined, +}; + +const Context = createContext<Type>(defaultSettings); + +export const useUiSettingsContext = (): Type => useContext(Context); + +export const UiSettingsProvider = ({ + children, + value, +}: { + value: UiSettings; + children: ComponentChildren; +}): VNode => { + return h(Context.Provider, { + value, + children, + }); +}; + +export interface UiSettings { + // Where libeufin backend is localted + // default: window.origin without "webui/" + backendBaseURL?: string; + // Shows a button "create random account" in the registration form + // Useful for testing + // default: false + signupEmail?: string; +} + +const codecForUISettings = (): Codec<UiSettings> => + buildCodecForObject<UiSettings>() + .property("backendBaseURL", codecOptional(codecForString())) + .property("signupEmail", codecOptional(codecForString())) + .build("UiSettings"); + +function removeUndefineField<T extends object>(obj: T): T { + const keys = Object.keys(obj) as Array<keyof T>; + return keys.reduce((prev, cur) => { + if (typeof prev[cur] === "undefined") { + delete prev[cur]; + } + return prev; + }, obj); +} + +export function fetchUiSettings(listener: (s: UiSettings) => void): void { + fetch("./settings.json") + .then((resp) => resp.json()) + .then((json) => codecForUISettings().decode(json)) + .then((result) => + listener({ + ...defaultSettings, + ...removeUndefineField(result), + }), + ) + .catch((e) => { + console.log("failed to fetch settings", e); + listener(defaultSettings); + }); +} + +function buildDefaultBackendBaseURL(): string | undefined { + if (typeof window !== "undefined") { + const currentLocation = new URL( + window.location.pathname, + window.location.origin, + ).href; + /** + * By default, backend serves the html content + * from the /webui root. + */ + return canonicalizeBaseUrl(currentLocation.replace("/webui", "")); + } + throw Error("No default URL"); +} + + |