ledger list and modal

2026-05-17 19:19:01 +02:00
parent f9ae0d142a
commit 8005e7a45b
19 changed files with 843 additions and 95 deletions
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+
+import {ref} from "vue";
+import {COMBINING_LEDGER, Ledger, LedgerType, MAIN_LEDGER, useLedgersStore} from "./ledger";
+import {Modal} from "@/components";
+import LedgerLine from "@/ledger/LedgerLine.vue";
+
+const modalOpen = ref<boolean>(false);
+
+const type = ref<LedgerType>(MAIN_LEDGER);
+const name = ref("");
+const members = ref<Ledger[]>([]);
+const {ledgers, createMain, createCombining} = useLedgersStore();
+
+const open = () => modalOpen.value = true;
+
+const create = () => {
+  if (type.value === MAIN_LEDGER) {
+    createMain({ name: name.value })
+  } else {
+    createCombining({ name: name.value, memberLedgerIds: members.value.map(l => l.ledgerId) })
+  }
+  modalOpen.value = false;
+}
+
+defineExpose({ open });
+</script>
+
+<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>
+      <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>
+          </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>
+          </div>
+        </div>
+        <div class="m-4">
+          Name:
+          <input type="text" v-model="name" />
+        </div>
+      </div>
+      <div v-if="type === COMBINING_LEDGER" class="mb-4">
+        Member Ledgers:
+        <div v-for="ledger in members">
+          <LedgerLine ledger="ledger" />
+        </div>
+        <select>
+          <option v-for="ledger in ledgers">{{ ledger.name}}</option>
+        </select>
+      </div>
+      <div class="flex justify-end">
+        <button class="me-4" @click="create">Create</button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+button.switch {
+  @apply flex items-center px-4 rounded-md bg-slate-600;
+  &.active {
+    @apply bg-emerald-500;
+  }
+}
+</style>