ledger view page structure

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};
+}