From 224bbb1d99a7f12a95322a4abb6a5e8f05fca68b Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 10 May 2024 11:00:14 -0300 Subject: fixing time and currency input --- packages/aml-backoffice-ui/src/forms.json | 38 +++++++--------------- .../src/forms/InputAbsoluteTime.stories.tsx | 2 +- packages/web-util/src/forms/InputAmount.tsx | 29 +++++++++-------- packages/web-util/src/forms/forms.ts | 15 +++++---- packages/web-util/src/forms/ui-form.ts | 6 ++-- 5 files changed, 38 insertions(+), 52 deletions(-) diff --git a/packages/aml-backoffice-ui/src/forms.json b/packages/aml-backoffice-ui/src/forms.json index ef8001f91..f095e6eb2 100644 --- a/packages/aml-backoffice-ui/src/forms.json +++ b/packages/aml-backoffice-ui/src/forms.json @@ -70,7 +70,7 @@ "label": "E-mail" }, { - "type": "absoluteTime", + "type": "absoluteTimeText", "pattern": "dd/MM/yyyy", "name": "naturalCustomer.dateOfBirth", @@ -240,7 +240,7 @@ "required": true }, { - "type": "absoluteTime", + "type": "absoluteTimeText", "pattern": "dd/MM/yyyy", "name": "dateOfBirth", @@ -315,7 +315,7 @@ "title": "Acceptance of business relationship", "fields": [ { - "type": "absoluteTime", + "type": "absoluteTimeText", "name": "acceptance.when", "id": ".acceptance.when", @@ -511,32 +511,16 @@ "type": "double-column", "design": [ { - "title": "Decorative elements", - "description": "This is an example UI of a form with decorative elements", + "title": "Amount inputs", "fields": [ { - "type": "caption", - "name": "cap", - "label": "This is a caption" - }, - { - "type": "group", - "name": "group", - "label": "The first name and last name are in a group", - "fields": [ - { - "type": "text", - "name": "firstName", - "id": ".person.name", - "label": "First name" - }, - { - "type": "text", - "name": "lastName", - "id": ".person.lastName", - "label": "Last name" - } - ] + "type": "amount", + "name": "thedate", + "id": ".amount", + "converterId": "Taler.Amount", + "help": "how much do you have?", + "currency":"EUR", + "label": "Amount" } ] } diff --git a/packages/web-util/src/forms/InputAbsoluteTime.stories.tsx b/packages/web-util/src/forms/InputAbsoluteTime.stories.tsx index 0d54c3f69..6b792bfee 100644 --- a/packages/web-util/src/forms/InputAbsoluteTime.stories.tsx +++ b/packages/web-util/src/forms/InputAbsoluteTime.stories.tsx @@ -47,7 +47,7 @@ const form: FlexibleForm_Deprecated = { design: [{ title: "this is a simple form" as TranslatedString, fields: [{ - type: "absoluteTime", + type: "absoluteTimeText", properties: { label: "label of the field" as TranslatedString, name: "today", diff --git a/packages/web-util/src/forms/InputAmount.tsx b/packages/web-util/src/forms/InputAmount.tsx index e8683468e..647d2c823 100644 --- a/packages/web-util/src/forms/InputAmount.tsx +++ b/packages/web-util/src/forms/InputAmount.tsx @@ -18,25 +18,26 @@ export function InputAmount( : (value as any).currency; return ( + {...props} type="text" before={{ type: "text", text: currency as TranslatedString, }} - //@ts-ignore - converter={ props.converter ?? { - - fromStringUI: (v): AmountJson => { - return ( - Amounts.parse(`${currency}:${v}`) ?? - Amounts.zeroOfCurrency(currency) - ); - }, - toStringUI: (v: AmountJson) => { - return v === undefined ? "" : Amounts.stringifyValue(v); - }, - }} - {...props} + //@ts-ignore + converter={ + props.converter ?? { + fromStringUI: (v): AmountJson => { + return ( + Amounts.parse(`${currency}:${v}`) ?? + Amounts.zeroOfCurrency(currency) + ); + }, + toStringUI: (v: AmountJson) => { + return v === undefined ? "" : Amounts.stringifyValue(v); + }, + } + } /> ); } diff --git a/packages/web-util/src/forms/forms.ts b/packages/web-util/src/forms/forms.ts index f2c00083c..cb2ee0145 100644 --- a/packages/web-util/src/forms/forms.ts +++ b/packages/web-util/src/forms/forms.ts @@ -31,7 +31,7 @@ type FieldType = { textArea: Parameters>[0]; choiceStacked: Parameters>[0]; choiceHorizontal: Parameters>[0]; - absoluteTime: Parameters>[0]; + absoluteTimeText: Parameters>[0]; integer: Parameters>[0]; toggle: Parameters>[0]; amount: Parameters>[0]; @@ -64,8 +64,8 @@ export type UIFormField = | { type: "integer"; properties: FieldType["integer"] } | { type: "toggle"; properties: FieldType["toggle"] } | { - type: "absoluteTime"; - properties: FieldType["absoluteTime"]; + type: "absoluteTimeText"; + properties: FieldType["absoluteTimeText"]; }; type FieldComponentFunction = ( @@ -89,7 +89,7 @@ const UIFormConfiguration: UIFormFieldMap = { file: InputFile, textArea: InputTextArea, //@ts-ignore - absoluteTime: InputAbsoluteTime, + absoluteTimeText: InputAbsoluteTime, //@ts-ignore choiceStacked: InputChoiceStacked, //@ts-ignore @@ -194,9 +194,9 @@ export function convertUiField( }, } as UIFormField; } - case "absoluteTime": { + case "absoluteTimeText": { return { - type: "absoluteTime", + type: "absoluteTimeText", properties: { ...converBaseFieldsProps(i18n_, config), ...converInputFieldsProps(form, config, getConverterById), @@ -208,7 +208,8 @@ export function convertUiField( type: "amount", properties: { ...converBaseFieldsProps(i18n_, config), - ...converInputFieldsProps(form, config, getConverterById), + ...converInputFieldsProps(form, config, getConverterById), + currency: config.currency, }, } as UIFormField; } diff --git a/packages/web-util/src/forms/ui-form.ts b/packages/web-util/src/forms/ui-form.ts index d683b15de..012499d6d 100644 --- a/packages/web-util/src/forms/ui-form.ts +++ b/packages/web-util/src/forms/ui-form.ts @@ -50,7 +50,7 @@ export type UIFormElementConfig = | UIFormFieldToggle; type UIFormFieldAbsoluteTime = { - type: "absoluteTime"; + type: "absoluteTimeText"; max?: TalerProtocolTimestamp; min?: TalerProtocolTimestamp; pattern: string; @@ -196,7 +196,7 @@ const codecForUIFormFieldBaseConfigTemplate = < const codecForUiFormFieldAbsoluteTime = (): Codec => codecForUIFormFieldBaseConfigTemplate() - .property("type", codecForConstString("absoluteTime")) + .property("type", codecForConstString("absoluteTimeText")) .property("pattern", codecForString()) .property("max", codecOptional(codecForTimestamp)) .property("min", codecOptional(codecForTimestamp)) @@ -303,7 +303,7 @@ const codecForUiFormField = (): Codec => .discriminateOn("type") .alternative("array", codecForLazy(codecForUiFormFieldArray)) .alternative("group", codecForLazy(codecForUiFormFieldGroup)) - .alternative("absoluteTime", codecForUiFormFieldAbsoluteTime()) + .alternative("absoluteTimeText", codecForUiFormFieldAbsoluteTime()) .alternative("amount", codecForUiFormFieldAmount()) .alternative("caption", codecForUiFormFieldCaption()) .alternative("choiceHorizontal", codecForUiFormFieldChoiceHorizontal()) -- cgit v1.2.3