From 540d4814d9073428a70ad05483daab3b392f8a39 Mon Sep 17 00:00:00 2001
From: Sirttas <calloch.gael@gmail.com>
Date: Tue, 21 May 2024 15:56:47 +0200
Subject: [PATCH] reprocess virtual scroll

---
 src/components/Modal.vue               |  1 -
 src/reprocess/ReprocessResultTable.vue | 49 +++++++++++++++-----------
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index c51fc37..a7bd193 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -55,5 +55,4 @@ useEventListener('keyup', e => {
 .fade-enter-active, .fade-leave-active {
     @apply transition-opacity;
 }
-
 </style>
diff --git a/src/reprocess/ReprocessResultTable.vue b/src/reprocess/ReprocessResultTable.vue
index 50ee9da..fc8d262 100644
--- a/src/reprocess/ReprocessResultTable.vue
+++ b/src/reprocess/ReprocessResultTable.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SortableHeader, useSort } from '@/components/table';
+import { SortableHeader, useSort, VirtualScrollTable } from '@/components/table';
 import { formatIsk, percentFormater } from '@/formaters';
 import { MarketTypeLabel } from '@/market/type';
 import { useStorage } from '@vueuse/core';
@@ -46,24 +46,31 @@ const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r =
             <input type="number" min="-100" max="100" step="1" v-model="threshold" />
         </div>
     </div>
-    <table>
-        <thead>
-            <tr>
-                <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="market">Market</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="materials">Materials</SortableHeader>
-                <SortableHeader v-bind="headerProps" sortKey="ratio">Percent</SortableHeader>
-            </tr>
-        </thead>
-        <tbody>
-            <tr v-for="r in sortedArray" :key="r.typeID" :class="{'line-green': r.ratio >= threshold / 100 }">
-                <td>
-                    <MarketTypeLabel :id="r.typeID" :name="r.name" />
-                </td>
-                <td class="text-right">{{ formatIsk(r.market) }}</td>
-                <td class="text-right">{{ formatIsk(r.materials) }}</td>
-                <td class="text-right">{{ percentFormater.format(r.ratio) }}</td>
-            </tr>
-        </tbody>
-    </table>
+    <VirtualScrollTable :list="sortedArray" :itemHeight="33"  bottom="1rem">
+        <template #default="{ list }">
+            <thead>
+                <tr>
+                    <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="market">Market</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="materials">Materials</SortableHeader>
+                    <SortableHeader v-bind="headerProps" sortKey="ratio">Percent</SortableHeader>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="r in list" :key="r.data.typeID" :class="{'line-green': r.data.ratio >= threshold / 100 }">
+                    <td>
+                        <MarketTypeLabel :id="r.data.typeID" :name="r.data.name" />
+                    </td>
+                    <td class="text-right">{{ formatIsk(r.data.market) }}</td>
+                    <td class="text-right">{{ formatIsk(r.data.materials) }}</td>
+                    <td class="text-right">{{ percentFormater.format(r.data.ratio) }}</td>
+                </tr>
+            </tbody>
+        </template>
+        <template #empty>
+            <div class="text-center mt-4">
+                <span>No items found</span>
+            </div>
+        </template>
+    </VirtualScrollTable>
 </template>