From a37abd2472ac2d521e81838632050963157f00af Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 29 Dec 2023 17:42:11 -0300 Subject: fine tune dynamic forms --- packages/aml-backoffice-ui/src/NiceForm.tsx | 61 ----------------- packages/aml-backoffice-ui/src/context/config.ts | 2 +- packages/aml-backoffice-ui/src/forms/902_11e.ts | 4 +- packages/aml-backoffice-ui/src/forms/902_12e.ts | 2 +- packages/aml-backoffice-ui/src/forms/902_13e.ts | 2 +- packages/aml-backoffice-ui/src/forms/902_15e.ts | 2 +- packages/aml-backoffice-ui/src/forms/902_1e.ts | 3 +- packages/aml-backoffice-ui/src/forms/902_4e.ts | 4 +- packages/aml-backoffice-ui/src/forms/902_5e.ts | 3 +- packages/aml-backoffice-ui/src/forms/902_9e.ts | 2 +- packages/aml-backoffice-ui/src/forms/index.ts | 6 -- packages/aml-backoffice-ui/src/forms/simplest.ts | 6 +- .../src/handlers/InputAmount.stories.tsx | 59 ++++++++++++++++ .../src/handlers/InputArray.stories.tsx | 79 ++++++++++++++++++++++ .../src/handlers/InputChoiceHorizontal.stories.tsx | 59 ++++++++++++++++ .../src/handlers/InputChoiceStacked.stories.tsx | 59 ++++++++++++++++ .../src/handlers/InputDate.stories.tsx | 59 ++++++++++++++++ .../src/handlers/InputFile.stories.tsx | 59 ++++++++++++++++ .../src/handlers/InputInteger.stories.tsx | 59 ++++++++++++++++ .../src/handlers/InputLine.stories.tsx | 59 ++++++++++++++++ .../src/handlers/InputSelectMultiple.stories.tsx | 59 ++++++++++++++++ .../src/handlers/InputSelectOne.stories.tsx | 59 ++++++++++++++++ .../src/handlers/InputText.stories.tsx | 59 ++++++++++++++++ .../src/handlers/InputTextArea.stories.tsx | 59 ++++++++++++++++ .../aml-backoffice-ui/src/handlers/NiceForm.tsx | 60 ++++++++++++++++ packages/aml-backoffice-ui/src/handlers/forms.ts | 11 +-- .../src/handlers/index.stories.ts | 12 ++++ .../src/pages/AntiMoneyLaunderingForm.tsx | 4 +- .../aml-backoffice-ui/src/pages/CaseDetails.tsx | 2 +- packages/aml-backoffice-ui/src/pages/Cases.tsx | 8 +-- .../src/pages/ShowConsolidated.tsx | 15 ++-- packages/aml-backoffice-ui/src/stories.tsx | 4 +- 32 files changed, 838 insertions(+), 103 deletions(-) delete mode 100644 packages/aml-backoffice-ui/src/NiceForm.tsx create mode 100644 packages/aml-backoffice-ui/src/handlers/InputAmount.stories.tsx create mode 100644 packages/aml-backoffice-ui/src/handlers/InputArray.stories.tsx create mode 100644 packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.stories.tsx create mode 100644 packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.stories.tsx create mode 100644 packages/aml-backoffice-ui/src/handlers/InputDate.stories.tsx create mode 100644 packages/aml-backoffice-ui/src/handlers/InputFile.stories.tsx create mode 100644 packages/aml-backoffice-ui/src/handlers/InputInteger.stories.tsx create mode 100644 packages/aml-backoffice-ui/src/handlers/InputLine.stories.tsx create mode 100644 packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.stories.tsx create mode 100644 packages/aml-backoffice-ui/src/handlers/InputSelectOne.stories.tsx create mode 100644 packages/aml-backoffice-ui/src/handlers/InputText.stories.tsx create mode 100644 packages/aml-backoffice-ui/src/handlers/InputTextArea.stories.tsx create mode 100644 packages/aml-backoffice-ui/src/handlers/NiceForm.tsx create mode 100644 packages/aml-backoffice-ui/src/handlers/index.stories.ts (limited to 'packages/aml-backoffice-ui') diff --git a/packages/aml-backoffice-ui/src/NiceForm.tsx b/packages/aml-backoffice-ui/src/NiceForm.tsx deleted file mode 100644 index 53f29e580..000000000 --- a/packages/aml-backoffice-ui/src/NiceForm.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { ComponentChildren, Fragment, h } from "preact"; -import { FlexibleForm } from "./forms/index.js"; -import { FormProvider } from "./handlers/FormProvider.js"; -import { RenderAllFieldsByUiConfig } from "./handlers/forms.js"; - -export function NiceForm({ - initial, - onUpdate, - form, - onSubmit, - children, - readOnly, -}: { - children?: ComponentChildren; - initial: Partial; - onSubmit?: (v: Partial) => void; - form: FlexibleForm; - readOnly?: boolean; - onUpdate?: (d: Partial) => void; -}) { - return ( - -
- {form.design.map((section, i) => { - if (!section) return ; - return ( -
-
-

- {section.title} -

- {section.description && ( -

- {section.description} -

- )} -
-
-
-
- -
-
-
-
- ); - })} -
- {children} - - ); -} diff --git a/packages/aml-backoffice-ui/src/context/config.ts b/packages/aml-backoffice-ui/src/context/config.ts index ba16482be..3f62258c6 100644 --- a/packages/aml-backoffice-ui/src/context/config.ts +++ b/packages/aml-backoffice-ui/src/context/config.ts @@ -29,7 +29,7 @@ export type Type = { url: URL, config: TalerExchangeApi.ExchangeVersionResponse, api: TalerExchangeHttpClient, -} | undefined; +}; const Context = createContext(undefined as any); diff --git a/packages/aml-backoffice-ui/src/forms/902_11e.ts b/packages/aml-backoffice-ui/src/forms/902_11e.ts index 7ed3ea42b..b2943a1d4 100644 --- a/packages/aml-backoffice-ui/src/forms/902_11e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_11e.ts @@ -1,8 +1,8 @@ import { TranslatedString } from "@gnu-taler/taler-util"; import { FormState } from "../handlers/FormProvider.js"; import { BaseForm } from "../pages/AntiMoneyLaunderingForm.js"; -import { FlexibleForm } from "./index.js"; -import { Simplest, resolutionSection } from "./simplest.js"; +import { resolutionSection } from "./simplest.js"; +import { FlexibleForm } from "../handlers/forms.js"; export const v1 = (current: BaseForm): FlexibleForm => ({ design: [ diff --git a/packages/aml-backoffice-ui/src/forms/902_12e.ts b/packages/aml-backoffice-ui/src/forms/902_12e.ts index 3cfe69f88..815d75c49 100644 --- a/packages/aml-backoffice-ui/src/forms/902_12e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_12e.ts @@ -1,8 +1,8 @@ import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util"; import { FormState } from "../handlers/FormProvider.js"; import { BaseForm } from "../pages/AntiMoneyLaunderingForm.js"; -import { FlexibleForm } from "./index.js"; import { resolutionSection } from "./simplest.js"; +import { FlexibleForm } from "../handlers/forms.js"; export const v1 = (current: BaseForm): FlexibleForm => ({ design: [ diff --git a/packages/aml-backoffice-ui/src/forms/902_13e.ts b/packages/aml-backoffice-ui/src/forms/902_13e.ts index 045246fc6..7f5887de2 100644 --- a/packages/aml-backoffice-ui/src/forms/902_13e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_13e.ts @@ -1,8 +1,8 @@ import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util"; import { FormState } from "../handlers/FormProvider.js"; import { BaseForm, } from "../pages/AntiMoneyLaunderingForm.js"; -import { FlexibleForm } from "./index.js"; import { resolutionSection } from "./simplest.js"; +import { FlexibleForm } from "../handlers/forms.js"; export const v1 = (current: BaseForm): FlexibleForm => ({ design: [ diff --git a/packages/aml-backoffice-ui/src/forms/902_15e.ts b/packages/aml-backoffice-ui/src/forms/902_15e.ts index 6689896ab..10a2533d4 100644 --- a/packages/aml-backoffice-ui/src/forms/902_15e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_15e.ts @@ -1,7 +1,7 @@ import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util"; import { BaseForm } from "../pages/AntiMoneyLaunderingForm.js"; -import { FlexibleForm } from "./index.js"; import { resolutionSection } from "./simplest.js"; +import { FlexibleForm } from "../handlers/forms.js"; export const v1 = (current: BaseForm): FlexibleForm => ({ design: [ diff --git a/packages/aml-backoffice-ui/src/forms/902_1e.ts b/packages/aml-backoffice-ui/src/forms/902_1e.ts index 7fcabe829..e2faff63e 100644 --- a/packages/aml-backoffice-ui/src/forms/902_1e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_1e.ts @@ -1,8 +1,9 @@ import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util"; import { FormState } from "../handlers/FormProvider.js"; import { BaseForm } from "../pages/AntiMoneyLaunderingForm.js"; -import { FlexibleForm, languageList } from "./index.js"; +import { languageList } from "./index.js"; import { resolutionSection } from "./simplest.js"; +import { FlexibleForm } from "../handlers/forms.js"; export const v1 = (current: BaseForm): FlexibleForm => ({ design: [ diff --git a/packages/aml-backoffice-ui/src/forms/902_4e.ts b/packages/aml-backoffice-ui/src/forms/902_4e.ts index 6f82302f3..540e05bf6 100644 --- a/packages/aml-backoffice-ui/src/forms/902_4e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_4e.ts @@ -1,10 +1,10 @@ import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util"; import { h as create } from "preact"; import { FormState } from "../handlers/FormProvider.js"; +import { FlexibleForm } from "../handlers/forms.js"; import { BaseForm } from "../pages/AntiMoneyLaunderingForm.js"; -import { FlexibleForm } from "./index.js"; -import { Simplest, resolutionSection } from "./simplest.js"; import { ArrowRightIcon, ChevronRightIcon } from "../pages/Cases.js"; +import { resolutionSection } from "./simplest.js"; export const v1 = (current: BaseForm): FlexibleForm => ({ design: [ diff --git a/packages/aml-backoffice-ui/src/forms/902_5e.ts b/packages/aml-backoffice-ui/src/forms/902_5e.ts index d695c94b4..fe545481f 100644 --- a/packages/aml-backoffice-ui/src/forms/902_5e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_5e.ts @@ -1,8 +1,9 @@ import { TranslatedString } from "@gnu-taler/taler-util"; import { FormState } from "../handlers/FormProvider.js"; import { BaseForm } from "../pages/AntiMoneyLaunderingForm.js"; -import { FlexibleForm, currencyList } from "./index.js"; +import { currencyList } from "./index.js"; import { resolutionSection } from "./simplest.js"; +import { FlexibleForm } from "../handlers/forms.js"; export const v1 = (current: BaseForm): FlexibleForm => ({ design: [ diff --git a/packages/aml-backoffice-ui/src/forms/902_9e.ts b/packages/aml-backoffice-ui/src/forms/902_9e.ts index e52531bcb..d1604dab2 100644 --- a/packages/aml-backoffice-ui/src/forms/902_9e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_9e.ts @@ -1,8 +1,8 @@ import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util"; import { FormState } from "../handlers/FormProvider.js"; import { BaseForm } from "../pages/AntiMoneyLaunderingForm.js"; -import { FlexibleForm } from "./index.js"; import { resolutionSection } from "./simplest.js"; +import { FlexibleForm } from "../handlers/forms.js"; export const v1 = (current: BaseForm): FlexibleForm => ({ design: [ diff --git a/packages/aml-backoffice-ui/src/forms/index.ts b/packages/aml-backoffice-ui/src/forms/index.ts index 74407ed82..32de4fbd3 100644 --- a/packages/aml-backoffice-ui/src/forms/index.ts +++ b/packages/aml-backoffice-ui/src/forms/index.ts @@ -1,11 +1,5 @@ import { TranslatedString } from "@gnu-taler/taler-util"; -import { FormState } from "../handlers/FormProvider.js"; -import { DoubleColumnForm } from "../handlers/forms.js"; -export interface FlexibleForm { - design: DoubleColumnForm; - behavior?: (form: Partial) => FormState; -} export const languageList = [ { diff --git a/packages/aml-backoffice-ui/src/forms/simplest.ts b/packages/aml-backoffice-ui/src/forms/simplest.ts index 778d20b75..5a8d370c9 100644 --- a/packages/aml-backoffice-ui/src/forms/simplest.ts +++ b/packages/aml-backoffice-ui/src/forms/simplest.ts @@ -5,11 +5,10 @@ import { TranslatedString, } from "@gnu-taler/taler-util"; import { FormState } from "../handlers/FormProvider.js"; -import { DoubleColumnFormSection } from "../handlers/forms.js"; +import { DoubleColumnFormSection, FlexibleForm } from "../handlers/forms.js"; import { BaseForm } from "../pages/AntiMoneyLaunderingForm.js"; import { AmlExchangeBackend } from "../types.js"; -import { FlexibleForm } from "./index.js"; import { amlStateConverter } from "../pages/ShowConsolidated.js"; export const v1 = (current: BaseForm): FlexibleForm => ({ @@ -33,7 +32,8 @@ export const v1 = (current: BaseForm): FlexibleForm => ({ ): FormState { return { comment: { - help: ((v.comment?.length ?? 0) > 100 ? "keep it short" : "") as TranslatedString + help: ((v.comment?.length ?? 0) > 100 ? "keep it short" : "") as TranslatedString, + }, threshold: { disabled: v.state === AmlExchangeBackend.AmlState.frozen, diff --git a/packages/aml-backoffice-ui/src/handlers/InputAmount.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputAmount.stories.tsx new file mode 100644 index 000000000..872726247 --- /dev/null +++ b/packages/aml-backoffice-ui/src/handlers/InputAmount.stories.tsx @@ -0,0 +1,59 @@ +/* + This file is part of GNU Taler + (C) 2022 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 { AmountJson, Amounts, TranslatedString } from "@gnu-taler/taler-util"; +import * as tests from "@gnu-taler/web-util/testing"; +import { + NiceForm as TestedComponent, +} from "./NiceForm.js"; +import { FlexibleForm } from "./forms.js"; + +export default { + title: "Input Amount", +}; + +export namespace Simplest { + export interface Form { + comment: string; + } +} + +type TargetObject = { + amount: AmountJson; +} +const initial: TargetObject = { + amount: Amounts.parseOrThrow("USD:10") +} + +const form: FlexibleForm = { + design: [{ + title: "this is a simple form" as TranslatedString, + fields: [{ + type: "amount", + props: { + label: "label of the field" as TranslatedString, + name: "amount", + }, + }] + }] +} + +export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); diff --git a/packages/aml-backoffice-ui/src/handlers/InputArray.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputArray.stories.tsx new file mode 100644 index 000000000..ee25d355b --- /dev/null +++ b/packages/aml-backoffice-ui/src/handlers/InputArray.stories.tsx @@ -0,0 +1,79 @@ +/* + This file is part of GNU Taler + (C) 2022 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 { TranslatedString } from "@gnu-taler/taler-util"; +import * as tests from "@gnu-taler/web-util/testing"; +import { + NiceForm as TestedComponent, +} from "./NiceForm.js"; +import { FlexibleForm } from "./forms.js"; + +export default { + title: "Input Array", +}; + +export namespace Simplest { + export interface Form { + comment: string; + } +} + +type TargetObject = { + people: { + name: string; + age: number; + }[]; +} +const initial: TargetObject = { + people: [{ + name: "me", + age: 17, + }] +} + +const form: FlexibleForm = { + design: [{ + title: "this is a simple form" as TranslatedString, + fields: [{ + type: "array", + props: { + label: "People" as TranslatedString, + name: "comment", + fields: [{ + type: "text", + props: { + label: "the name" as TranslatedString, + name: "name", + } + }, { + type: "integer", + props: { + label: "the age" as TranslatedString, + name: "age", + } + }], + labelField: "name" + }, + }] + }] +} + +export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); diff --git a/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.stories.tsx new file mode 100644 index 000000000..e59bbe396 --- /dev/null +++ b/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.stories.tsx @@ -0,0 +1,59 @@ +/* + This file is part of GNU Taler + (C) 2022 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 { TranslatedString } from "@gnu-taler/taler-util"; +import * as tests from "@gnu-taler/web-util/testing"; +import { + NiceForm as TestedComponent, +} from "./NiceForm.js"; +import { FlexibleForm } from "./forms.js"; + +export default { + title: "Input Choice Horizontal", +}; + +export namespace Simplest { + export interface Form { + comment: string; + } +} + +type TargetObject = { + comment: string; +} +const initial: TargetObject = { + comment: "some initial comment" +} + +const form: FlexibleForm = { + design: [{ + title: "this is a simple form" as TranslatedString, + fields: [{ + type: "text", + props: { + label: "label of the field" as TranslatedString, + name: "comment", + }, + }] + }] +} + +export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); diff --git a/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.stories.tsx new file mode 100644 index 000000000..bd21687bb --- /dev/null +++ b/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.stories.tsx @@ -0,0 +1,59 @@ +/* + This file is part of GNU Taler + (C) 2022 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 { TranslatedString } from "@gnu-taler/taler-util"; +import * as tests from "@gnu-taler/web-util/testing"; +import { + NiceForm as TestedComponent, +} from "./NiceForm.js"; +import { FlexibleForm } from "./forms.js"; + +export default { + title: "Input Choice Stacked", +}; + +export namespace Simplest { + export interface Form { + comment: string; + } +} + +type TargetObject = { + comment: string; +} +const initial: TargetObject = { + comment: "some initial comment" +} + +const form: FlexibleForm = { + design: [{ + title: "this is a simple form" as TranslatedString, + fields: [{ + type: "text", + props: { + label: "label of the field" as TranslatedString, + name: "comment", + }, + }] + }] +} + +export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); diff --git a/packages/aml-backoffice-ui/src/handlers/InputDate.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputDate.stories.tsx new file mode 100644 index 000000000..187c78bfb --- /dev/null +++ b/packages/aml-backoffice-ui/src/handlers/InputDate.stories.tsx @@ -0,0 +1,59 @@ +/* + This file is part of GNU Taler + (C) 2022 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 { TranslatedString } from "@gnu-taler/taler-util"; +import * as tests from "@gnu-taler/web-util/testing"; +import { + NiceForm as TestedComponent, +} from "./NiceForm.js"; +import { FlexibleForm } from "./forms.js"; + +export default { + title: "Input Date", +}; + +export namespace Simplest { + export interface Form { + comment: string; + } +} + +type TargetObject = { + comment: string; +} +const initial: TargetObject = { + comment: "some initial comment" +} + +const form: FlexibleForm = { + design: [{ + title: "this is a simple form" as TranslatedString, + fields: [{ + type: "text", + props: { + label: "label of the field" as TranslatedString, + name: "comment", + }, + }] + }] +} + +export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); diff --git a/packages/aml-backoffice-ui/src/handlers/InputFile.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputFile.stories.tsx new file mode 100644 index 000000000..856b15bc7 --- /dev/null +++ b/packages/aml-backoffice-ui/src/handlers/InputFile.stories.tsx @@ -0,0 +1,59 @@ +/* + This file is part of GNU Taler + (C) 2022 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 { TranslatedString } from "@gnu-taler/taler-util"; +import * as tests from "@gnu-taler/web-util/testing"; +import { + NiceForm as TestedComponent, +} from "./NiceForm.js"; +import { FlexibleForm } from "./forms.js"; + +export default { + title: "Input File", +}; + +export namespace Simplest { + export interface Form { + comment: string; + } +} + +type TargetObject = { + comment: string; +} +const initial: TargetObject = { + comment: "some initial comment" +} + +const form: FlexibleForm = { + design: [{ + title: "this is a simple form" as TranslatedString, + fields: [{ + type: "text", + props: { + label: "label of the field" as TranslatedString, + name: "comment", + }, + }] + }] +} + +export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); diff --git a/packages/aml-backoffice-ui/src/handlers/InputInteger.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputInteger.stories.tsx new file mode 100644 index 000000000..a08513075 --- /dev/null +++ b/packages/aml-backoffice-ui/src/handlers/InputInteger.stories.tsx @@ -0,0 +1,59 @@ +/* + This file is part of GNU Taler + (C) 2022 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 { TranslatedString } from "@gnu-taler/taler-util"; +import * as tests from "@gnu-taler/web-util/testing"; +import { + NiceForm as TestedComponent, +} from "./NiceForm.js"; +import { FlexibleForm } from "./forms.js"; + +export default { + title: "Input Integer", +}; + +export namespace Simplest { + export interface Form { + comment: string; + } +} + +type TargetObject = { + comment: string; +} +const initial: TargetObject = { + comment: "some initial comment" +} + +const form: FlexibleForm = { + design: [{ + title: "this is a simple form" as TranslatedString, + fields: [{ + type: "text", + props: { + label: "label of the field" as TranslatedString, + name: "comment", + }, + }] + }] +} + +export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); diff --git a/packages/aml-backoffice-ui/src/handlers/InputLine.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputLine.stories.tsx new file mode 100644 index 000000000..0d55bddf7 --- /dev/null +++ b/packages/aml-backoffice-ui/src/handlers/InputLine.stories.tsx @@ -0,0 +1,59 @@ +/* + This file is part of GNU Taler + (C) 2022 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 { TranslatedString } from "@gnu-taler/taler-util"; +import * as tests from "@gnu-taler/web-util/testing"; +import { + NiceForm as TestedComponent, +} from "./NiceForm.js"; +import { FlexibleForm } from "./forms.js"; + +export default { + title: "Input Line", +}; + +export namespace Simplest { + export interface Form { + comment: string; + } +} + +type TargetObject = { + comment: string; +} +const initial: TargetObject = { + comment: "some initial comment" +} + +const form: FlexibleForm = { + design: [{ + title: "this is a simple form" as TranslatedString, + fields: [{ + type: "text", + props: { + label: "label of the field" as TranslatedString, + name: "comment", + }, + }] + }] +} + +export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); diff --git a/packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.stories.tsx new file mode 100644 index 000000000..eddb7fe94 --- /dev/null +++ b/packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.stories.tsx @@ -0,0 +1,59 @@ +/* + This file is part of GNU Taler + (C) 2022 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 { TranslatedString } from "@gnu-taler/taler-util"; +import * as tests from "@gnu-taler/web-util/testing"; +import { + NiceForm as TestedComponent, +} from "./NiceForm.js"; +import { FlexibleForm } from "./forms.js"; + +export default { + title: "Input Select Multiple", +}; + +export namespace Simplest { + export interface Form { + comment: string; + } +} + +type TargetObject = { + comment: string; +} +const initial: TargetObject = { + comment: "some initial comment" +} + +const form: FlexibleForm = { + design: [{ + title: "this is a simple form" as TranslatedString, + fields: [{ + type: "text", + props: { + label: "label of the field" as TranslatedString, + name: "comment", + }, + }] + }] +} + +export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); diff --git a/packages/aml-backoffice-ui/src/handlers/InputSelectOne.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputSelectOne.stories.tsx new file mode 100644 index 000000000..7321577c3 --- /dev/null +++ b/packages/aml-backoffice-ui/src/handlers/InputSelectOne.stories.tsx @@ -0,0 +1,59 @@ +/* + This file is part of GNU Taler + (C) 2022 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 { TranslatedString } from "@gnu-taler/taler-util"; +import * as tests from "@gnu-taler/web-util/testing"; +import { + NiceForm as TestedComponent, +} from "./NiceForm.js"; +import { FlexibleForm } from "./forms.js"; + +export default { + title: "Input Select One", +}; + +export namespace Simplest { + export interface Form { + comment: string; + } +} + +type TargetObject = { + comment: string; +} +const initial: TargetObject = { + comment: "some initial comment" +} + +const form: FlexibleForm = { + design: [{ + title: "this is a simple form" as TranslatedString, + fields: [{ + type: "text", + props: { + label: "label of the field" as TranslatedString, + name: "comment", + }, + }] + }] +} + +export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); diff --git a/packages/aml-backoffice-ui/src/handlers/InputText.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputText.stories.tsx new file mode 100644 index 000000000..9ce733d4a --- /dev/null +++ b/packages/aml-backoffice-ui/src/handlers/InputText.stories.tsx @@ -0,0 +1,59 @@ +/* + This file is part of GNU Taler + (C) 2022 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 { TranslatedString } from "@gnu-taler/taler-util"; +import * as tests from "@gnu-taler/web-util/testing"; +import { + NiceForm as TestedComponent, +} from "./NiceForm.js"; +import { FlexibleForm } from "./forms.js"; + +export default { + title: "Input Text", +}; + +export namespace Simplest { + export interface Form { + comment: string; + } +} + +type TargetObject = { + comment: string; +} +const initial: TargetObject = { + comment: "some initial comment" +} + +const form: FlexibleForm = { + design: [{ + title: "this is a simple form" as TranslatedString, + fields: [{ + type: "text", + props: { + label: "label of the field" as TranslatedString, + name: "comment", + }, + }] + }] +} + +export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); diff --git a/packages/aml-backoffice-ui/src/handlers/InputTextArea.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputTextArea.stories.tsx new file mode 100644 index 000000000..df35b25c4 --- /dev/null +++ b/packages/aml-backoffice-ui/src/handlers/InputTextArea.stories.tsx @@ -0,0 +1,59 @@ +/* + This file is part of GNU Taler + (C) 2022 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 { TranslatedString } from "@gnu-taler/taler-util"; +import * as tests from "@gnu-taler/web-util/testing"; +import { + NiceForm as TestedComponent, +} from "./NiceForm.js"; +import { FlexibleForm } from "./forms.js"; + +export default { + title: "Input Text Area", +}; + +export namespace Simplest { + export interface Form { + comment: string; + } +} + +type TargetObject = { + comment: string; +} +const initial: TargetObject = { + comment: "some initial comment" +} + +const form: FlexibleForm = { + design: [{ + title: "this is a simple form" as TranslatedString, + fields: [{ + type: "text", + props: { + label: "label of the field" as TranslatedString, + name: "comment", + }, + }] + }] +} + +export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); diff --git a/packages/aml-backoffice-ui/src/handlers/NiceForm.tsx b/packages/aml-backoffice-ui/src/handlers/NiceForm.tsx new file mode 100644 index 000000000..d01b80b02 --- /dev/null +++ b/packages/aml-backoffice-ui/src/handlers/NiceForm.tsx @@ -0,0 +1,60 @@ +import { ComponentChildren, Fragment, h } from "preact"; +import { FormProvider } from "./FormProvider.js"; +import { FlexibleForm, RenderAllFieldsByUiConfig } from "./forms.js"; + +export function NiceForm({ + initial, + onUpdate, + form, + onSubmit, + children, + readOnly, +}: { + children?: ComponentChildren; + initial: Partial; + onSubmit?: (v: Partial) => void; + form: FlexibleForm; + readOnly?: boolean; + onUpdate?: (d: Partial) => void; +}) { + return ( + +
+ {form.design.map((section, i) => { + if (!section) return ; + return ( +
+
+

+ {section.title} +

+ {section.description && ( +

+ {section.description} +

+ )} +
+
+
+
+ +
+
+
+
+ ); + })} +
+ {children} + + ); +} diff --git a/packages/aml-backoffice-ui/src/handlers/forms.ts b/packages/aml-backoffice-ui/src/handlers/forms.ts index 2c90a69ed..b1fcc2937 100644 --- a/packages/aml-backoffice-ui/src/handlers/forms.ts +++ b/packages/aml-backoffice-ui/src/handlers/forms.ts @@ -11,7 +11,7 @@ import { InputFile } from "./InputFile.js"; import { Caption } from "./Caption.js"; import { Group } from "./Group.js"; import { InputSelectOne } from "./InputSelectOne.js"; -import { FormProvider } from "./FormProvider.js"; +import { FormProvider, FormState } from "./FormProvider.js"; import { InputLine } from "./InputLine.js"; import { InputAmount } from "./InputAmount.js"; import { InputChoiceHorizontal } from "./InputChoiceHorizontal.js"; @@ -23,6 +23,10 @@ export type DoubleColumnFormSection = { description?: TranslatedString; fields: UIFormField[]; }; +export interface FlexibleForm { + design: DoubleColumnForm; + behavior?: (form: Partial) => FormState; +} /** * Constrain the type with the ui props @@ -116,10 +120,7 @@ export function RenderAllFieldsByUiConfig({ type FormSet = { Provider: typeof FormProvider; InputLine: () => typeof InputLine; - InputChoiceHorizontal: () => typeof InputChoiceHorizontal< - T, - K - >; + InputChoiceHorizontal: () => typeof InputChoiceHorizontal; }; export function createNewForm() { const res: FormSet = { diff --git a/packages/aml-backoffice-ui/src/handlers/index.stories.ts b/packages/aml-backoffice-ui/src/handlers/index.stories.ts new file mode 100644 index 000000000..eedcf7472 --- /dev/null +++ b/packages/aml-backoffice-ui/src/handlers/index.stories.ts @@ -0,0 +1,12 @@ +export * as a1 from "./InputAmount.stories.js"; +export * as a2 from "./InputArray.stories.js"; +export * as a3 from "./InputChoiceHorizontal.stories.js"; +export * as a4 from "./InputChoiceStacked.stories.js"; +export * as a5 from "./InputDate.stories.js"; +export * as a6 from "./InputFile.stories.js"; +export * as a7 from "./InputInteger.stories.js"; +export * as a8 from "./InputLine.stories.js"; +export * as a9 from "./InputSelectMultiple.stories.js"; +export * as a10 from "./InputSelectOne.stories.js"; +export * as a11 from "./InputText.stories.js"; +export * as a12 from "./InputTextArea.stories.js"; diff --git a/packages/aml-backoffice-ui/src/pages/AntiMoneyLaunderingForm.tsx b/packages/aml-backoffice-ui/src/pages/AntiMoneyLaunderingForm.tsx index 381f00ebb..020727fca 100644 --- a/packages/aml-backoffice-ui/src/pages/AntiMoneyLaunderingForm.tsx +++ b/packages/aml-backoffice-ui/src/pages/AntiMoneyLaunderingForm.tsx @@ -1,7 +1,7 @@ import { AbsoluteTime, AmountJson, Amounts, Codec, OperationResult, buildCodecForObject, codecForNumber, codecForString, codecOptional } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { h } from "preact"; -import { NiceForm } from "../NiceForm.js"; +import { NiceForm } from "../handlers/NiceForm.js"; import { v1 as form_902_11e_v1 } from "../forms/902_11e.js"; import { v1 as form_902_12e_v1 } from "../forms/902_12e.js"; import { v1 as form_902_13e_v1 } from "../forms/902_13e.js"; @@ -14,7 +14,7 @@ import { v1 as simplest } from "../forms/simplest.js"; import { Pages } from "../pages.js"; import { AmlExchangeBackend } from "../types.js"; import { useExchangeApiContext } from "../context/config.js"; -import { FlexibleForm } from "../forms/index.js"; +import { FlexibleForm } from "../handlers/forms.js"; export function AntiMoneyLaunderingForm({ account, formId, onSubmit }: { account: string, formId: string, onSubmit: (justification: Justification, state: AmlExchangeBackend.AmlState, threshold: AmountJson) => Promise; }) { const { i18n } = useTranslationContext() diff --git a/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx b/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx index 9d6126ce3..40ae282dd 100644 --- a/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx +++ b/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx @@ -10,7 +10,7 @@ import { ErrorLoading, Loading, useTranslationContext } from "@gnu-taler/web-uti import { format } from "date-fns"; import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; -import { NiceForm } from "../NiceForm.js"; +import { NiceForm } from "../handlers/NiceForm.js"; import { useCaseDetails } from "../hooks/useCaseDetails.js"; import { Pages } from "../pages.js"; import { AmlExchangeBackend } from "../types.js"; diff --git a/packages/aml-backoffice-ui/src/pages/Cases.tsx b/packages/aml-backoffice-ui/src/pages/Cases.tsx index 32e162e5b..96d1d634f 100644 --- a/packages/aml-backoffice-ui/src/pages/Cases.tsx +++ b/packages/aml-backoffice-ui/src/pages/Cases.tsx @@ -23,7 +23,7 @@ export function CasesUI({ records, filter, onChangeFilter, onFirstPage, onNext } Cases -

+

A list of all the account with the status @@ -71,7 +71,7 @@ export function CasesUI({ records, filter, onChangeFilter, onFirstPage, onNext } Account Id @@ -79,7 +79,7 @@ export function CasesUI({ records, filter, onChangeFilter, onFirstPage, onNext } Status @@ -87,7 +87,7 @@ export function CasesUI({ records, filter, onChangeFilter, onFirstPage, onNext } Threshold diff --git a/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx b/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx index bd25ce958..ce37fcf14 100644 --- a/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx +++ b/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx @@ -1,12 +1,11 @@ +import { AbsoluteTime, AmountJson, TranslatedString } from "@gnu-taler/taler-util"; +import { format } from "date-fns"; import { Fragment, VNode, h } from "preact"; -import { useState } from "preact/hooks"; -import { NiceForm } from "../NiceForm.js"; -import { FlexibleForm } from "../forms/index.js"; +import { NiceForm } from "../handlers/NiceForm.js"; +import { FlexibleForm } from "../handlers/forms.js"; import { UIFormField } from "../handlers/forms.js"; -import { AmlEvent } from "./CaseDetails.js"; import { AmlExchangeBackend } from "../types.js"; -import { AbsoluteTime, AmountJson, TranslatedString } from "@gnu-taler/taler-util"; -import { format } from "date-fns"; +import { AmlEvent } from "./CaseDetails.js"; export function ShowConsolidated({ history, @@ -92,8 +91,7 @@ export function ShowConsolidated({ return (

- Consolidated information - {until.t_ms === "never" + Consolidated information {until.t_ms === "never" ? "" : `after ${format(until.t_ms, "dd MMMM yyyy")}`}

@@ -101,6 +99,7 @@ export function ShowConsolidated({ key={`${String(Date.now())}`} form={form} initial={cons} + readOnly onUpdate={() => { }} /> diff --git a/packages/aml-backoffice-ui/src/stories.tsx b/packages/aml-backoffice-ui/src/stories.tsx index 7685195e5..1352acc37 100644 --- a/packages/aml-backoffice-ui/src/stories.tsx +++ b/packages/aml-backoffice-ui/src/stories.tsx @@ -21,7 +21,7 @@ import { strings } from "./i18n/strings.js"; import * as pages from "./pages/index.stories.js"; -// import * as components from "./components/index.examples.js"; +import * as forms from "./handlers/index.stories.js"; import { renderStories } from "@gnu-taler/web-util/browser"; @@ -31,7 +31,7 @@ import { ExchangeApiContextTesting } from "./context/config.js"; function main(): void { renderStories( - { pages }, + { pages, forms }, { strings, getWrapperForGroup -- cgit v1.2.3