eveal/gemory
2
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

ledger list clean + fix

Browse Source
This commit is contained in:
Sirttas
2026-05-17 21:03:56 +02:00
parent 2332ad2216
commit 65bb13aa3b
7 changed files with 106 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SelectInput.vue
+71
View File
@@ -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
+1
View File
@@ -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
+16 -16
View File
@@ -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) {
const localVarAxiosParamCreator = LegerControllerApiAxiosParamCreator(configuration)
export const LedgerControllerApiFp = function(configuration?: 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) {
const localVarFp = LegerControllerApiFp(configuration)
export const LedgerControllerApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
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
+11 -7
View File
@@ -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 availableLedgers = computed(() => ledgers.filter(l => !members.value.includes(l)));
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];
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">
<LedgerLine class="flex grow" :ledger="ledger" />
<div v-for="ledger in members" :key="ledger.ledgerId" class="flex">
<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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+4 -3
View File
@@ -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>