Acquisitions in typeinfo

src/market/acquisition/AcquisitionResultTable.vue

@@ -22,6 +22,7 @@ type Result = {
 
 interface Props {
     items?: AcquiredType[];
+    infoOnly?: boolean;
 }
 
 interface Emits {
@@ -30,7 +31,8 @@ interface Emits {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    items: () => []
+    items: () => [],
+    infoOnly: false
 });
 defineEmits<Emits>();
 
@@ -69,7 +71,7 @@ const getLineColor = (result: Result) => {
 </script>
 
 <template>
-    <div class="flex">
+    <div class="flex" v-if="!infoOnly">
         <div class="flex justify-self-end mb-2 mt-4 ms-auto">
             <TaxInput />
             <div class="end">
@@ -92,7 +94,7 @@ const getLineColor = (result: Result) => {
                 <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>
+                <th v-if="!infoOnly"></th>
             </tr>
         </thead>
         <tbody>
@@ -109,7 +111,7 @@ const getLineColor = (result: Result) => {
                 <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">
+                <td class="text-right" v-if="!infoOnly">
                     <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>

src/pages/market/TypeInfo.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ClipboardButton } from '@/components';
 import { MarketType, MarketTypeInput, getMarketType, useApraisalStore } from "@/market";
-import { BuyModal } from '@/market/acquisition';
+import { AcquisitionResultTable, BuyModal, useAcquiredTypesStore } from '@/market/acquisition';
 import { TrackingResultTable, createResult, useMarketTrackingStore } from '@/market/tracking';
 import { BookmarkIcon, BookmarkSlashIcon, ShoppingCartIcon } from '@heroicons/vue/24/outline';
 import { computedAsync } from '@vueuse/core/index.cjs';
@@ -20,8 +20,21 @@ const apraisalStore = useApraisalStore();
 const price = computedAsync(() => item.value ? apraisalStore.getPrice(item.value) : undefined);
 const marketTrackingStore = useMarketTrackingStore();
 const result = computedAsync(async () => item.value && price.value ? await createResult(item.value?.id, price.value) : undefined);
+const acquiredTypesStore = useAcquiredTypesStore();
 
 const isTracked = computed(() => item.value ? marketTrackingStore.types.includes(item.value.id) : false);
+const acquisitions = computed(() => {
+    const p = price.value;
+    
+    return !p ?[] : acquiredTypesStore.types
+        .filter(t => t.type === item.value?.id)
+        .map(i => ({
+            ...i,
+            type: p.type,
+            buy: p.buy,
+            sell: p.sell
+        }));
+});
 const toogleTracking = () => {
     if (!item.value) {
         return;
@@ -88,7 +101,14 @@ watch(useRoute(), async route => {
                 <p v-if="item.description" class="text-sm">{{ item.description }}</p>
             </div>
         </div>
-        <TrackingResultTable v-if="result" :items="[result]" infoOnly />
+        <div v-if="result" class="mb-4">
+            <span>Market Info:</span>
+            <TrackingResultTable :items="[result]" infoOnly />
+        </div>
+        <div v-if="acquisitions">
+            <span>Acquisitions:</span>
+            <AcquisitionResultTable :items="acquisitions" infoOnly />
+        </div>
     </template>
     <BuyModal ref="buyModal" />
 </template>