get distinct prices method

src/api/charts.js

@@ -11,7 +11,18 @@ export const useChartsApi = () => {
     }
   }
 
+  const getDistinctPrices = async (merch_uuid, days) => {
+    console.log(days)
+    const response = await apiClient.get(`/prices/${merch_uuid}`, { days: days })
+    if (response.status === 200) {
+      return response
+    } else {
+      console.log('Add merch error: ', response)
+    }
+  }
+
   return {
     getChartsPrices,
+    getDistinctPrices,
   }
 }

src/views/DetailsView.vue

@@ -2,8 +2,12 @@
 import { useMerchApi } from '@/api/merch.js'
 import { onMounted, ref } from 'vue'
 import router from '@/router/index.js'
+import PeriodSelector from '@/components/PeriodSelector.vue'
+import ChartBlock from '@/components/ChartBlock.vue'
+import { useChartsApi } from '@/api/charts.js'
 
 const { getMerchDetails, deleteMerch } = useMerchApi()
+const { getDistinctPrices } = useChartsApi()
 
 const props = defineProps({
   merch_uuid: {
@@ -31,10 +35,6 @@ const fetchMerch = async () => {
   }
 }
 
-onMounted(() => {
-  fetchMerch()
-})
-
 const showModal = ref(false)
 const onDelete = () => {
   showModal.value = true
@@ -51,6 +51,39 @@ const confirmDelete = async () => {
   showModal.value = false
   router.push({ name: 'collection' })
 }
+
+const prices = ref(null)
+const loading2 = ref(true)
+const error2 = ref(null)
+
+const fetchPrices = async (days = 7) => {
+  loading2.value = true
+  error2.value = null
+  try {
+    const response = await getDistinctPrices(props.merch_uuid, days)
+
+    if (response.status === 400) {
+      router.push({ name: 'collection' })
+      return
+    }
+
+    prices.value = response.data
+  } catch (err) {
+    error2.value = err.message || 'Fetch data error'
+  } finally {
+    loading2.value = false
+  }
+}
+
+function handleSelectDays(days) {
+  fetchPrices(days)
+}
+
+
+onMounted(() => {
+  fetchMerch()
+  fetchPrices(7)
+})
 </script>
 
 <template>
@@ -61,6 +94,13 @@ const confirmDelete = async () => {
     <p><strong>Uuid:</strong> {{ merchDetails.merch_uuid }}</p>
     <p><strong>Name:</strong> {{ merchDetails.name }}</p>
 
+    <n-divider title-placement="left">Prices</n-divider>
+    <PeriodSelector @days="handleSelectDays" />
+
+    <div style="height: 400px; position: relative">
+      <ChartBlock :charts-data="prices" />
+    </div>
+
     <n-divider title-placement="left">Surugaya</n-divider>
     <p><strong>Link:</strong> {{ merchDetails.origin_surugaya.link }}</p>
     <p><strong>Cookie values:</strong> {{ merchDetails.origin_surugaya.cookie_values }}</p>