feat(#10): Add per-ledger acquisitions view + ledger column

src/pages/market/Acquisitions.vue

@@ -1,42 +1,15 @@
 <script setup lang="ts">
-import {getMarketTypes, MarketTypePrice, useApraisalStore} from "@/market";
-import {AcquiredType, AcquisitionResultTable, BuyModal, SellModal, useAcquiredTypesStore} from '@/market/acquisition';
-import {ref, watch} from 'vue';
+import {AcquisitionsPanel, useAcquiredTypesStore} from '@/market/acquisition';
 import {ArrowPathIcon} from '@heroicons/vue/24/outline';
 import {useAutoRefresh} from '@/composables';
 
-const buyModal = ref<typeof BuyModal>();
-const sellModal = ref<typeof SellModal>();
-
-const apraisalStore = useApraisalStore();
 const acquiredTypesStore = useAcquiredTypesStore();
-const items = ref<AcquiredType[]>([]);
 
 const refresh = async () => {
   await acquiredTypesStore.refresh();
 }
 
 const {active: autoRefresh, toggle: toggleAutoRefresh} = useAutoRefresh(refresh, 5 * 60 * 1000);
-
-watch(() => acquiredTypesStore.acquiredTypes, async itms => {
-    if (itms.length === 0) {
-        return;
-    }
-
-    const prices = await apraisalStore.getPrices(await getMarketTypes([...new Set(itms.map(i => i.type))]));
-
-    items.value = itms.map(i => {
-        const price = prices.find(p => p.type.id === i.type) as MarketTypePrice;
-        
-        return {
-            ...i,
-            type: price.type,
-            buy: price.buy,
-            sell: price.sell
-        };
-    });
-}, { immediate: true })
-
 </script>
 
 <template>
@@ -49,10 +22,6 @@ watch(() => acquiredTypesStore.acquiredTypes, async itms => {
                 </button>
             </div>
         </div>
-        <template v-if="items.length > 0">
-            <AcquisitionResultTable :items="items" @buy="(types, price, buy, sell) => buyModal?.open(types[0].type, { 'Price': price, 'Buy': buy, 'Sell': sell })" @sell="types => sellModal?.open(types)" ignoredColums="date" />
-            <BuyModal ref="buyModal" />
-            <SellModal ref="sellModal" />
-        </template>
+        <AcquisitionsPanel :items="acquiredTypesStore.acquiredTypes" ignoredColums="date" />
     </div>
 </template>

src/pages/market/TypeInfo.vue

@@ -40,9 +40,10 @@ const result = computedAsync(async () => {
 const acquisitions = computedAsync(async () => {
     const p = price.value;
     
-    return !p ? [] : (await acquisitionApi.findAllAcquisitions(item.value?.id, true)).data
+    return !p ? [] : (await acquisitionApi.findAllAcquisitions(undefined, item.value?.id, true)).data
         .map(a => ({
           id: a.acquisitionId,
+          ledgerId: a.ledgerId,
           quantity: a.quantity,
           remaining: a.remaining,
           price: a.unitCost,