ledger list clean + fix

src/ledger/CreateLedgerModal.vue

@@ -1,24 +1,28 @@
 <script setup lang="ts">
 
 import {computed, ref} from "vue";
+import {storeToRefs} from "pinia";
 import {COMBINING_LEDGER, Ledger, LedgerType, MAIN_LEDGER, useLedgersStore} from "./ledger";
 import {Modal} from "@/components";
 import LedgerLine from "./LedgerLine.vue";
 import {PlusIcon, TrashIcon} from '@heroicons/vue/24/outline';
 
-const {ledgers, createMain, createCombining} = useLedgersStore();
+const ledgersStore = useLedgersStore();
+const {ledgers} = storeToRefs(ledgersStore);
+const {createMain, createCombining} = ledgersStore;
 
 const modalOpen = ref<boolean>(false);
 
 const type = ref<LedgerType>(MAIN_LEDGER);
 const name = ref("");
 const members = ref<Ledger[]>([]);
-const selectedLedger = ref<Ledger | undefined>();
-const availableLedgers = computed(() => ledgers.filter(l => !members.value.includes(l)));
+const selectedLedger = ref<Ledger>();
+const availableLedgers = computed(() => ledgers.value.filter(l => !members.value.includes(l)));
 
 const addMember = () => {
   if (selectedLedger.value && !members.value.includes(selectedLedger.value)) {
     members.value = [...members.value, selectedLedger.value];
+    selectedLedger.value = undefined;
   }
 }
 
@@ -62,15 +66,15 @@ defineExpose({ open });
       </div>
       <div v-if="type === COMBINING_LEDGER" class="ms-4 mb-4">
         Member Ledgers:
-        <div v-for="ledger in members" class="flex">
-          <LedgerLine class="flex grow" :ledger="ledger" />
+        <div v-for="ledger in members" :key="ledger.ledgerId" class="flex">
+          <LedgerLine class="flex grow mb-2" :ledger="ledger" />
           <div class="flex justify-end me-4 ms-2">
-            <button class="btn-icon " @click="members = members.filter(m => m !== ledger)"><TrashIcon /></button>
+            <button class="btn-icon" @click="members = members.filter(m => m !== ledger)"><TrashIcon /></button>
           </div>
         </div>
         <div v-if="availableLedgers.length" class="flex">
           <select v-model="selectedLedger" class="grow">
-            <option v-for="ledger in availableLedgers" :value="ledger">{{ ledger.name }}</option>
+            <option v-for="ledger in availableLedgers" :key="ledger.ledgerId" :value="ledger">{{ ledger.name }}</option>
           </select>
           <div class="flex justify-end me-4 ms-2">
             <button class="btn-icon" @click="addMember"><PlusIcon /></button>

src/ledger/LedgerLine.vue

@@ -11,7 +11,7 @@ const props = defineProps<Props>();
 </script>
 
 <template>
-  <div class="flex ms-2 mb-2">
+  <div class="flex">
     <FolderOpenIcon v-if="ledger.type === COMBINING_LEDGER" class="w-4 me-1" />
     <div v-else class="w-4 me-1"/>
     <span>{{ ledger.name }}</span>