cleanup

src/market/Market.vue

@@ -1,20 +1,11 @@
 <script setup lang="ts">
-import { formatIsk, percentFormater } from '@/formaters';
-import { SortableHeader, useSort } from '@/table';
-import { copyToClipboard } from '@/utils';
-import { computed, ref } from 'vue';
-import { getHistoryQuartils, jitaId } from ".";
-import { MarketType, searchMarketType } from "./type/MarketType";
-
-type Result = {
-    type: MarketType,
-    q1: number,
-    median: number,
-    q3: number,
-}
+import { ref } from 'vue';
+import { getHistoryQuartils, jitaId, MarketResult } from ".";
+import MarketReultTable from "./MarketResultTable.vue";
+import { searchMarketType } from "./type";
 
 const item = ref("");
-const result = ref<Result[]>([]);
+const result = ref<MarketResult[]>([]);
 const addItem = async () => {
     const type = await searchMarketType(item.value);
     const quartils = await getHistoryQuartils(jitaId, type.id);
@@ -25,56 +16,20 @@ const addItem = async () => {
         median: quartils[1],
         q3: quartils[2],
     }];
+    item.value = "";
 }
-const { sortedArray, headerProps } = useSort(computed(() => result.value.map(r => ({
-    typeID: r.type.id,
-    name: r.type.name,
-    q1: r.q1,
-    mmedian: r.median,
-    q3: r.q3,
-    percent: r.q3 / r.q1,
-    icon: `https://images.evetech.net/types/${r.type.id}/icon`,
-}))), {
-    defaultSortKey: 'name',
-    defaultSortDirection: 'asc'
-})
-
 </script>
 
 <template>
     <div class="grid mb-2 mt-4">
         <div>
             <span>Item: </span>
-            <input type="text" v-model="item" />
+            <input type="text" class="w-96" v-model="item" />
             <button class="justify-self-end ms-2" @click="addItem">Add</button>
         </div>
     </div>
     <template v-if="result.length > 0">
         <hr />
-        <div class="grid mt-2">
-            <table>
-                <thead>
-                    <tr>
-                        <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
-                        <SortableHeader v-bind="headerProps" sortKey="q1">Q1</SortableHeader>
-                        <SortableHeader v-bind="headerProps" sortKey="median">Median</SortableHeader>
-                        <SortableHeader v-bind="headerProps" sortKey="q3">Q3</SortableHeader>
-                        <SortableHeader v-bind="headerProps" sortKey="percent">Percent</SortableHeader>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-for="r in sortedArray" :key="r.typeID" class="cursor-pointer" @click="copyToClipboard(r.name)">
-                        <td>
-                            <img :src="`https://images.evetech.net/types/${r.typeID}/icon`" class="inline-block w-5 h-5" />
-                            {{ r.name }}
-                        </td>
-                        <td class="text-right">{{ formatIsk(r.q1) }}</td>
-                        <td class="text-right">{{ formatIsk(r.mmedian) }}</td>
-                        <td class="text-right">{{ formatIsk(r.q3) }}</td>
-                        <td class="text-right">{{  percentFormater.format(r.percent) }}</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+        <MarketReultTable :result="result" />
     </template>
 </template>