ledger list clean + fix

src/components/SelectInput.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts" generic="T">
+import {vOnClickOutside} from '@vueuse/components';
+import {useVirtualList} from '@vueuse/core';
+import {computed, ref} from 'vue';
+
+interface Props {
+  items: T[];
+  itemHeight?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    itemHeight: 24,
+});
+
+const modelValue = defineModel<T>();
+
+const isOpen = ref(false);
+const currentIndex = ref(-1);
+const {list, scrollTo, containerProps, wrapperProps} = useVirtualList(computed(() => props.items), {
+    itemHeight: () => props.itemHeight,
+    overscan: 3,
+});
+
+const moveDown = () => {
+    currentIndex.value = currentIndex.value >= props.items.length - 1 ? 0 : currentIndex.value + 1;
+    scrollTo(currentIndex.value);
+};
+const moveUp = () => {
+    currentIndex.value = currentIndex.value <= 0 ? props.items.length - 1 : currentIndex.value - 1;
+    scrollTo(currentIndex.value);
+};
+const select = (item?: T) => {
+    modelValue.value = item;
+    currentIndex.value = -1;
+    isOpen.value = false;
+};
+const submit = () => {
+    if (currentIndex.value >= 0 && currentIndex.value < props.items.length) {
+        select(props.items[currentIndex.value]);
+    } else if (modelValue.value === undefined && props.items.length > 0) {
+        select(props.items[0]);
+    }
+};
+</script>
+
+<template>
+    <div @click="isOpen = true" v-on-click-outside="() => isOpen = false">
+      <div class="fake-input" @keyup.enter="submit" @keyup.down="moveDown" @keyup.up="moveUp">
+        <slot name="input" :value="modelValue" />
+      </div>
+        <div v-if="isOpen && items.length" class="z-20 absolute">
+            <div v-bind="containerProps" class="rounded-b" style="height: 300px">
+                <div v-bind="wrapperProps">
+                    <div v-for="s in list" :key="s.index"
+                        class="hover:bg-slate-700 cursor-pointer"
+                        :class="s.index === currentIndex ? 'bg-emerald-500' : 'bg-slate-500'"
+                        @click.stop="select(s.data)">
+                        <slot name="item" :item="s.data" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+.fake-input {
+    @apply flex border bg-slate-500 rounded px-1 py-0.5;
+}
+</style>

src/components/index.ts

@@ -3,6 +3,7 @@ export { default as Dropdown } from './Dropdown.vue';
 export { default as LoadingSpinner } from './LoadingSpinner.vue';
 export { default as Modal } from './Modal.vue';
 export { default as ProgressBar } from './ProgressBar.vue';
+export { default as SelectInput } from './SelectInput.vue';
 export { default as SliderCheckbox } from './SliderCheckbox.vue';
 export { default as Tooltip } from './tooltip/Tooltip.vue';
 

src/generated/mammon/api.ts

@@ -49,9 +49,9 @@ export interface MainLedgerDto extends LedgerDto {
 }
 
 /**
- * LegerControllerApi - axios parameter creator
+ * LedgerControllerApi - axios parameter creator
  */
-export const LegerControllerApiAxiosParamCreator = function (configuration?: Configuration) {
+export const LedgerControllerApiAxiosParamCreator = function (configuration?: Configuration) {
     return {
         /**
          * 
@@ -154,10 +154,10 @@ export const LegerControllerApiAxiosParamCreator = function (configuration?: Con
 };
 
 /**
- * LegerControllerApi - functional programming interface
+ * LedgerControllerApi - functional programming interface
  */
-export const LegerControllerApiFp = function(configuration?: Configuration) {
+export const LedgerControllerApiFp = function(configuration?: Configuration) {
-    const localVarAxiosParamCreator = LegerControllerApiAxiosParamCreator(configuration)
+    const localVarAxiosParamCreator = LedgerControllerApiAxiosParamCreator(configuration)
     return {
         /**
          * 
@@ -168,7 +168,7 @@ export const LegerControllerApiFp = function(configuration?: Configuration) {
         async createCombiningLedger(createCombiningLedgerCommand: CreateCombiningLedgerCommand, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<CombiningLedgerDto>> {
             const localVarAxiosArgs = await localVarAxiosParamCreator.createCombiningLedger(createCombiningLedgerCommand, options);
             const localVarOperationServerIndex = configuration?.serverIndex ?? 0;
-            const localVarOperationServerBasePath = operationServerMap['LegerControllerApi.createCombiningLedger']?.[localVarOperationServerIndex]?.url;
+            const localVarOperationServerBasePath = operationServerMap['LedgerControllerApi.createCombiningLedger']?.[localVarOperationServerIndex]?.url;
             return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
         },
         /**
@@ -180,7 +180,7 @@ export const LegerControllerApiFp = function(configuration?: Configuration) {
         async createMainLedger(createMainLedgerCommand: CreateMainLedgerCommand, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<MainLedgerDto>> {
             const localVarAxiosArgs = await localVarAxiosParamCreator.createMainLedger(createMainLedgerCommand, options);
             const localVarOperationServerIndex = configuration?.serverIndex ?? 0;
-            const localVarOperationServerBasePath = operationServerMap['LegerControllerApi.createMainLedger']?.[localVarOperationServerIndex]?.url;
+            const localVarOperationServerBasePath = operationServerMap['LedgerControllerApi.createMainLedger']?.[localVarOperationServerIndex]?.url;
             return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
         },
         /**
@@ -191,17 +191,17 @@ export const LegerControllerApiFp = function(configuration?: Configuration) {
         async findAll(options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<FindAll200ResponseInner>>> {
             const localVarAxiosArgs = await localVarAxiosParamCreator.findAll(options);
             const localVarOperationServerIndex = configuration?.serverIndex ?? 0;
-            const localVarOperationServerBasePath = operationServerMap['LegerControllerApi.findAll']?.[localVarOperationServerIndex]?.url;
+            const localVarOperationServerBasePath = operationServerMap['LedgerControllerApi.findAll']?.[localVarOperationServerIndex]?.url;
             return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
         },
     }
 };
 
 /**
- * LegerControllerApi - factory interface
+ * LedgerControllerApi - factory interface
  */
-export const LegerControllerApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+export const LedgerControllerApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
-    const localVarFp = LegerControllerApiFp(configuration)
+    const localVarFp = LedgerControllerApiFp(configuration)
     return {
         /**
          * 
@@ -233,9 +233,9 @@ export const LegerControllerApiFactory = function (configuration?: Configuration
 };
 
 /**
- * LegerControllerApi - object-oriented interface
+ * LedgerControllerApi - object-oriented interface
  */
-export class LegerControllerApi extends BaseAPI {
+export class LedgerControllerApi extends BaseAPI {
     /**
      * 
      * @param {CreateCombiningLedgerCommand} createCombiningLedgerCommand 
@@ -243,7 +243,7 @@ export class LegerControllerApi extends BaseAPI {
      * @throws {RequiredError}
      */
     public createCombiningLedger(createCombiningLedgerCommand: CreateCombiningLedgerCommand, options?: RawAxiosRequestConfig) {
-        return LegerControllerApiFp(this.configuration).createCombiningLedger(createCombiningLedgerCommand, options).then((request) => request(this.axios, this.basePath));
+        return LedgerControllerApiFp(this.configuration).createCombiningLedger(createCombiningLedgerCommand, options).then((request) => request(this.axios, this.basePath));
     }
 
     /**
@@ -253,7 +253,7 @@ export class LegerControllerApi extends BaseAPI {
      * @throws {RequiredError}
      */
     public createMainLedger(createMainLedgerCommand: CreateMainLedgerCommand, options?: RawAxiosRequestConfig) {
-        return LegerControllerApiFp(this.configuration).createMainLedger(createMainLedgerCommand, options).then((request) => request(this.axios, this.basePath));
+        return LedgerControllerApiFp(this.configuration).createMainLedger(createMainLedgerCommand, options).then((request) => request(this.axios, this.basePath));
     }
 
     /**
@@ -262,7 +262,7 @@ export class LegerControllerApi extends BaseAPI {
      * @throws {RequiredError}
      */
     public findAll(options?: RawAxiosRequestConfig) {
-        return LegerControllerApiFp(this.configuration).findAll(options).then((request) => request(this.axios, this.basePath));
+        return LedgerControllerApiFp(this.configuration).findAll(options).then((request) => request(this.axios, this.basePath));
     }
 }
 

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 selectedLedger = ref<Ledger>();
-const availableLedgers = computed(() => ledgers.filter(l => !members.value.includes(l)));
+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">
+        <div v-for="ledger in members" :key="ledger.ledgerId" class="flex">
-          <LedgerLine class="flex grow" :ledger="ledger" />
+          <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>

src/mammon/mammonService.ts

@@ -1,6 +1,6 @@
 import {logResource} from "@/service";
 import axios from "axios";
-import {LegerControllerApi} from "@/generated/mammon";
+import {LedgerControllerApi} from "@/generated/mammon";
 
 const mammonAxiosInstance = axios.create({
     baseURL: import.meta.env.VITE_MAMMON_URL,
@@ -11,4 +11,4 @@ const mammonAxiosInstance = axios.create({
 })
 logResource(mammonAxiosInstance)
 
-export const ledgerControllerApi = new LegerControllerApi(undefined, import.meta.env.VITE_MAMMON_URL, mammonAxiosInstance);
+export const ledgerControllerApi = new LedgerControllerApi(undefined, import.meta.env.VITE_MAMMON_URL, mammonAxiosInstance);

src/pages/ledger/ListLedgers.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 
 import {LedgerLine, useLedgersStore} from "@/ledger";
+import {storeToRefs} from "pinia";
 
-const {ledgers} = useLedgersStore();
+const {ledgers} = storeToRefs(useLedgersStore());
 
 </script>
 
 <template>
   <div class="mt-4">
-    <LedgerLine v-for="leger in ledgers" :ledger="leger"/>
+    <LedgerLine v-for="ledger in ledgers" :key="ledger.ledgerId" class="mb-2" :ledger="ledger"/>
   </div>
-</template>
+</template>