Merge branch 'feature/AB#19916' into dev

package.json

@@ -17,6 +17,7 @@
         "d3": "^7.8.5",
         "dompurify": "^3.0.9",
         "formik": "^2.4.6",
+        "html-react-parser": "^5.1.18",
         "jwt-decode": "^4.0.0",
         "leaflet": "^1.9.4",
         "leaflet-draw": "^1.0.4",

src/components/DynamicObject/DynamicObjectForm/DynamicField/extensions/area.ts

@@ -5,6 +5,7 @@ export const AREA_DATA_ATTRS = {
     type: 'data-hint-gebiedsaanwijzingtype',
     location: 'data-hint-locatie',
     label: 'data-gebiedengroep-label',
+    id: 'data-gebiedengroep-id',
 } as const
 
 type AreaAttributes = {
@@ -37,6 +38,7 @@ export const Area = Mark.create({
                 [AREA_DATA_ATTRS.type]: null,
                 [AREA_DATA_ATTRS.location]: null,
                 [AREA_DATA_ATTRS.label]: null,
+                [AREA_DATA_ATTRS.id]: null,
             },
         }
     },
@@ -58,6 +60,9 @@ export const Area = Mark.create({
             [AREA_DATA_ATTRS.label]: {
                 default: this.options.HTMLAttributes[AREA_DATA_ATTRS.label],
             },
+            [AREA_DATA_ATTRS.id]: {
+                default: this.options.HTMLAttributes[AREA_DATA_ATTRS.id],
+            },
         }
     },
 

src/components/DynamicObject/ObjectContent/ObjectContent.tsx

@@ -1,12 +1,16 @@
-import { Heading } from '@pzh-ui/components'
+import { Button, Heading, Text, Tooltip } from '@pzh-ui/components'
 import classNames from 'clsx'
 import DOMPurify from 'dompurify'
+import parse, { domToReact, HTMLReactParserOptions } from 'html-react-parser'
+import { useParams } from 'react-router-dom'
 
 import {
     ReadRelationShortNationaalBelangMinimal,
     ReadRelationShortWettelijkeTaakMinimal,
 } from '@/api/fetchers.schemas'
+import ObjectAreaModal from '@/components/Modals/ObjectModals/ObjectAreaModal'
 import { ModelReturnType } from '@/config/objects/types'
+import useModalStore from '@/store/modalStore'
 
 interface ObjectContentProps {
     /** Object data */
@@ -62,6 +66,9 @@ interface ContentProps {
 }
 
 const Content = ({ title, value, hidden, html, customTitle }: ContentProps) => {
+    const { moduleId } = useParams()
+    const setActiveModal = useModalStore(state => state.setActiveModal)
+
     let cleanHtml = DOMPurify.sanitize(html)
 
     if (value === 'Weblink') {
@@ -71,6 +78,65 @@ const Content = ({ title, value, hidden, html, customTitle }: ContentProps) => {
         )
     }
 
+    const options: HTMLReactParserOptions = {
+        replace: domNode => {
+            if (domNode.type === 'tag' && domNode.name === 'a') {
+                const element = domNode as any
+                const label = element.attribs['data-gebiedengroep-label']
+
+                if (label) {
+                    return (
+                        <Tooltip
+                            label={
+                                <Text
+                                    as="span"
+                                    size="s"
+                                    color="text-pzh-white"
+                                    className="block">
+                                    Gebiedsaanwijzing:
+                                    <strong className="ml-1 font-bold text-pzh-white">
+                                        {label}
+                                    </strong>
+                                </Text>
+                            }>
+                            <Button
+                                key={label}
+                                variant="default"
+                                className="text-pzh-red-900 underline hover:text-pzh-blue-900"
+                                onPress={() =>
+                                    setActiveModal('objectArea', {
+                                        moduleId,
+                                        label,
+                                        id: element.attribs[
+                                            'data-gebiedengroep-id'
+                                        ],
+                                        locatie:
+                                            element.attribs[
+                                                'data-hint-locatie'
+                                            ],
+                                        gebiedsaanwijzingtype:
+                                            element.attribs[
+                                                'data-hint-gebiedsaanwijzingtype'
+                                            ],
+                                        gebiedengroep:
+                                            element.attribs[
+                                                'data-hint-gebiedengroep'
+                                            ],
+                                    })
+                                }
+                                {...element.attribs}>
+                                {domToReact(element.children, options)}
+                            </Button>
+                        </Tooltip>
+                    )
+                }
+            }
+            return undefined // Return undefined for other elements to be parsed as usual
+        },
+    }
+
+    const parsedContent = parse(cleanHtml, options)
+
     const Wrapper = value === 'Description' ? 'p' : 'div'
 
     return (
@@ -85,10 +151,10 @@ const Content = ({ title, value, hidden, html, customTitle }: ContentProps) => {
                     {customTitle?.[value] || title}
                 </Heading>
             )}
-            <Wrapper
-                className="prose prose-neutral mb-4 max-w-full whitespace-pre-line text-m text-pzh-blue-900 marker:text-pzh-blue-900 prose-li:my-0 md:mb-8"
-                dangerouslySetInnerHTML={{ __html: cleanHtml }}
-            />
+            <Wrapper className="prose prose-neutral mb-4 max-w-full whitespace-pre-line text-m text-pzh-blue-900 marker:text-pzh-blue-900 prose-li:my-0 md:mb-8">
+                {parsedContent}
+            </Wrapper>
+            <ObjectAreaModal />
         </>
     )
 }

src/components/Modals/ObjectModals/ObjectAreaAnnotateModal/ObjectAreaAnnotateModal.tsx

@@ -43,12 +43,12 @@ const ObjectAreaAnnotateModal = ({ model }: ObjectAreaAnnotateModalProps) => {
             type: previousValues?.[AREA_DATA_ATTRS.type] ?? '',
             location: previousValues?.[AREA_DATA_ATTRS.location] ?? '',
             label: previousValues?.[AREA_DATA_ATTRS.label] ?? '',
+            id: previousValues?.[AREA_DATA_ATTRS.id] ?? '',
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [modalState?.editor, modalState?.editor?.state.selection])
 
     const handleSubmit = (payload: Values) => {
-        console.log(payload)
         modalState?.editor
             ?.chain()
             .focus()
@@ -58,6 +58,7 @@ const ObjectAreaAnnotateModal = ({ model }: ObjectAreaAnnotateModalProps) => {
                 [AREA_DATA_ATTRS.type]: payload.type,
                 [AREA_DATA_ATTRS.location]: payload.location,
                 [AREA_DATA_ATTRS.label]: payload.label,
+                [AREA_DATA_ATTRS.id]: payload.id,
                 text: isEmptySelection ? payload.label : undefined,
             })
             .run()
@@ -161,9 +162,10 @@ const InnerForm = <TData extends Values>({
                         required
                         placeholder="Zoek op gebiedengroep"
                         objectKey="Werkingsgebied_Code"
-                        onChange={object =>
+                        onChange={object => {
                             setFieldValue('label', object?.Title)
-                        }
+                            setFieldValue('id', object?.Object_ID.toString())
+                        }}
                         defaultValue={
                             values.label &&
                             values.location && {
@@ -189,6 +191,7 @@ const InnerForm = <TData extends Values>({
                         }}
                     />
                     <FormikInput name="label" type="hidden" />
+                    <FormikInput name="id" type="hidden" />
                 </div>
                 <div>
                     <FormikSelect

src/components/Modals/ObjectModals/ObjectAreaModal/ObjectAreaModal.tsx

@@ -0,0 +1,79 @@
+import { Text } from '@pzh-ui/components'
+
+import {
+    useModulesModuleIdObjectWerkingsgebiedLatestLineageIdGet,
+    useWerkingsgebiedenLatestLineageIdGet,
+} from '@/api/fetchers'
+import { LeafletTinyViewer } from '@/components/Leaflet'
+import Modal from '@/components/Modal'
+import useAuth from '@/hooks/useAuth'
+import useModalStore from '@/store/modalStore'
+
+import { ModalStateMap } from '../../types'
+
+const ObjectAreaModal = () => {
+    const { user } = useAuth()
+
+    const modalState = useModalStore(
+        state => state.modalStates['objectArea']
+    ) as ModalStateMap['objectArea']
+
+    const {
+        data: moduleData,
+        isSuccess,
+        isError,
+    } = useModulesModuleIdObjectWerkingsgebiedLatestLineageIdGet(
+        parseInt(modalState?.moduleId),
+        parseInt(modalState?.id),
+        {
+            query: {
+                enabled: !!modalState?.moduleId && !!modalState?.id && !!user,
+            },
+        }
+    )
+
+    const { data: validData } = useWerkingsgebiedenLatestLineageIdGet(
+        parseInt(modalState?.id),
+        {
+            query: {
+                enabled:
+                    (!modalState?.moduleId && !!modalState?.id) ||
+                    (!!modalState?.moduleId &&
+                        !!modalState?.id &&
+                        !moduleData &&
+                        isSuccess) ||
+                    isError,
+            },
+        }
+    )
+
+    const data = modalState?.moduleId && isSuccess ? moduleData : validData
+
+    return (
+        <Modal id="objectArea" size="xl" title="Gebiedsaanwijzing">
+            <div className="flex gap-4">
+                <div className="flex w-1/2 flex-col gap-4">
+                    <div>
+                        <Text>Gebiedengroep</Text>
+                        <Text bold>{modalState?.label}</Text>
+                    </div>
+                    <div>
+                        <Text>Type gebiedsaanwijzing</Text>
+                        <Text bold>{modalState?.gebiedsaanwijzingtype}</Text>
+                    </div>
+                    <div>
+                        <Text>Gebiedsaanwijzinggroep</Text>
+                        <Text bold>{modalState?.gebiedengroep}</Text>
+                    </div>
+                </div>
+                <div className="h-[360px] w-full overflow-hidden rounded-lg">
+                    {data?.Area_UUID && (
+                        <LeafletTinyViewer uuid={data.Area_UUID} />
+                    )}
+                </div>
+            </div>
+        </Modal>
+    )
+}
+
+export default ObjectAreaModal

src/components/Modals/ObjectModals/ObjectAreaModal/index.ts

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

src/components/Modals/types.ts

@@ -27,6 +27,7 @@ export type ModalType =
     | 'moduleEditObject'
     | 'moduleDeleteObject'
     | 'areaAdd'
+    | 'objectArea'
     | 'objectAreaAnnotate'
     | 'objectDetails'
     | 'objectAddConnection'
@@ -57,6 +58,14 @@ export interface ModalStateMap {
         object: ModuleObjectShort
         module: Module
     }
+    objectArea: {
+        moduleId: string
+        id: string
+        locatie: string
+        gebiedsaanwijzingtype: string
+        gebiedengroep: string
+        label: string
+    }
     objectAreaAnnotate: {
         editor: Editor
     }

src/validation/objectAnnotate.ts

@@ -13,4 +13,5 @@ export const SCHEMA_OBJECT_ANNOTATE_AREA = object({
     }),
     location: schemaDefaults.requiredString(),
     label: schemaDefaults.requiredString(),
+    id: schemaDefaults.requiredString(),
 })