date + fix sort

src/market/acquisition/AcquisitionResultTable.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { SortableHeader, useSort, VirtualScrollTable } from '@/components/table';
-import { formatIsk, percentFormater } from '@/formaters';
+import { formatEveDate, formatIsk, percentFormater } from '@/formaters';
 import { MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
 import { MinusIcon, PlusIcon } from '@heroicons/vue/24/outline';
 import { useStorage } from '@vueuse/core';
@@ -19,6 +19,7 @@ type Result = {
     quantity: number;
     precentProfit: number;
     iskProfit: number;
+    date: Date;
     acquisitions: AcquiredType[];
 }
 
@@ -27,6 +28,7 @@ interface Props {
     infoOnly?: boolean;
     showAll?: boolean;
     ignoredColums?: string[] | string;
+    defaultSortKey?: string;
 }
 
 interface Emits {
@@ -38,7 +40,8 @@ const props = withDefaults(defineProps<Props>(), {
     items: () => [],
     infoOnly: false,
     showAll: false,
-    ignoredColums: () => []
+    ignoredColums: () => [],
+    defaultSortKey: 'precentProfit',
 });
 defineEmits<Emits>();
 
@@ -73,6 +76,7 @@ const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() =>
                 quantity: r.quantity,
                 precentProfit,
                 iskProfit: r.price * precentProfit * r.remaining,
+                date: r.date,
                 acquisitions: [r]
             };
         });
@@ -104,12 +108,13 @@ const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() =>
             quantity: total,
             precentProfit,
             iskProfit: price * precentProfit * totalRemaining,
+            date: first.date,
             acquisitions: group
         });
     });
     return list;
 }), {
-    defaultSortKey: 'precentProfit',
+    defaultSortKey: props.defaultSortKey,
     defaultSortDirection: 'desc',
     ignoredColums: columnsToIgnore
 })
@@ -144,6 +149,7 @@ const getLineColor = (result: Result) => {
                     <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="date">Bought at</SortableHeader>
                     <SortableHeader v-bind="headerProps" sortKey="price">Bought Price</SortableHeader>
                     <SortableHeader v-bind="headerProps" sortKey="remaining">Remaining Amount</SortableHeader>
                     <SortableHeader v-bind="headerProps" sortKey="precentProfit">Profit (%)</SortableHeader>
@@ -152,7 +158,7 @@ const getLineColor = (result: Result) => {
                 </tr>
             </thead>
             <tbody>
-                <tr v-for="r in list" :key="r.data.id" :class="getLineColor(r.data)">
+                <tr v-for="r in list" :key="r.index" :class="getLineColor(r.data)">
                     <td v-if="showColumn('name')">
                         <div class="flex">
                             <MarketTypeLabel :id="r.data.type.id" :name="r.data.name" />
@@ -161,6 +167,7 @@ const getLineColor = (result: Result) => {
                     </td>
                     <td v-if="showColumn('buy')" class="text-right">{{ formatIsk(r.data.buy) }}</td>
                     <td v-if="showColumn('sell')" class="text-right">{{ formatIsk(r.data.sell) }}</td>
+                    <td v-if="showColumn('date')" class="text-right">{{ formatEveDate(r.data.date) }}</td>
                     <td v-if="showColumn('price')" class="text-right">{{ formatIsk(r.data.price) }}</td>
                     <td v-if="showColumn('remaining')" class="text-right">{{ r.data.remaining }}/{{ r.data.quantity }}</td>
                     <td v-if="showColumn('precentProfit')" class="text-right">{{ percentFormater.format(r.data.precentProfit) }}</td>