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>