Fix remove from multiple acquisitions

src/market/acquisition/AcquisitionResultTable.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { SortableHeader, useSort } from '@/components/table';
 import { formatIsk, percentFormater } from '@/formaters';
-import { MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
+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';
@@ -9,8 +9,8 @@ import { AcquiredType } from './AcquiredType';
 import AcquisitionQuantilsTooltip from './AcquisitionQuantilsTooltip.vue';
 
 type Result = {
-    type: AcquiredType;
+    id: number;
-    typeID: number;
+    type: MarketType;
     name: string;
     buy: number;
     sell: number;
@@ -19,6 +19,7 @@ type Result = {
     quantity: number;
     precentProfit: number;
     iskProfit: number;
+    acquisitions: AcquiredType[];
 }
 
 interface Props {
@@ -28,8 +29,8 @@ interface Props {
 }
 
 interface Emits {
-    (e: 'buy', type: AcquiredType, price: number, buy: number, sell: number): void;
+    (e: 'buy', type: AcquiredType[], price: number, buy: number, sell: number): void;
-    (e: 'sell', type: AcquiredType): void;
+    (e: 'sell', type: AcquiredType[]): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -51,16 +52,17 @@ const filteredItems = props.items.filter(r => r.type.name.toLowerCase().includes
             const precentProfit = marketTaxStore.calculateProfit(r.price, r.sell);
 
             return {
-                type: r,
+                id: r.id,
-                typeID: r.type.id,
+                type: r.type,
-                name: r.type.name,
+                name: r.name,
                 buy: r.buy,
                 sell: r.sell,
                 price: r.price,
                 remaining: r.remaining,
                 quantity: r.quantity,
                 precentProfit,
-                iskProfit: r.price * precentProfit * r.remaining
+                iskProfit: r.price * precentProfit * r.remaining,
+                acquisitions: [r]
             };
         });
     }
@@ -69,28 +71,29 @@ const filteredItems = props.items.filter(r => r.type.name.toLowerCase().includes
     const groups = Map.groupBy(filteredItems, r => r.type.id);
 
     groups.forEach((group, typeID) => {
-        const oldest = group.reduce((acc: AcquiredType | undefined, r: AcquiredType) => (acc && acc.date < r.date) ? acc : r, undefined);
+        const first = group[0];
 
-        if (!oldest) {
+        if (!first) {
             return;
         }
 
         const total = group.reduce((acc, r) => acc + r.quantity, 0);
         const totalRemaining = group.reduce((acc, r) => acc + r.remaining, 0);
         const price = group.reduce((acc, r) => acc + r.price * r.remaining, 0) / totalRemaining;
-        const precentProfit = marketTaxStore.calculateProfit(price, oldest.sell);
+        const precentProfit = marketTaxStore.calculateProfit(price, first.sell);
 
         list.push({
-            type: oldest,
+            id: typeID,
-            typeID,
+            type: first.type,
-            name: oldest.type.name,
+            name: first.type.name,
-            buy: oldest.buy,
+            buy: first.buy,
-            sell: oldest.sell,
+            sell: first.sell,
             price: price,
             remaining: totalRemaining,
             quantity: total,
             precentProfit,
-            iskProfit: price * precentProfit * totalRemaining
+            iskProfit: price * precentProfit * totalRemaining,
+            acquisitions: group
         });
     });
     return list;
@@ -136,11 +139,11 @@ const getLineColor = (result: Result) => {
             </tr>
         </thead>
         <tbody>
-            <tr v-for="r in sortedArray" :key="r.type.id" :class="getLineColor(r)">
+            <tr v-for="r in sortedArray" :key="r.id" :class="getLineColor(r)">
                 <td>
                     <div class="flex">
-                        <MarketTypeLabel :id="r.typeID" :name="r.name" />
+                        <MarketTypeLabel :id="r.type.id" :name="r.name" />
-                        <AcquisitionQuantilsTooltip :id="r.typeID" :buy="r.buy" :sell="r.sell" />
+                        <AcquisitionQuantilsTooltip :id="r.type.id" :buy="r.buy" :sell="r.sell" />
                     </div>
                 </td>
                 <td class="text-right">{{ formatIsk(r.buy) }}</td>
@@ -150,8 +153,8 @@ const getLineColor = (result: Result) => {
                 <td class="text-right">{{ percentFormater.format(r.precentProfit) }}</td>
                 <td class="text-right">{{ formatIsk(r.iskProfit) }}</td>
                 <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('buy', r.acquisitions, r.price, r.buy, r.sell)"><PlusIcon /></button>
-                    <button class="btn-icon me-1" @click="$emit('sell', r.type)"><MinusIcon /></button>
+                    <button class="btn-icon me-1" @click="$emit('sell', r.acquisitions)"><MinusIcon /></button>
                 </td>
             </tr>
         </tbody>

src/market/acquisition/SellModal.vue

@@ -11,21 +11,35 @@ const acquiredTypesStore = useAcquiredTypesStore();
 const modalOpen = ref<boolean>(false);
 const type = ref<MarketType>();
 const count = ref(1);
-const id = ref<number>();
+const types = ref<AcquiredType[]>([]);
 
-const open = (t: AcquiredType) => {
+const open = (t: AcquiredType[]) => {
-    id.value = t.id;
+    if (t.length === 0) {
-    type.value = t.type;
+        return;
+    }
+
+    types.value = t.toSorted((a, b) => a.date.getTime() - b.date.getTime());
+    type.value = t[0].type;
     count.value = 1;
     modalOpen.value = true;
 }
-const remove = () => { 
+const remove = async () => { 
-    if (!id.value) {
+    if (!types.value) {
         modalOpen.value = false;
         return;
     }
 
-    acquiredTypesStore.removeAcquiredType(id.value, count.value);
+    let c = count.value;
+
+    for (const type of types.value) {
+        const remaining = type.remaining;
+
+        await acquiredTypesStore.removeAcquiredType(type.id, c);
+        c -= remaining;
+        if (c <= 0) {
+            break;
+        }
+    }
     modalOpen.value = false;
 }
 

src/market/acquisition/acquisition.ts

@@ -38,7 +38,7 @@ export const useAcquiredTypesStore = defineStore('market-acquisition', () => {
         const found = acquiredTypes.value.find(t => t.id === id);
 
         if (!found) {
-            return;
+            return 0;
         }
 
         const item = {
@@ -57,7 +57,7 @@ export const useAcquiredTypesStore = defineStore('market-acquisition', () => {
         log.info(`Acquired type ${item.id} remaining: ${item.remaining}`, item);
     };
     
-    marbasAxiosInstance.get<MarbasAcquiredType[]>(endpoint).then(res => acquiredTypes.value = res.data);
+    marbasAxiosInstance.get<MarbasAcquiredType[]>(endpoint).then(res => acquiredTypes.value = res.data.map(item => ({ ...item, date: new Date(item.date) })));
 
     return { acquiredTypes: types, addAcquiredType, removeAcquiredType };
 });

src/pages/market/Acquisitions.vue

@@ -35,7 +35,7 @@ watch(() => acquiredTypesStore.acquiredTypes, async itms => {
 <template>
     <div class="mt-4">
         <template v-if="items.length > 0">
-            <AcquisitionResultTable :items="items" @buy="(type, price, buy, sell) => buyModal?.open(type.type, { 'Price': price, 'Buy': buy, 'Sell': sell })" @sell="type => sellModal?.open(type)" />
+            <AcquisitionResultTable :items="items" @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>