date + fix sort

src/components/table/sort.ts

@@ -25,7 +25,7 @@ export const useSort = <T>(array: MaybeRefOrGetter<T[]>, options?: UseSortOption
         headerComponent: options?.headerComponent,
     }));
 
-    const sortedArray = computed(() => toValue(array).sort((a, b) => {
+    const sortedArray = computed(() => toValue(array).toSorted((a, b) => {
         if (sortKey.value === null || sortDirection.value === null) {
             return 0;
         }

src/formaters.ts

@@ -10,3 +10,5 @@ export const percentFormater = new Intl.NumberFormat("en-US", {
     minimumFractionDigits: 0,
     maximumFractionDigits: 0
 });
+
+export const formatEveDate = (date: Date) => `${date.getUTCFullYear()}.${date.getUTCMonth() + 1}.${date.getUTCDate()} ${date.getUTCHours()}:${date.getUTCMinutes()}`;

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>

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="(types, price, buy, sell) => buyModal?.open(types[0].type, { 'Price': price, 'Buy': buy, 'Sell': sell })" @sell="types => sellModal?.open(types)" />
+            <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>

src/pages/market/TypeInfo.vue

@@ -107,7 +107,7 @@ watch(useRoute(), async route => {
         </div>
         <div v-if="acquisitions && acquisitions.length > 0">
             <span>Acquisitions:</span>
-            <AcquisitionResultTable :items="acquisitions" infoOnly showAll :ignoredColums="['name', 'buy', 'sell']" />
+            <AcquisitionResultTable :items="acquisitions" infoOnly showAll :ignoredColums="['name', 'buy', 'sell']" defaultSortKey="date"/>
         </div>
     </template>
     <BuyModal ref="buyModal" />