transaction list display

src/pages/ledger/ListLedgerTransactions.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+
+import {ref, watch} from "vue";
+import {useRoute} from "vue-router";
+import log from "loglevel";
+import {findAllTransactionInLeger, Ledger, TransferTypes, useLedgersStore} from "@/ledger";
+import {computedAsync} from "@vueuse/core";
+import {TransactionResponse} from "@/generated/mammon";
+import {formatEveDate} from "@/formaters.ts";
+import {IskLabel} from "@/market";
+
+const {findById, refresh} = useLedgersStore();
+
+const ledger = ref<Ledger>();
+
+const transactions = computedAsync<TransactionResponse[]>(async () => {
+  if (ledger.value) {
+    return await findAllTransactionInLeger(ledger.value.ledgerId);
+  }
+  return [];
+}, []);
+
+const getIskBalance = (transaction: TransactionResponse) => {
+  const ledgerId = ledger.value?.ledgerId;
+
+  if (!ledgerId) {
+    return 0;
+  }
+
+  let balance = 0;
+
+  for (const transfer of transaction.transfers) {
+    if (transfer.type === TransferTypes.Isk) {
+      if (transfer.toLedgerId === ledgerId) {
+        balance += transfer.amount;
+      } else if (transfer.fromLedgerId === ledgerId) {
+        balance -= transfer.amount;
+      }
+    }
+  }
+  return balance;
+}
+
+watch(useRoute(), async route => {
+  if (route.params.ledgerId) {
+    const id = typeof route.params.ledgerId === 'string' ? route.params.ledgerId : route.params.ledgerId[0];
+
+    await refresh() // FIXME
+
+    ledger.value = findById(id)
+    log.info('Loaded ledger:', ledger.value);
+  } else {
+    ledger.value = undefined;
+    log.info('No ledger to load');
+  }
+}, { immediate: true })
+</script>
+
+<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>
+  </div>
+</template>

src/pages/ledger/ListLedgers.vue

@@ -4,7 +4,7 @@ import {EditLedgerModal, LedgerLabel, useLedgersStore} from "@/ledger";
 import {storeToRefs} from "pinia";
 import {nextTick, ref} from "vue";
 import {PencilSquareIcon} from "@heroicons/vue/24/outline";
-import {formatIsk} from "@/formaters.ts";
+import {IskLabel} from "@/market";
 
 const {ledgers} = storeToRefs(useLedgersStore());
 
@@ -22,9 +22,9 @@ const openEdit = async (ledgerId: string) => {
 <template>
   <div class="mt-4">
     <div v-for="ledger in ledgers" :key="ledger.ledgerId" class="flex items-center mb-2">
-      <LedgerLabel :ledger="ledger" />
+      <LedgerLabel :ledger="ledger" :link="true" />
       <div class="flex grow">
-        <span class="ms-2">{{ formatIsk(ledger.balance) }}</span>
+        <IskLabel class="ms-2" :amount="ledger.balance" />
       </div>
       <button class="btn-icon ms-2" @click="openEdit(ledger.ledgerId)"><PencilSquareIcon /></button>
     </div>

src/pages/rules/ListCharacterRuleBooks.vue

@@ -12,7 +12,7 @@ const {characters} = storeToRefs(useCharactersStore());
   <div class="grid mb-2 mt-4">
     <div v-for="character in characters" :key="character.characterId" class="flex items-center mb-2">
       <CharacterLabel class="flex grow" :character="character" />
-      <RouterLink class="btn-icon ms-2" :to="{ name: routeNames.characterRulebook, params: { characterId: character.characterId } }"><PencilSquareIcon /></RouterLink>
+      <RouterLink class="btn-icon ms-2" :to="{ name: routeNames.editCharacterRulebook, params: { characterId: character.characterId } }"><PencilSquareIcon /></RouterLink>
     </div>
   </div>
 </template>