From 9aa37b355e8eccc3d44922731136da0a91d01df0 Mon Sep 17 00:00:00 2001
From: Sirttas <calloch.gael@gmail.com>
Date: Sun, 2 Jun 2024 16:51:06 +0200
Subject: [PATCH] tracking progress bar

---
 src/components/ProgressBar.vue | 19 +++++++++++++++++++
 src/components/index.ts        |  1 +
 src/pages/market/Tracking.vue  | 10 ++++++----
 3 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ProgressBar.vue

diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
new file mode 100644
index 0000000..1ac0b04
--- /dev/null
+++ b/src/components/ProgressBar.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+
+interface Props {
+    value: number;
+    total: number;
+}
+
+const props = defineProps<Props>();
+
+const percentage = computed(() => (props.value / props.total) * 100);
+</script>
+
+<template>
+    <div class="w-full bg-gray-600 rounded-full h-2.5">
+        <div class="bg-emerald-600 h-2.5 rounded-full" :style="{ width: percentage + '%'}" />
+    </div>
+</template>
diff --git a/src/components/index.ts b/src/components/index.ts
index a554a86..cd22d46 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -2,6 +2,7 @@ export { default as ClipboardButton } from './ClipboardButton.vue';
 export { default as Dropdown } from './Dropdown.vue';
 export { default as LoadingSpinner } from './LoadingSpinner.vue';
 export { default as Modal } from './Modal.vue';
+export { default as ProgressBar } from './ProgressBar.vue';
 export { default as SliderCheckbox } from './SliderCheckbox.vue';
 export { default as Tooltip } from './tooltip/Tooltip.vue';
 
diff --git a/src/pages/market/Tracking.vue b/src/pages/market/Tracking.vue
index d55c546..d487e59 100644
--- a/src/pages/market/Tracking.vue
+++ b/src/pages/market/Tracking.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Modal, ProgressBar } from "@/components";
 import { MarketType, MarketTypeInput, MarketTypePrice, getHistory, getMarketTypes, useApraisalStore } from "@/market";
 import { BuyModal } from '@/market/acquisition';
 import { TrackingResult, TrackingResultTable, createResult, useMarketTrackingStore } from '@/market/tracking';
@@ -56,10 +57,6 @@ watch(() => marketTrackingStore.types, async t => {
 
     const prices = await apraisalStore.getPrices(await getMarketTypes(typesToLoad));
 
-    items.value = [
-        ...items.value
-    ];
-
     typesToLoad.forEach(async i => items.value.push(await createResult(i, prices.find(p => p.type.id === i) as MarketTypePrice)));
 }, { immediate: true });
 </script>
@@ -76,5 +73,10 @@ watch(() => marketTrackingStore.types, async t => {
         <hr />
         <TrackingResultTable :items="items" @buy="(type, buy, sell) => buyModal?.open(type, { 'Buy': buy, 'Sell': sell })" @remove="removeItem" />
         <BuyModal ref="buyModal" />
+        <Modal :open="items.length > 0 && items.length < marketTrackingStore.types.length">
+            <div class="ms-auto me-auto mb-2 w-96">
+                <ProgressBar :value="items.length" :total="marketTrackingStore.types.length" />
+            </div>
+        </Modal>
     </template>
 </template>
\ No newline at end of file