update tagging in cms

- tags are now on global config and not per-list
- tags are now stored in a regular array rather than key-value object
- tags can be fetched externally or embedded in the global config

projects/frontend/src/components/shared/filter-panel.vue

@@ -1,27 +1,28 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { EntryTagCollection } from '@goldenwere/mackenzii-types'
+import { computed, ref, onMounted } from 'vue'
+import type { MediaEntryTag } from '@goldenwere/mackenzii-types'
+import { fetchAndParseConfig } from 'src/utilities/fetch'
 
 const props = defineProps<{
-  tags: EntryTagCollection
+  tags: string | MediaEntryTag[]
 }>()
 
 const emits = defineEmits<{
   (e: 'toggledTagsChanged', value: string[]): void
 }>()
 
+const tagsLoaded = ref([] as MediaEntryTag[])
 const tagsByCategory = computed(() => {
-  const value: { [category: string]: Record<string, string> } = { 'NoCategory': {}}
+  const value: { [category: string]: MediaEntryTag[] } = { 'NoCategory': []}
 
-  Object.keys(props.tags).forEach(id => {
-    const tag = props.tags![id]
+  tagsLoaded.value.forEach((tag) => {
     if (!!tag.category) {
       if (!value[tag.category]) {
-        value[tag.category] = {}
+        value[tag.category] = []
       }
-      value[tag.category][id] = tag.displayName || id
+      value[tag.category].push(tag)
     } else {
-      value['NoCategory'][id] = tag.displayName || id
+      value['NoCategory'].push(tag)
     }
   })
 
@@ -44,6 +45,7 @@ const onToggleTag = (event: Event, tagId: string) => {
       tagsToggled.splice(index, 1)
     }
   }
+  console.log(tagsToggled)
   emits('toggledTagsChanged', tagsToggled)
 }
 
@@ -53,6 +55,12 @@ const onToggleTag = (event: Event, tagId: string) => {
 const resetTags = () => {
   tagsToggled = []
 }
+
+onMounted(async () => {
+  tagsLoaded.value = Array.isArray(props.tags)
+    ? tagsLoaded.value = props.tags
+    : await fetchAndParseConfig<MediaEntryTag[]>(props.tags)
+})
 </script>
 
 <template lang="pug">
@@ -66,17 +74,17 @@ const resetTags = () => {
       v-if='category !== "NoCategory"'
     ) {{ category }}
     .input.labeled-checkbox(
-      v-for='(tagDisplayName, tagId) in tags'
-      :id='tagId'
+      v-for='tag in tags'
+      :id='tag.tagId'
     )
       label(
-        :for='`${tagId}-toggle`'
-      ) {{ tagDisplayName }}
+        :for='`${tag.tagId}-toggle`'
+      ) {{ tag.displayName || tag.tagId }}
       input(
         type='checkbox'
-        :name='`${tagId}-toggle`'
-        :id='`${tagId}-toggle`'
-        @input='onToggleTag($event, tagId)'
+        :name='`${tag.tagId}-toggle`'
+        :id='`${tag.tagId}-toggle`'
+        @input='onToggleTag($event, tag.tagId)'
       )
 </template>
 

projects/frontend/src/main.ts

@@ -21,7 +21,7 @@ export const createApp = ViteSSG(
   // the root component
   main,
   // vue-router options
-  { routes: createRoutes(globals as SiteGlobals) },
+  { routes: createRoutes(globals as unknown as SiteGlobals) },
   // function to have custom setups
   async ({ app, router, routes, isClient, initialState }) => {
     const hljsResolved: HLJSApi = await hljs as any
@@ -44,6 +44,6 @@ export const createApp = ViteSSG(
     }
 
     app.use(createPinia())
-    initializeRouteStore(routes, globals as SiteGlobals)
+    initializeRouteStore(routes, globals as unknown as SiteGlobals)
   },
 )

projects/frontend/src/views/shared/media-list.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, useTemplateRef, ref, toRaw } from 'vue'
 import type {
   ConfigfulRouteDefinition,
-  ListWithTags,
   ListWithWarnings,
   MediaEntry,
   ResolvedListEntries,
@@ -16,7 +15,6 @@ import GalleryTile from '../gallery/gallery-tile.vue'
 import ArticleTile from '../article/article-tile.vue'
 
 type MediaList =
-  & ListWithTags<MediaEntry>
   & ListWithWarnings<MediaEntry>
 
 /**
@@ -41,6 +39,7 @@ const viewPath = computed(() => `${currentRoute.path}/view`)
 
 const config = ref(null as MediaList | null)
 const entries = ref({} as DisplayedEntries)
+const entriesRefs = useTemplateRef('tiles' as any)
 const hasWarnings = ref(false)
 const hideWarnings = defineModel('hideWarnings', { type: Boolean })
 const template = ref(routeConfig.template)
@@ -117,8 +116,8 @@ onMounted(async () => {
         )
   Transition
     FilterPanel(
-      v-if='ready && !!config.tags'
-      :tags='config.tags'
+      v-if='ready && globalConfig.tags'
+      :tags='globalConfig.tags'
       @toggledTagsChanged='onToggledTagsChanged($event)'
     )
   Transition
@@ -130,7 +129,8 @@ onMounted(async () => {
         v-for='(entry, id) in entries'
       )
         GalleryTile(
-          v-if='template === "gallery-list" && (!entry.isHidden || !config.removeFromView)'
+          v-if='template === "gallery-list"'
+          ref='tiles'
           :class='{ hidden: entry.isHidden && !config.removeFromView }'
           :hideWarnings='hideWarnings'
           :id='id'
@@ -139,7 +139,8 @@ onMounted(async () => {
           :entry='entry'
         )
         ArticleTile(
-          v-else-if='template === "article-list" && (!entry.isHidden || !config.removeFromView)'
+          v-else-if='template === "article-list"'
+          ref='tiles'
           :class='{ hidden: entry.isHidden && !config.removeFromView }'
           :hideWarnings='hideWarnings'
           :id='id'