merch-tracker-v2/frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

collection search added

Browse source
This commit is contained in:
nquidox 2025-09-25 20:04:27 +03:00
parent 8b11ee57cb
commit 6a94d8ef63
2 changed files with 40 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/views/CollectionView.vue
View file

@ -1,7 +1,7 @@
<script setup>
import CollectionToolbar from '@/views/CollectionView/CollectionToolbar.vue'
import CollectionMerchCard from '@/views/CollectionView/CollectionMerchCard.vue'
import { onMounted, ref } from 'vue'
import { computed, onMounted, ref } from 'vue'
import { useMerchApi } from '@/api/merch.js'
const merchList = ref(null)
@ -25,12 +25,25 @@ const fetchMerch = async () => {
onMounted(() => {
fetchMerch()
})
const searchQuery = ref('');
const filteredMerch = computed(() => {
if (!searchQuery.value.trim()) {
return merchList.value;
}
const q = searchQuery.value.toLowerCase();
return merchList.value.filter(item =>
item.name.toLowerCase().includes(q)
);
});
</script>
<template>
<CollectionToolbar />
<CollectionToolbar v-model="searchQuery" />
<n-grid responsive="screen" cols="2 s:3 m:4 l:5 xl:6 2xl:7" class="grid-main">
<n-gi class="grid-item" v-for="item in merchList" :key="item.merch_uuid">
<n-gi class="grid-item" v-for="item in filteredMerch" :key="item.merch_uuid">
<router-link :to="`/details/${item.merch_uuid}`" class="card-link">
<CollectionMerchCard :merch="item" />
</router-link>