edit ledger

src/ledger/CreateLedgerModal.vue

@@ -2,23 +2,32 @@
 
 import {computed, ref} from "vue";
 import {storeToRefs} from "pinia";
-import {COMBINING_LEDGER, Ledger, LedgerType, MAIN_LEDGER, useLedgersStore} from "./ledger";
+import {isCombining, Ledger, LedgerType, LedgerTypes, useLedgersStore} from "./ledger";
 import {Modal} from "@/components";
 import LedgerLabel from "./LedgerLabel.vue";
 import {PlusIcon, TrashIcon} from '@heroicons/vue/24/outline';
 
+interface Props {
+  ledgerId?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  ledgerId: 0
+});
+
 const ledgersStore = useLedgersStore();
 const {ledgers} = storeToRefs(ledgersStore);
-const {createMain, createCombining} = ledgersStore;
+const {findById, findAllById, createMain, createCombining, updateMain, updateCombining} = ledgersStore;
 
 const modalOpen = ref<boolean>(false);
 
-const type = ref<LedgerType>(MAIN_LEDGER);
+const type = ref<LedgerType>(LedgerTypes.Main);
 const name = ref("");
 const members = ref<Ledger[]>([]);
 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];
@@ -27,21 +36,54 @@ const addMember = () => {
 }
 
 const open = () => {
-  type.value = MAIN_LEDGER;
-  name.value = "";
-  members.value = [];
+  const ledger = isCreating.value ? undefined : findById(props.ledgerId);
+
+  if (ledger) {
+    type.value = ledger.type;
+    name.value = ledger.name;
+    members.value = isCombining(ledger) ? findAllById(ledger.memberLedgerIds) : [];
+  } else {
+    type.value = LedgerTypes.Main;
+    name.value = "";
+    members.value = [];
+  }
   modalOpen.value = true;
 }
 
-const canCreate = computed(() => name.value.trim().length > 0);
+const canSave = computed(() => name.value.trim().length > 0);
+const isCreating = computed(() => props.ledgerId === 0)
+const title = computed(() => {
+  if (isCreating.value) {
+    return `Creating ${type.value === LedgerTypes.Main ? 'Main' : 'Combining'} Ledger`
+  }
+  return `Updating ${name.value}`
+})
 
 const create = () => {
-  if (!canCreate.value) {
-    return;
-  } else if (type.value === MAIN_LEDGER) {
-    createMain({ name: name.value })
+  if (type.value === LedgerTypes.Main) {
+    createMain({name: name.value})
   } else {
-    createCombining({ name: name.value, memberLedgerIds: members.value.map(l => l.ledgerId) })
+    createCombining({name: name.value, memberLedgerIds: members.value.map(l => l.ledgerId)})
+  }
+}
+
+const update = () => {
+  if (type.value === LedgerTypes.Main) {
+    updateMain(props.ledgerId, {name: name.value})
+  } else {
+    updateCombining(props.ledgerId, {name: name.value, memberLedgerIds: members.value.map(l => l.ledgerId)})
+  }
+}
+
+const save = () => {
+  if (!canSave.value) {
+    return;
+  }
+
+  if (isCreating.value) {
+    create();
+  } else {
+    update();
   }
   modalOpen.value = false;
 }
@@ -51,24 +93,26 @@ defineExpose({ open });
 
 <template>
   <Modal v-model:open="modalOpen">
-    <div class="bg-slate-800 rounded pb-4">
-      <span class="m-2">Creating {{ type === MAIN_LEDGER ? 'Main' : 'Combining' }} Ledger</span>
+    <div class="bg-slate-800 rounded pb-4 w-96">
+      <span class="m-2">{{ title }}</span>
       <hr />
       <div class="mt-4">
         <div class="flex justify-center">
           <div class="flex bg-slate-600 rounded-s-md p-1">
-            <button class="switch" :class="{active: type === MAIN_LEDGER}" @click="type = MAIN_LEDGER">Main</button>
+            <button class="switch" :class="{active: type === LedgerTypes.Main}" @click="type = LedgerTypes.Main">Main</button>
           </div>
           <div class="switch flex bg-slate-600 rounded-e-md p-1">
-            <button class="switch" :class="{active: type === COMBINING_LEDGER}" @click="type = COMBINING_LEDGER">Combining</button>
+            <button class="switch" :class="{active: type === LedgerTypes.Combining}" @click="type = LedgerTypes.Combining">Combining</button>
           </div>
         </div>
         <div class="m-4">
           Name:
-          <input type="text" v-model="name" />
+          <div class="flex">
+            <input type="text" class="flex grow" v-model="name" />
+          </div>
         </div>
       </div>
-      <div v-if="type === COMBINING_LEDGER" class="ms-4 mb-4">
+      <div v-if="type === LedgerTypes.Combining" class="ms-4 mb-4">
         Member Ledgers:
         <div v-for="ledger in members" :key="ledger.ledgerId" class="flex">
           <LedgerLabel class="flex grow mb-2" :ledger="ledger" />
@@ -86,7 +130,7 @@ defineExpose({ open });
         </div>
       </div>
       <div class="flex justify-end">
-        <button class="me-4" @click="create" :disabled="!canCreate">Create</button>
+        <button class="me-4" @click="save" :disabled="!canSave">Save</button>
       </div>
     </div>
   </Modal>