ledger view page structure

package.json

@@ -14,6 +14,7 @@
     "@vueuse/components": "^14.3.0",
     "@vueuse/core": "^14.3.0",
     "@vueuse/integrations": "^14.3.0",
+    "@vueuse/router": "^14.3.0",
     "axios": "^1.4.0",
     "axios-rate-limit": "^1.3.1",
     "gemory": "file:",

src/ledger/LedgerLabel.vue

@@ -3,7 +3,7 @@
 import {isCombined, Ledger} from "@/ledger/ledger.ts";
 import {FolderOpenIcon} from '@heroicons/vue/24/outline';
 import {RouterLink} from "vue-router";
-import {routeNames} from "@/routes.ts";
+import {routeNames} from "@/routes";
 
 interface Props {
   ledger: Ledger;
@@ -17,7 +17,7 @@ const props = defineProps<Props>();
   <div class="flex">
     <FolderOpenIcon v-if="isCombined(ledger)" class="w-4 me-1" />
     <div v-else class="w-4 me-1"/>
-    <RouterLink v-if="link" :to="{name: routeNames.listLedgerTransactions, params: {ledgerId: ledger.ledgerId}}">{{ ledger.name }}</RouterLink>
+    <RouterLink v-if="link" :to="{name: routeNames.viewLedger, params: {ledgerId: ledger.ledgerId}}">{{ ledger.name }}</RouterLink>
     <span v-else>{{ ledger.name }}</span>
   </div>
 </template>

src/ledger/ledger.ts

@@ -12,8 +12,9 @@ import {
     UpdateMainLedgerRequest
 } from "@/generated/mammon";
 import {defineStore} from "pinia";
-import {ref, triggerRef} from "vue";
+import {computed, ref, triggerRef} from "vue";
 import {ledgerApi, transactionApi} from "@/mammon";
+import {useRouteParams} from "@vueuse/router";
 
 export const LedgerTypes = LedgerResponseTypeEnum;
 
@@ -76,3 +77,10 @@ export const useLedgersStore = defineStore('ledgers', () => {
 
 export const findAllTransactionInLeger = (ledger: Ledger | string): Promise<TransactionResponse[]> => transactionApi.finAllTransactionsInLedger(typeof ledger == 'string' ? ledger : ledger.ledgerId).then(response => response.data)
 
+export const useLedgerParam = () => {
+    const {findById} = useLedgersStore();
+    const ledgerId = useRouteParams<string, string>('ledgerId', '', { transform: v => typeof v === 'string' ? v : v[0]});
+    const ledger = computed(() => findById(ledgerId.value))
+
+    return {ledgerId, ledger};
+}

src/pages/ledger/ListLedgerTransactions.vue

@@ -1,29 +1,22 @@
 <script setup lang="ts">
 
-import {ref, watch} from "vue";
+import {findAllTransactionInLeger, TransferTypes, useLedgerParam} from "@/ledger";
-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 {ledgerId, ledger} = useLedgerParam();
-
-const ledger = ref<Ledger>();
 
 const transactions = computedAsync<TransactionResponse[]>(async () => {
-  if (ledger.value) {
+  if (ledgerId.value) {
-    return await findAllTransactionInLeger(ledger.value.ledgerId);
+    return await findAllTransactionInLeger(ledgerId.value);
   }
   return [];
 }, []);
 
 const getIskBalance = (transaction: TransactionResponse) => {
-  const ledgerId = ledger.value?.ledgerId;
+  if (!ledgerId.value) {
-
-  if (!ledgerId) {
     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>

src/routes.ts

@@ -3,7 +3,9 @@ import {RouteRecordRaw} from 'vue-router';
 export const routeNames = {
     home: 'home',
     callback: 'callback',
-    listLedgerTransactions: 'list-ledger-tTransactions',
+    viewLedger: 'view-ledger',
+    viewLedgerBalance: 'view-ledger-balance',
+    listLedgerTransactions: 'list-ledger-transactions',
     listRuleBooks: 'list-rule-books',
     newRuleBook: 'new-rule-book',
     editRuleBook: 'edit-rule-book',
@@ -18,11 +20,15 @@ export const routes: RouteRecordRaw[] = [
 
     {path: '/ledgers', component: () => import('@/pages/Ledgers.vue'), children: [
         {path: '', component: () => import('@/pages/ledger/ListLedgers.vue')},
-        {path: ':ledgerId/transactions', name: routeNames.listLedgerTransactions, component: () => import('@/pages/ledger/ListLedgerTransactions.vue')},
+        {path: ':ledgerId',  component: () => import('./pages/ledger/ViewLedger.vue'), children: [
+            {path: '', name: routeNames.viewLedger, redirect: {name: routeNames.viewLedgerBalance}},
+            {path: 'balance', name: routeNames.viewLedgerBalance, component: () => import('@/pages/ledger/ViewLedgerBalance.vue')},
+            {path: 'transactions', name: routeNames.listLedgerTransactions, component: () => import('@/pages/ledger/ListLedgerTransactions.vue')},
+        ]},
     ]},
 
     {path: '/rules', component: () => import('@/pages/Rules.vue'), children: [
-        {path: '', redirect: '/rule-books'},
+        {path: '', redirect: {name: routeNames.listRuleBooks}},
         {path: '/rule-books', children: [
             {path: '', name: routeNames.listRuleBooks, component: () => import('@/pages/rules/ListRuleBooks.vue')},
             {path: 'new', name: routeNames.newRuleBook, component: () => import('@/pages/rules/EditRuleBook.vue')},
@@ -35,7 +41,7 @@ export const routes: RouteRecordRaw[] = [
     ]},
 
     {path: '/market', component: () => import('@/pages/Market.vue'), children: [
-        {path: '', redirect: '/market/types'},
+        {path: '', redirect: {name: routeNames.marketTypes}},
         {path: 'types/:type?', name: routeNames.marketTypes, component: () => import('@/pages/market/TypeInfo.vue')},
         {path: 'tracking', component: () => import('@/pages/market/Tracking.vue')},
         {path: 'acquisitions', component: () => import('@/pages/market/Acquisitions.vue')},