character in transaction list

src/pages/ledger/ListLedgerTransactions.vue

@@ -3,13 +3,15 @@
 import {findAllTransactionInLeger, useLedgerParam} from "@/ledger";
 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";
 import {TransferList, TransferTypes} from "@/transaction";
 import {Dropdown} from "@/components";
+import {CharacterLabel, useCharactersStore} from "@/characters";
+import {formatEveDate} from "@/formaters.ts";
 
 const {ledgerId} = useLedgerParam();
+const {findById} = useCharactersStore();
 
 const transactions = computedAsync<TransactionResponse[]>(async () => {
   if (ledgerId.value) {
@@ -18,15 +20,18 @@ const transactions = computedAsync<TransactionResponse[]>(async () => {
   return [];
 }, []);
 
-const { sortedArray, headerProps } = useSort(() => transactions.value.map(transaction => {
+const { sortedArray, headerProps } = useSort(computedAsync(() => Promise.all(transactions.value.map(async transaction => {
+  const character = await findById(transaction.characterId);
   return {
+    character,
+    characterName: character?.name ?? "",
     transactionId: transaction.transactionId,
     description: transaction.description,
     date: new Date(transaction.datetime),
     balance: getIskBalance(transaction),
     transfers: transaction.transfers
   }
-}), { defaultSortKey: 'date', defaultSortDirection: 'desc' });
+})), []), { defaultSortKey: 'date', defaultSortDirection: 'desc' });
 
 const getIskBalance = (transaction: TransactionResponse) => {
   if (!ledgerId.value) {
@@ -54,6 +59,7 @@ const getIskBalance = (transaction: TransactionResponse) => {
       <template #default="{ list }">
         <thead>
         <tr>
+          <SortableHeader v-bind="headerProps" sortKey="characterName">Character</SortableHeader>
           <SortableHeader v-bind="headerProps" sortKey="date">Date</SortableHeader>
           <SortableHeader v-bind="headerProps" sortKey="balance">Isk Change</SortableHeader>
           <SortableHeader v-bind="headerProps" sortKey="description">Description</SortableHeader>
@@ -61,6 +67,9 @@ const getIskBalance = (transaction: TransactionResponse) => {
         </thead>
         <tbody>
         <tr v-for="t in list" :key="t.data.transactionId">
+          <td>
+            <CharacterLabel v-if="t.data.character" :character="t.data.character" />
+          </td>
           <td>
             <Dropdown class="transfer-dropdown">
               <template #button>