From 7b1214e42fb5d0e83d681a099a8f0c1e7317a7d4 Mon Sep 17 00:00:00 2001
From: nquidox <nquidox@gmail.com>
Date: Wed, 24 Sep 2025 21:31:20 +0300
Subject: [PATCH] charts fetch data + cards

---
 src/api/charts.js                   | 17 ++++++++++++++
 src/views/ChartsView.vue            | 36 +++++++++++++++++++++++++++--
 src/views/ChartsView/ChartsCard.vue | 20 ++++++++++++++++
 3 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 src/api/charts.js
 create mode 100644 src/views/ChartsView/ChartsCard.vue

diff --git a/src/api/charts.js b/src/api/charts.js
new file mode 100644
index 0000000..7e537e0
--- /dev/null
+++ b/src/api/charts.js
@@ -0,0 +1,17 @@
+import { apiClient } from '@/services/apiClient.js'
+
+export const useChartsApi = () => {
+  const getChartsPrices = async (days) => {
+    console.log(days)
+    const response = await apiClient.get('/prices', { days: days })
+    if (response.status === 200) {
+      return response
+    } else {
+      console.log('Add merch error: ', response)
+    }
+  }
+
+  return {
+    getChartsPrices,
+  }
+}
diff --git a/src/views/ChartsView.vue b/src/views/ChartsView.vue
index 65bffc2..d2b6d07 100644
--- a/src/views/ChartsView.vue
+++ b/src/views/ChartsView.vue
@@ -1,9 +1,41 @@
-<script setup lang="ts">
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useChartsApi } from '@/api/charts.js'
+import ChartsCard from '@/views/ChartsView/ChartsCard.vue'
 
+const { getChartsPrices } = useChartsApi()
+
+const pricesList = ref(null)
+const loading = ref(true)
+const error = ref(null)
+
+const fetchPrices = async () => {
+  try {
+    const response = await getChartsPrices(7)
+    pricesList.value = response.data
+    if (!response.status === 400) {
+      router.push({ name: 'collection' })
+    }
+  } catch (err) {
+    error.value = err.message
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchPrices()
+})
 </script>
 
 <template>
-Charts view
+  <n-grid responsive="screen" cols="1 s:1 m:2 l:2 xl:2 2xl:2" class="grid-main">
+    <n-gi class="grid-item" v-for="item in pricesList" :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>
diff --git a/src/views/ChartsView/ChartsCard.vue b/src/views/ChartsView/ChartsCard.vue
new file mode 100644
index 0000000..7382601
--- /dev/null
+++ b/src/views/ChartsView/ChartsCard.vue
@@ -0,0 +1,20 @@
+<script setup>
+defineProps({
+  chartsData: {
+    type: Object,
+    required: true,
+  }
+})
+</script>
+
+<template>
+  <n-card :title="chartsData.name" class="charts-card" style="--n-padding-bottom: 5px">
+    <p class="micro-uuid text-center">{{ chartsData.merch_uuid }}</p>
+  </n-card>
+</template>
+
+<style scoped>
+.charts-card {
+  min-width: 80%;
+}
+</style>