feat: display line from poi deps #508

Author: wazolab

components/MainMap/MapFeatures.vue

@@ -216,7 +216,10 @@ function onClick(e: MapMouseEvent): void {
   }
 }
 
+const selectedFeatureDepsIDs = ref<number[]>([])
 async function updateSelectedFeature(feature?: ApiPoi): Promise<void> {
+  selectedFeatureDepsIDs.value = []
+
   if (!feature) {
     await menuStore.fetchFeatures({
       vidoConfig: config!,
@@ -253,39 +256,47 @@ async function updateSelectedFeature(feature?: ApiPoi): Promise<void> {
           let waypointIndex = 1
 
           data.value.features.forEach((f) => {
+            const depID = 'metadata' in f.properties ? f.properties.metadata.id : f.properties.id
+            selectedFeatureDepsIDs.value.push(depID)
+
             f = {
               ...f,
               properties: {
                 ...f.properties,
                 vido_visible: true,
               },
             }
-            if ('metadata' in f.properties && f.properties.metadata.id === id) {
+
+            if (id === depID) {
               poi = f as ApiPoi
             }
-            else {
-              if (f.properties['route:point:type']) {
-                f = apiRouteWaypointToApiPoi(
-                  f as ApiRouteWaypoint,
-                  poi?.properties.display?.color_fill || '#76009E',
-                  poi?.properties.display?.color_line || '#76009E',
-                  f.properties['route:point:type'] === ApiRouteWaypointType.way_point
-                    ? (waypointIndex++).toString()
-                    : undefined,
-                )
-              }
+
+            if (f.properties['route:point:type']) {
+              f = apiRouteWaypointToApiPoi(
+                f as ApiRouteWaypoint,
+                poi?.properties.display?.color_fill || '#76009E',
+                poi?.properties.display?.color_line || '#76009E',
+                f.properties['route:point:type'] === ApiRouteWaypointType.way_point
+                  ? (waypointIndex++).toString()
+                  : undefined,
+              )
+            }
+
+            if (f.geometry.type === 'Point') {
               deps.push(f as ApiPoi)
             }
           })
 
+          if (!poi)
+            throw new Error(`Feature with ID: ${id} not found.`)
+
           mapStore.setSelectedFeature(poi)
-          if (poi) {
-            // In case user click on vecto element, attach Pin Marker to POI Marker
-            teritorioCluster.value?.setSelectedFeature(poi as unknown as MapGeoJSONFeature)
 
-            if (poi.properties.metadata.category_ids?.length)
-              menuStore.filterByDeps(poi.properties.metadata.category_ids, deps, selectedFeature.value)
-          }
+          // In case user click on vecto element, attach Pin Marker to POI Marker
+          teritorioCluster.value?.setSelectedFeature(poi as unknown as MapGeoJSONFeature)
+
+          if (poi.properties.metadata.category_ids?.length)
+            menuStore.filterByDeps(poi.properties.metadata.category_ids, deps)
         }
       }
       catch (e) {
@@ -382,11 +393,8 @@ function showVectorSelectedFeature(): void {
     return
   }
 
-  if (
-    selectedFeature.value
-    && (selectedFeature.value.properties?.metadata?.id || selectedFeature.value.id || selectedFeature.value.properties?.id)
-  ) {
-    filterRouteByPoiIds(map.value, [selectedFeature.value.properties?.metadata?.id || selectedFeature.value.id || selectedFeature.value.properties?.id])
+  if (selectedFeature.value) {
+    filterRouteByPoiIds(map.value, selectedFeatureDepsIDs.value)
   }
   else {
     if (props.enableFilterRouteByFeatures) {

stores/menu.ts

@@ -252,15 +252,13 @@ export const menuStore = defineStore('menu', {
 
     // TODO: Maybe merge filterDeps with fetchFeatures
     // Check potential side-effects in components calling fetchFeatures
-    filterByDeps(categoryIds: number[], deps: ApiPoi[], selectedFeature: ApiPoi | null) {
+    filterByDeps(categoryIds: number[], deps: ApiPoi[]) {
       if (!deps.length)
         return
 
       const filteredFeatures: { [key: number]: ApiPoi[] } = {}
       categoryIds.forEach((id) => {
         filteredFeatures[id] = deps
-        if (selectedFeature?.properties.metadata.category_ids?.includes(id))
-          filteredFeatures[id].push(selectedFeature)
       })
       this.features = filteredFeatures
     },