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

charts search added

Browse source
This commit is contained in:
nquidox 2025-09-25 19:43:46 +03:00
parent fd9976e3d3
commit 8b11ee57cb
2 changed files with 59 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/views/ChartsView.vue
View file

@ -1,14 +1,15 @@
<script setup>
import { onMounted, ref } from 'vue'
import { computed, onMounted, ref } from 'vue'
import { useChartsApi } from '@/api/charts.js'
import PeriodSelector from '@/components/PeriodSelector.vue'
import ChartsCard from '@/views/ChartsView/ChartsCard.vue'
import router from '@/router/index.js'
import ChartsSearch from '@/views/ChartsView/ChartsSearch.vue'
const { getChartsPrices } = useChartsApi()
const pricesList = ref(null)
const pricesList = ref([])
const loading = ref(true)
const error = ref(null)
@ -38,12 +39,26 @@ onMounted(() => {
function handleSelectDays(days) {
fetchPrices(days)
}
const searchQuery = ref('');
const filteredPrices = computed(() => {
if (!searchQuery.value.trim()) {
return pricesList.value;
}
const q = searchQuery.value.toLowerCase();
return pricesList.value.filter(item =>
item.name.toLowerCase().includes(q)
);
});
</script>
<template>
<ChartsSearch v-model="searchQuery" />
<PeriodSelector @days="handleSelectDays" />
<n-grid responsive="screen" cols="1 s:1 m:1 l:2 xl:2 2xl:2" class="grid-main">
<n-gi class="grid-item" v-for="item in pricesList" :key="item.merch_uuid">
<n-gi class="grid-item" v-for="item in filteredPrices" :key="item.merch_uuid">
<router-link :to="`/details/${item.merch_uuid}`" class="card-link">
<ChartsCard :chartsData="item" />
</router-link>