From 6dd7cfa1ecd3ab95e4ab50e144762e5dceb03328 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sat, 30 Dec 2023 20:19:47 -0300 Subject: abs time --- packages/aml-backoffice-ui/src/forms/902_13e.ts | 10 +- packages/aml-backoffice-ui/src/forms/902_15e.ts | 4 +- packages/aml-backoffice-ui/src/forms/902_1e.ts | 6 +- packages/aml-backoffice-ui/src/forms/902_4e.ts | 6 +- packages/aml-backoffice-ui/src/forms/902_9e.ts | 2 +- .../aml-backoffice-ui/src/handlers/Calendar.tsx | 35 ++++--- packages/aml-backoffice-ui/src/handlers/Dialog.tsx | 4 +- .../src/handlers/InputAbsoluteTime.stories.tsx | 60 +++++++++++ .../src/handlers/InputAbsoluteTime.tsx | 77 +++++++++++++++ .../src/handlers/InputChoiceHorizontal.stories.tsx | 14 ++- .../src/handlers/InputChoiceHorizontal.tsx | 5 +- .../src/handlers/InputChoiceStacked.stories.tsx | 12 ++- .../src/handlers/InputDate.stories.tsx | 59 ----------- .../aml-backoffice-ui/src/handlers/InputDate.tsx | 66 ------------- .../src/handlers/InputFile.stories.tsx | 7 +- .../src/handlers/InputInteger.stories.tsx | 14 +-- .../aml-backoffice-ui/src/handlers/InputLine.tsx | 8 +- .../src/handlers/InputSelectMultiple.stories.tsx | 41 +++++++- .../src/handlers/InputSelectOne.stories.tsx | 19 +++- .../src/handlers/InputToggle.stories.tsx | 59 +++++++++++ .../aml-backoffice-ui/src/handlers/InputToggle.tsx | 38 +++++++ .../aml-backoffice-ui/src/handlers/TimePicker.tsx | 110 +++++++++++++++++++++ packages/aml-backoffice-ui/src/handlers/forms.ts | 13 ++- .../src/handlers/index.stories.ts | 3 +- 24 files changed, 481 insertions(+), 191 deletions(-) create mode 100644 packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.stories.tsx create mode 100644 packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputDate.stories.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputDate.tsx create mode 100644 packages/aml-backoffice-ui/src/handlers/InputToggle.stories.tsx create mode 100644 packages/aml-backoffice-ui/src/handlers/InputToggle.tsx create mode 100644 packages/aml-backoffice-ui/src/handlers/TimePicker.tsx diff --git a/packages/aml-backoffice-ui/src/forms/902_13e.ts b/packages/aml-backoffice-ui/src/forms/902_13e.ts index 7f5887de2..1eccd4b51 100644 --- a/packages/aml-backoffice-ui/src/forms/902_13e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_13e.ts @@ -98,7 +98,7 @@ export const v1 = (current: BaseForm): FlexibleForm => ({ }, }, { - type: "date", + type: "absoluteTime", props: { name: "dateOfBirth", label: "Date of birth" as TranslatedString, @@ -114,7 +114,7 @@ export const v1 = (current: BaseForm): FlexibleForm => ({ }, }, { - type: "date", + type: "absoluteTime", props: { name: "dateOfDeath", label: "Date of death" as TranslatedString, @@ -177,7 +177,7 @@ export const v1 = (current: BaseForm): FlexibleForm => ({ }, }, { - type: "date", + type: "absoluteTime", props: { name: "dateOfBirth", label: "Date of birth" as TranslatedString, @@ -193,7 +193,7 @@ export const v1 = (current: BaseForm): FlexibleForm => ({ }, }, { - type: "date", + type: "absoluteTime", props: { name: "dateOfDeath", label: "Date of death" as TranslatedString, @@ -237,7 +237,7 @@ export const v1 = (current: BaseForm): FlexibleForm => ({ }, }, { - type: "date", + type: "absoluteTime", props: { name: "dateOfBirth", label: "Date of birth" as TranslatedString, diff --git a/packages/aml-backoffice-ui/src/forms/902_15e.ts b/packages/aml-backoffice-ui/src/forms/902_15e.ts index 10a2533d4..92ec03716 100644 --- a/packages/aml-backoffice-ui/src/forms/902_15e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_15e.ts @@ -67,7 +67,7 @@ export const v1 = (current: BaseForm): FlexibleForm => ({ }, }, { - type: "date", + type: "absoluteTime", props: { name: "holder.dateOfBirth", label: "Date of birth" as TranslatedString, @@ -108,7 +108,7 @@ export const v1 = (current: BaseForm): FlexibleForm => ({ }, }, { - type: "date", + type: "absoluteTime", props: { name: "premiumPayer.dateOfBirth", label: "Date of birth" as TranslatedString, diff --git a/packages/aml-backoffice-ui/src/forms/902_1e.ts b/packages/aml-backoffice-ui/src/forms/902_1e.ts index e2faff63e..806833cd9 100644 --- a/packages/aml-backoffice-ui/src/forms/902_1e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_1e.ts @@ -61,7 +61,7 @@ export const v1 = (current: BaseForm): FlexibleForm => ({ }, }, { - type: "date", + type: "absoluteTime", props: { name: "naturalCustomer.dateOfBirth", label: "Date of birth" as TranslatedString, @@ -217,7 +217,7 @@ export const v1 = (current: BaseForm): FlexibleForm => ({ }, }, { - type: "date", + type: "absoluteTime", props: { name: "dateOfBirth", label: "Date of birth" as TranslatedString, @@ -294,7 +294,7 @@ export const v1 = (current: BaseForm): FlexibleForm => ({ title: "Acceptance of business relationship" as TranslatedString, fields: [ { - type: "date", + type: "absoluteTime", props: { name: "acceptance.when", pattern: "dd/MM/yyyy", diff --git a/packages/aml-backoffice-ui/src/forms/902_4e.ts b/packages/aml-backoffice-ui/src/forms/902_4e.ts index 540e05bf6..14d2d1e1c 100644 --- a/packages/aml-backoffice-ui/src/forms/902_4e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_4e.ts @@ -95,7 +95,7 @@ export const v1 = (current: BaseForm): FlexibleForm => ({ }, }, { - type: "date", + type: "absoluteTime", props: { label: "The decision of the Senior executive body on the acceptance of a business relationship with a PEP was obtained on" as TranslatedString, @@ -139,7 +139,7 @@ export const v1 = (current: BaseForm): FlexibleForm => ({ }, }, { - type: "date", + type: "absoluteTime", props: { label: "The decision of the Senior executive body on the acceptance of a business relationship with a PEP was obtained on" as TranslatedString, @@ -585,7 +585,7 @@ export const v1 = (current: BaseForm): FlexibleForm => ({ }, }, { - type: "date", + type: "absoluteTime", props: { label: "The decision of the Senior executive body on the acceptance of a business relationship with a PEP was obtained on" as TranslatedString, diff --git a/packages/aml-backoffice-ui/src/forms/902_9e.ts b/packages/aml-backoffice-ui/src/forms/902_9e.ts index d1604dab2..cdbd1a84c 100644 --- a/packages/aml-backoffice-ui/src/forms/902_9e.ts +++ b/packages/aml-backoffice-ui/src/forms/902_9e.ts @@ -46,7 +46,7 @@ export const v1 = (current: BaseForm): FlexibleForm => ({ }, }, { - type: "date", + type: "absoluteTime", props: { name: "dateOfBirth", label: "Date of birth" as TranslatedString, diff --git a/packages/aml-backoffice-ui/src/handlers/Calendar.tsx b/packages/aml-backoffice-ui/src/handlers/Calendar.tsx index 9da6e1757..e476bf6f6 100644 --- a/packages/aml-backoffice-ui/src/handlers/Calendar.tsx +++ b/packages/aml-backoffice-ui/src/handlers/Calendar.tsx @@ -89,28 +89,31 @@ export function Calendar({ value, onChange }: { value: AbsoluteTime | undefined,
S
S
-
- {daysInMonth.map(current => ( - - ))} + + + ))} +
+ {daysInMonth.length < 40 ?
: undefined}
} diff --git a/packages/aml-backoffice-ui/src/handlers/Dialog.tsx b/packages/aml-backoffice-ui/src/handlers/Dialog.tsx index f9899e94e..7b41fe487 100644 --- a/packages/aml-backoffice-ui/src/handlers/Dialog.tsx +++ b/packages/aml-backoffice-ui/src/handlers/Dialog.tsx @@ -5,8 +5,8 @@ export function Dialog({ children, onClose }: { onClose?: () => void; children:
-
-
+
+
e.stopPropagation()}> {children}
diff --git a/packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.stories.tsx new file mode 100644 index 000000000..54e41ffae --- /dev/null +++ b/packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.stories.tsx @@ -0,0 +1,60 @@ +/* + 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 { AbsoluteTime, 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 Absolute Time", +}; + +export namespace Simplest { + export interface Form { + comment: string; + } +} + +type TargetObject = { + today: AbsoluteTime; +} +const initial: TargetObject = { + today: AbsoluteTime.now() +} + +const form: FlexibleForm = { + design: [{ + title: "this is a simple form" as TranslatedString, + fields: [{ + type: "absoluteTime", + props: { + label: "label of the field" as TranslatedString, + name: "today", + pattern: "dd/MM/yyyy HH:mm" + }, + }] + }] +} + +export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); diff --git a/packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.tsx b/packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.tsx new file mode 100644 index 000000000..0e03c5595 --- /dev/null +++ b/packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.tsx @@ -0,0 +1,77 @@ +import { AbsoluteTime } from "@gnu-taler/taler-util"; +import { InputLine } from "./InputLine.js"; +import { Fragment, VNode, h } from "preact"; +import { format, parse } from "date-fns"; +import { Dialog } from "./Dialog.js"; +import { Calendar } from "./Calendar.js"; +import { useState } from "preact/hooks"; +import { useField } from "./useField.js"; +import { UIFormProps } from "./FormProvider.js"; +import { TimePicker } from "./TimePicker.js"; + +export function InputAbsoluteTime( + props: { pattern?: string } & UIFormProps, +): VNode { + const pattern = props.pattern ?? "dd/MM/yyyy"; + const [open, setOpen] = useState(true) + const { value, onChange } = useField(props.name); + return ( + + + + type="text" + after={{ + type: "button", + onClick: () => { + setOpen(true) + }, + // icon: , + children: ( + + + ) + }} + converter={{ + //@ts-ignore + fromStringUI: (v): AbsoluteTime | undefined => { + if (!v) return undefined; + try { + const t_ms = parse(v, pattern, Date.now()).getTime(); + return AbsoluteTime.fromMilliseconds(t_ms); + } catch (e) { + return undefined; + } + }, + //@ts-ignore + toStringUI: (v: AbsoluteTime | undefined) => { + return !v || !v.t_ms + ? undefined + : v.t_ms === "never" + ? "never" + : format(v.t_ms, pattern); + }, + }} + {...props} + /> + {/* {open && + setOpen(false)}> + { + onChange(v as any) + setOpen(false) + }} /> + + } */} + {open && + setOpen(false)} > + { + onChange(v as any) + }} + onConfirm={() => { + setOpen(false) + }} /> + } + + ); +} diff --git a/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.stories.tsx index e59bbe396..7872afac7 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.stories.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.stories.tsx @@ -40,17 +40,27 @@ type TargetObject = { comment: string; } const initial: TargetObject = { - comment: "some initial comment" + comment: "0" } const form: FlexibleForm = { design: [{ title: "this is a simple form" as TranslatedString, fields: [{ - type: "text", + type: "choiceHorizontal", props: { label: "label of the field" as TranslatedString, name: "comment", + choices: [{ + label: "first choice" as TranslatedString, + value: "1" + }, { + label: "second choice" as TranslatedString, + value: "2" + }, { + label: "thrid choice" as TranslatedString, + value: "3" + },], }, }] }] diff --git a/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.tsx b/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.tsx index 312e014c5..594b1c32e 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.tsx @@ -63,6 +63,7 @@ export function InputChoiceHorizontal( ); })} diff --git a/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.stories.tsx index bd21687bb..215418430 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.stories.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.stories.tsx @@ -47,10 +47,20 @@ const form: FlexibleForm = { design: [{ title: "this is a simple form" as TranslatedString, fields: [{ - type: "text", + type: "choiceStacked", props: { label: "label of the field" as TranslatedString, name: "comment", + choices: [{ + label: "first choice" as TranslatedString, + value: "1" + }, { + label: "second choice" as TranslatedString, + value: "2" + }, { + label: "thrid choice" as TranslatedString, + value: "3" + },], }, }] }] diff --git a/packages/aml-backoffice-ui/src/handlers/InputDate.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputDate.stories.tsx deleted file mode 100644 index 187c78bfb..000000000 --- a/packages/aml-backoffice-ui/src/handlers/InputDate.stories.tsx +++ /dev/null @@ -1,59 +0,0 @@ -/* - 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/InputDate.tsx b/packages/aml-backoffice-ui/src/handlers/InputDate.tsx deleted file mode 100644 index 794bfd7a2..000000000 --- a/packages/aml-backoffice-ui/src/handlers/InputDate.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { AbsoluteTime } from "@gnu-taler/taler-util"; -import { InputLine } from "./InputLine.js"; -import { Fragment, VNode, h } from "preact"; -import { format, parse } from "date-fns"; -import { Dialog } from "./Dialog.js"; -import { Calendar } from "./Calendar.js"; -import { useState } from "preact/hooks"; -import { useField } from "./useField.js"; -import { UIFormProps } from "./FormProvider.js"; - -export function InputDate( - props: { pattern?: string } & UIFormProps, -): VNode { - const pattern = props.pattern ?? "dd/MM/yyyy"; - const [open, setOpen] = useState(false) - const { value, onChange } = useField(props.name); - return ( - - - - type="text" - after={{ - type: "button", - onClick: () => { - setOpen(true) - }, - // icon: , - children: ( - - - ) - }} - converter={{ - //@ts-ignore - fromStringUI: (v): AbsoluteTime | undefined => { - if (!v) return undefined; - try { - const t_ms = parse(v, pattern, Date.now()).getTime(); - return AbsoluteTime.fromMilliseconds(t_ms); - } catch (e) { - return undefined; - } - }, - //@ts-ignore - toStringUI: (v: AbsoluteTime | undefined) => { - return !v || !v.t_ms - ? undefined - : v.t_ms === "never" - ? "never" - : format(v.t_ms, pattern); - }, - }} - {...props} - /> - {open && - setOpen(false)}> - { - onChange(v as any) - setOpen(false) - }} /> - - } - - ); -} diff --git a/packages/aml-backoffice-ui/src/handlers/InputFile.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputFile.stories.tsx index 856b15bc7..8a1783bda 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputFile.stories.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputFile.stories.tsx @@ -47,10 +47,15 @@ const form: FlexibleForm = { design: [{ title: "this is a simple form" as TranslatedString, fields: [{ - type: "text", + type: "file", props: { label: "label of the field" as TranslatedString, name: "comment", + required: true, + maxBites: 2 * 1024 * 1024, + accept: ".png", + tooltip: "this is a very long tooltip that explain what the field does without being short" as TranslatedString, + help: "Max size of 2 mega bytes" as TranslatedString, }, }] }] diff --git a/packages/aml-backoffice-ui/src/handlers/InputInteger.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputInteger.stories.tsx index a08513075..344865817 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputInteger.stories.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputInteger.stories.tsx @@ -30,27 +30,23 @@ export default { title: "Input Integer", }; -export namespace Simplest { - export interface Form { - comment: string; - } -} type TargetObject = { - comment: string; + age: number; } const initial: TargetObject = { - comment: "some initial comment" + age: 5, } const form: FlexibleForm = { design: [{ title: "this is a simple form" as TranslatedString, fields: [{ - type: "text", + type: "integer", props: { label: "label of the field" as TranslatedString, - name: "comment", + name: "age", + tooltip: "just numbers" as TranslatedString, }, }] }] diff --git a/packages/aml-backoffice-ui/src/handlers/InputLine.tsx b/packages/aml-backoffice-ui/src/handlers/InputLine.tsx index 890bb54cb..8c44b1ca5 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputLine.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputLine.tsx @@ -46,11 +46,11 @@ export function LabelWithTooltipMaybeRequired({ {Label} {TooltipIcon} -
- +
diff --git a/packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.stories.tsx index eddb7fe94..4dac61f21 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.stories.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.stories.tsx @@ -37,20 +37,51 @@ export namespace Simplest { } type TargetObject = { - comment: string; + pets: string[]; + things: string[]; } const initial: TargetObject = { - comment: "some initial comment" + pets: [], + things: [], } const form: FlexibleForm = { design: [{ title: "this is a simple form" as TranslatedString, fields: [{ - type: "text", + type: "selectMultiple", props: { - label: "label of the field" as TranslatedString, - name: "comment", + label: "allow diplicates" as TranslatedString, + name: "pets", + placeholder: "search..." as TranslatedString, + choices: [{ + label: "one label" as TranslatedString, + value: "one" + }, { + label: "two label" as TranslatedString, + value: "two" + }, { + label: "five label" as TranslatedString, + value: "five" + }] + }, + }, { + type: "selectMultiple", + props: { + label: "unique values" as TranslatedString, + name: "things", + unique: true, + placeholder: "search..." as TranslatedString, + choices: [{ + label: "one label" as TranslatedString, + value: "one" + }, { + label: "two label" as TranslatedString, + value: "two" + }, { + label: "five label" as TranslatedString, + value: "five" + }] }, }] }] diff --git a/packages/aml-backoffice-ui/src/handlers/InputSelectOne.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputSelectOne.stories.tsx index 7321577c3..0bb871500 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputSelectOne.stories.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputSelectOne.stories.tsx @@ -37,20 +37,31 @@ export namespace Simplest { } type TargetObject = { - comment: string; + things: string; } const initial: TargetObject = { - comment: "some initial comment" + things: "one" } const form: FlexibleForm = { design: [{ title: "this is a simple form" as TranslatedString, fields: [{ - type: "text", + type: "selectOne", props: { label: "label of the field" as TranslatedString, - name: "comment", + name: "things", + placeholder: "search..." as TranslatedString, + choices: [{ + label: "one label" as TranslatedString, + value: "one" + }, { + label: "two label" as TranslatedString, + value: "two" + }, { + label: "five label" as TranslatedString, + value: "five" + }] }, }] }] diff --git a/packages/aml-backoffice-ui/src/handlers/InputToggle.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputToggle.stories.tsx new file mode 100644 index 000000000..735e812f3 --- /dev/null +++ b/packages/aml-backoffice-ui/src/handlers/InputToggle.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 Toggle", +}; + +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: "toggle", + 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/InputToggle.tsx b/packages/aml-backoffice-ui/src/handlers/InputToggle.tsx new file mode 100644 index 000000000..1ea8699b2 --- /dev/null +++ b/packages/aml-backoffice-ui/src/handlers/InputToggle.tsx @@ -0,0 +1,38 @@ +import { VNode, h } from "preact"; +import { InputLine, LabelWithTooltipMaybeRequired } from "./InputLine.js"; +import { UIFormProps } from "./FormProvider.js"; +import { useField } from "./useField.js"; + +export function InputToggle( + props: UIFormProps, +): VNode { + const { + name, + label, + tooltip, + help, + placeholder, + required, + before, + after, + converter, + } = props; + const { value, onChange, state, isDirty } = useField(name); + + const isOn = !!value + return
+
+ + +
+
+} diff --git a/packages/aml-backoffice-ui/src/handlers/TimePicker.tsx b/packages/aml-backoffice-ui/src/handlers/TimePicker.tsx new file mode 100644 index 000000000..c6dc3e794 --- /dev/null +++ b/packages/aml-backoffice-ui/src/handlers/TimePicker.tsx @@ -0,0 +1,110 @@ +import { AbsoluteTime } from "@gnu-taler/taler-util" +import { useTranslationContext } from "@gnu-taler/web-util/browser" +import { startOfDay, getHours, getMinutes, getSeconds, setHours } from "date-fns" +import { Fragment, VNode, h } from "preact" +import { useState } from "preact/hooks" + +export function TimePicker({ value, onChange, onConfirm }: { value: AbsoluteTime | undefined, onChange: (v: AbsoluteTime) => void, onConfirm: () => void }): VNode { + const date = !value ? new Date() : new Date(AbsoluteTime.toStampMs(value)) + const hours = getHours(date) % 12 + const minutes = getMinutes(date) + const seconds = getSeconds(date) + + const { i18n } = useTranslationContext() + + return +
+ {/* time selection */} +
+
+
+ + + + : + + + + : + + + +
+
+ + +
+
+
+ {/* clock */} +
+
+ + +
+ {/*
*/} +
+ + onChange(AbsoluteTime.fromStampMs(setHours(date, 12).getTime()))} class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal" style="left: 114px; bottom: 224px;"> + 0 + + onChange(AbsoluteTime.fromStampMs(setHours(date, 1).getTime()))} class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal" style="left: 169px; bottom: 209.263px;"> + 1 + + onChange(AbsoluteTime.fromStampMs(setHours(date, 2).getTime()))} class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal" data-selected={true} style="left: 209.263px; bottom: 169px;" > + 2 + + onChange(AbsoluteTime.fromStampMs(setHours(date, 3).getTime()))} class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal" style="left: 224px; bottom: 114px;"> + 3 + + onChange(AbsoluteTime.fromStampMs(setHours(date, 4).getTime()))} class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal" style="left: 209.263px; bottom: 59px;"> + 4 + + onChange(AbsoluteTime.fromStampMs(setHours(date, 5).getTime()))} class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal" style="left: 169px; bottom: 18.7372px;"> + 5 + + onChange(AbsoluteTime.fromStampMs(setHours(date, 6).getTime()))} class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal" style="left: 114px; bottom: 4px;"> + 6 + + onChange(AbsoluteTime.fromStampMs(setHours(date, 7).getTime()))} class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal" style="left: 59px; bottom: 18.7372px;"> + 7 + + onChange(AbsoluteTime.fromStampMs(setHours(date, 8).getTime()))} class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal" style="left: 18.7372px; bottom: 59px;"> + 8 + + onChange(AbsoluteTime.fromStampMs(setHours(date, 9).getTime()))} class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal" style="left: 4px; bottom: 114px;"> + 9 + + onChange(AbsoluteTime.fromStampMs(setHours(date, 10).getTime()))} class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal" style="left: 18.7372px; bottom: 169px;"> + 10 + + onChange(AbsoluteTime.fromStampMs(setHours(date, 11).getTime()))} class="absolute rounded-[100%] w-[32px] h-[32px] text-center cursor-pointer text-[1.1rem] bg-transparent flex justify-center items-center font-light focus:outline-none selection:bg-transparent data-[selected=true]:text-white data-[selected=true]:bg-[#3b71ca] data-[selected=true]:font-normal" style="left: 59px; bottom: 209.263px;"> + 11 + +
+
+
+
+
+ +
+
+ +} diff --git a/packages/aml-backoffice-ui/src/handlers/forms.ts b/packages/aml-backoffice-ui/src/handlers/forms.ts index b1fcc2937..1c212fafa 100644 --- a/packages/aml-backoffice-ui/src/handlers/forms.ts +++ b/packages/aml-backoffice-ui/src/handlers/forms.ts @@ -1,6 +1,6 @@ import { TranslatedString } from "@gnu-taler/taler-util"; import { InputText } from "./InputText.js"; -import { InputDate } from "./InputDate.js"; +import { InputAbsoluteTime } from "./InputAbsoluteTime.js"; import { InputInteger } from "./InputInteger.js"; import { h as create, Fragment, VNode } from "preact"; import { InputChoiceStacked } from "./InputChoiceStacked.js"; @@ -15,6 +15,7 @@ import { FormProvider, FormState } from "./FormProvider.js"; import { InputLine } from "./InputLine.js"; import { InputAmount } from "./InputAmount.js"; import { InputChoiceHorizontal } from "./InputChoiceHorizontal.js"; +import { InputToggle } from "./InputToggle.js"; export type DoubleColumnForm = Array; @@ -42,8 +43,9 @@ type FieldType = { textArea: Parameters>[0]; choiceStacked: Parameters>[0]; choiceHorizontal: Parameters>[0]; - date: Parameters>[0]; + absoluteTime: Parameters>[0]; integer: Parameters>[0]; + toggle: Parameters>[0]; amount: Parameters>[0]; }; @@ -63,7 +65,8 @@ export type UIFormField = | { type: "choiceStacked"; props: FieldType["choiceStacked"] } | { type: "choiceHorizontal"; props: FieldType["choiceHorizontal"] } | { type: "integer"; props: FieldType["integer"] } - | { type: "date"; props: FieldType["date"] }; + | { type: "toggle"; props: FieldType["toggle"] } + | { type: "absoluteTime"; props: FieldType["absoluteTime"] }; type FieldComponentFunction = ( props: FieldType[key], @@ -86,7 +89,7 @@ const UIFormConfiguration: UIFormFieldMap = { file: InputFile, textArea: InputTextArea, //@ts-ignore - date: InputDate, + absoluteTime: InputAbsoluteTime, //@ts-ignore choiceStacked: InputChoiceStacked, //@ts-ignore @@ -97,6 +100,8 @@ const UIFormConfiguration: UIFormFieldMap = { //@ts-ignore selectMultiple: InputSelectMultiple, //@ts-ignore + toggle: InputToggle, + //@ts-ignore amount: InputAmount, }; diff --git a/packages/aml-backoffice-ui/src/handlers/index.stories.ts b/packages/aml-backoffice-ui/src/handlers/index.stories.ts index eedcf7472..55878cb02 100644 --- a/packages/aml-backoffice-ui/src/handlers/index.stories.ts +++ b/packages/aml-backoffice-ui/src/handlers/index.stories.ts @@ -2,7 +2,7 @@ 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 a5 from "./InputAbsoluteTime.stories.js"; export * as a6 from "./InputFile.stories.js"; export * as a7 from "./InputInteger.stories.js"; export * as a8 from "./InputLine.stories.js"; @@ -10,3 +10,4 @@ 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"; +export * as a13 from "./InputToggle.stories.js"; -- cgit v1.2.3