tables display

src/pages/ledger/ListLedgerTransactions.vue

@@ -5,6 +5,7 @@ import {computedAsync} from "@vueuse/core";
 import {TransactionResponse} from "@/generated/mammon";
 import {formatEveDate} from "@/formaters.ts";
 import {IskLabel} from "@/market";
+import {SortableHeader, useSort, VirtualScrollTable} from "@/components/table";
 
 const {ledgerId} = useLedgerParam();
 
@@ -15,6 +16,15 @@ const transactions = computedAsync<TransactionResponse[]>(async () => {
   return [];
 }, []);
 
+const { sortedArray, headerProps } = useSort(() => transactions.value.map(transaction => {
+  return {
+    transactionId: transaction.transactionId,
+    description: transaction.description,
+    date: new Date(transaction.datetime),
+    balance: getIskBalance(transaction)
+  }
+}));
+
 const getIskBalance = (transaction: TransactionResponse) => {
   if (!ledgerId.value) {
     return 0;
@@ -37,10 +47,25 @@ const getIskBalance = (transaction: TransactionResponse) => {
 
 <template>
   <div class="mt-4">
-    <div class="flex items-end gap-2 mt-2" v-for="transaction in transactions" :key="transaction.transactionId">
-      <span>{{formatEveDate(new Date(transaction.datetime))}}</span>
-      <IskLabel :amount="getIskBalance(transaction)" />
-      <span>{{transaction.description}}</span>
-    </div>
+    <VirtualScrollTable  :list="sortedArray" :itemHeight="33" bottom="1rem">
+      <template #default="{ list }">
+        <thead>
+        <tr>
+          <SortableHeader v-bind="headerProps" sortKey="date">Date</SortableHeader>
+          <SortableHeader v-bind="headerProps" sortKey="balance">Balance</SortableHeader>
+          <SortableHeader v-bind="headerProps" sortKey="description">Description</SortableHeader>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="t in list" :key="t.data.transactionId">
+          <td>{{formatEveDate(t.data.date)}}</td>
+          <td class="text-right">
+            <IskLabel :amount="t.data.balance" />
+          </td>
+          <td>{{t.data.description}}</td>
+        </tr>
+        </tbody>
+      </template>
+    </VirtualScrollTable>
   </div>
 </template>

src/pages/ledger/ListLedgers.vue

@@ -9,7 +9,7 @@ import {SortableHeader, useSort, VirtualScrollTable} from "@/components/table";
 
 const {ledgers} = storeToRefs(useLedgersStore());
 
-const { sortedArray, headerProps } = useSort<Ledger>(ledgers)
+const { sortedArray, headerProps } = useSort<Ledger>(ledgers);
 
 const editModal = ref<typeof EditLedgerModal>();
 const editingLedgerId = ref("");

src/pages/ledger/ViewLedgerBalance.vue

@@ -2,7 +2,8 @@
 import {getLedgerBalance, useLedgerParam} from "@/ledger";
 import {computedAsync} from "@vueuse/core";
 import {BalanceResponse} from "@/generated/mammon";
-import {IskLabel, MarketTypeLabel} from "@/market";
+import {getMarketType, IskLabel, MarketTypeLabel} from "@/market";
+import {SortableHeader, useSort, VirtualScrollTable} from "@/components/table";
 
 const {ledgerId} = useLedgerParam();
 
@@ -13,16 +14,47 @@ const balance = computedAsync<BalanceResponse>(async () => {
   return undefined;
 });
 
+const { sortedArray, headerProps } = useSort(computedAsync(async () => {
+  const itemBalances = balance.value?.itemBalances;
+
+  if (!itemBalances) {
+    return [];
+  }
+
+  return await Promise.all(itemBalances.map(async i => {
+    const item = await getMarketType(i.typeId);
+
+    return {
+      ...i,
+      name: item.name
+    };
+  }));
+}, []));
+
 </script>
 
 <template>
   <div v-if="balance" class="mt-4">
-    <div class="border-b-1">
+    <div class="flex justify-end w-full">
       <IskLabel class="mb-2" :amount="balance.iskBalance" />
     </div>
-    <div v-for="item in balance.itemBalances" :key="item.typeId" class="mt-2 flex gap-2">
-      <MarketTypeLabel :id="item.typeId" />
-      <span>{{item.quantity}}</span>
-    </div>
+    <VirtualScrollTable :list="sortedArray" :itemHeight="33" bottom="1rem">
+      <template #default="{ list }">
+        <thead>
+        <tr>
+          <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
+          <SortableHeader v-bind="headerProps" sortKey="quantity">Balance</SortableHeader>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="i in list" :key="i.data.typeId">
+          <td>
+            <MarketTypeLabel :id="i.data.typeId" :name="i.data.name" />
+          </td>
+          <td class="text-right">{{i.data.quantity}}</td>
+        </tr>
+        </tbody>
+      </template>
+    </VirtualScrollTable>
   </div>
 </template>