draft acquisition

src/market/acquisition/AcquisitionResultTable.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { SortableHeader, useSort } from '@/components/table';
+import { formatIsk, percentFormater } from '@/formaters';
+import { MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
+import { MinusIcon, PlusIcon } from '@heroicons/vue/24/outline';
+import { useStorage } from '@vueuse/core';
+import { computed, ref } from 'vue';
+import { AcquiredItem } from './AcquiredItem';
+import AcquisitionQuantilsTooltip from './AcquisitionQuantilsTooltip.vue';
+
+type Result = {
+    type: MarketType;
+    typeID: number;
+    name: string;
+    buy: number;
+    sell: number;
+    price: number;
+    count: number;
+    precentProfit: number;
+    iskProfit: number;
+}
+
+interface Props {
+    items?: AcquiredItem[];
+}
+
+interface Emits {
+    (e: 'buy', type: MarketType, price: number, buy: number, sell: number): void;
+    (e: 'sell', type: MarketType): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    items: () => []
+});
+defineEmits<Emits>();
+
+const marketTaxStore = useMarketTaxStore();
+
+const threshold = useStorage('market-axquisition-threshold', 10);
+const filter = ref("");
+const { sortedArray, headerProps } = useSort<Result>(computed(() => props.items
+    .filter(r => r.type.name.toLowerCase().includes(filter.value.toLowerCase()))
+    .map(r => {
+        const precentProfit = marketTaxStore.calculateProfit(r.price, r.sell);
+
+        return {
+            type: r.type,
+            typeID: r.type.id,
+            name: r.type.name,
+            buy: r.buy,
+            sell: r.sell,
+            price: r.price,
+            count: r.remaining,
+            precentProfit,
+            iskProfit: r.price * precentProfit * r.remaining
+        };
+    })), {
+        defaultSortKey: 'precentProfit',
+        defaultSortDirection: 'desc'
+    })
+const getLineColor = (result: Result) => {
+    if (result.precentProfit >= (threshold.value / 100)) {
+        return 'line-green';
+    } else if (result.precentProfit < 0) {
+        return 'line-red';
+    }
+    return '';
+}
+</script>
+
+<template>
+    <div class="flex">
+        <div class="flex justify-self-end mb-2 mt-4 ms-auto">
+            <TaxInput />
+            <div class="end">
+                <span>Profit Threshold: </span>
+                <input type="number" min="0" max="1000" step="1" v-model="threshold" />
+            </div>
+            <div class="end">
+                <span>Filter: </span>
+                <input type="search" class="w-96" v-model="filter" >
+            </div>
+        </div>
+    </div>
+    <table>
+        <thead>
+            <tr>
+                <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
+                <SortableHeader v-bind="headerProps" sortKey="buy">Buy</SortableHeader>
+                <SortableHeader v-bind="headerProps" sortKey="sell">Sell</SortableHeader>
+                <SortableHeader v-bind="headerProps" sortKey="price">Bought Price</SortableHeader>
+                <SortableHeader v-bind="headerProps" sortKey="count">Bought Amount</SortableHeader>
+                <SortableHeader v-bind="headerProps" sortKey="precentProfit">Profit (%)</SortableHeader>
+                <SortableHeader v-bind="headerProps" sortKey="iskProfit">Profit (ISK)</SortableHeader>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="r in sortedArray" :key="r.typeID" :class="getLineColor(r)">
+                <td>
+                    <div class="flex">
+                        <MarketTypeLabel :id="r.typeID" :name="r.name" />
+                        <AcquisitionQuantilsTooltip :id="r.typeID" :buy="r.buy" :sell="r.sell" />
+                    </div>
+                </td>
+                <td class="text-right">{{ formatIsk(r.buy) }}</td>
+                <td class="text-right">{{ formatIsk(r.sell) }}</td>
+                <td class="text-right">{{ formatIsk(r.price) }}</td>
+                <td class="text-right">{{ r.count }}</td>
+                <td class="text-right">{{  percentFormater.format(r.precentProfit) }}</td>
+                <td class="text-right">{{ formatIsk(r.iskProfit) }}</td>
+                <td class="text-right">
+                    <button class="btn-icon me-1" @click="$emit('buy', r.type, r.price, r.buy, r.sell)"><PlusIcon /></button>
+                    <button class="btn-icon me-1" @click="$emit('sell', r.type)"><MinusIcon /></button>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<style scoped lang="postcss">
+div.end {
+    @apply justify-self-end ms-2;
+}
+</style>@/components/table