Merge branch 'feature/AB#16730' into dev

src/App/Routes/AppRoutes.tsx

@@ -16,6 +16,9 @@ import {
     ObjectDetail,
     ObjectEdit,
     ObjectWrite,
+    PublicationTemplateCreate,
+    PublicationTemplateEdit,
+    PublicationTemplateOverview,
     Regulations,
     UserDetail,
     UsersOverview,
@@ -382,6 +385,47 @@ const AppRoutes = () => {
                         },
                     ],
                 },
+                {
+                    path: 'publicatietemplates',
+                    children: [
+                        {
+                            index: true,
+                            element: (
+                                <ProtectedRoute
+                                    permissions={{
+                                        canCreateUser: true,
+                                    }}
+                                    redirectTo="/muteer">
+                                    <PublicationTemplateOverview />
+                                </ProtectedRoute>
+                            ),
+                        },
+                        {
+                            path: ':uuid',
+                            element: (
+                                <ProtectedRoute
+                                    permissions={{
+                                        canCreateUser: true,
+                                    }}
+                                    redirectTo="/muteer">
+                                    <PublicationTemplateEdit />
+                                </ProtectedRoute>
+                            ),
+                        },
+                        {
+                            path: 'nieuw',
+                            element: (
+                                <ProtectedRoute
+                                    permissions={{
+                                        canCreateUser: true,
+                                    }}
+                                    redirectTo="/muteer">
+                                    <PublicationTemplateCreate />
+                                </ProtectedRoute>
+                            ),
+                        },
+                    ],
+                },
             ],
         },
         {

src/components/DynamicObject/DynamicObjectForm/DynamicField/DynamicField.tsx

@@ -7,6 +7,7 @@ import {
 } from '@pzh-ui/components'
 import { useFormikContext } from 'formik'
 
+import FieldArray from '@/components/Form/FieldArray'
 import FieldConnections from '@/components/Form/FieldConnections'
 import FieldSelectArea from '@/components/Form/FieldSelectArea'
 import { Model } from '@/config/objects/types'
@@ -25,6 +26,7 @@ const inputFieldMap = {
     image: FormikFileUpload,
     connections: FieldConnections,
     search: DynamicObjectSearch,
+    array: FieldArray,
 }
 
 const DynamicField = ({

src/components/Form/FieldArray/FieldArray.tsx

@@ -0,0 +1,90 @@
+import { Button, FieldLabel, Text } from '@pzh-ui/components'
+import { Plus, Xmark } from '@pzh-ui/icons'
+import {
+    ArrayHelpers,
+    FieldArray as FormikFieldArray,
+    FormikValues,
+    useFormikContext,
+} from 'formik'
+
+import DynamicObjectField from '@/components/DynamicObject/DynamicObjectForm/DynamicField'
+import { Model } from '@/config/objects/types'
+import { DynamicField } from '@/config/types'
+
+const FieldArray = ({
+    name,
+    label,
+    arrayLabel,
+    description,
+    required,
+    fields,
+    model,
+}: Omit<Extract<DynamicField, { type: 'array' }>, 'type'> & {
+    model: Model
+}) => {
+    const { values } = useFormikContext<FormikValues>()
+
+    const groupChildren: any[] = values?.[name]
+
+    return (
+        <>
+            {label && (
+                <FieldLabel
+                    name={name}
+                    label={label}
+                    description={description}
+                    required={required}
+                />
+            )}
+
+            <FormikFieldArray
+                name={name}
+                render={(arrayHelpers: ArrayHelpers) => (
+                    <div className="flex flex-col gap-2">
+                        {groupChildren?.map((child, childIndex) => (
+                            <div
+                                key={name + child.type + childIndex}
+                                className="flex flex-col gap-2 bg-pzh-gray-100 p-4">
+                                <div className="flex justify-between">
+                                    {!!arrayLabel && (
+                                        <Text bold>{arrayLabel}</Text>
+                                    )}
+                                    <button
+                                        className="text-s text-pzh-green underline"
+                                        onClick={() =>
+                                            arrayHelpers.remove(childIndex)
+                                        }
+                                        type="button">
+                                        <Xmark
+                                            className="text-pzh-blue-dark"
+                                            size={16}
+                                        />
+                                    </button>
+                                </div>
+                                {fields.map(field => (
+                                    <DynamicObjectField
+                                        key={field.name + childIndex}
+                                        model={model}
+                                        isFirst
+                                        {...field}
+                                        name={`${name}.${childIndex}.${field.name}`}
+                                    />
+                                ))}
+                            </div>
+                        ))}
+
+                        <div className="mt-2">
+                            <Button
+                                icon={Plus}
+                                onPress={() => arrayHelpers.push({})}>
+                                Toevoegen
+                            </Button>
+                        </div>
+                    </div>
+                )}
+            />
+        </>
+    )
+}
+
+export default FieldArray

src/components/Form/FieldArray/index.ts

@@ -0,0 +1 @@
+export { default } from './FieldArray'

src/config/types.ts

@@ -15,6 +15,7 @@ type DynamicFieldType =
     | 'image'
     | 'connections'
     | 'search'
+    | 'array'
 
 export type DynamicSection<FieldType = string> = {
     /** Title of section */
@@ -46,7 +47,8 @@ export type DynamicField<FieldType = string> = {
     ImageProps &
     WysiwygProps &
     ConnectionsProps &
-    SearchProps
+    SearchProps &
+    ArrayProps
 
 type SelectProps =
     | { type: 'select'; options: { label: string; value: string }[] }
@@ -91,3 +93,9 @@ type SearchProps =
     | {
           type: Exclude<DynamicFieldType, 'search'>
       }
+
+type ArrayProps =
+    | { type: 'array'; fields: DynamicField[]; arrayLabel?: string }
+    | {
+          type: Exclude<DynamicFieldType, 'array'>
+      }

src/pages/protected/PublicationTemplates/PublicationTemplateCreate/PublicationTemplateCreate.tsx

@@ -0,0 +1,64 @@
+import { Heading } from '@pzh-ui/components'
+import { useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import DynamicObjectForm from '@/components/DynamicObject/DynamicObjectForm'
+import MutateLayout from '@/templates/MutateLayout'
+
+import { model } from '../model'
+
+const PublicationTemplateCreate = () => {
+    const navigate = useNavigate()
+
+    const { plural, pluralCapitalize, singularCapitalize } = model.defaults
+
+    /**
+     * Format initialData based on object fields
+     */
+    const initialData = useMemo(() => {
+        const fields = model.dynamicSections.flatMap(section =>
+            section.fields.map(field => field.name)
+        )
+
+        const objectData = {} as { [key in (typeof fields)[number]]: any }
+
+        fields?.forEach(field => {
+            return (objectData[field] = null)
+        })
+
+        return objectData
+    }, [])
+
+    const handleSubmit = () => {}
+
+    const breadcrumbPaths = [
+        { name: 'Dashboard', path: '/muteer' },
+        {
+            name: pluralCapitalize,
+            path: `/muteer/${plural}`,
+        },
+        { name: `${singularCapitalize} toevoegen`, isCurrent: true },
+    ]
+
+    return (
+        <MutateLayout
+            title={`${singularCapitalize} toevoegen`}
+            breadcrumbs={breadcrumbPaths}>
+            <div className="col-span-6">
+                <Heading level="1" size="xxl" className="mb-8">
+                    {singularCapitalize} toevoegen
+                </Heading>
+
+                <DynamicObjectForm
+                    model={model}
+                    initialData={initialData}
+                    handleSubmit={handleSubmit}
+                    onCancel={() => navigate(`/muteer/${plural}`)}
+                    isLoading={false}
+                />
+            </div>
+        </MutateLayout>
+    )
+}
+
+export default PublicationTemplateCreate

src/pages/protected/PublicationTemplates/PublicationTemplateCreate/index.ts

@@ -0,0 +1 @@
+export { default } from './PublicationTemplateCreate'

src/pages/protected/PublicationTemplates/PublicationTemplateEdit/PublicationTemplateEdit.tsx

@@ -0,0 +1,66 @@
+import { Heading } from '@pzh-ui/components'
+import { useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import DynamicObjectForm from '@/components/DynamicObject/DynamicObjectForm'
+import MutateLayout from '@/templates/MutateLayout'
+
+import { model } from '../model'
+
+const PublicationTemplateEdit = () => {
+    const navigate = useNavigate()
+
+    const { plural, pluralCapitalize, singularCapitalize } = model.defaults
+
+    const data = useMemo(() => {}, [])
+
+    /**
+     * Format initialData based on object fields
+     */
+    const initialData = useMemo(() => {
+        const fields = model.dynamicSections.flatMap(section =>
+            section.fields.map(field => field.name)
+        )
+
+        const objectData = {} as { [key in (typeof fields)[number]]: any }
+
+        fields?.forEach(field => {
+            return (objectData[field] = data?.[field as keyof typeof data])
+        })
+
+        return objectData
+    }, [data])
+
+    const handleSubmit = () => {}
+
+    const breadcrumbPaths = [
+        { name: 'Dashboard', path: '/muteer' },
+        {
+            name: pluralCapitalize,
+            path: `/muteer/${plural}`,
+        },
+        { name: `${singularCapitalize} bewerken`, isCurrent: true },
+    ]
+
+    return (
+        <MutateLayout
+            title={`${singularCapitalize} bewerken`}
+            breadcrumbs={breadcrumbPaths}>
+            <div className="col-span-6">
+                <Heading level="1" size="xxl" className="mb-8">
+                    {singularCapitalize} bewerken
+                </Heading>
+
+                <DynamicObjectForm
+                    model={model}
+                    initialData={initialData}
+                    handleSubmit={handleSubmit}
+                    onCancel={() => navigate(`/muteer/${plural}`)}
+                    isLoading={false}
+                />
+            </div>
+        </MutateLayout>
+    )
+}
+
+export default PublicationTemplateEdit

src/pages/protected/PublicationTemplates/PublicationTemplateEdit/index.ts

@@ -0,0 +1 @@
+export { default } from './PublicationTemplateEdit'