tagsByCategory now calculated on shared filter panel

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

@@ -1,13 +1,32 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import type { EntryTagCollection } from '@goldenwere/static-web-templates-types'
 
-defineProps<{
+const props = defineProps<{
-  tagsByCategory: { [category: string]: Record<string, string> }
+  tags: EntryTagCollection
 }>()
 
 const emits = defineEmits<{
   (e: 'toggledTagsChanged', value: string[]): void
 }>()
 
+const tagsByCategory = computed(() => {
+  const value: { [category: string]: Record<string, string> } = { 'NoCategory': {}}
+
+  Object.keys(props.tags).forEach(id => {
+    const tag = props.tags![id]
+    if (!!tag.category) {
+      if (!value[tag.category]) {
+        value[tag.category] = {}
+      }
+      value[tag.category][id] = tag.displayName || id
+    } else {
+      value['NoCategory'][id] = tag.displayName || id
+    }
+  })
+
+  return value
+})
 let tagsToggled: string[] = []
 
 /**
@@ -37,8 +56,8 @@ const resetTags = () => {
 </script>
 
 <template lang="pug">
-.filters
+.filter-panel
-  h2 Filters
+  h2 Filter By Tags
   .category(
     v-for='(tags, category) in tagsByCategory'
     :id='category'

projects/frontend/src/views/gallery/gallery-list.vue

@@ -55,28 +55,6 @@ const hasWarnings = ref(false)
 const hideWarnings = defineModel('showWarnings', { type: Boolean })
 const tagsByCategory = ref({} as { [category: string]: Record<string, string> })
 
-/**
- * Handles updating the displayed tags in the list
- */
-const onLoadTags = () => {
-  if (!!config.tags) {
-    tagsByCategory.value = { 'NoCategory': {}}
-    Object.keys(config.tags).forEach(id => {
-      const tag = config.tags![id]
-      if (!!tag.category) {
-        if (!tagsByCategory.value[tag.category]) {
-          tagsByCategory.value[tag.category] = {}
-        }
-        tagsByCategory.value[tag.category][id] = tag.displayName || id
-      } else {
-        tagsByCategory.value['NoCategory'][id] = tag.displayName || id
-      }
-    })
-  } else {
-    tagsByCategory.value = null as any
-  }
-}
-
 /**
  * Handles updating the displayed entries in the list
  */
@@ -181,7 +159,6 @@ onMounted(async () => {
   config = await fetchAndParseYaml<GalleryList>(routeConfig.config)
   document.title = routeConfig.title
   hideWarnings.value = storage.read(`${storageId}::hideWarnings`) || false
-  onLoadTags()
   onDisplayEntries()
   ready.value = true
 })
@@ -212,9 +189,9 @@ onMounted(async () => {
       )
   Transition
     FilterPanel(
-      v-if='galleryReady && !!tagsByCategory'
+      v-if='galleryReady && !!config.tags'
       :ref='filterPanelRef'
-      :tagsByCategory='tagsByCategory'
+      :tags='config.tags'
       @toggledTagsChanged='onToggledTagsChanged($event)'
     )
   Transition