ledger view page structure

src/pages/ledger/ListLedgerTransactions.vue

@@ -1,29 +1,22 @@
 <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 {findAllTransactionInLeger, TransferTypes, useLedgerParam} 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 {ledgerId, ledger} = useLedgerParam();
 
 const transactions = computedAsync<TransactionResponse[]>(async () => {
-  if (ledger.value) {
-    return await findAllTransactionInLeger(ledger.value.ledgerId);
+  if (ledgerId.value) {
+    return await findAllTransactionInLeger(ledgerId.value);
   }
   return [];
 }, []);
 
 const getIskBalance = (transaction: TransactionResponse) => {
-  const ledgerId = ledger.value?.ledgerId;
-
-  if (!ledgerId) {
+  if (!ledgerId.value) {
     return 0;
   }
 
@@ -31,29 +24,15 @@ const getIskBalance = (transaction: TransactionResponse) => {
 
   for (const transfer of transaction.transfers) {
     if (transfer.type === TransferTypes.Isk) {
-      if (transfer.toLedgerId === ledgerId) {
+      if (transfer.toLedgerId === ledgerId.value) {
         balance += transfer.amount;
-      } else if (transfer.fromLedgerId === ledgerId) {
+      } else if (transfer.fromLedgerId === ledgerId.value) {
         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>

src/pages/ledger/ViewLedger.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import {RouterLink, RouterView} from 'vue-router';
+import {useLedgerParam} from "@/ledger";
+import {routeNames} from "@/routes.ts";
+
+const {ledgerId, ledger} = useLedgerParam();
+
+</script>
+
+<template>
+  <div class="mt-4">
+    <div class="flex border-b-2 border-emerald-500">
+      <RouterLink :to="{name: routeNames.viewLedgerBalance}" class="tab">
+        <span>Balance</span>
+      </RouterLink>
+      <RouterLink :to="{name: routeNames.listLedgerTransactions}" class="tab">
+        <span>Transactions</span>
+      </RouterLink>
+    </div>
+    <RouterView />
+  </div>
+</template>

src/pages/ledger/ViewLedgerBalance.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import {useLedgerParam} from "@/ledger";
+
+const {ledgerId, ledger} = useLedgerParam();
+
+</script>
+
+<template>
+  <div class="mt-4">
+  </div>
+</template>