diff options
author | Sebastian <sebasjm@gmail.com> | 2023-12-30 20:19:47 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-12-30 20:19:47 -0300 |
commit | 6dd7cfa1ecd3ab95e4ab50e144762e5dceb03328 (patch) | |
tree | ceea1abf8e4be909d15a9219748279c9a895e667 /packages/aml-backoffice-ui/src/handlers | |
parent | a37abd2472ac2d521e81838632050963157f00af (diff) | |
download | wallet-core-6dd7cfa1ecd3ab95e4ab50e144762e5dceb03328.tar.xz |
abs time
Diffstat (limited to 'packages/aml-backoffice-ui/src/handlers')
17 files changed, 348 insertions, 58 deletions
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, <div>S</div> <div>S</div> </div> - <div class="isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200"> - {daysInMonth.map(current => ( - <button type="button" - data-month={isSameMonth(current, showingDate)} - data-today={isSameDay(current, today)} - data-selected={isSameDay(current, selected)} - onClick={() => { - onChange(AbsoluteTime.fromStampMs(current.getTime())) - }} - class="text-gray-400 hover:bg-gray-700 focus:z-10 py-1.5 + <div class="isolate mt-2"> + <div class="grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200"> + {daysInMonth.map(current => ( + <button type="button" + data-month={isSameMonth(current, showingDate)} + data-today={isSameDay(current, today)} + data-selected={isSameDay(current, selected)} + onClick={() => { + onChange(AbsoluteTime.fromStampMs(current.getTime())) + }} + class="text-gray-400 hover:bg-gray-700 focus:z-10 py-1.5 data-[month=false]:bg-gray-100 data-[month=true]:bg-white data-[today=true]:font-semibold data-[month=true]:text-gray-900 data-[today=true]:bg-red-300 data-[today=true]:hover:bg-red-200 data-[month=true]:hover:bg-gray-200 data-[selected=true]:!bg-blue-400 data-[selected=true]:hover:!bg-blue-300 "> - <time dateTime={format(current, "yyyy-MM-dd")} - class="mx-auto flex h-7 w-7 items-center justify-center rounded-full"> - {format(current, "dd")} - </time> - </button> - ))} + <time dateTime={format(current, "yyyy-MM-dd")} + class="mx-auto flex h-7 w-7 py-4 px-5 sm:px-8 items-center justify-center rounded-full"> + {format(current, "dd")} + </time> + </button> + ))} + </div> + {daysInMonth.length < 40 ? <div class="w-7 h-7 m-1.5" /> : undefined} </div> </div> } 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: <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div> <div class="fixed inset-0 z-10 w-screen overflow-y-auto"> - <div class="flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0"> - <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6"> + <div class="flex min-h-full items-center justify-center p-4 text-center "> + <div class="relative transform overflow-hidden rounded-lg bg-white p-1 text-left shadow-xl transition-all" onClick={(e) => e.stopPropagation()}> {children} </div> </div> 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 <http://www.gnu.org/licenses/> + */ + +/** + * + * @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<TargetObject> = { + 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/InputDate.tsx b/packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.tsx index 794bfd7a2..0e03c5595 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputDate.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.tsx @@ -7,12 +7,13 @@ 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 InputDate<T extends object, K extends keyof T>( +export function InputAbsoluteTime<T extends object, K extends keyof T>( props: { pattern?: string } & UIFormProps<T, K>, ): VNode { const pattern = props.pattern ?? "dd/MM/yyyy"; - const [open, setOpen] = useState(false) + const [open, setOpen] = useState(true) const { value, onChange } = useField<T, K>(props.name); return ( <Fragment> @@ -52,7 +53,7 @@ export function InputDate<T extends object, K extends keyof T>( }} {...props} /> - {open && + {/* {open && <Dialog onClose={() => setOpen(false)}> <Calendar value={value as AbsoluteTime ?? AbsoluteTime.now()} onChange={(v) => { @@ -60,7 +61,17 @@ export function InputDate<T extends object, K extends keyof T>( setOpen(false) }} /> </Dialog> - } + } */} + {open && + <Dialog onClose={() => setOpen(false)} > + <TimePicker value={value as AbsoluteTime ?? AbsoluteTime.now()} + onChange={(v) => { + onChange(v as any) + }} + onConfirm={() => { + setOpen(false) + }} /> + </Dialog>} </Fragment> ); } 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<TargetObject> = { 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<T extends object, K extends keyof T>( <button type="button" disabled={state.disabled} + label={choice.label} class={clazz} onClick={(e) => { onChange( @@ -70,9 +71,7 @@ export function InputChoiceHorizontal<T extends object, K extends keyof T>( ); }} > - {(!converter - ? (choice.value as string) - : converter?.toStringUI(choice.value)) ?? ""} + {choice.label} </button> ); })} 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<TargetObject> = { 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/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<TargetObject> = { 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<TargetObject> = { 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} <span class="relative flex items-center group pl-2"> {TooltipIcon} - <div class="absolute bottom-0 flex flex-col items-center mb-6 group-hover:flex"> - <span class="relative z-10 p-2 text-xs leading-none text-white whitespace-no-wrap bg-black shadow-lg"> + <div class="absolute bottom-0 -ml-10 hidden flex-col items-center mb-6 group-hover:flex w-28"> + <div class="relative z-10 p-2 text-xs leading-none text-white whitespace-no-wrap bg-black shadow-lg"> {tooltip} - </span> - <div class="w-3 h-3 -mt-2 rotate-45 bg-black"></div> + </div> + <div class="w-3 h-3 -mt-2 rotate-45 bg-black"></div> </div> </span> </div> 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<TargetObject> = { 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<TargetObject> = { 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/InputDate.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputToggle.stories.tsx index 187c78bfb..735e812f3 100644 --- a/packages/aml-backoffice-ui/src/handlers/InputDate.stories.tsx +++ b/packages/aml-backoffice-ui/src/handlers/InputToggle.stories.tsx @@ -27,7 +27,7 @@ import { import { FlexibleForm } from "./forms.js"; export default { - title: "Input Date", + title: "Input Toggle", }; export namespace Simplest { @@ -47,7 +47,7 @@ const form: FlexibleForm<TargetObject> = { design: [{ title: "this is a simple form" as TranslatedString, fields: [{ - type: "text", + type: "toggle", props: { label: "label of the field" as TranslatedString, name: "comment", 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<T extends object, K extends keyof T>( + props: UIFormProps<T, K>, +): VNode { + const { + name, + label, + tooltip, + help, + placeholder, + required, + before, + after, + converter, + } = props; + const { value, onChange, state, isDirty } = useField<T, K>(name); + + const isOn = !!value + return <div class="sm:col-span-6"> + <div class="flex items-center justify-between"> + <LabelWithTooltipMaybeRequired + label={label} + required={required} + tooltip={tooltip} + /> + <button type="button" data-enabled={isOn} + class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" + role="switch" aria-checked="false" aria-labelledby="availability-label" aria-describedby="availability-description" + onClick={() => { onChange(!isOn as any); }}> + <span aria-hidden="true" data-enabled={isOn} class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span> + </button> + </div> + </div> +} 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 <Fragment> + <div class="flex flex-col bg-white rounded-t-sm justify-around" > + {/* time selection */} + <div id="" class="bg-[#3b71ca] dark:bg-zinc-700 h-24 rounded-t-lg p-12 flex flex-row items-center justify-center"> + <div class="flex w-full justify-evenly"> + <div class=""> + <span class="relative h-full"> + <button type="button" class="py-1 px-3 text-[3.75rem] font-light leading-[1.2] text-white opacity-[.54] border-none bg-transparent p-0 cursor-pointer hover:bg-[#00000026] hover:outline-none focus:bg-[#00000026] focus:outline-none " + style="pointer-events: none;"> + {new String(hours).padStart(2, "0")} + </button> + </span> + <span type="button" class="font-light leading-[1.2] text-[3.75rem] opacity-[.54] border-none bg-transparent p-0 text-white " >:</span> + <span class="relative h-full"> + <button type="button" class="py-1 px-3 text-[3.75rem] font-light leading-[1.2] text-white opacity-[.54] border-none bg-transparent p-0 cursor-pointer hover:bg-[#00000026] hover:outline-none focus:bg-[#00000026] focus:outline-none " > + {new String(minutes).padStart(2, "0")} + </button> + </span> + <span type="button" class="font-light leading-[1.2] text-[3.75rem] opacity-[.54] border-none bg-transparent p-0 text-white " >:</span> + <span class="relative h-full"> + <button type="button" class="py-1 px-3 text-[3.75rem] font-light leading-[1.2] text-white opacity-[.54] border-none bg-transparent p-0 cursor-pointer hover:bg-[#00000026] hover:outline-none focus:bg-[#00000026] focus:outline-none " > + {new String(seconds).padStart(2, "0")} + </button> + </span> + </div> + <div class="flex flex-col justify-center text-[18px] text-[#ffffff8a] "> + <button type="button" class="py-1 px-3 bg-transparent border-none text-white cursor-pointer hover:bg-[#00000026] hover:outline-none focus:bg-[#00000026] focus:outline-none" > + AM + </button> + <button type="button" class="py-1 px-3 bg-transparent border-none text-white cursor-pointer hover:bg-[#00000026] hover:outline-none focus:bg-[#00000026] focus:outline-none" > + PM + </button> + </div> + </div> + </div> + {/* clock */} + <div id="" class="mt-2 min-w-[310px] max-w-[325px] min-h-[305px] overflow-x-hidden h-full flex justify-center mx-auto flex-col items-center dark:bg-zinc-500" > + <div class="relative rounded-[100%] w-[260px] h-[260px] cursor-default my-0 mx-auto bg-[#00000012] dark:bg-zinc-600/50 animate-[show-up-clock_350ms_linear]" > + + <span class="top-1/2 left-1/2 w-[6px] h-[6px] -translate-y-1/2 -translate-x-1/2 rounded-[50%] bg-[#3b71ca] absolute" ></span> + <div class="bg-[#3b71ca] bottom-1/2 h-2/5 left-[calc(50%-1px)] rtl:!left-auto origin-[center_bottom_0] rtl:!origin-[50%_50%_0] w-[2px] absolute" style={{ transform: "rotateZ(60deg)", height: "calc(35% + 1px)" }}> + {/* <div class="-top-[21px] -left-[15px] w-[4px] border-[14px] border-solid border-[#3b71ca] h-[4px] box-content rounded-[100%] absolute" style="background-color: rgb(25, 118, 210);"></div> */} + </div> + + <span onClick={() => 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;"> + <span>0</span> + </span> + <span onClick={() => 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;"> + <span >1</span> + </span> + <span onClick={() => 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;" > + <span >2</span> + </span> + <span onClick={() => 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;"> + <span >3</span> + </span> + <span onClick={() => 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;"> + <span >4</span> + </span> + <span onClick={() => 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;"> + <span >5</span> + </span> + <span onClick={() => 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;"> + <span >6</span> + </span> + <span onClick={() => 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;"> + <span >7</span> + </span> + <span onClick={() => 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;"> + <span >8</span> + </span> + <span onClick={() => 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;"> + <span >9</span> + </span> + <span onClick={() => 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;"> + <span >10</span> + </span> + <span onClick={() => 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;"> + <span >11</span> + </span> + </div> + </div> + </div> + <div id="" class="rounded-b-lg flex justify-between items-center w-full h-[56px] px-[12px] bg-white dark:bg-zinc-500"> + <div class="w-full flex justify-end"> + <button + type="submit" + onClick={onConfirm} + class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" + > + <i18n.Translate>Confirm</i18n.Translate> + </button> + </div> + </div> + </Fragment> +} 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<DoubleColumnFormSection | undefined>; @@ -42,8 +43,9 @@ type FieldType<T extends object = any, K extends keyof T = any> = { textArea: Parameters<typeof InputTextArea<T, K>>[0]; choiceStacked: Parameters<typeof InputChoiceStacked<T, K>>[0]; choiceHorizontal: Parameters<typeof InputChoiceHorizontal<T, K>>[0]; - date: Parameters<typeof InputDate<T, K>>[0]; + absoluteTime: Parameters<typeof InputAbsoluteTime<T, K>>[0]; integer: Parameters<typeof InputInteger<T, K>>[0]; + toggle: Parameters<typeof InputToggle<T, K>>[0]; amount: Parameters<typeof InputAmount<T, K>>[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<key extends keyof FieldType> = ( 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"; |