From bf03157b6570af6804032e206a3c60a3c7e030f3 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 6 May 2024 12:47:45 -0300
Subject: add required validation

---
 .../aml-backoffice-ui/src/pages/CaseUpdate.tsx     | 51 ++++++++++++++--------
 packages/aml-backoffice-ui/src/pages/Cases.tsx     |  2 +-
 .../aml-backoffice-ui/src/pages/CreateAccount.tsx  |  3 +-
 3 files changed, 35 insertions(+), 21 deletions(-)

(limited to 'packages/aml-backoffice-ui/src/pages')

diff --git a/packages/aml-backoffice-ui/src/pages/CaseUpdate.tsx b/packages/aml-backoffice-ui/src/pages/CaseUpdate.tsx
index 2f3ee054d..712a1fed9 100644
--- a/packages/aml-backoffice-ui/src/pages/CaseUpdate.tsx
+++ b/packages/aml-backoffice-ui/src/pages/CaseUpdate.tsx
@@ -29,17 +29,23 @@ import {
   LocalNotificationBanner,
   RenderAllFieldsByUiConfig,
   UIHandlerId,
+  convertUiField,
+  getConverterById,
   useExchangeApiContext,
   useLocalNotificationHandler,
-  useTranslationContext
+  useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { privatePages } from "../Routing.js";
-import {
-  useUiFormsContext
-} from "../context/ui-forms.js";
+import { useUiFormsContext } from "../context/ui-forms.js";
 import { preloadedForms } from "../forms/index.js";
-import { FormErrors, convertUiField, useFormState } from "../hooks/form.js";
+import {
+  FormErrors,
+  getRequiredFields,
+  getShapeFromFields,
+  useFormState,
+  validateRequiredFields,
+} from "../hooks/form.js";
 import { useOfficer } from "../hooks/officer.js";
 import { Justification } from "./CaseDetails.js";
 import { undefinedIfEmpty } from "./CreateAccount.js";
@@ -101,25 +107,27 @@ export function CaseUpdate({
   }
 
   const shape: Array<UIHandlerId> = [];
+  const requiredFields: Array<UIHandlerId> = [];
+
   theForm.config.design.forEach((section) => {
-    section.fields.forEach((field) => {
-      if ("id" in field.properties) {
-        //FIXME: this should be a validation
-        if (shape.indexOf(field.properties.id) !== -1) {
-          throw Error(`already present: ${field.properties.id}`)
-        }
-        shape.push(field.properties.id);
-      }
-    });
+    Array.prototype.push.apply(shape, getShapeFromFields(section.fields));
+    Array.prototype.push.apply(
+      requiredFields,
+      getRequiredFields(section.fields),
+    );
   });
 
   const [form, state] = useFormState<FormType>(shape, initial, (st) => {
-    const errors = undefinedIfEmpty<FormErrors<FormType>>({
+    const partialErrors = undefinedIfEmpty<FormErrors<FormType>>({
       state: st.state === undefined ? i18n.str`required` : undefined,
       threshold: !st.threshold ? i18n.str`required` : undefined,
       when: !st.when ? i18n.str`required` : undefined,
-      comment: !st.comment ? i18n.str`required` : undefined,
     });
+
+    const errors = undefinedIfEmpty<FormErrors<FormType> | undefined>(
+      validateRequiredFields(partialErrors, st, requiredFields),
+    );
+
     if (errors === undefined) {
       return {
         status: "ok",
@@ -127,6 +135,7 @@ export function CaseUpdate({
         errors: undefined,
       };
     }
+
     return {
       status: "fail",
       result: st as any,
@@ -136,6 +145,7 @@ export function CaseUpdate({
 
   const validatedForm = state.status !== "ok" ? undefined : state.result;
 
+  console.log(state.errors);
   const submitHandler =
     validatedForm === undefined
       ? undefined
@@ -180,7 +190,6 @@ export function CaseUpdate({
             }
           },
         );
-
   return (
     <Fragment>
       <LocalNotificationBanner notification={notification} />
@@ -207,7 +216,12 @@ export function CaseUpdate({
                   <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                     <RenderAllFieldsByUiConfig
                       key={i}
-                      fields={convertUiField(i18n, section.fields, form)}
+                      fields={convertUiField(
+                        i18n,
+                        section.fields,
+                        form,
+                        getConverterById,
+                      )}
                     />
                   </div>
                 </div>
@@ -269,4 +283,3 @@ export function SelectForm({ account }: { account: string }) {
     </div>
   );
 }
-
diff --git a/packages/aml-backoffice-ui/src/pages/Cases.tsx b/packages/aml-backoffice-ui/src/pages/Cases.tsx
index 7b848487a..3a7fc89f2 100644
--- a/packages/aml-backoffice-ui/src/pages/Cases.tsx
+++ b/packages/aml-backoffice-ui/src/pages/Cases.tsx
@@ -25,6 +25,7 @@ import {
   InputChoiceHorizontal,
   Loading,
   UIHandlerId,
+  amlStateConverter,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
@@ -35,7 +36,6 @@ import { privatePages } from "../Routing.js";
 import { FormErrors, RecursivePartial, useFormState } from "../hooks/form.js";
 import { undefinedIfEmpty } from "./CreateAccount.js";
 import { Officer } from "./Officer.js";
-import { amlStateConverter } from "../utils/converter.js";
 
 type FormType = {
   state: TalerExchangeApi.AmlState;
diff --git a/packages/aml-backoffice-ui/src/pages/CreateAccount.tsx b/packages/aml-backoffice-ui/src/pages/CreateAccount.tsx
index f4904933b..87310aa27 100644
--- a/packages/aml-backoffice-ui/src/pages/CreateAccount.tsx
+++ b/packages/aml-backoffice-ui/src/pages/CreateAccount.tsx
@@ -89,7 +89,8 @@ function createFormValidator(
   };
 }
 
-export function undefinedIfEmpty<T extends object>(obj: T): T | undefined {
+export function undefinedIfEmpty<T extends object | undefined>(obj: T): T | undefined {
+  if (obj === undefined) return undefined;
   return Object.keys(obj).some(
     (k) => (obj as Record<string, T>)[k] !== undefined,
   )
-- 
cgit v1.2.3