edit ledger

src/pages/ledger/ListLedgers.vue

@@ -1,14 +1,29 @@
 <script setup lang="ts">
 
-import {LedgerLabel, useLedgersStore} from "@/ledger";
+import {CreateLedgerModal, LedgerLabel, useLedgersStore} from "@/ledger";
 import {storeToRefs} from "pinia";
+import {nextTick, ref} from "vue";
+import {PencilSquareIcon} from "@heroicons/vue/24/outline";
 
 const {ledgers} = storeToRefs(useLedgersStore());
 
+const editModal = ref<typeof CreateLedgerModal>();
+const editingLedgerId = ref(0);
+
+const openEdit = async (ledgerId: number) => {
+  editingLedgerId.value = ledgerId;
+  await nextTick();
+  editModal.value?.open();
+};
+
 </script>
 
 <template>
   <div class="mt-4">
-    <LedgerLabel v-for="ledger in ledgers" :key="ledger.ledgerId" class="mb-2" :ledger="ledger"/>
+    <div v-for="ledger in ledgers" :key="ledger.ledgerId" class="flex items-center mb-2">
+      <LedgerLabel class="grow" :ledger="ledger" />
+      <button class="btn-icon ms-2" @click="openEdit(ledger.ledgerId)"><PencilSquareIcon /></button>
+    </div>
   </div>
+  <CreateLedgerModal ref="editModal" :ledger-id="editingLedgerId" />
 </template>