Feat: show list of features inside Asset Select

config.json

@@ -1,23 +1,25 @@
 {
   "base": {
     "municipality": "purmerend",
+    "assets_url": "https://meldingen.demo.meierijstad.delta10.cloud",
     "style": {
       "primaryColor": "#24578f"
     },
     "map": {
       "find_address_in_distance": 30,
+      "minimal_zoom": 17,
       "center": [
-        52.3731081,
-        4.8932945
+        51.6045656,
+        5.5342026
       ],
       "maxBounds": [
         [
-          4.8339104,
-          52.4703485
+          3.31497114423,
+          50.803721015
         ],
         [
-          5.0247001,
-          52.6141075
+          7.09205325687,
+          53.5104033474
         ]
       ]
     },

src/app/[locale]/incident/add/components/FeatureListItem.tsx

@@ -0,0 +1,116 @@
+import React, { Dispatch, RefObject, SetStateAction, useMemo } from 'react'
+import { getFeatureType } from '@/lib/utils/map'
+import { Feature, FeatureCollection } from 'geojson'
+import { PublicQuestion } from '@/types/form'
+import { MapRef } from 'react-map-gl/maplibre'
+import { FormField, FormFieldCheckbox, Icon } from '@/components/index'
+import { useTranslations } from 'next-intl'
+import { FeatureWithDescription } from '@/types/map'
+import { useFormStore } from '@/store/form_store'
+
+type FeatureListItemProps = {
+  feature: FeatureWithDescription
+  field: PublicQuestion
+  map: MapRef | undefined
+  setError: Dispatch<SetStateAction<string | null>>
+  dialogRef: RefObject<HTMLDialogElement>
+  configUrl?: string
+}
+
+export const FeatureListItem = ({
+  feature,
+  field,
+  map,
+  setError,
+  dialogRef,
+  configUrl,
+}: FeatureListItemProps) => {
+  const t = useTranslations('describe-add.map')
+  const { formState, updateForm } = useFormStore()
+
+  const featureId = feature.id
+  const featureDescription = feature.description
+  const maxNumberOfAssets = field
+    ? field.meta.maxNumberOfAssets
+      ? field.meta.maxNumberOfAssets
+      : 1
+    : 1
+
+  // Get feature type of asset
+  const featureType = useMemo(() => {
+    return getFeatureType(field.meta.featureTypes, feature.properties)
+  }, [field.meta.featureTypes, feature.properties])
+
+  // Add or remove feature to / from the newSelectedFeature state declared in DialogMap
+  const addOrRemoveFeature = (checked: boolean) => {
+    const newSelectedFeatureArray = Array.from(
+      formState.selectedFeatures ? formState.selectedFeatures : []
+    )
+
+    if (checked) {
+      if (newSelectedFeatureArray.length >= maxNumberOfAssets) {
+        setError(t('max_number_of_assets_error', { max: maxNumberOfAssets }))
+        dialogRef.current?.showModal()
+
+        return
+      }
+
+      newSelectedFeatureArray.push(feature)
+
+      if (map && feature && feature.geometry) {
+        map.flyTo({
+          center: [
+            // @ts-ignore
+            feature.geometry.coordinates[0],
+            // @ts-ignore
+            feature.geometry.coordinates[1],
+          ],
+          speed: 0.5,
+          zoom: 18,
+        })
+      }
+    } else {
+      const index = newSelectedFeatureArray.findIndex(
+        (feature) => feature.id === featureId
+      )
+
+      newSelectedFeatureArray.splice(index, 1) // Remove the feature at the found index
+    }
+
+    updateForm({
+      ...formState,
+      selectedFeatures: newSelectedFeatureArray,
+    })
+  }
+
+  // TODO: iets van een label toevoegen zodat voor een SR duidelijk wordt om welke lantaarnpaal, adres etc het gaat?
+  return featureDescription ? (
+    <li className="py-4 border-t border-gray-200">
+      <FormField className="flex flex-row items-center gap-2">
+        {!formState.selectedFeatures.some(
+          (featureItem) => featureItem.id === featureId
+        ) ? (
+          <Icon>
+            <img src={featureType?.icon.iconUrl} />
+          </Icon>
+        ) : (
+          <Icon>
+            <img
+              src={configUrl + '/assets/images/feature-selected-marker.svg'}
+            />
+          </Icon>
+        )}
+        <FormFieldCheckbox
+          label={featureDescription}
+          className="!mt-1"
+          checked={formState.selectedFeatures.some(
+            (featureItem) => featureItem.id === featureId
+          )}
+          id={featureId.toString()}
+          // @ts-ignore
+          onChange={(e) => addOrRemoveFeature(e.target.checked)}
+        />
+      </FormField>
+    </li>
+  ) : null
+}

src/app/[locale]/incident/add/components/IncidentQuestionsLocationForm.tsx

@@ -84,9 +84,14 @@ export const IncidentQuestionsLocationForm = () => {
         ? id.filter((value: any) => value !== false && value !== 'empty')
         : []
 
-      // If checkboxAnswers has a length, map over them to return a list of answer objects
-      const answer =
-        checkboxAnswers.length > 0
+      const isFeature = checkboxAnswers.some(
+        (answer: any) => answer.type === 'Feature'
+      )
+
+      // If checkboxAnswers has a length, map over them to return a list of answer objects. If isFeature return list of already made answers
+      const answer = isFeature
+        ? checkboxAnswers
+        : checkboxAnswers.length > 0
           ? checkboxAnswers.map((answerId) => ({
               id: answerId,
               label: question.meta.values[answerId],
@@ -102,7 +107,9 @@ export const IncidentQuestionsLocationForm = () => {
 
       return {
         id: question.key,
-        label: question.meta.label,
+        label: question.meta.shortLabel
+          ? question.meta.shortLabel
+          : question.meta.label,
         category_url: `/signals/v1/public/terms/categories/${formStoreState.sub_category}/sub_categories/${formStoreState.main_category}`,
         answer,
       }