frontend/src/views/ChartsView.vue

<script setup>
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([])
const loading = ref(true)
const error = ref(null)

const fetchPrices = async (days = 7) => {
  loading.value = true
  error.value = null
  try {
    const response = await getChartsPrices(days)

    if (response.status === 400) {
      router.push({ name: 'collection' })
      return
    }

    pricesList.value = response.data
  } catch (err) {
    error.value = err.message || 'Fetch data error'
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchPrices(7)
})

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>
  <div class="sticky-search-container">
    <ChartsSearch v-model="searchQuery" />
  </div>
  <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 filteredPrices" :key="item.merch_uuid">
      <router-link :to="`/details/${item.merch_uuid}`" class="card-link">
        <ChartsCard :chartsData="item" />
      </router-link>
    </n-gi>
  </n-grid>
</template>

<style scoped>
</style>