Completed the tag overview page

frontend/src/components/parts/TagOverview.vue

@@ -1,4 +1,12 @@
 <template>
+  <SectionHeadline :title="t('tag-overview.explain.title')">
+    <template #description>
+      <p>{{ t('tag-overview.explain.description') }}</p>
+    </template>
+
+    <SearchTag :tag="exampleTag" show-count :disable-translation="true" />
+  </SectionHeadline>
+
   <SectionHeadline :title="t('tag-overview.software.title')">
     <template #description>
       <p>{{ t('tag-overview.software.description') }}</p>
@@ -70,9 +78,21 @@ import SectionHeadline from '@/components/structure/SectionHeadline.vue'
 import sortBy from 'lodash/sortBy'
 import orderBy from 'lodash/orderBy'
 import { useI18n } from 'vue-i18n'
+import type { Tag } from '@/stores/tags'
 
 const { t } = useI18n()
 
+const exampleTag: Tag = {
+  type: 'sys',
+  id: [
+    'sys',
+    t('tag-overview.explain.parts.category'),
+    t('tag-overview.explain.parts.detail'),
+    t('tag-overview.explain.parts.value')
+  ].join(':'),
+  count: t('tag-overview.explain.parts.count')
+}
+
 const softwareTags = computed(() =>
   orderBy(
     useTagStore().entries.filter((tag) => tag.id.startsWith('sys:ableton:')),

frontend/src/components/structure/SearchTag.vue

@@ -34,14 +34,18 @@ const props = withDefaults(
     tag: TagInterface
     showRealm?: boolean
     showCount?: boolean
+    disableTranslation?: boolean
   }>(),
   {
     showRealm: false,
-    showCount: false
+    showCount: false,
+    disableTranslation: false
   }
 )
 
 const translate = (prefix: string, value: string | number | null): string | null => {
+  if (props.disableTranslation) return String(value)
+
   if (value === null) {
     return null
   }

frontend/src/locales/de.yaml

@@ -182,6 +182,18 @@ file-table:
     no-files-found-for-filter: Keine Dateien für den Filter "{filter}" gefunden.
 
 tag-overview:
+  explain:
+    title: Was sind Tags?
+    description: >-
+      Tags sind eine Möglichkeit, Dateien mit zusätzlichen Informationen zu
+      beschreiben. Sie werden automatisch aus den Dateien extrahiert und können
+      zum Suchen nach bestimmten Dateien verwendet werden. Hier ist ein Beispiel
+      welcher Teil des Tags was ist:
+    parts:
+      category: Kategorie
+      detail: Detail
+      value: Wert
+      count: Anzahl gefunden
   software:
     title: Software bezogene Tags
     description: >-

frontend/src/locales/en.yaml

@@ -181,6 +181,17 @@ file-table:
     no-files-found-for-filter: No files found for filter "{filter}".
 
 tag-overview:
+  explain:
+    title: What are tags?
+    description: >-
+      Tags are a way to describe files with additional information. They are
+      automatically extracted from the files and can be used to search for
+      specific files. Here is an example tag on what part of the tag is what:
+    parts:
+      category: Category
+      detail: Detail
+      value: Value
+      count: Hits found
   software:
     title: Software related tags
     description: >-

frontend/src/stores/tags.ts

@@ -3,13 +3,11 @@ import { setupStore } from '@/stores/base'
 import type { FileStatus } from '@/stores/files'
 import { fetchApi, fetchSearch } from '@/plugins/api'
 
-export type TagType = 'system'
-
 export interface Tag {
-  type: TagType
+  type: 'sys'
   id: string
   value?: number
-  count: number
+  count: number | string // string for example tag
 }
 
 export const useTagStore = defineStore('tags', setupStore<Tag>())
@@ -39,7 +37,7 @@ export const hydrateTags = async () => {
     const t: Tag = {
       id: term.term,
       count: term.count,
-      type: 'system'
+      type: 'sys'
     }
 
     // The value part might be a number that we need to sort by later on,

service/internal/parser/ablv5parser/parse_live_set.go

@@ -69,51 +69,51 @@ func ParseLiveSet(m *stats.Metrics, path string, data *ablv5schema.Ableton) *pip
 
 	// Extract some details about the file itself
 
-	finfo, err := times.Stat(path)
+	fstat, err := times.Stat(path)
 	if err == nil {
 		// Handle the basic modification time
-		year, month, _ := finfo.ModTime().Date()
+		year, month, _ := fstat.ModTime().Date()
 
 		// Simple scalars
 		tags.AddSystemTag(fmt.Sprintf("file:mtime-year:%d", year))
-		tags.AddSystemTag(fmt.Sprintf("file:mtime-weekday:%d", finfo.ModTime().Weekday()))
+		tags.AddSystemTag(fmt.Sprintf("file:mtime-weekday:%d", fstat.ModTime().Weekday()))
 
 		// Month based breakdowns
 		tags.AddSystemTag(fmt.Sprintf("file:mtime-month:%d", month))
 		tags.AddSystemTag(fmt.Sprintf("file:mtime-quarter:%d", (month+2)/3))
 
 		// Week number is a bit more complex, a week can span years, but for now we just want the week number.
-		_, wno := finfo.ModTime().ISOWeek()
+		_, wno := fstat.ModTime().ISOWeek()
 		tags.AddSystemTag(fmt.Sprintf("file:mtime-weekno:%d", wno))
 
-		for _, zodiac := range gozodiacs.GetWesternZodiacsForDate(finfo.ModTime()) {
+		for _, zodiac := range gozodiacs.GetWesternZodiacsForDate(fstat.ModTime()) {
 			tags.AddSystemTag(fmt.Sprintf("file:zodiac-western:%s", strings.ToLower(zodiac.String())))
 		}
 
-		tags.AddSystemTag(fmt.Sprintf("file:zodiac-chinese:%s", strings.ToLower(gozodiacs.GetChineseZodiacSign(finfo.ModTime()).String())))
+		tags.AddSystemTag(fmt.Sprintf("file:zodiac-chinese:%s", strings.ToLower(gozodiacs.GetChineseZodiacSign(fstat.ModTime()).String())))
 
 		// Do the same for the creation time, if possible
-		if finfo.HasBirthTime() {
-			year, month, _ := finfo.BirthTime().Date()
+		if fstat.HasBirthTime() {
+			year, month, _ := fstat.BirthTime().Date()
 
 			// Simple scalars
 			tags.AddSystemTag(fmt.Sprintf("file:btime-year:%d", year))
-			tags.AddSystemTag(fmt.Sprintf("file:btime-weekday:%d", finfo.ModTime().Weekday()))
+			tags.AddSystemTag(fmt.Sprintf("file:btime-weekday:%d", fstat.ModTime().Weekday()))
 
 			// Month based breakdowns
 			tags.AddSystemTag(fmt.Sprintf("file:btime-month:%d", month))
 			tags.AddSystemTag(fmt.Sprintf("file:btime-quarter:%d", (month+2)/3))
 
 			// Week number is a bit more complex, a week can span years, but for now we just want the week number.
-			_, wno := finfo.ModTime().ISOWeek()
+			_, wno := fstat.ModTime().ISOWeek()
 			tags.AddSystemTag(fmt.Sprintf("file:btime-weekno:%d", wno))
 
 			// Lets add some zodiac signs
-			for _, zodiac := range gozodiacs.GetWesternZodiacsForDate(finfo.BirthTime()) {
+			for _, zodiac := range gozodiacs.GetWesternZodiacsForDate(fstat.BirthTime()) {
 				tags.AddSystemTag(fmt.Sprintf("file:zodiac-western:%s", strings.ToLower(zodiac.String())))
 			}
 
-			tags.AddSystemTag(fmt.Sprintf("file:zodiac-chinese:%s", strings.ToLower(gozodiacs.GetChineseZodiacSign(finfo.BirthTime()).String())))
+			tags.AddSystemTag(fmt.Sprintf("file:zodiac-chinese:%s", strings.ToLower(gozodiacs.GetChineseZodiacSign(fstat.BirthTime()).String())))
 		}
 	}