labels added

src/views/CollectionView/CollectionMerchCard.vue

@@ -1,14 +1,33 @@
 <script setup>
 import BoxIcon from '@/components/icons/BoxIcon.vue'
 import { useMerchImagesApi } from '@/api/merchImages.js'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import LabelDotTemplate from '@/components/LabelDotTemplate.vue'
+import { useLabelsStore } from '@/stores/labelsStore.js'
 const { getImageUrl } = useMerchImagesApi()
 
 const props = defineProps({
   merch: {
     type: Object,
     required: true,
+  },
+  labels: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const store = useLabelsStore()
+
+const resolvedLabelDots = computed(() => {
+  const labelMap = new Map()
+  for (const label of store.labels) {
+    labelMap.set(label.label_uuid, label)
   }
+
+  return props.labels
+    .map(uuid => labelMap.get(uuid))
+    .filter(Boolean)
 })
 
 const fileList = ref([])
@@ -44,6 +63,14 @@ onMounted(async () => {
   <n-card class="responsive-card">
     <template #header>
       <h3 class="card-title">{{ merch.name }}</h3>
+      <div v-if="resolvedLabelDots.length > 0" class="label-dots">
+        <LabelDotTemplate
+          v-for="label in resolvedLabelDots"
+          :key="label.label_uuid"
+          :color="label.color"
+          :bg_color="label.bg_color"
+        />
+      </div>
     </template>
     <template #cover>
       <div class="cover-wrapper">
@@ -101,4 +128,11 @@ onMounted(async () => {
   height: auto;
   max-width: 80%;
 }
+
+.label-dots {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  justify-content: right;
+}
 </style>