cleanup

src/market/Market.vue

@@ -1,20 +1,11 @@
 <script setup lang="ts">
-import { formatIsk, percentFormater } from '@/formaters';
+import { ref } from 'vue';
-import { SortableHeader, useSort } from '@/table';
+import { getHistoryQuartils, jitaId, MarketResult } from ".";
-import { copyToClipboard } from '@/utils';
+import MarketReultTable from "./MarketResultTable.vue";
-import { computed, ref } from 'vue';
+import { searchMarketType } from "./type";
-import { getHistoryQuartils, jitaId } from ".";
-import { MarketType, searchMarketType } from "./type/MarketType";
-
-type Result = {
-    type: MarketType,
-    q1: number,
-    median: number,
-    q3: number,
-}
 
 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">
+        <MarketReultTable :result="result" />
-            <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>
     </template>
 </template>

src/market/MarketResultTable.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { formatIsk, percentFormater } from '@/formaters';
+import { SortableHeader, useSort } from '@/table';
+import { copyToClipboard } from '@/utils';
+import { computed } from 'vue';
+import { MarketResult } from ".";
+import { MarketTypeLabel } from "./type";
+
+interface Props {
+    result?: MarketResult[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    result: () => []
+});
+const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r => ({
+    typeID: r.type.id,
+    name: r.type.name,
+    q1: r.q1,
+    mmedian: r.median,
+    q3: r.q3,
+    percent: r.q3 / r.q1
+}))), {
+    defaultSortKey: 'name',
+    defaultSortDirection: 'asc'
+})
+
+</script>
+
+<template>
+    <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>
+                        <MarketTypeLabel :id="r.typeID" :name="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>
+</template>

src/market/market.ts

@@ -1,4 +1,5 @@
 import { esiAxiosInstance } from "@/service";
+import { MarketType } from "./type";
 
 export const jitaId = 10000002;
 
@@ -11,6 +12,14 @@ export type MarketOrderHistory = {
     volume: number;
 }
 
+
+export type MarketResult = {
+    type: MarketType,
+    q1: number,
+    median: number,
+    q3: number,
+}
+
 export const getHistory = async (regionId: number, tyeId: number): Promise<MarketOrderHistory[]> =>  (await esiAxiosInstance.get(`/markets/${regionId}/history/`, { params: { type_id: tyeId } })).data;
 
 export const getHistoryQuartils = async (regionId: number, tyeId: number): Promise<[number, number, number]> => {

src/market/type/MarketTypeLabel.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+
+interface Props {
+    name?: string;
+    id?: number;
+}
+
+withDefaults(defineProps<Props>(), {
+    name: "",
+    id: 0
+});
+</script>
+
+<template>
+    <img v-if="id" :src="`https://images.evetech.net/types/${id}/icon`" class="inline-block w-5 h-5" />
+    <template v-if="name">
+        {{ name }}
+    </template> 
+</template>

src/market/type/index.ts

@@ -0,0 +1,3 @@
+export * from './MarketType';
+export { default as MarketTypeLabel } from './MarketTypeLabel.vue';
+

src/reprocess/ReprocessResultTable.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { formatIsk, percentFormater } from '@/formaters';
+import { MarketTypeLabel } from '@/market/type';
 import { SortableHeader, useSort } from '@/table';
 import { copyToClipboard } from '@/utils';
 import { useStorage } from '@vueuse/core';
@@ -50,8 +51,7 @@ const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r =
         <tbody>
             <tr v-for="r in sortedArray" :key="r.typeID" class="cursor-pointer" :class="{'bg-emerald-500': (useSellOrder ? r.sell_ratio : r.buy_ratio) >= threshold / 100 }" @click="copyToClipboard(r.name)">
                 <td>
-                    <img :src="`https://images.evetech.net/types/${r.typeID}/icon`" class="inline-block w-5 h-5" />
+                    <MarketTypeLabel :id="r.typeID" :name="r.name" />
-                    {{ r.name }}
                 </td>
                 <td class="text-right">{{ formatIsk(useSellOrder ? r.sell : r.buy) }}</td>
                 <td class="text-right">{{ formatIsk(useSellOrder ? r.sell_reprocess : r.buy_reprocess) }}</td>