From 245ab840baf1926ef2c03a8965fce85012887d92 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 16 May 2023 01:23:44 -0300 Subject: [PATCH] one form left --- .../exchange-backoffice-ui/src/Dashborad.tsx | 11 +- .../src/forms/902_11e.ts | 2 +- .../src/forms/902_13e.ts | 24 +- .../src/forms/902_15e.ts | 158 ++++++++++- .../src/forms/902_4e.ts | 2 +- .../src/forms/902_5e.ts | 246 +++++++++++++++++- .../src/forms/902_9e.ts | 99 ++++++- .../exchange-backoffice-ui/src/forms/index.ts | 26 ++ .../src/handlers/Group.tsx | 41 +++ ...InputChoice.tsx => InputChoiceStacked.tsx} | 0 .../src/handlers/InputSelectMultiple.tsx | 8 +- .../src/handlers/InputSelectOne.tsx | 136 ++++++++++ .../src/handlers/Separator.tsx | 26 ++ .../src/handlers/forms.ts | 17 +- 14 files changed, 750 insertions(+), 46 deletions(-) create mode 100644 packages/exchange-backoffice-ui/src/handlers/Group.tsx rename packages/exchange-backoffice-ui/src/handlers/{InputChoice.tsx => InputChoiceStacked.tsx} (100%) create mode 100644 packages/exchange-backoffice-ui/src/handlers/InputSelectOne.tsx create mode 100644 packages/exchange-backoffice-ui/src/handlers/Separator.tsx diff --git a/packages/exchange-backoffice-ui/src/Dashborad.tsx b/packages/exchange-backoffice-ui/src/Dashborad.tsx index f31160fee..dce41b496 100644 --- a/packages/exchange-backoffice-ui/src/Dashborad.tsx +++ b/packages/exchange-backoffice-ui/src/Dashborad.tsx @@ -77,17 +77,17 @@ const navigation = [ impl: form_902_13e_v1, }, { - name: "WIP (902.15e)", + name: "Information on life insurance policies (902.15e)", icon: DocumentDuplicateIcon, impl: form_902_15e_v1, }, { - name: "WIP (902.9e)", + name: "Declaration of beneficial owner (902.9e)", icon: DocumentDuplicateIcon, impl: form_902_9e_v1, }, { - name: "WIP (902.5e)", + name: "Customer profile (902.5e)", icon: DocumentDuplicateIcon, impl: form_902_5e_v1, }, @@ -167,7 +167,7 @@ export function Dashboard({ children?: ComponentChildren; }): VNode { const [sidebarOpen, setSidebarOpen] = useState(false); - const [selectedForm, setSelectedForm] = useState(3); + const [selectedForm, setSelectedForm] = useState(6); function changeForm(next: number) { setSelectedForm(next); } @@ -177,6 +177,9 @@ export function Dashboard({ when: { t_ms: new Date().getTime(), }, + originOfAssets: { + currency: "usd", + }, }; function showFormOnSidebar(v: any) { if (!logRef.current) return; diff --git a/packages/exchange-backoffice-ui/src/forms/902_11e.ts b/packages/exchange-backoffice-ui/src/forms/902_11e.ts index 49d94736f..0e9a28dce 100644 --- a/packages/exchange-backoffice-ui/src/forms/902_11e.ts +++ b/packages/exchange-backoffice-ui/src/forms/902_11e.ts @@ -1,6 +1,6 @@ import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util"; -import { FlexibleForm, languageList } from "./index.js"; import { FormState } from "../handlers/FormProvider.js"; +import { FlexibleForm } from "./index.js"; export const v1: FlexibleForm = { versionId: "2023-05-15", diff --git a/packages/exchange-backoffice-ui/src/forms/902_13e.ts b/packages/exchange-backoffice-ui/src/forms/902_13e.ts index 04dd95bc0..bca96e842 100644 --- a/packages/exchange-backoffice-ui/src/forms/902_13e.ts +++ b/packages/exchange-backoffice-ui/src/forms/902_13e.ts @@ -97,10 +97,12 @@ export const v1: FlexibleForm = { }, }, { - type: "text", + type: "date", props: { name: "dateOfBirth", label: "Date of birth" as TranslatedString, + pattern: "dd/MM/yyyy", + help: "format 'dd/MM/yyyy'" as TranslatedString, }, }, { @@ -111,11 +113,12 @@ export const v1: FlexibleForm = { }, }, { - type: "text", + type: "date", props: { name: "dateOfDeath", label: "Date of death" as TranslatedString, - help: "if deceased" as TranslatedString, + pattern: "dd/MM/yyyy", + help: "if deceased. format 'dd/MM/yyyy'" as TranslatedString, }, }, { @@ -172,10 +175,12 @@ export const v1: FlexibleForm = { }, }, { - type: "text", + type: "date", props: { name: "dateOfBirth", label: "Date of birth" as TranslatedString, + pattern: "dd/MM/yyyy", + help: "format 'dd/MM/yyyy'" as TranslatedString, }, }, { @@ -186,11 +191,12 @@ export const v1: FlexibleForm = { }, }, { - type: "text", + type: "date", props: { name: "dateOfDeath", label: "Date of death" as TranslatedString, - help: "if deceased" as TranslatedString, + pattern: "dd/MM/yyyy", + help: "if deceased. format 'dd/MM/yyyy'" as TranslatedString, }, }, ], @@ -228,10 +234,12 @@ export const v1: FlexibleForm = { }, }, { - type: "text", + type: "date", props: { name: "dateOfBirth", label: "Date of birth" as TranslatedString, + pattern: "dd/MM/yyyy", + help: "format 'dd/MM/yyyy'" as TranslatedString, }, }, { @@ -417,8 +425,8 @@ export const v1: FlexibleForm = { type: "date", props: { name: "when", - pattern: "dd/MM/yyyy", label: "Date" as TranslatedString, + pattern: "dd/MM/yyyy", help: "format 'dd/MM/yyyy'" as TranslatedString, }, }, diff --git a/packages/exchange-backoffice-ui/src/forms/902_15e.ts b/packages/exchange-backoffice-ui/src/forms/902_15e.ts index 8f927cdc2..07290858e 100644 --- a/packages/exchange-backoffice-ui/src/forms/902_15e.ts +++ b/packages/exchange-backoffice-ui/src/forms/902_15e.ts @@ -1,14 +1,13 @@ import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util"; -import { FlexibleForm, languageList } from "./index.js"; import { FormState } from "../handlers/FormProvider.js"; +import { FlexibleForm } from "./index.js"; -export const v1: FlexibleForm = { +export const v1: FlexibleForm = { versionId: "2023-05-15", design: [ { - title: "15" as TranslatedString, - description: - "for operating legal entities and partnership that are contracting partner as well as analogously for operating legal entities and partnership that are beneficial owners." as TranslatedString, + title: + "Information on life insurance policies with separately managed accounts/securities accounts" as TranslatedString, fields: [ { type: "textArea", @@ -17,6 +16,123 @@ export const v1: FlexibleForm = { label: "Contracting partner" as TranslatedString, }, }, + { + type: "text", + props: { + name: "contractualRelationship", + label: + "Name or number of the contractual relationship between the contracting party and the financial intermediary" as TranslatedString, + }, + }, + { + type: "text", + props: { + name: "insurancePolicy", + label: "Insurance policy" as TranslatedString, + }, + }, + { + type: "separator", + props: { + label: + "The contracting partner confirms in accordance with Art. 41a SRO Regulations that it is a licensed and state-supervised insurance company and that it has entered into the above-mentioned contractual relationship the assets connected to the life insurance policy also mentioned above." as TranslatedString, + }, + }, + { + type: "separator", + props: { + label: + "In relation with the above insurance policy, the contracting partner gives the following further details" as TranslatedString, + }, + }, + { + type: "group", + props: { + before: "Policy holder" as TranslatedString, + fields: [ + { + type: "text", + props: { + name: "holder.fullName", + label: + "Last name(s), first name(s)/entity" as TranslatedString, + }, + }, + { + type: "text", + props: { + name: "holder.address", + label: + "Actual address of domicile/registered office (incl. country)" as TranslatedString, + }, + }, + { + type: "date", + props: { + name: "holder.dateOfBirth", + label: "Date of birth" as TranslatedString, + pattern: "dd/MM/yyyy", + help: "format 'dd/MM/yyyy'" as TranslatedString, + }, + }, + { + type: "text", + props: { + name: "holder.nationality", + label: "Nationality" as TranslatedString, + }, + }, + ], + }, + }, + { + type: "group", + props: { + before: + "Person actually (not in a fiduciary capacity) paying the premiums (to be filled in if not identical with point 1 above)" as TranslatedString, + fields: [ + { + type: "text", + props: { + name: "premiumPayer.fullName", + label: + "Last name(s), first name(s)/entity" as TranslatedString, + }, + }, + { + type: "text", + props: { + name: "premiumPayer.address", + label: + "Actual address of domicile/registered office (incl. country)" as TranslatedString, + }, + }, + { + type: "date", + props: { + name: "premiumPayer.dateOfBirth", + label: "Date of birth" as TranslatedString, + pattern: "dd/MM/yyyy", + help: "format 'dd/MM/yyyy'" as TranslatedString, + }, + }, + { + type: "text", + props: { + name: "premiumPayer.nationality", + label: "Nationality" as TranslatedString, + }, + }, + ], + }, + }, + { + type: "separator", + props: { + label: + "The contracting partner hereby undertakes to automatically inform the financial intermediary of any changes. The contracting partner hereby also declares having been given permission by the above individuals and/or entities to transmit their data to the financial intermediary" as TranslatedString, + }, + }, { type: "date", props: { @@ -26,12 +142,26 @@ export const v1: FlexibleForm = { help: "format 'dd/MM/yyyy'" as TranslatedString, }, }, + { + type: "text", + props: { + name: "signature", + label: "Signature" as TranslatedString, + }, + }, + { + type: "separator", + props: { + label: + "It is a criminal offense to deliberately provide false information on this form (article 251 of the Swiss Criminal Code, document forgery)" as TranslatedString, + }, + }, ], }, ], behavior: function formBehavior( - v: Partial, - ): FormState { + v: Partial, + ): FormState { return { when: { disabled: true, @@ -40,9 +170,21 @@ export const v1: FlexibleForm = { }, }; -namespace Form902_12e { +namespace Form902_15e { + interface Person { + fullName: string; + address: string; + dateOfBirth: AbsoluteTime; + nationality: string; + } + export interface Form { contractingPartner: string; + contractualRelationship: string; + insurancePolicy: string; + holder: Person; + premiumsPayer: Person; when: AbsoluteTime; + signature: string; } } diff --git a/packages/exchange-backoffice-ui/src/forms/902_4e.ts b/packages/exchange-backoffice-ui/src/forms/902_4e.ts index 6e8d7f1e2..dd00beccf 100644 --- a/packages/exchange-backoffice-ui/src/forms/902_4e.ts +++ b/packages/exchange-backoffice-ui/src/forms/902_4e.ts @@ -1,6 +1,6 @@ import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util"; -import { FlexibleForm, languageList } from "./index.js"; import { FormState } from "../handlers/FormProvider.js"; +import { FlexibleForm } from "./index.js"; export const v1: FlexibleForm = { versionId: "2023-05-15", diff --git a/packages/exchange-backoffice-ui/src/forms/902_5e.ts b/packages/exchange-backoffice-ui/src/forms/902_5e.ts index 20013e727..60bd551d5 100644 --- a/packages/exchange-backoffice-ui/src/forms/902_5e.ts +++ b/packages/exchange-backoffice-ui/src/forms/902_5e.ts @@ -1,20 +1,32 @@ -import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util"; -import { FlexibleForm, languageList } from "./index.js"; +import { + AbsoluteTime, + AmountJson, + TranslatedString, +} from "@gnu-taler/taler-util"; import { FormState } from "../handlers/FormProvider.js"; +import { FlexibleForm, currencyList } from "./index.js"; export const v1: FlexibleForm = { versionId: "2023-05-15", design: [ { - title: "5" as TranslatedString, + title: "Customer Profile" as TranslatedString, description: - "for operating legal entities and partnership that are contracting partner as well as analogously for operating legal entities and partnership that are beneficial owners." as TranslatedString, + "The information below has to refer to the persons from whom the assets originate ultimately (e.g. beneficial owner of the assets, founder/creator of a trust or foundation). Is the customer an operational legal entity or partnership the information may refer to the entity itself (not to the controlling person), unless the entity holds the assets in trust for a third party." as TranslatedString, fields: [ { - type: "textArea", + type: "text", props: { - name: "contractingPartner", - label: "Contracting partner" as TranslatedString, + name: "customer", + label: "Customer" as TranslatedString, + help: "Pursuant Identification Form (VQF doc. No. 902.1) numeral 1" as TranslatedString, + }, + }, + { + type: "text", + props: { + name: "fullName", + label: "Full name" as TranslatedString, }, }, { @@ -28,6 +40,194 @@ export const v1: FlexibleForm = { }, ], }, + { + title: "Business activity" as TranslatedString, + fields: [ + { + type: "textArea", + props: { + label: "Profession, business activities" as TranslatedString, + name: "businessActivity", + help: "former, current, potentially planned" as TranslatedString, + }, + }, + ], + }, + { + title: "Financial circumstances" as TranslatedString, + fields: [ + { + type: "textArea", + props: { + label: "Income and assets, liabilities" as TranslatedString, + name: "financial", + help: "estimated" as TranslatedString, + }, + }, + ], + }, + { + title: "Origin of the deposited assets involved" as TranslatedString, + fields: [ + { + type: "text", + props: { + label: "Nature" as TranslatedString, + name: "originOfAssets.nature", + help: "nature of the involved assets" as TranslatedString, + }, + }, + { + type: "selectOne", + props: { + name: "originOfAssets.currency", + label: "Currency" as TranslatedString, + choices: currencyList, + }, + }, + { + type: "integer", + props: { + label: "Amount" as TranslatedString, + name: "originOfAssets.amount", + }, + }, + { + type: "choiceStacked", + props: { + label: "Category" as TranslatedString, + name: "originOfAssets.category", + choices: [ + { + label: "Savings" as TranslatedString, + value: "savings", + }, + { + label: "Own business operations" as TranslatedString, + value: "own-business", + }, + { + label: "Inheritance" as TranslatedString, + value: "inheritance", + }, + { + label: "Other, what?" as TranslatedString, + value: "other", + }, + ], + }, + }, + { + type: "text", + props: { + label: "Other category" as TranslatedString, + name: "originOfAssets.categoryOther", + required: true, + }, + }, + { + type: "textArea", + props: { + label: + "Detailed description of the origins/economical background of the assets involved in the business relationship" as TranslatedString, + name: "originOfAssets.details", + }, + }, + ], + }, + { + title: + "Nature and purpose of the business relationship" as TranslatedString, + fields: [ + { + type: "textArea", + props: { + label: "Purpose of the business relationship" as TranslatedString, + name: "nature.purpose", + help: "nature of the involved assets" as TranslatedString, + }, + }, + { + type: "textArea", + props: { + label: + "Information on the planned development of the business relationship and the assets" as TranslatedString, + name: "nature.plan", + }, + }, + { + type: "textArea", + props: { + label: + "Especially in the case of cash or money and asset transfer transactions with regular customers: Details on usual business volume, Information on the beneficiaries, (Full name, address, bank account)" as TranslatedString, + name: "nature.cashOrMoneyTransfer", + }, + }, + ], + }, + { + title: "Relationship with third parties" as TranslatedString, + fields: [ + { + type: "textArea", + props: { + label: + "Relation of the customer to the beneficial owner involved in the business relationship" as TranslatedString, + name: "relations.beneficialOwners", + }, + }, + { + type: "textArea", + props: { + label: + "Relation of the customer to the controlling persons involved in the business relationship" as TranslatedString, + name: "relations.controllingPersons", + }, + }, + { + type: "textArea", + props: { + label: + "Relation of the customer to the authorized signatories involved in the business relationship" as TranslatedString, + name: "relations.authorizedSignatories", + }, + }, + { + type: "textArea", + props: { + label: + "Relation of the customer to other persons involved in the business relationship" as TranslatedString, + name: "relations.otherPersons", + }, + }, + { + type: "textArea", + props: { + label: "Relation to other AMLA-Files" as TranslatedString, + name: "relations.withOtherAmlaFiles", + }, + }, + { + type: "textArea", + props: { + label: "Introducer / agents / references" as TranslatedString, + name: "relations.references", + }, + }, + ], + }, + { + title: "Further information" as TranslatedString, + fields: [ + { + type: "textArea", + props: { + label: "Other relevant information" as TranslatedString, + name: "furtherInformation", + }, + }, + ], + }, ], behavior: function formBehavior( v: Partial, @@ -36,13 +236,43 @@ export const v1: FlexibleForm = { when: { disabled: true, }, + originOfAssets: { + categoryOther: { + hidden: v.originOfAssets?.category !== "other", + }, + }, }; }, }; namespace Form902_12e { export interface Form { - contractingPartner: string; + customer: string; + fullName: string; when: AbsoluteTime; + businessActivity: string; + financial: string; + originOfAssets: { + nature: string; + currency: string; + amount: number; + category: "savings" | "own-business" | "inheritance" | "other"; + categoryOther: string; + details: string; + }; + nature: { + purpose: string; + plan: string; + cashOrMoneyTransfer: string; + }; + relations: { + beneficialOwners: string; + controllingPersons: string; + authorizedSignatories: string; + otherPersons: string; + withOtherAmlaFiles: string; + references: string; + }; + furtherInformation: string; } } diff --git a/packages/exchange-backoffice-ui/src/forms/902_9e.ts b/packages/exchange-backoffice-ui/src/forms/902_9e.ts index d68caba23..053cfaa69 100644 --- a/packages/exchange-backoffice-ui/src/forms/902_9e.ts +++ b/packages/exchange-backoffice-ui/src/forms/902_9e.ts @@ -1,14 +1,13 @@ import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util"; -import { FlexibleForm, languageList } from "./index.js"; import { FormState } from "../handlers/FormProvider.js"; +import { FlexibleForm } from "./index.js"; -export const v1: FlexibleForm = { +export const v1: FlexibleForm = { versionId: "2023-05-15", design: [ { - title: "9" as TranslatedString, - description: - "for operating legal entities and partnership that are contracting partner as well as analogously for operating legal entities and partnership that are beneficial owners." as TranslatedString, + title: + "Declaration of identity of the beneficial owner" as TranslatedString, fields: [ { type: "textArea", @@ -26,12 +25,87 @@ export const v1: FlexibleForm = { help: "format 'dd/MM/yyyy'" as TranslatedString, }, }, + { + type: "separator", + props: { + label: + "The contracting partner hereby declares that the person(s) listed below is/are the beneficial owner(s) of the assets involved in the business relationship. If the contracting partner is also the sole beneficial owner of the assets, the contracting partner's detail must be set out below" as TranslatedString, + }, + }, + { + type: "array", + props: { + label: "Persons" as TranslatedString, + labelField: "surname", + name: "persons", + fields: [ + { + type: "text", + props: { + name: "surname", + label: "Surname(s)" as TranslatedString, + }, + }, + { + type: "text", + props: { + name: "firstName", + label: "First name(s)" as TranslatedString, + }, + }, + { + type: "date", + props: { + name: "dateOfBirth", + label: "Date of birth" as TranslatedString, + pattern: "dd/MM/yyyy", + help: "format 'dd/MM/yyyy'" as TranslatedString, + }, + }, + { + type: "text", + props: { + name: "nationality", + label: "Nationality" as TranslatedString, + }, + }, + { + type: "text", + props: { + name: "address", + label: "Actual address of domicile" as TranslatedString, + }, + }, + ], + }, + }, + { + type: "separator", + props: { + label: + "The contracting partner hereby undertakes to inform automatically of any changes to the information contained herein" as TranslatedString, + }, + }, + { + type: "text", + props: { + name: "signature", + label: "Signature" as TranslatedString, + }, + }, + { + type: "separator", + props: { + label: + "It is a criminal offense to deliberately provide false information on this form (article 251 of the Swiss Criminal Code, document forgery)" as TranslatedString, + }, + }, ], }, ], behavior: function formBehavior( - v: Partial, - ): FormState { + v: Partial, + ): FormState { return { when: { disabled: true, @@ -40,9 +114,18 @@ export const v1: FlexibleForm = { }, }; -namespace Form902_12e { +namespace Form902_9e { + interface Person { + surname: string; + firstName: string; + dateOfBirth: AbsoluteTime; + nationality: string; + address: string; + } export interface Form { contractingPartner: string; + persons: Person; when: AbsoluteTime; + signature: string; } } diff --git a/packages/exchange-backoffice-ui/src/forms/index.ts b/packages/exchange-backoffice-ui/src/forms/index.ts index 2eb1fba60..c236bbaa3 100644 --- a/packages/exchange-backoffice-ui/src/forms/index.ts +++ b/packages/exchange-backoffice-ui/src/forms/index.ts @@ -118,3 +118,29 @@ export const languageList = [ value: "hau", }, ]; +export const currencyList = [ + { + label: "United States dollar" as TranslatedString, + value: "usd", + }, + { + label: "Euro" as TranslatedString, + value: "eur", + }, + { + label: "Swiss franc" as TranslatedString, + value: "chf", + }, + { + label: "Argentine peso" as TranslatedString, + value: "ars", + }, + { + label: "Mexican peso" as TranslatedString, + value: "mxn", + }, + { + label: "Brazilian real" as TranslatedString, + value: "brl", + }, +]; diff --git a/packages/exchange-backoffice-ui/src/handlers/Group.tsx b/packages/exchange-backoffice-ui/src/handlers/Group.tsx new file mode 100644 index 000000000..04af0647b --- /dev/null +++ b/packages/exchange-backoffice-ui/src/handlers/Group.tsx @@ -0,0 +1,41 @@ +import { TranslatedString } from "@gnu-taler/taler-util"; +import { VNode, h } from "preact"; +import { LabelWithTooltipMaybeRequired } from "./InputLine.js"; +import { RenderAllFieldsByUiConfig, UIFormField } from "./forms.js"; + +interface Props { + before?: TranslatedString; + after?: TranslatedString; + tooltipBefore?: TranslatedString; + tooltipAfter?: TranslatedString; + fields: UIFormField[]; +} + +export function Group({ + before, + after, + tooltipAfter, + tooltipBefore, + fields, +}: Props): VNode { + return ( +
+
+ {before && ( + + )} +
+
+ +
+
+ {after && ( + + )} +
+
+ ); +} diff --git a/packages/exchange-backoffice-ui/src/handlers/InputChoice.tsx b/packages/exchange-backoffice-ui/src/handlers/InputChoiceStacked.tsx similarity index 100% rename from packages/exchange-backoffice-ui/src/handlers/InputChoice.tsx rename to packages/exchange-backoffice-ui/src/handlers/InputChoiceStacked.tsx diff --git a/packages/exchange-backoffice-ui/src/handlers/InputSelectMultiple.tsx b/packages/exchange-backoffice-ui/src/handlers/InputSelectMultiple.tsx index 05733fe19..dd85453e5 100644 --- a/packages/exchange-backoffice-ui/src/handlers/InputSelectMultiple.tsx +++ b/packages/exchange-backoffice-ui/src/handlers/InputSelectMultiple.tsx @@ -1,5 +1,5 @@ import { Fragment, VNode, h } from "preact"; -import { Choice } from "./InputChoice.js"; +import { Choice } from "./InputChoiceStacked.js"; import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js"; import { useField } from "./useField.js"; import { useState } from "preact/hooks"; @@ -8,9 +8,10 @@ export function InputSelectMultiple( props: { choices: Choice[]; unique?: boolean; + max?: number; } & UIFormProps>, ): VNode { - const { name, label, choices, placeholder, tooltip, required, unique } = + const { name, label, choices, placeholder, tooltip, required, unique, max } = props; const { value, onChange } = useField<{ [s: string]: Array }>(name); @@ -113,6 +114,9 @@ export function InputSelectMultiple( if (unique && list.indexOf(v.value) !== -1) { return; } + if (max !== undefined && list.length >= max) { + return; + } const newValue = [...list]; newValue.splice(0, 0, v.value); onChange(newValue); diff --git a/packages/exchange-backoffice-ui/src/handlers/InputSelectOne.tsx b/packages/exchange-backoffice-ui/src/handlers/InputSelectOne.tsx new file mode 100644 index 000000000..a4ed1ba1c --- /dev/null +++ b/packages/exchange-backoffice-ui/src/handlers/InputSelectOne.tsx @@ -0,0 +1,136 @@ +import { Fragment, VNode, h } from "preact"; +import { Choice } from "./InputChoiceStacked.js"; +import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js"; +import { useField } from "./useField.js"; +import { useState } from "preact/hooks"; + +export function InputSelectOne( + props: { + choices: Choice[]; + } & UIFormProps>, +): VNode { + const { name, label, choices, placeholder, tooltip, required } = props; + const { value, onChange } = useField<{ [s: string]: string | undefined }>( + name, + ); + + const [filter, setFilter] = useState(undefined); + const regex = new RegExp(`.*${filter}.*`, "i"); + const choiceMap = choices.reduce((prev, curr) => { + return { ...prev, [curr.value]: curr.label }; + }, {} as Record); + + const filteredChoices = + filter === undefined + ? undefined + : choices.filter((v) => { + return regex.test(v.label); + }); + return ( +
+ + {value ? ( + + {choiceMap[value]} + + + ) : ( +
+ { + setFilter(e.currentTarget.value); + }} + placeholder={placeholder} + class="w-full rounded-md border-0 bg-white py-1.5 pl-3 pr-12 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" + role="combobox" + aria-controls="options" + aria-expanded="false" + /> + + + {filteredChoices !== undefined && ( +
    + {filteredChoices.map((v, idx) => { + return ( +
  • { + setFilter(undefined); + onChange(v.value); + }} + + // tabindex="-1" + > + {/* */} + {v.label} + + {/* */} +
    • + ); + })} + + {/* */} + + {/* */} +
+ )} +
+ )} +
+ ); +} diff --git a/packages/exchange-backoffice-ui/src/handlers/Separator.tsx b/packages/exchange-backoffice-ui/src/handlers/Separator.tsx new file mode 100644 index 000000000..5fa25c3ca --- /dev/null +++ b/packages/exchange-backoffice-ui/src/handlers/Separator.tsx @@ -0,0 +1,26 @@ +import { VNode, h } from "preact"; +import { + InputLine, + LabelWithTooltipMaybeRequired, + UIFormProps, +} from "./InputLine.js"; +import { TranslatedString } from "@gnu-taler/taler-util"; + +interface Props { + label: TranslatedString; + tooltip?: TranslatedString; + help?: TranslatedString; +} + +export function Separator({ label, tooltip, help }: Props): VNode { + return ( +
+ + {help && ( +

+ {help} +

+ )} +
+ ); +} diff --git a/packages/exchange-backoffice-ui/src/handlers/forms.ts b/packages/exchange-backoffice-ui/src/handlers/forms.ts index b5d1a2b20..418754919 100644 --- a/packages/exchange-backoffice-ui/src/handlers/forms.ts +++ b/packages/exchange-backoffice-ui/src/handlers/forms.ts @@ -3,11 +3,14 @@ import { InputText } from "./InputText.js"; import { InputDate } from "./InputDate.js"; import { InputInteger } from "./InputInteger.js"; import { h as create, Fragment, VNode } from "preact"; -import { InputChoiceStacked } from "./InputChoice.js"; +import { InputChoiceStacked } from "./InputChoiceStacked.js"; import { InputArray } from "./InputArray.js"; import { InputSelectMultiple } from "./InputSelectMultiple.js"; import { InputTextArea } from "./InputTextArea.js"; import { InputFile } from "./InputFile.js"; +import { Separator } from "./Separator.js"; +import { Group } from "./Group.js"; +import { InputSelectOne } from "./InputSelectOne.js"; export type DoubleColumnForm = DoubleColumnFormSection[]; @@ -21,9 +24,11 @@ type DoubleColumnFormSection = { * Constrain the type with the ui props */ type FieldType = { - separator: {}; + group: Parameters[0]; + separator: Parameters[0]; array: Parameters[0]; file: Parameters[0]; + selectOne: Parameters[0]; selectMultiple: Parameters[0]; text: Parameters[0]; textArea: Parameters[0]; @@ -36,9 +41,11 @@ type FieldType = { * List all the form fields so typescript can type-check the form instance */ export type UIFormField = + | { type: "group"; props: FieldType["group"] } | { type: "separator"; props: FieldType["separator"] } | { type: "array"; props: FieldType["array"] } | { type: "file"; props: FieldType["file"] } + | { type: "selectOne"; props: FieldType["selectOne"] } | { type: "selectMultiple"; props: FieldType["selectMultiple"] } | { type: "text"; props: FieldType["text"] } | { type: "textArea"; props: FieldType["textArea"] } @@ -54,14 +61,11 @@ type UIFormFieldMap = { [key in keyof FieldType]: FieldComponentFunction; }; -function Separator(): VNode { - return create("div", {}); -} - /** * Maps input type with component implementation */ const UIFormConfiguration: UIFormFieldMap = { + group: Group, separator: Separator, array: InputArray, text: InputText, @@ -70,6 +74,7 @@ const UIFormConfiguration: UIFormFieldMap = { date: InputDate, choiceStacked: InputChoiceStacked, integer: InputInteger, + selectOne: InputSelectOne, selectMultiple: InputSelectMultiple, };