Sirttas
120 lines
3.7 KiB
Vue
120 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import {useRoute, useRouter} from "vue-router";
|
|
import {ref, watch} from "vue";
|
|
import {useDebounceFn} from "@vueuse/core";
|
|
import log from "loglevel";
|
|
import {activityTypes, RuleInput, Rules, useRuleBooksStore} from "@/rules";
|
|
import {PlusIcon, TrashIcon} from "@heroicons/vue/24/outline";
|
|
import {routeNames} from "@/routes";
|
|
import {Dropdown} from "@/components";
|
|
|
|
const ruleBookId = ref<string>();
|
|
const name = ref<string>('');
|
|
const ledgerRefs = ref<string[]>([]);
|
|
const rules = ref<Rules>({});
|
|
|
|
const {findById, create, update, refresh} = useRuleBooksStore();
|
|
const router = useRouter();
|
|
|
|
const save = async () => {
|
|
if (!ruleBookId.value) {
|
|
const created = await create({
|
|
name: name.value,
|
|
ledgerRefs: ledgerRefs.value,
|
|
rules: rules.value
|
|
})
|
|
await router.push({ name: routeNames.editRuleBook, params: {ruleBookId: created.ruleBookId}})
|
|
|
|
} else {
|
|
await update(ruleBookId.value, {
|
|
name: name.value,
|
|
ledgerRefs: ledgerRefs.value,
|
|
rules: rules.value
|
|
})
|
|
}
|
|
}
|
|
|
|
const addLedgerRef = () => {
|
|
ledgerRefs.value = [...ledgerRefs.value, '']
|
|
}
|
|
const updateLedgerRef = useDebounceFn((index: number, value: string) => {
|
|
ledgerRefs.value[index] = value;
|
|
}, 500);
|
|
|
|
const removeLedgerRef = (index: number) => {
|
|
ledgerRefs.value = ledgerRefs.value.toSpliced(index, 1)
|
|
}
|
|
|
|
watch(useRoute(), async route => {
|
|
if (route.params.ruleBookId) {
|
|
const promise = refresh(); // FIXME don't call refresh
|
|
|
|
const id = typeof route.params.ruleBookId === 'string' ? route.params.ruleBookId : route.params.ruleBookId[0];
|
|
|
|
await promise;
|
|
|
|
const ruleBook = findById(id);
|
|
|
|
ruleBookId.value = id;
|
|
name.value = ruleBook?.name ?? '';
|
|
ledgerRefs.value = [...ruleBook?.ledgerRefs];
|
|
rules.value = {...ruleBook?.rules}; // TODO fully clone rules
|
|
log.info('Loaded rule book:', ruleBook);
|
|
} else {
|
|
ruleBookId.value = undefined;
|
|
name.value = '';
|
|
ledgerRefs.value = [];
|
|
rules.value = {};
|
|
log.info('No rule book to load');
|
|
}
|
|
}, { immediate: true })
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid mb-2 mt-4">
|
|
<div class="flex flex-col">
|
|
<div class="flex grow border-b-1">
|
|
Name:
|
|
<input class="mb-2 ms-2" type="text" v-model="name" />
|
|
</div>
|
|
<div class="border-b-1">
|
|
Ledgers References:
|
|
<div class="flex flex-wrap items-center">
|
|
<div class="flex items-center mb-2" v-for="(ledgerRef, index) in ledgerRefs" :key="index">
|
|
<input class="me-1" type="text" :value="ledgerRefs[index]" @input="updateLedgerRef(index, ($event.target as HTMLInputElement).value)" />
|
|
<button class="btn-icon me-2" @click="removeLedgerRef(index)"><TrashIcon /></button>
|
|
</div>
|
|
<div class="flex items-center mb-2">
|
|
<button class="btn-icon" @click="addLedgerRef"><PlusIcon /></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col grow border-b-1" v-for="activityType in activityTypes" :key="activityType.key">
|
|
<Dropdown :inline="true" :autoClose="false" class="rule-dropdown">
|
|
<template #button>
|
|
<span>{{ activityType.name }}</span>
|
|
</template>
|
|
<RuleInput :ledgerRefs="ledgerRefs" :activityType="activityType.key" v-model="rules[activityType.key]" />
|
|
</Dropdown>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 justify-end flex">
|
|
<div>
|
|
<button @click="save">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@reference "@/style.css";
|
|
|
|
.rule-dropdown :deep(>button) {
|
|
@apply bg-slate-800 hover:bg-slate-800 border-none flex items-center w-full;
|
|
}
|
|
|
|
.rule-dropdown.dropdown-open :deep(>button) {
|
|
@apply bg-slate-800 rounded-b-none;
|
|
}
|
|
</style> |