From 9ddee7442b676d424c192d38045eeeb731d0c52d Mon Sep 17 00:00:00 2001
From: alimpens <a.limpens@amsterdam.nl>
Date: Tue, 18 Feb 2025 17:12:19 +0100
Subject: [PATCH 1/3] Allow multiline descriptions

---
 apps/admin/src/pages/static-form/StaticFormEdit.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/admin/src/pages/static-form/StaticFormEdit.tsx b/apps/admin/src/pages/static-form/StaticFormEdit.tsx
index db9bd222..d11e1f02 100644
--- a/apps/admin/src/pages/static-form/StaticFormEdit.tsx
+++ b/apps/admin/src/pages/static-form/StaticFormEdit.tsx
@@ -27,7 +27,7 @@ export const StaticFormEdit = () => {
       >
         <TextInput source="title" readOnly />
         <TextInput source="components[0].label" />
-        <TextInput source="components[0].description" />
+        <TextInput multiline source="components[0].description" />
       </SimpleForm>
     </Edit>
   )

From e3e5eeec11d6ebf3678f4ea2d8a69a44115e9c3a Mon Sep 17 00:00:00 2001
From: alimpens <a.limpens@amsterdam.nl>
Date: Tue, 18 Feb 2025 18:01:22 +0100
Subject: [PATCH 2/3] Allow edit of static forms in Admin

---
 apps/admin/src/app/providers/i18nProvider.ts  |  2 +
 .../src/pages/static-form/StaticFormEdit.tsx  | 55 ++++++++++++++-----
 2 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/apps/admin/src/app/providers/i18nProvider.ts b/apps/admin/src/app/providers/i18nProvider.ts
index 94b2f7a4..85a366b9 100644
--- a/apps/admin/src/app/providers/i18nProvider.ts
+++ b/apps/admin/src/app/providers/i18nProvider.ts
@@ -224,6 +224,8 @@ const nl: TranslationMessages = {
         title: 'Naam',
         'components[0].label': 'Label',
         'components[0].description': 'Beschrijving',
+        'components[1].label': 'Label',
+        'components[1].description': 'Beschrijving',
       },
     },
   },
diff --git a/apps/admin/src/pages/static-form/StaticFormEdit.tsx b/apps/admin/src/pages/static-form/StaticFormEdit.tsx
index d11e1f02..4b550d46 100644
--- a/apps/admin/src/pages/static-form/StaticFormEdit.tsx
+++ b/apps/admin/src/pages/static-form/StaticFormEdit.tsx
@@ -1,34 +1,59 @@
 import type { FormType } from '@formio/react'
 import { FormTextAreaComponentInputSchema } from 'libs/api-client/src/schemas.gen'
-import { Edit, SaveButton, SimpleForm, TextInput, Toolbar } from 'react-admin'
+import { Edit, SaveButton, SimpleForm, TextInput, Toolbar, useEditContext } from 'react-admin'
 import filter from 'uber-json-schema-filter'
 
+const Form = () => {
+  const { record } = useEditContext()
+
+  return (
+    <SimpleForm
+      toolbar={
+        <Toolbar>
+          <SaveButton />
+        </Toolbar>
+      }
+    >
+      <TextInput source="title" readOnly />
+
+      {record.type === 'contact' && (
+        <span>
+          <strong>E-mail</strong>
+        </span>
+      )}
+      <TextInput source="components[0].label" />
+      <TextInput multiline source="components[0].description" />
+
+      {record.type === 'contact' && (
+        <>
+          <span>
+            <strong>Telefoonnummer</strong>
+          </span>
+          <TextInput source="components[1].label" />
+          <TextInput multiline source="components[1].description" />
+        </>
+      )}
+    </SimpleForm>
+  )
+}
+
 export const StaticFormEdit = () => {
   // The data is filtered here before being passed to the API
   // It's filtered the same way as in the filterFormResponse function
   const transform = (data: FormType) => {
-    const component = data.components[0]
-    const filteredComponent = filter(FormTextAreaComponentInputSchema, component)
+    const { components } = data
+
+    const filteredComponents = components.map((component) => filter(FormTextAreaComponentInputSchema, component))
 
     return {
       ...data,
-      components: [filteredComponent],
+      components: filteredComponents,
     }
   }
 
   return (
     <Edit transform={transform}>
-      <SimpleForm
-        toolbar={
-          <Toolbar>
-            <SaveButton />
-          </Toolbar>
-        }
-      >
-        <TextInput source="title" readOnly />
-        <TextInput source="components[0].label" />
-        <TextInput multiline source="components[0].description" />
-      </SimpleForm>
+      <Form />
     </Edit>
   )
 }

From 2d7ed1b96c666a9c7e44c32d9188c81c00980a92 Mon Sep 17 00:00:00 2001
From: alimpens <a.limpens@amsterdam.nl>
Date: Thu, 20 Feb 2025 16:57:54 +0100
Subject: [PATCH 3/3] Add client side validation, pass empty string instead of
 null to BE

---
 apps/admin/src/pages/static-form/StaticFormEdit.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/admin/src/pages/static-form/StaticFormEdit.tsx b/apps/admin/src/pages/static-form/StaticFormEdit.tsx
index 4b550d46..b20060b0 100644
--- a/apps/admin/src/pages/static-form/StaticFormEdit.tsx
+++ b/apps/admin/src/pages/static-form/StaticFormEdit.tsx
@@ -1,11 +1,13 @@
 import type { FormType } from '@formio/react'
 import { FormTextAreaComponentInputSchema } from 'libs/api-client/src/schemas.gen'
-import { Edit, SaveButton, SimpleForm, TextInput, Toolbar, useEditContext } from 'react-admin'
+import { Edit, minLength, required, SaveButton, SimpleForm, TextInput, Toolbar, useEditContext } from 'react-admin'
 import filter from 'uber-json-schema-filter'
 
 const Form = () => {
   const { record } = useEditContext()
 
+  const validateLabel = [required(), minLength(3)]
+
   return (
     <SimpleForm
       toolbar={
@@ -21,16 +23,16 @@ const Form = () => {
           <strong>E-mail</strong>
         </span>
       )}
-      <TextInput source="components[0].label" />
-      <TextInput multiline source="components[0].description" />
+      <TextInput source="components[0].label" validate={validateLabel} />
+      <TextInput multiline source="components[0].description" parse={(value) => value ?? ''} />
 
       {record.type === 'contact' && (
         <>
           <span>
             <strong>Telefoonnummer</strong>
           </span>
-          <TextInput source="components[1].label" />
-          <TextInput multiline source="components[1].description" />
+          <TextInput source="components[1].label" validate={validateLabel} />
+          <TextInput multiline source="components[1].description" parse={(value) => value ?? ''} />
         </>
       )}
     </SimpleForm>