feat(feature-info): migrate getFeatureInfoById to handle links (WIP)

src/App.vue

@@ -24,6 +24,7 @@ import { statePersistorMyMapService } from '@/services/state-persistor/state-per
 import { useAppStore } from '@/stores/app.store'
 import useMap from '@/composables/map/map.composable'
 import useMvtStyles from '@/composables/mvt-styles/mvt-styles.composable'
+import { statePersistorFeatureInfoService } from '@/services/state-persistor/state-persistor-featureinfo.service'
 
 const appStore = useAppStore()
 const mvtStyleService = useMvtStyles()
@@ -37,6 +38,7 @@ statePersistorAppService.bootstrap()
 statePersistorStyleService.bootstrap()
 statePersistorBgLayerService.bootstrap()
 mvtStyleService.initBackgroundsConfigs()
+statePersistorFeatureInfoService.bootstrap()
 
 const {
   embedded,

src/components/info/feature-info.composable.ts

@@ -5,11 +5,14 @@ import { FeatureInfoService } from './feature-info.service'
 import { useFeatureInfoStore } from '@/stores/feature-info.store'
 import { FeatureInfo } from './feature-info.model'
 import { MapBrowserEvent } from 'ol'
+import { watchEffect } from 'vue'
+import { storeToRefs } from 'pinia'
 
 export default function useFeatureInfo() {
   const map = useMap().getOlMap()
   const { toggleInfoOpen } = useAppStore()
   const { setContent } = useFeatureInfoStore()
+  const { fid } = storeToRefs(useFeatureInfoStore())
 
   function init() {
     const featureInfoService = new FeatureInfoService(map)
@@ -25,6 +28,19 @@ export default function useFeatureInfo() {
         }
       })()
     })
+
+    watchEffect(() => {
+      if (fid.value) {
+        ;(async () => {
+          const content: FeatureInfo[] | undefined =
+            await featureInfoService.getFeatureInfoById(fid.value as string)
+          if (content) {
+            setContent(content)
+            toggleInfoOpen(true)
+          }
+        })()
+      }
+    })
   }
 
   return { init }

src/components/info/feature-info.service.ts

@@ -9,6 +9,8 @@ import Style from 'ol/style/Style.js'
 import { FeatureInfo } from './feature-info.model'
 import { Geometry } from 'ol/geom'
 import { FeatureLike } from 'ol/Feature'
+import useThemes from '@/composables/themes/themes.composable'
+import useLayers from '@/composables/layers/layers.composable'
 
 const INFO_SERVICE_URL = import.meta.env.VITE_GET_INFO_SERVICE_URL
 
@@ -95,66 +97,85 @@ export class FeatureInfoService {
     this.map.addLayer(this.featureLayer)
   }
 
-  // getFeatureInfoById(fid) {
-  //   const fids = fid.split(',')
-  //   fids.forEach(async curFid => {
-  //     const splittedFid = curFid.split('_')
-  //     const layersList = [splittedFid[0]]
-  //     const layerLabel = {}
-
-  //     try {
-  //       const flatCatalogue = await this.appThemes_.getFlatCatalog()
-
-  //       if (layersList.length > 0) {
-  //         this.isQuerying_ = true
-  //         this.map_.getViewport().style.cursor = 'wait'
-  //         this.content = []
-
-  //         try {
-  //           const resp = await this.http_.get(this.getInfoServiceUrl_, {
-  //             params: { fid: curFid },
-  //           })
-
-  //           this.appSelector = this.QUERYPANEL_
-  //           let showInfo = false
-  //           if (!this.appGetDevice_.testEnv('xs')) {
-  //             showInfo = true
-  //             this.hiddenContent = false
-  //           } else {
-  //             this.hiddenContent = true
-  //           }
-
-  //           const node = flatCatalogue.find(
-  //             catItem => catItem.id == splittedFid[0]
-  //           )
-  //           if (node !== undefined && node !== null) {
-  //             const layer = this.getLayerFunc_(node)
-  //             const foundLayer = this.map_
-  //               .getLayers()
-  //               .getArray()
-  //               .find(
-  //                 curLayer =>
-  //                   curLayer.get('queryable_id') === layer.get('queryable_id')
-  //               )
-  //             const idx = this.map_.getLayers().getArray().indexOf(foundLayer)
-  //             if (idx === -1) {
-  //               this.map_.addLayer(layer)
-  //             }
-  //             layerLabel[splittedFid[0]] = layer.get('label')
-  //           }
-  //           this.showInfo(true, resp, layerLabel, showInfo, true)
-  //         } catch (error) {
-  //           this.clearQueryResult(this.QUERYPANEL_)
-  //           this.infoOpen = false
-  //           this.map_.getViewport().style.cursor = ''
-  //           this.isQuerying_ = false
-  //         }
-  //       }
-  //     } catch (error) {
-  //       console.error('Error fetching flat catalog:', error)
-  //     }
-  //   })
-  // }
+  async getFeatureInfoById(fid: string): Promise<FeatureInfo[] | undefined> {
+    const fids = fid.split(',')
+    for (const curFid of fids) {
+      const splittedFid = curFid.split('_')
+      const layersList = [splittedFid[0]]
+      const layerLabel: { [key: string]: string } = {}
+
+      try {
+        // const flatCatalogue: FlatCatalogueItem[] =
+        //   await this.appThemes_.getFlatCatalog()
+
+        if (layersList.length > 0) {
+          // this.isQuerying_ = true
+          this.map.getViewport().style.cursor = 'wait'
+          this.content = []
+
+          const url = new URL(INFO_SERVICE_URL)
+          url.searchParams.append('fid', curFid)
+          try {
+            const resp = await fetch(url.toString())
+
+            // this.appSelector = this.QUERYPANEL_
+            // let showInfo = false
+            // if (!this.appGetDevice_.testEnv('xs')) {
+            //   showInfo = true
+            //   this.hiddenContent = false
+            // } else {
+            //   this.hiddenContent = true
+            // }
+
+            // const node = flatCatalogue.find(
+            //   catItem => catItem.id === splittedFid[0]
+            // )
+
+            const { findById } = useThemes()
+            const node = findById(splittedFid[0])
+
+            const { toggleLayer } = useLayers()
+
+            if (node !== undefined && node !== null) {
+              // const layer = this.getLayerFunc_(node)
+              // const foundLayer = this.map_
+              //   .getLayers()
+              //   .getArray()
+              //   .find(
+              //     (curLayer: Layer) =>
+              //       curLayer.get('queryable_id') === layer.get('queryable_id')
+              //   )
+              // const idx = this.map_.getLayers().getArray().indexOf(foundLayer)
+              // if (idx === -1) {
+              //   this.map_.addLayer(layer)
+              // }
+              // layerLabel[splittedFid[0]] = layer.get('label')
+              layerLabel[splittedFid[0]] = node.layers as string
+              toggleLayer(node.id, true, false)
+            }
+
+            if (resp.ok) {
+              const data = await resp.json()
+              if (data.length > 0) {
+                return this.showInfo(
+                  true,
+                  data,
+                  layerLabel /*, showInfo, true*/
+                )
+              }
+            }
+          } catch (error) {
+            // this.clearQueryResult(this.QUERYPANEL_)
+            // this.infoOpen = false
+            this.map.getViewport().style.cursor = ''
+            // this.isQuerying_ = false
+          }
+        }
+      } catch (error) {
+        // console.error('Error fetching flat catalog:', error)
+      }
+    }
+  }
 
   async singleclickEvent(
     evt: MapBrowserEvent<any>,

src/components/info/templates/default-template.vue

@@ -18,6 +18,7 @@ defineProps({
   },
 })
 const { t } = useTranslation()
+// const currentUrl = window.location.href
 </script>
 <template>
   <div class="flex flex-col">
@@ -113,6 +114,12 @@ const { t } = useTranslation()
         </div>
         <!-- TODO: implement intepreting the URL (getFeatureInfoById)-->
         <div v-if="hasValidFID(feature)">
+          <!-- span for dev-->
+          <!-- <span
+            ><a :href="`${currentUrl}&fid=${feature.fid}`">{{
+              t('Lien direct vers cet objet')
+            }}</a></span
+          > -->
           <span
             ><a :href="`?fid=${feature.fid}`" target="_blank">{{
               t('Lien direct vers cet objet')

src/composables/themes/themes.composable.ts

@@ -28,7 +28,7 @@ export default function useThemes() {
     const { themes } = useThemeStore()
 
     node = node || themes?.find(theme => findByIdOrName(id, name, theme))
-    if ((id && node?.id === id) || (name && node?.name === name)) {
+    if ((id && node?.id === +id) || (name && node?.name === name)) {
       return node
     } else if (node?.children) {
       for (const child of node.children) {

src/services/state-persistor/state-persistor-featureinfo.service.ts

@@ -0,0 +1,28 @@
+import { SP_KEY_FID } from './state-persistor.model'
+import { storageHelper } from './storage/storage.helper'
+import { useFeatureInfoStore } from '@/stores/feature-info.store'
+
+class StatePersistorFeatureInfoService {
+  bootstrap() {
+    this.restore()
+  }
+
+  restore() {
+    const fid = <string | undefined>storageHelper.getValue(SP_KEY_FID)
+
+    if (fid) {
+      const { setFid } = useFeatureInfoStore()
+      setFid(fid)
+      this.removeQueryParam(SP_KEY_FID)
+    }
+  }
+
+  removeQueryParam(param: string): void {
+    const url = new URL(window.location.href)
+    url.searchParams.delete(param)
+    window.history.replaceState({}, document.title, url.toString())
+  }
+}
+
+export const statePersistorFeatureInfoService =
+  new StatePersistorFeatureInfoService()

src/stores/feature-info.store.ts

@@ -6,6 +6,7 @@ export const useFeatureInfoStore = defineStore(
   'featureInfo',
   () => {
     const content: ShallowRef<FeatureInfo[] | undefined> = shallowRef()
+    const fid: ShallowRef<string | undefined> = shallowRef()
 
     function setContent(value: FeatureInfo[]) {
       if (!value || value.length === 0) {
@@ -19,9 +20,15 @@ export const useFeatureInfoStore = defineStore(
       content.value = undefined
     }
 
+    function setFid(value: string) {
+      fid.value = value
+    }
+
     return {
       content,
+      fid,
       setContent,
+      setFid,
       clearContent,
     }
   },