362 refactor map store

components/Home/Embedded.vue

@@ -22,6 +22,7 @@ import { flattenFeatures } from '~/utils/utilities'
 const props = defineProps<{
   boundaryArea?: Polygon | MultiPolygon
   initialCategoryIds?: number[]
+  initialPoi?: string
 }>()
 
 //
@@ -32,6 +33,7 @@ const { isModeExplorer, mode, selectedFeature } = storeToRefs(mapStore)
 const menuStore = useMenuStore()
 const { apiMenuCategory, features, selectedCategoryIds, menuItems } = storeToRefs(menuStore)
 const { config, settings } = useSiteStore()
+const { API_ENDPOINT, API_PROJECT, API_THEME } = config!
 const route = useRoute()
 const router = useRouter()
 const { t } = useI18n()
@@ -40,7 +42,7 @@ const { t } = useI18n()
 // Data
 //
 const initialBbox = ref<LngLatBounds | null>(null)
-const mapFeaturesRef = ref<InstanceType<typeof MapFeatures>>()
+const mapFeaturesRef = ref<InstanceType<typeof MapFeatures> | null>(null)
 
 //
 // Hooks
@@ -106,23 +108,23 @@ const mapFeatures = computed((): ApiPoi[] => {
 
 const poiFilters = computed(() => {
   return (
-    (
-      isModeExplorer.value
-      && (Object.values(apiMenuCategory.value || {})
-        .map(c => c.category?.style_class)
-        .filter(s => s !== undefined) as string[][])
-    )
-    || null
-  )
+    isModeExplorer.value
+    && (Object.values(apiMenuCategory.value || {})
+      .map(c => c.category?.style_class)
+      .filter(s => s !== undefined) as string[][])
+  ) || undefined
+})
+
+// Store Subscribers
+mapStore.$onAction(({ name, after }) => {
+  if (name === 'setSelectedFeature') {
+    after(() => routerPushUrl())
+  }
 })
 
 //
 // Watchers
 //
-watch(selectedFeature, () => {
-  routerPushUrl()
-})
-
 watch(selectedCategoryIds, (a, b) => {
   if (a !== b) {
     routerPushUrl()
@@ -139,8 +141,7 @@ watch(selectedCategoryIds, (a, b) => {
 // Methods
 //
 function goToSelectedFeature() {
-  if (mapFeaturesRef.value)
-    mapFeaturesRef.value.goToSelectedFeature()
+  mapFeaturesRef.value?.goToSelectedFeature()
 }
 
 function onMenuChange(newCategoryId: number) {
@@ -152,6 +153,7 @@ function routerPushUrl() {
   const id = selectedFeature.value?.properties?.metadata?.id?.toString()
     || selectedFeature.value?.id?.toString()
     || null
+
   router.push({
     path: `/embedded${categoryIds ? `/${categoryIds}/` : '/'}${id ? `${id}` : ''}`,
     query: router.currentRoute.value.query,
@@ -168,6 +170,28 @@ function toggleExploreAroundSelectedPoi() {
     mode.value = Mode.BROWSER
   }
 }
+
+// Fetch inital POI
+const { data, error } = await useFetch<ApiPoi>(
+  () => `${API_ENDPOINT}/${API_PROJECT}/${API_THEME}/poi/${props.initialPoi}.geojson`,
+  {
+    query: {
+      geometry_as: 'bbox',
+      short_description: false,
+    },
+    immediate: !!props.initialPoi,
+  },
+)
+
+if (props.initialPoi) {
+  if (error.value)
+    throw createError(error.value)
+
+  if (!data.value)
+    throw createError({ statusCode: 404, message: 'Initial POI not found !' })
+
+  mapStore.setSelectedFeature(data.value)
+}
 </script>
 
 <template>
@@ -180,7 +204,7 @@ function toggleExploreAroundSelectedPoi() {
         <UIButton
           :label="t('ui.close')"
           icon="times"
-          @click="mapStore.setSelectedFeature(null)"
+          @click="mapStore.setSelectedFeature()"
         />
       </div>
       <PoiCardContent

components/Home/ExplorerOrFavoritesBack.vue

@@ -1,35 +1,30 @@
-<script lang="ts">
+<script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { storeToRefs } from 'pinia'
-
-import { defineNuxtComponent } from '#app'
 import { mapStore as useMapStore } from '~/stores/map'
-import useDevice from '~/composables/useDevice'
-
-export default defineNuxtComponent({
-  components: {
-    FontAwesomeIcon,
-  },
-
-  setup() {
-    const device = useDevice()
-    const { isModeFavorites } = storeToRefs(useMapStore())
 
-    return {
-      device,
-      isModeFavorites,
-    }
-  },
+//
+// Emits
+//
+const emit = defineEmits(['click'])
 
-  emits: {
-    click: () => true,
-  },
+//
+// Props
+//
+const device = useDevice()
+const { t } = useI18n()
+const { isModeFavorites } = storeToRefs(useMapStore())
 
-  methods: {
-    goToMenuItems() {
-      this.$emit('click')
-    },
-  },
+//
+// Computed
+//
+const label = computed(() => {
+  if (isModeFavorites.value) {
+    return device.value.smallScreen ? 'headerMenu.backToMenuFavoritesMobile' : 'headerMenu.backToMenuFavorites'
+  }
+  else {
+    return device.value.smallScreen ? 'headerMenu.backToMenuExplorerMobile' : 'headerMenu.backToMenuExplorer'
+  }
 })
 </script>
 
@@ -38,22 +33,12 @@ export default defineNuxtComponent({
     <button
       type="button"
       class="tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-w-10 tw-h-10 tw-text-2xl tw-font-bold tw-transition-all tw-rounded-full tw-outline-none tw-cursor-pointer focus:tw-outline-none hover:tw-bg-blue-700"
-      @click="goToMenuItems"
+      @click="emit('click')"
     >
       <FontAwesomeIcon icon="arrow-left" size="xs" />
     </button>
     <p class="tw-ml-2">
-      {{
-        $t(
-          device.smallScreen
-            ? isModeFavorites
-              ? 'headerMenu.backToMenuFavorites'
-              : 'headerMenu.backToMenuExplorer'
-            : isModeFavorites
-              ? 'headerMenu.backToMenuFavoritesMobile'
-              : 'headerMenu.backToMenuExplorerMobile',
-        )
-      }}
+      {{ t(label) }}
     </p>
   </div>
 </template>