ledger list and modal

src/ledger/CreateLedgerModal.vue

@@ -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>

src/ledger/LedgerLine.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+
+import {COMBINING_LEDGER, Ledger} from "@/ledger/ledger.ts";
+import {FolderOpenIcon} from '@heroicons/vue/24/outline';
+
+interface Props {
+  ledger: Ledger;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <div class="flex">
+    <FolderOpenIcon v-if="ledger.type === COMBINING_LEDGER" class="w-6" />
+    <div v-else class="w-6"/>
+    <span>{{ ledger.name }}</span>
+  </div>
+</template>

src/ledger/index.ts

@@ -0,0 +1,4 @@
+export * from './ledger';
+
+export {default as LedgerLine} from './LedgerLine.vue';
+export {default as CreateLedgerModal} from './CreateLedgerModal.vue';

src/ledger/ledger.ts

@@ -0,0 +1,34 @@
+import {CreateCombiningLedgerCommand, CreateMainLedgerCommand, FindAll200ResponseInner} from "@/generated/mammon";
+import {defineStore} from "pinia";
+import {ref} from "vue";
+import {ledgerControllerApi} from "@/mammon";
+
+export const MAIN_LEDGER = "MAIN";
+export const COMBINING_LEDGER = "COMBINING";
+
+export type LedgerType = typeof MAIN_LEDGER | typeof COMBINING_LEDGER;
+export type Ledger = FindAll200ResponseInner;
+
+export const useLedgersStore = defineStore('ledgers', () => {
+    const ledgers = ref<Ledger[]>([]);
+
+    const createMain = (ledger: CreateMainLedgerCommand) => ledgerControllerApi.createMainLedger(ledger).then(response => {
+        const ledger = response.data;
+
+        ledgers.value.push(ledger);
+        return ledger;
+    });
+
+    const createCombining = (ledger: CreateCombiningLedgerCommand) => ledgerControllerApi.createCombiningLedger(ledger).then(response => {
+        const ledger = response.data;
+
+        ledgers.value.push(ledger);
+        return ledger;
+    });
+
+    const refresh = () => ledgerControllerApi.findAll().then(response => ledgers.value = response.data);
+
+    refresh();
+
+    return {ledgers, createMain, createCombining, refresh};
+})