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

src/market/acquisition/AcquisitionsPanel.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import {getMarketTypes, MarketTypePrice, useApraisalStore} from "@/market";
+import {ref, watch} from 'vue';
+import {AcquiredType} from './AcquiredType';
+import {RawAcquiredType} from './acquisition';
+import AcquisitionResultTable from './AcquisitionResultTable.vue';
+import BuyModal from './BuyModal.vue';
+import SellModal from './SellModal.vue';
+
+interface Props {
+    items: RawAcquiredType[];
+    ignoredColums?: string[] | string;
+}
+
+const props = defineProps<Props>();
+
+const buyModal = ref<typeof BuyModal>();
+const sellModal = ref<typeof SellModal>();
+
+const apraisalStore = useApraisalStore();
+const enriched = ref<AcquiredType[]>([]);
+
+watch(() => props.items, async itms => {
+    if (itms.length === 0) {
+        enriched.value = [];
+        return;
+    }
+
+    const types = await getMarketTypes([...new Set(itms.map(i => i.type))]);
+    const prices = await apraisalStore.getPrices(types);
+
+    enriched.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>
+    <template v-if="enriched.length > 0">
+        <AcquisitionResultTable :items="enriched" :ignoredColums="ignoredColums" @buy="(types, price, buy, sell) => buyModal?.open(types[0].type, { 'Price': price, 'Buy': buy, 'Sell': sell })" @sell="types => sellModal?.open(types)" />
+        <BuyModal ref="buyModal" />
+        <SellModal ref="sellModal" />
+    </template>
+</template>