From 02fb71c0ff69d293911f4b0945ab964a87402d0c Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 15 May 2023 15:38:04 -0300 Subject: third form and placeholder for the next ones --- packages/exchange-backoffice-ui/src/Dashborad.tsx | 103 ++++- packages/exchange-backoffice-ui/src/NiceForm.tsx | 65 ++- .../exchange-backoffice-ui/src/forms/902_12e.ts | 433 +++++++++++++++++ .../exchange-backoffice-ui/src/forms/902_13e.ts | 512 +++++++++++++++++++++ .../exchange-backoffice-ui/src/forms/902_15e.ts | 48 ++ .../exchange-backoffice-ui/src/forms/902_4e.ts | 48 ++ .../exchange-backoffice-ui/src/forms/902_5e.ts | 48 ++ .../exchange-backoffice-ui/src/forms/902_9e.ts | 48 ++ .../src/handlers/FormProvider.tsx | 7 +- 9 files changed, 1273 insertions(+), 39 deletions(-) create mode 100644 packages/exchange-backoffice-ui/src/forms/902_12e.ts create mode 100644 packages/exchange-backoffice-ui/src/forms/902_13e.ts create mode 100644 packages/exchange-backoffice-ui/src/forms/902_15e.ts create mode 100644 packages/exchange-backoffice-ui/src/forms/902_4e.ts create mode 100644 packages/exchange-backoffice-ui/src/forms/902_5e.ts create mode 100644 packages/exchange-backoffice-ui/src/forms/902_9e.ts (limited to 'packages/exchange-backoffice-ui') diff --git a/packages/exchange-backoffice-ui/src/Dashborad.tsx b/packages/exchange-backoffice-ui/src/Dashborad.tsx index 3ad2b7745..f31160fee 100644 --- a/packages/exchange-backoffice-ui/src/Dashborad.tsx +++ b/packages/exchange-backoffice-ui/src/Dashborad.tsx @@ -20,6 +20,40 @@ import { useEffect, useRef, useState } from "preact/hooks"; import { NiceForm } from "./NiceForm.js"; import { v1 as form_902_1e_v1 } from "./forms/902_1e.js"; import { v1 as form_902_11e_v1 } from "./forms/902_11e.js"; +import { v1 as form_902_12e_v1 } from "./forms/902_12e.js"; +import { v1 as form_902_13e_v1 } from "./forms/902_13e.js"; +import { v1 as form_902_15e_v1 } from "./forms/902_15e.js"; +import { v1 as form_902_9e_v1 } from "./forms/902_9e.js"; +import { v1 as form_902_5e_v1 } from "./forms/902_5e.js"; +import { v1 as form_902_4e_v1 } from "./forms/902_4e.js"; + +/** + * references between forms + * + * 902.1e + * --> 902.11 (operational legal entity or partnership) + * --> 902.12 (a foundation) + * --> 902.13 (a trust) + * --> 902.15 (life insurance policy) + * --> 902.9 (all other cases) + * --> 902.5 (cash transaction with no customer profile) + * --> 902.4 (risk profile) + * + * 902.11 + * --> 902.9 (beneficial owner in fiduciary holding assets) + * + * 902.12 + * + * 902.13 + * + * 902.15 + * + * 902.9 + * + * 902.5 + * + * 902.4 + */ const navigation = [ { @@ -32,6 +66,36 @@ const navigation = [ icon: DocumentDuplicateIcon, impl: form_902_11e_v1, }, + { + name: "Foundations (902.12e)", + icon: DocumentDuplicateIcon, + impl: form_902_12e_v1, + }, + { + name: "Declaration for trusts (902.13e)", + icon: DocumentDuplicateIcon, + impl: form_902_13e_v1, + }, + { + name: "WIP (902.15e)", + icon: DocumentDuplicateIcon, + impl: form_902_15e_v1, + }, + { + name: "WIP (902.9e)", + icon: DocumentDuplicateIcon, + impl: form_902_9e_v1, + }, + { + name: "WIP (902.5e)", + icon: DocumentDuplicateIcon, + impl: form_902_5e_v1, + }, + { + name: "WIP (902.4e)", + icon: DocumentDuplicateIcon, + impl: form_902_4e_v1, + }, ]; const teams = [ { id: 1, name: "Heroicons", href: "#", initial: "H", current: false }, @@ -69,15 +133,47 @@ function classNames(...classes: string[]) { * @returns */ +/** + * TO BE FIXED: + * + * 1.- when the form change to other form and both form share the same structure + * the same input component may be rendered in the same place, + * since input are uncontrolled the are not re-rendered and since they are + * uncontrolled it will keep the value of the previous form. + * One solutions could be to remove the form when unloading and when the new + * form load it will start without previous vdom, preventing the cache + * to create this behavior. + * Other solutions could be using IDs in the fields that are constructed + * with the ID of the form, so two fields of different form will need to re-render + * cleaning up the state of the previous form. + * + * 2.- currently the design prop and the behavior prop of the flexible form + * are two side of the same coin. From the design point of view, it is important + * to design the form in a list-of-field manner and there may be additional + * content that is not directly mapped to the form structure (object) + * So maybe we want to change the current shape so the computation of the state + * of the form is in a field level, but this computation required the field value and + * the whole form values and state (since one field may be disabled/hidden) because + * of the value of other field. + * + * 3.- given the previous requirement, maybe the name of the field of the form could be + * a function (P: F -> V) where F is the form (or parent object) and V is the type of the + * property. That will help with the typing of the forms props + */ + export function Dashboard({ children, }: { children?: ComponentChildren; }): VNode { const [sidebarOpen, setSidebarOpen] = useState(false); - const [selectedForm, setSelectedForm] = useState(1); + const [selectedForm, setSelectedForm] = useState(3); + function changeForm(next: number) { + setSelectedForm(next); + } const logRef = useRef(null); const storedValue = { + fullName: "the logged fullName", when: { t_ms: new Date().getTime(), }, @@ -92,7 +188,6 @@ export function Dashboard({ }); const showingFrom = navigation[selectedForm]; - console.log(showingFrom); return ( <>
@@ -164,7 +259,7 @@ export function Dashboard({ {navigation.map((item, idx) => (
  • setSelectedForm(idx)} + onClick={(e) => changeForm(idx)} >