From b379543868ca0721d025ec23e4df65b910164aa0 Mon Sep 17 00:00:00 2001 From: Stef Winterswijk Date: Tue, 12 Nov 2024 09:54:08 +0100 Subject: [PATCH] AB#19916 --- package.json | 1 + .../DynamicField/extensions/area.ts | 5 + .../ObjectContent/ObjectContent.tsx | 76 +++++++++++- .../ObjectAreaAnnotateModal.tsx | 9 +- .../ObjectAreaModal/ObjectAreaModal.tsx | 79 ++++++++++++ .../ObjectModals/ObjectAreaModal/index.ts | 1 + src/components/Modals/types.ts | 9 ++ src/validation/objectAnnotate.ts | 1 + yarn.lock | 113 +++++++++++++++++- 9 files changed, 285 insertions(+), 9 deletions(-) create mode 100644 src/components/Modals/ObjectModals/ObjectAreaModal/ObjectAreaModal.tsx create mode 100644 src/components/Modals/ObjectModals/ObjectAreaModal/index.ts diff --git a/package.json b/package.json index 7eda8a06..028f2850 100644 --- a/package.json +++ b/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", diff --git a/src/components/DynamicObject/DynamicObjectForm/DynamicField/extensions/area.ts b/src/components/DynamicObject/DynamicObjectForm/DynamicField/extensions/area.ts index 04bd562f..d0dbab97 100644 --- a/src/components/DynamicObject/DynamicObjectForm/DynamicField/extensions/area.ts +++ b/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], + }, } }, diff --git a/src/components/DynamicObject/ObjectContent/ObjectContent.tsx b/src/components/DynamicObject/ObjectContent/ObjectContent.tsx index 7b9df04c..c1e7dd1f 100644 --- a/src/components/DynamicObject/ObjectContent/ObjectContent.tsx +++ b/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 ( + + Gebiedsaanwijzing: + + {label} + + + }> + + + ) + } + } + 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} )} - + + {parsedContent} + + ) } diff --git a/src/components/Modals/ObjectModals/ObjectAreaAnnotateModal/ObjectAreaAnnotateModal.tsx b/src/components/Modals/ObjectModals/ObjectAreaAnnotateModal/ObjectAreaAnnotateModal.tsx index f8055698..67a69f83 100644 --- a/src/components/Modals/ObjectModals/ObjectAreaAnnotateModal/ObjectAreaAnnotateModal.tsx +++ b/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 = ({ 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 = ({ }} /> +
{ + 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 ( + +
+
+
+ Gebiedengroep + {modalState?.label} +
+
+ Type gebiedsaanwijzing + {modalState?.gebiedsaanwijzingtype} +
+
+ Gebiedsaanwijzinggroep + {modalState?.gebiedengroep} +
+
+
+ {data?.Area_UUID && ( + + )} +
+
+ + ) +} + +export default ObjectAreaModal diff --git a/src/components/Modals/ObjectModals/ObjectAreaModal/index.ts b/src/components/Modals/ObjectModals/ObjectAreaModal/index.ts new file mode 100644 index 00000000..ce0bf9a8 --- /dev/null +++ b/src/components/Modals/ObjectModals/ObjectAreaModal/index.ts @@ -0,0 +1 @@ +export { default } from './ObjectAreaModal' diff --git a/src/components/Modals/types.ts b/src/components/Modals/types.ts index e7d2050e..d432b74a 100644 --- a/src/components/Modals/types.ts +++ b/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 } diff --git a/src/validation/objectAnnotate.ts b/src/validation/objectAnnotate.ts index b623e01f..8f618d11 100644 --- a/src/validation/objectAnnotate.ts +++ b/src/validation/objectAnnotate.ts @@ -13,4 +13,5 @@ export const SCHEMA_OBJECT_ANNOTATE_AREA = object({ }), location: schemaDefaults.requiredString(), label: schemaDefaults.requiredString(), + id: schemaDefaults.requiredString(), }) diff --git a/yarn.lock b/yarn.lock index 4c03f975..8529fbeb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9235,6 +9235,33 @@ __metadata: languageName: node linkType: hard +"dom-serializer@npm:^2.0.0": + version: 2.0.0 + resolution: "dom-serializer@npm:2.0.0" + dependencies: + domelementtype: "npm:^2.3.0" + domhandler: "npm:^5.0.2" + entities: "npm:^4.2.0" + checksum: e3bf9027a64450bca0a72297ecdc1e3abb7a2912268a9f3f5d33a2e29c1e2c3502c6e9f860fc6625940bfe0cfb57a44953262b9e94df76872fdfb8151097eeb3 + languageName: node + linkType: hard + +"domelementtype@npm:^2.3.0": + version: 2.3.0 + resolution: "domelementtype@npm:2.3.0" + checksum: ee837a318ff702622f383409d1f5b25dd1024b692ef64d3096ff702e26339f8e345820f29a68bcdcea8cfee3531776b3382651232fbeae95612d6f0a75efb4f6 + languageName: node + linkType: hard + +"domhandler@npm:5.0.3, domhandler@npm:^5.0.2, domhandler@npm:^5.0.3": + version: 5.0.3 + resolution: "domhandler@npm:5.0.3" + dependencies: + domelementtype: "npm:^2.3.0" + checksum: 809b805a50a9c6884a29f38aec0a4e1b4537f40e1c861950ed47d10b049febe6b79ab72adaeeebb3cc8fc1cd33f34e97048a72a9265103426d93efafa78d3e96 + languageName: node + linkType: hard + "dompurify@npm:^3.0.9": version: 3.0.9 resolution: "dompurify@npm:3.0.9" @@ -9242,6 +9269,17 @@ __metadata: languageName: node linkType: hard +"domutils@npm:^3.1.0": + version: 3.1.0 + resolution: "domutils@npm:3.1.0" + dependencies: + dom-serializer: "npm:^2.0.0" + domelementtype: "npm:^2.3.0" + domhandler: "npm:^5.0.3" + checksum: 9a169a6e57ac4c738269a73ab4caf785114ed70e46254139c1bbc8144ac3102aacb28a6149508395ae34aa5d6a40081f4fa5313855dc8319c6d8359866b6dfea + languageName: node + linkType: hard + "dot-case@npm:^3.0.4": version: 3.0.4 resolution: "dot-case@npm:3.0.4" @@ -9313,7 +9351,7 @@ __metadata: languageName: node linkType: hard -"entities@npm:^4.4.0": +"entities@npm:^4.2.0, entities@npm:^4.4.0, entities@npm:^4.5.0": version: 4.5.0 resolution: "entities@npm:4.5.0" checksum: ede2a35c9bce1aeccd055a1b445d41c75a14a2bb1cd22e242f20cf04d236cdcd7f9c859eb83f76885327bfae0c25bf03303665ee1ce3d47c5927b98b0e3e3d48 @@ -10716,6 +10754,16 @@ __metadata: languageName: node linkType: hard +"html-dom-parser@npm:5.0.10": + version: 5.0.10 + resolution: "html-dom-parser@npm:5.0.10" + dependencies: + domhandler: "npm:5.0.3" + htmlparser2: "npm:9.1.0" + checksum: 14041ffde3907703e1b857657d2f1b20eb3403a85d12f0812311a11c9405c6f3b114177c1867acd231b8bd01e3f69ea278bd38f01ba5278219fdef862cc9bef6 + languageName: node + linkType: hard + "html-encoding-sniffer@npm:^4.0.0": version: 4.0.0 resolution: "html-encoding-sniffer@npm:4.0.0" @@ -10732,6 +10780,36 @@ __metadata: languageName: node linkType: hard +"html-react-parser@npm:^5.1.18": + version: 5.1.18 + resolution: "html-react-parser@npm:5.1.18" + dependencies: + domhandler: "npm:5.0.3" + html-dom-parser: "npm:5.0.10" + react-property: "npm:2.0.2" + style-to-js: "npm:1.1.16" + peerDependencies: + "@types/react": 0.14 || 15 || 16 || 17 || 18 + react: 0.14 || 15 || 16 || 17 || 18 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 8a4178ff2dd7d4887e047e1f95eea7811e66c0c5e55fd946eebf704f32e47960adb635aa64eae3f11de92a56b33f8719349633a2fe6916c00ebe70794b5b064f + languageName: node + linkType: hard + +"htmlparser2@npm:9.1.0": + version: 9.1.0 + resolution: "htmlparser2@npm:9.1.0" + dependencies: + domelementtype: "npm:^2.3.0" + domhandler: "npm:^5.0.3" + domutils: "npm:^3.1.0" + entities: "npm:^4.5.0" + checksum: 6352fa2a5495781fa9a02c9049908334cd068ff36d753870d30cd13b841e99c19646717567a2f9e9c44075bbe43d364e102f9d013a731ce962226d63746b794f + languageName: node + linkType: hard + "http-cache-semantics@npm:^4.1.1": version: 4.1.1 resolution: "http-cache-semantics@npm:4.1.1" @@ -10864,6 +10942,13 @@ __metadata: languageName: node linkType: hard +"inline-style-parser@npm:0.2.4": + version: 0.2.4 + resolution: "inline-style-parser@npm:0.2.4" + checksum: 80814479d1f3c9cbd102f9de4cd6558cf43cc2e48640e81c4371c3634f1e8b6dfeb2f21063cfa31d46cc83e834c20cd59ed9eeed9bfd45ef5bc02187ad941faf + languageName: node + linkType: hard + "internal-slot@npm:^1.0.4, internal-slot@npm:^1.0.5, internal-slot@npm:^1.0.7": version: 1.0.7 resolution: "internal-slot@npm:1.0.7" @@ -13445,6 +13530,7 @@ __metadata: eslint: "npm:^8.48.0" eslint-plugin-prettier: "npm:^5.0.0" formik: "npm:^2.4.6" + html-react-parser: "npm:^5.1.18" jsdom: "npm:^25.0.1" jwt-decode: "npm:^4.0.0" leaflet: "npm:^1.9.4" @@ -13748,6 +13834,13 @@ __metadata: languageName: node linkType: hard +"react-property@npm:2.0.2": + version: 2.0.2 + resolution: "react-property@npm:2.0.2" + checksum: 3a4bc1951b2b7992cb8a2d3f12016dd0920d1c06eb58b456204a6ae1210401d62baece098d3200ed8a0513dde247a5d96ffdb24f354e32ce5a9b26fbd8552668 + languageName: node + linkType: hard + "react-refresh@npm:^0.14.2": version: 0.14.2 resolution: "react-refresh@npm:0.14.2" @@ -14842,6 +14935,24 @@ __metadata: languageName: node linkType: hard +"style-to-js@npm:1.1.16": + version: 1.1.16 + resolution: "style-to-js@npm:1.1.16" + dependencies: + style-to-object: "npm:1.0.8" + checksum: a876cc49a29ac90c7723b4d6f002ac6c1ac5ccc6b5bc963d9c607cfc74b15927b704c9324df6f824f576c65689fe4b4ff79caabcd44a13d8a02641f721f1b316 + languageName: node + linkType: hard + +"style-to-object@npm:1.0.8": + version: 1.0.8 + resolution: "style-to-object@npm:1.0.8" + dependencies: + inline-style-parser: "npm:0.2.4" + checksum: 530b067325e3119bfaf75bdbe25cc86b02b559db00d881a74b98a2d5bb10ac953d1b455ed90c825963cf3b4bdaa1bda45f406d78d987391434b8d8ab3835df4e + languageName: node + linkType: hard + "stylis@npm:4.2.0": version: 4.2.0 resolution: "stylis@npm:4.2.0"