Merge pull request #18 from SlovakNationalGallery/MG-9-work-type-tree

Work type tree in item detail

models/Item.ts

@@ -2,6 +2,8 @@ import { z } from 'zod'
 
 import BaseModel from '@/models/_BaseModel'
 
+type TreeNode = { label: string; path: string }
+
 export default class Item extends BaseModel {
   public static mapping = {}
   public static endpoint = 'api/v1/items'
@@ -97,4 +99,14 @@ export default class Item extends BaseModel {
       (image) => `https://img.webumenia.sk/preview/?path=${image}&size=800`
     )
   }
+
+  public get workTypeTrees(): TreeNode[][] {
+    return this.content.work_type.map((tree: string) => {
+      const parts: string[] = []
+      return tree.split('/').map((label: string): TreeNode => {
+        parts.push(label)
+        return { label, path: parts.join('/') }
+      })
+    })
+  }
 }

pages/items/[id]/index.vue

@@ -51,17 +51,21 @@
               </div>
             </div>
           </div>
-          <div class="flex gap-1 hover:bg-white hover:bg-opacity-40 px-2 py-1">
+          <div
+            v-if="item.workTypeTrees.length"
+            class="flex gap-1 hover:bg-white hover:bg-opacity-40 px-2 py-1"
+          >
             <div class="font-bold w-1/3 shrink-0">výtvarný druh</div>
             <div>
-              <NuxtLink
-                v-for="link in item.content.work_type"
-                :key="link"
-                :to="`/?work_type=${link}`"
-                class="underline"
-              >
-                {{ link }}
-              </NuxtLink>
+              <template v-for="(tree, i) in item.workTypeTrees" :key="i">
+                <template v-for="(node, j) in tree" :key="j">
+                  <NuxtLink :to="`/?work_type=${node.path}`" class="underline">
+                    {{ node.label }}
+                  </NuxtLink>
+                  <span class="px-1" v-if="j < tree.length - 1">›</span>
+                </template>
+                <br />
+              </template>
             </div>
           </div>
           <div