refactor: router and menu behavior #508

Author: wazolab

components/Home/Home.vue

@@ -31,16 +31,10 @@ import useDevice from '~/composables/useDevice'
 import type { ApiAddrSearchResult, ApiSearchResult } from '~/lib/apiSearch'
 import IsochroneStatus from '~/components/Isochrone/IsochroneStatus.vue'
 
-//
-// Props
-//
 const props = defineProps<{
   boundaryArea?: Polygon | MultiPolygon
 }>()
 
-//
-// Composables
-//
 const mapStore = useMapStore()
 const { center, isModeFavorites, isModeExplorer, isModeExplorerOrFavorites, mode, selectedFeature, teritorioCluster } = storeToRefs(mapStore)
 const menuStore = useMenuStore()
@@ -56,10 +50,8 @@ const router = useRouter()
 const device = useDevice()
 const { isochroneCurrentFeature } = useIsochrone()
 
-//
-// Data
-//
-const allowRegionBackZoom = ref<boolean>(false)
+// CHECK: maybe unused
+// const allowRegionBackZoom = ref<boolean>(false)
 const isFilterActive = ref<boolean>(false)
 const initialBbox = ref<LngLatBounds>()
 const isMenuItemOpen = ref<boolean>(false)
@@ -68,9 +60,6 @@ const showFavoritesOverlay = ref<boolean>(false)
 const isPoiCardShown = ref<boolean>(false)
 const mapFeaturesRef = ref<InstanceType<typeof MapFeatures>>()
 
-//
-// Hooks
-//
 onBeforeMount(async () => {
   const favs = getHashPart(router, 'favs')
   if (favs) {
@@ -125,9 +114,6 @@ onMounted(async () => {
   }
 })
 
-//
-// Computed
-//
 const isBottomMenuOpened = computed(() => {
   return ((device.value.smallScreen && isPoiCardShown.value) || isMenuItemOpen.value)
 })
@@ -203,9 +189,6 @@ const siteName = computed(() => {
   return settings!.themes[0]?.title.fr || ''
 })
 
-//
-// Watchers
-//
 watch(selectedFeature, (newFeature) => {
   isPoiCardShown.value = !!newFeature
 
@@ -223,23 +206,15 @@ watch(selectedFeature, (newFeature) => {
       })
     }
   }
-}, { immediate: true })
+})
 
-watch(selectedCategoryIds, async (a, b) => {
-  if (a !== b) {
+watch(selectedCategoryIds, async (newValue, oldValue) => {
+  if (newValue.toString() !== oldValue.toString()) {
     routerPushUrl()
-    await menuStore.fetchFeatures({
-      vidoConfig: config!,
-      categoryIds: selectedCategoryIds.value,
-      clipingPolygonSlug: route.query.clipingPolygonSlug?.toString(),
-    })
-    allowRegionBackZoom.value = true
   }
 })
 
 watch(mode, () => {
-  allowRegionBackZoom.value = false
-
   const hash = {
     mode: mode.value !== Mode.BROWSER ? mode.value : null,
   }
@@ -262,13 +237,10 @@ watch(isModeFavorites, async (isEnabled) => {
   }
 })
 
-//
-// Methods
-//
-async function goToSelectedFeature(feature?: ApiPoi): Promise<void> {
+function goToSelectedFeature(feature?: ApiPoi): void {
   if (mapFeaturesRef.value) {
     if (feature)
-      await mapStore.setSelectedFeature(feature)
+      mapStore.setSelectedFeature(feature)
     mapFeaturesRef.value.goToSelectedFeature()
   }
 }
@@ -337,9 +309,9 @@ function onBottomMenuButtonClick() {
   isMenuItemOpen.value = !isMenuItemOpen.value
 }
 
-async function onQuitExplorerFavoriteMode(): Promise<void> {
+function onQuitExplorerFavoriteMode(): void {
   if (mapFeaturesRef.value)
-    await mapStore.setSelectedFeature()
+    mapStore.setSelectedFeature()
 
   mode.value = Mode.BROWSER
 }
@@ -378,7 +350,7 @@ function routerPushUrl(hashUpdate: { [key: string]: string | null } = {}) {
   if (hashUpdate)
     hash = setHashParts(hash, hashUpdate)
 
-  router.push({
+  navigateTo({
     path: mode.value !== Mode.BROWSER
       ? '/'
       : (categoryIds ? `/${categoryIds}/` : '/') + (id ? `${id}` : ''),
@@ -396,7 +368,7 @@ function toggleExploreAroundSelectedPoi(feature?: ApiPoi) {
       isPoiCardShown.value = false
   }
   else {
-    allowRegionBackZoom.value = false
+    // allowRegionBackZoom.value = false
     mode.value = Mode.BROWSER
   }
 }
@@ -428,9 +400,9 @@ function scrollTop() {
     header.scrollTop = 0
 }
 
-async function handlePoiCardClose(): Promise<void> {
+function handlePoiCardClose(): void {
   if (mapFeaturesRef.value) {
-    await mapStore.setSelectedFeature()
+    mapStore.setSelectedFeature()
   }
 }
 </script>

components/Home/Menu.vue

@@ -111,7 +111,6 @@ export default defineNuxtComponent({
     ...mapActions(menuStore, [
       'addSelectedCategoryIds',
       'delSelectedCategoryIds',
-      'toggleSelectedCategoryId',
     ]),
 
     getMenuItemByParentId(
@@ -213,7 +212,6 @@ export default defineNuxtComponent({
           display-mode-default="compact"
           class="tw-flex-1 tw-pointer-events-auto tw-h-full"
           @menu-group-click="onMenuGroupClick"
-          @category-click="toggleSelectedCategoryId($event)"
           @filter-click="onCategoryFilterClick"
         />
       </component>
@@ -264,7 +262,6 @@ export default defineNuxtComponent({
         display-mode-default="large"
         class="tw-flex-1 tw-pointer-events-auto tw-h-full"
         @menu-group-click="onMenuGroupClick"
-        @category-click="toggleSelectedCategoryId($event)"
         @filter-click="onCategoryFilterClick"
       />
     </component>

components/MainMap/MapFeatures.vue

@@ -92,19 +92,14 @@ const availableStyles = computed((): MapStyleEnum[] => {
   return styles
 })
 
-watch(
-  () => props.features,
-  () => {
-    if (!map.value)
-      return
-
-    showVectorSelectedFeature()
-    renderPois()
-    handleResetMapZoom(t('snack.noPoi.issue'), t('snack.noPoi.action'))
-  },
-)
+watch(() => props.features, () => {
+  if (!map.value)
+    return
 
-watch(selectedFeature, () => showVectorSelectedFeature())
+  showVectorSelectedFeature()
+  renderPois()
+  handleResetMapZoom(t('snack.noPoi.issue'), t('snack.noPoi.action'))
+})
 
 watch(selectedBackground, () => {
   if (!map.value)
@@ -142,7 +137,7 @@ function onMapInit(mapInstance: MapGL): void {
     pinMarkerRenderFn: pinMarkerRender,
   })
 
-  teritorioCluster.value.addEventListener('feature-click', async (e: Event) => await mapStore.setSelectedFeature((e as CustomEvent).detail.selectedFeature))
+  teritorioCluster.value.addEventListener('feature-click', (e: Event) => mapStore.setSelectedFeature((e as CustomEvent).detail.selectedFeature))
 
   map.value.on('click', onClick)
 
@@ -194,7 +189,7 @@ function onMapStyleLoad(): void {
 }
 
 // Map interactions
-async function onClick(e: MapMouseEvent): Promise<void> {
+function onClick(e: MapMouseEvent): void {
   if (!map.value)
     return
 
@@ -203,8 +198,8 @@ async function onClick(e: MapMouseEvent): Promise<void> {
   })
 
   vectorSelectedFeatures.length > 0
-    ? await mapStore.setSelectedFeature(vectorTilesPoi2ApiPoi(vectorSelectedFeatures[0]))
-    : await mapStore.setSelectedFeature()
+    ? mapStore.setSelectedFeature(vectorTilesPoi2ApiPoi(vectorSelectedFeatures[0]))
+    : mapStore.setSelectedFeature()
 }
 
 function goToSelectedFeature(): void {

components/Menu/Category.vue

@@ -44,6 +44,26 @@ export default defineNuxtComponent({
     isFiltered(): boolean {
       return this.filters && filterValuesIsSet(this.filters)
     },
+    categoryUrl(): string {
+      const id = this.category.id.toString()
+      // Get current categories from the route
+      const currentCategories = this.$route.params.p1?.toString().split(',') ?? []
+
+      // Check if the category is already selected
+      const categoryIndex = currentCategories.indexOf(id)
+
+      if (categoryIndex === -1) {
+      // Add the category if it doesn't exist
+        currentCategories.push(id)
+      }
+      else {
+      // Remove the category if it exists
+        currentCategories.splice(categoryIndex, 1)
+      }
+
+      // Generate the new route
+      return currentCategories.length ? `/${currentCategories.join(',')}/` : '/'
+    },
   },
 
   emits: {
@@ -59,8 +79,6 @@ export default defineNuxtComponent({
         categoryId: this.category.id,
         title: this.category.category.name.fr,
       })
-
-      this.$emit('click', this.category.id)
     },
     onFilterClick() {
       this.$tracking({
@@ -78,14 +96,14 @@ export default defineNuxtComponent({
 <template>
   <MenuItem
     :id="`MenuItem-${category.id}`"
-    :href="`/${category.id}`"
+    :href="categoryUrl"
     :display-mode="category.category.display_mode || displayModeDefault"
     :color-fill="category.category.color_fill"
     :icon="category.category.icon"
     :size="size"
     :name="category.category.name"
     badge-class="tw-bg-white tw-text-zinc-700 tw-rounded-full tw-border-solid tw-border-2 tw-border-white"
-    @click.prevent="onClick"
+    @click="onClick"
   >
     <template v-if="category.category.display_mode === 'compact'" #badge>
       <FontAwesomeIcon

components/Menu/Group.vue

@@ -56,7 +56,7 @@ export default defineNuxtComponent({
 <template>
   <MenuItem
     :id="`MenuGroup-${menuGroup.id}`"
-    :href="`/${menuGroup.id}/`"
+    href=""
     :display-mode="menuGroup.menu_group.display_mode || displayModeDefault"
     :color-fill="menuGroup.menu_group.color_fill"
     :icon="menuGroup.menu_group.icon"
@@ -68,7 +68,7 @@ export default defineNuxtComponent({
         size === '2xl' ? 'tw-w-6 tw-h-6' : 'tw-w-5 tw-h-5',
       ].join(' ')
     "
-    @click.prevent="onClick"
+    @click="onClick"
   >
     <template v-if="categoriesActivesCount > 0" #badge>
       {{ categoriesActivesCount }}

components/Menu/Item.vue

@@ -54,10 +54,13 @@ export default defineNuxtComponent({
 
 <template>
   <div class="tw-flex tw-flex-col tw-items-start">
-    <a
+    <NuxtLink
       :id="id"
-      :href="href"
-      target="_blank"
+      :to="{
+        path: href,
+        query: $route.query,
+        hash: $route.hash,
+      }"
       class="tw-flex focus:tw-outline-none tw-outline-none tw-items-center tw-text-center tw-self-stretch tw-justify-start tw-leading-none tw-transition-colors tw-rounded-lg tw-relative hover:tw-bg-zinc-100" :class="[
         displayMode === 'large'
           ? 'tw-px-4 tw-py-2 tw-col-start-1 tw-col-span-4'
@@ -101,7 +104,7 @@ export default defineNuxtComponent({
         class="tw-text-zinc-700 tw-shrink-0"
         size="sm"
       />
-    </a>
+    </NuxtLink>
 
     <slot name="more" />
   </div>

components/Menu/ItemList.vue

@@ -44,17 +44,10 @@ export default defineNuxtComponent({
 
   emits: {
     menuGroupClick: (_menuItemId: ApiMenuItem['id']) => true,
-    categoryClick: (_menuItemId: ApiMenuItem['id']) => true,
     filterClick: (_categoryId: ApiMenuCategory['id']) => true,
   },
 
   methods: {
-    onMenuGroupClick(menuItem: MenuItem) {
-      this.$emit('menuGroupClick', menuItem.id)
-    },
-    onCategoryClick(menuItem: MenuItem) {
-      this.$emit('categoryClick', menuItem.id)
-    },
     onFilterClick(categoryId: ApiMenuCategory['id']) {
       this.$emit('filterClick', categoryId)
     },
@@ -78,7 +71,7 @@ export default defineNuxtComponent({
           (menuItem.menu_group.display_mode || displayModeDefault)
             === 'large' && ['tw-col-start-1 tw-col-span-4']
         "
-        @click="onMenuGroupClick(menuItem)"
+        @click="$emit('menuGroupClick', $event)"
       />
       <LinkItem
         v-else-if="menuItem.link"
@@ -102,7 +95,6 @@ export default defineNuxtComponent({
           (menuItem.category.display_mode || displayModeDefault)
             === 'large' && ['tw-col-start-1 tw-col-span-4']
         "
-        @click="onCategoryClick(menuItem)"
         @filter-click="onFilterClick($event)"
       />
     </template>

pages/embedded.vue

@@ -87,7 +87,7 @@ if (error.value)
   createError(error.value)
 
 if (status.value === 'success' && data.value)
-  await mapStore.setSelectedFeature(data.value)
+  mapStore.setSelectedFeature(data.value)
 
 // Disable Favorite Mode
 favoritesModeEnabled.value = false