ledger list and modal

src/ledger/CreateLedgerModal.vue

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

src/ledger/LedgerLine.vue

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

src/style.css

@@ -14,9 +14,12 @@
     button, a.button {
         @apply py-0.5 px-2 border rounded bg-slate-600 hover:bg-slate-700;
     }
-    input {
+    input, select {
         @apply border bg-slate-500 rounded px-1;
     }
+    option {
+        @apply bg-slate-500;
+    }
     textarea {
         @apply border rounded bg-slate-500 w-full;
     }