[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] branch master updated: abs time
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] branch master updated: abs time |
|
Date: |
Sun, 31 Dec 2023 00:19:54 +0100 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
The following commit(s) were added to refs/heads/master by this push:
new 6dd7cfa1e abs time
6dd7cfa1e is described below
commit 6dd7cfa1ecd3ab95e4ab50e144762e5dceb03328
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Sat Dec 30 20:19:47 2023 -0300
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 +-
...l.stories.tsx => InputAbsoluteTime.stories.tsx} | 13 +--
.../{InputDate.tsx => InputAbsoluteTime.tsx} | 19 +++-
.../src/handlers/InputChoiceHorizontal.stories.tsx | 14 ++-
.../src/handlers/InputChoiceHorizontal.tsx | 5 +-
.../src/handlers/InputChoiceStacked.stories.tsx | 12 ++-
.../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 +++-
...putDate.stories.tsx => InputToggle.stories.tsx} | 4 +-
.../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 +-
22 files changed, 309 insertions(+), 78 deletions(-)
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<Form902_13.Form> => ({
},
},
{
- type: "date",
+ type: "absoluteTime",
props: {
name: "dateOfBirth",
label: "Date of birth" as TranslatedString,
@@ -114,7 +114,7 @@ export const v1 = (current: BaseForm):
FlexibleForm<Form902_13.Form> => ({
},
},
{
- type: "date",
+ type: "absoluteTime",
props: {
name: "dateOfDeath",
label: "Date of death" as TranslatedString,
@@ -177,7 +177,7 @@ export const v1 = (current: BaseForm):
FlexibleForm<Form902_13.Form> => ({
},
},
{
- type: "date",
+ type: "absoluteTime",
props: {
name: "dateOfBirth",
label: "Date of birth" as TranslatedString,
@@ -193,7 +193,7 @@ export const v1 = (current: BaseForm):
FlexibleForm<Form902_13.Form> => ({
},
},
{
- type: "date",
+ type: "absoluteTime",
props: {
name: "dateOfDeath",
label: "Date of death" as TranslatedString,
@@ -237,7 +237,7 @@ export const v1 = (current: BaseForm):
FlexibleForm<Form902_13.Form> => ({
},
},
{
- 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<Form902_15.Form> => ({
},
},
{
- type: "date",
+ type: "absoluteTime",
props: {
name: "holder.dateOfBirth",
label: "Date of birth" as TranslatedString,
@@ -108,7 +108,7 @@ export const v1 = (current: BaseForm):
FlexibleForm<Form902_15.Form> => ({
},
},
{
- 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<Form902_1.Form> => ({
},
},
{
- type: "date",
+ type: "absoluteTime",
props: {
name: "naturalCustomer.dateOfBirth",
label: "Date of birth" as TranslatedString,
@@ -217,7 +217,7 @@ export const v1 = (current: BaseForm):
FlexibleForm<Form902_1.Form> => ({
},
},
{
- type: "date",
+ type: "absoluteTime",
props: {
name: "dateOfBirth",
label: "Date of birth" as TranslatedString,
@@ -294,7 +294,7 @@ export const v1 = (current: BaseForm):
FlexibleForm<Form902_1.Form> => ({
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<Form902_4.Form> => ({
},
},
{
- 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<Form902_4.Form> => ({
},
},
{
- 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<Form902_4.Form> => ({
},
},
{
- 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<Form902_9.Form> => ({
},
},
{
- 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,
<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/InputChoiceHorizontal.stories.tsx
b/packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.stories.tsx
similarity index 85%
copy from
packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.stories.tsx
copy to packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.stories.tsx
index e59bbe396..54e41ffae 100644
--- a/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.stories.tsx
+++ b/packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.stories.tsx
@@ -19,7 +19,7 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
-import { TranslatedString } from "@gnu-taler/taler-util";
+import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util";
import * as tests from "@gnu-taler/web-util/testing";
import {
NiceForm as TestedComponent,
@@ -27,7 +27,7 @@ import {
import { FlexibleForm } from "./forms.js";
export default {
- title: "Input Choice Horizontal",
+ title: "Input Absolute Time",
};
export namespace Simplest {
@@ -37,20 +37,21 @@ export namespace Simplest {
}
type TargetObject = {
- comment: string;
+ today: AbsoluteTime;
}
const initial: TargetObject = {
- comment: "some initial comment"
+ today: AbsoluteTime.now()
}
const form: FlexibleForm<TargetObject> = {
design: [{
title: "this is a simple form" as TranslatedString,
fields: [{
- type: "text",
+ type: "absoluteTime",
props: {
label: "label of the field" as TranslatedString,
- name: "comment",
+ name: "today",
+ pattern: "dd/MM/yyyy HH:mm"
},
}]
}]
diff --git a/packages/aml-backoffice-ui/src/handlers/InputDate.tsx
b/packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.tsx
similarity index 82%
rename from packages/aml-backoffice-ui/src/handlers/InputDate.tsx
rename to 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
similarity index 96%
rename from packages/aml-backoffice-ui/src/handlers/InputDate.stories.tsx
rename to 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";
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- [taler-wallet-core] branch master updated: abs time,
gnunet <=