factor out origins colors

src/components/ChartBlock.vue

@@ -13,6 +13,7 @@ import {
 } from 'chart.js'
 import { Line } from 'vue-chartjs'
 import 'chartjs-adapter-date-fns'
+import { originColors } from '@/services/colors.js'
 
 ChartJS.register(
   Title,
@@ -33,11 +34,6 @@ const props = defineProps({
   },
 })
 
-const originColors = {
-  surugaya: '#2d3081',
-  mandarake: '#924646',
-}
-
 const chartData = ref({
   datasets: [],
 })

src/services/colors.js

@@ -0,0 +1,4 @@
+export const originColors = {
+  surugaya: '#2d3081',
+  mandarake: '#924646',
+};

src/views/ZeroPricesView.vue

@@ -1,69 +1,20 @@
 <script setup>
-import { onMounted, ref } from 'vue'
-import { useZeroPrices } from '@/api/zeroPrices.js'
-import ZeroPriceCard from '@/views/ZeroPricesView/ZeroPriceCard.vue'
-import ZeroPricesToolbar from '@/views/ZeroPricesView/ZeroPricesToolbar.vue'
-
-const { getZeroPrices } = useZeroPrices()
-
-const zeroPrices = ref([])
-const toDelete = ref([])
-
-const handleToggle = ({ id, merch_uuid, checked }) => {
-  if (checked) {
-    toDelete.value.push({ id, merch_uuid });
-  } else {
-    toDelete.value = toDelete.value.filter(item => item.id !== id);
-  }
-}
-
-const handleSelectAll = () => {
-  toDelete.value = zeroPrices.value.map(item => ({
-    id: item.id,
-    merch_uuid: item.merch_uuid
-  }))
-}
-
-const fetchZeroPrices = async () => {
-  try {
-    const response = await getZeroPrices()
-    zeroPrices.value = Array.isArray(response.data) ? response.data : []
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-const handleDeleted = () => {
-  toDelete.value = []
-  fetchZeroPrices()
-}
-
-onMounted(() => {
-  fetchZeroPrices()
-})
+  import ScrollToTopButton from '@/components/ScrollToTopButton.vue'
+  import TargetZeroesTab from '@/views/ZeroPricesView/TargetZeroesTab.vue'
+  import PeriodSelectTab from '@/views/ZeroPricesView/PeriodSelectTab.vue'
 </script>
 
 <template>
-  <div v-if="zeroPrices.length === 0">
-    <n-h2 class="text-center">Zero prices</n-h2>
-    <n-h3 class="text-center">No data</n-h3>
-  </div>
-  <div v-else>
-    <div class="sticky-search-container">
-      <ZeroPricesToolbar
-        :selected="toDelete"
-        @deleted="handleDeleted"
-        @selectAll="handleSelectAll"
-      />
-    </div>
-    <div v-for="item in zeroPrices" :key="item.created_at">
-      <ZeroPriceCard
-        :zero-price="item"
-        @toggle="handleToggle"
-        :checked="toDelete.some(t => t.id === item.id)"
-      />
-    </div>
-  </div>
+  <n-tabs type="line" animated>
+    <n-tab-pane name="Target zeroes" tab="Target zeroes">
+      <TargetZeroesTab />
+    </n-tab-pane>
+    <n-tab-pane name="Period select" tab="Period select">
+      <PeriodSelectTab />
+    </n-tab-pane>
+  </n-tabs>
+  <ScrollToTopButton />
 </template>
 
-<style scoped></style>
+<style scoped>
+</style>