handle variant navigation

src/routes.ts

@@ -17,11 +17,11 @@ export const createRoutes = (): RouteRecordRaw[] => {
   const routeRecord: RouteRecordRaw[] = []
 
   Object.keys(routes).forEach(route => {
-    routeRecord.push({
+    const toPush: RouteRecordRaw = {
       name: routes[route].id,
       path: route,
       component: templates[routes[route].template],
-    })
+    }
 
     if (routes[route].template === 'project-list') {
       routeRecord.push({
@@ -30,7 +30,11 @@ export const createRoutes = (): RouteRecordRaw[] => {
         component: projectViewBody,
         props: route => ({ id: route.query.id }),
       })
+    } else if (routes[route].template === 'gallery-list') {
+      toPush.props = route => ({ variants: (route.query.v as string || '').split(',') })
     }
+
+    routeRecord.push(toPush)
   })
 
   return routeRecord

src/types/galleries/galleryList.ts

@@ -1,4 +1,5 @@
 export type GalleryEntry = {
+  id: string
   description?: string
   thumbnailPosition?: `${'left' | 'center' | 'right'} ${'top' | 'center' | 'bottom'}`
   thumbnailUrl: string

src/views/gallery-list.vue

@@ -1,21 +1,69 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { type RouteRecordRaw, useRouter } from 'vue-router'
 
-import { type GalleryList } from 'src/types/galleries/galleryList'
+import type { GalleryEntry, GalleryList } from 'src/types/galleries/galleryList'
 import { type GalleryListDefinition } from 'content/routes.js'
 import { fetchAndParseYaml } from 'src/utilities/fetch'
 import { getCurrentRoute } from 'src/utilities/vuetils'
 import { useRouteStore } from 'src/routes'
 
+const props = defineProps<{
+  variants: string[]
+}>()
+
+const validateVariants = (variants?: string[]) => {
+  return !!variants && variants[0] !== '' ? variants : null
+}
+
 const ready = ref(false)
 const config = ref(null! as GalleryList)
 const currentRoute = getCurrentRoute()
 const routeStore = useRouteStore()
-const routeConfig = routeStore._routes[currentRoute.path] as GalleryListDefinition
+const routeConfig = routeStore._routes[currentRoute.path] as GalleryListDefinition & RouteRecordRaw
+const router = useRouter()
+const entries = ref([] as GalleryEntry[])
+const variants = ref(validateVariants(props.variants))
+
+const onDisplayEntries = () => {
+  let currentEntries = config.value.entries
+  if (!!variants.value) {
+    variants.value.forEach((variant) => {
+      currentEntries = currentEntries.find(other => other.id === variant)!.variants!
+    })
+  }
+  entries.value = currentEntries
+}
+
+const onTileClicked = (e: Event, entry: GalleryEntry) => {
+  e.preventDefault()
+  if (!!entry.variants) {
+    const newPath = !!variants.value
+      ? `${(variants.value || []).join(',')},${entry.id}`
+      : entry.id
+    router.push({ name: routeConfig.name, query: { v: newPath }})
+    variants.value = newPath.split(',')
+    onDisplayEntries()
+  }
+}
+
+const onNavigateBack = (e: Event) => {
+  e.preventDefault()
+  let newPath: string | null = variants.value!.slice(0, variants.value!.length - 1).join(',')
+  if (newPath === '') {
+    router.push({ name: routeConfig.name})
+    variants.value = null
+  } else {
+    router.push({ name: routeConfig.name, query: { v: newPath }})
+    variants.value = validateVariants(newPath?.split(','))
+  }
+  onDisplayEntries()
+}
 
 onMounted(async () => {
   config.value = await fetchAndParseYaml<GalleryList>(routeConfig.config)
   document.title = routeConfig.title
+  onDisplayEntries()
   ready.value = true
 })
 </script>
@@ -25,10 +73,16 @@ onMounted(async () => {
   .gallery(
     v-if='ready'
   )
+    p(
+      v-if='variants?.length > 0'
+      @click='onNavigateBack($event)'
+    ) Back
     .tile(
-      v-for='entry in config.entries'
+      v-for='(entry) in entries'
     )
-      p {{ entry.title }}
+      p(
+        @click='onTileClicked($event, entry)'
+      ) {{ entry.title }}
 </template>
 
 <style scoped lang="sass">