2023-08-25 00:23:38 +02:00
|
|
|
<template>
|
|
|
|
<page-layout>
|
|
|
|
<template #right>
|
2023-12-30 22:21:08 +01:00
|
|
|
<f-save-button form="groupform"></f-save-button>
|
2023-08-25 00:23:38 +02:00
|
|
|
</template>
|
2023-12-30 22:21:08 +01:00
|
|
|
<ui-popup v-if="editing !== null" heading="Untergruppen bearbeiten" inner-width="max-w-5xl" @close="editing = null">
|
2023-12-25 19:36:13 +01:00
|
|
|
<template #actions>
|
|
|
|
<a href="#" @click.prevent="store">
|
|
|
|
<ui-sprite src="save" class="text-zinc-400 w-6 h-6"></ui-sprite>
|
|
|
|
</a>
|
|
|
|
</template>
|
2023-08-25 00:23:38 +02:00
|
|
|
<div class="flex space-x-3">
|
2023-12-30 22:21:08 +01:00
|
|
|
<f-text id="parent-inner_name" v-model="editing.parent.inner_name" label="Interner Name" name="parent-inner_name"></f-text>
|
|
|
|
<f-select id="parent-level" v-model="editing.parent.level" label="Ebene" name="parent-level" :options="meta.levels"></f-select>
|
2023-08-25 00:23:38 +02:00
|
|
|
</div>
|
2023-12-30 22:21:08 +01:00
|
|
|
<div>
|
|
|
|
<table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm table">
|
|
|
|
<thead>
|
|
|
|
<th>NaMi-Name</th>
|
|
|
|
<th>Interner Name</th>
|
|
|
|
<th>Ebene</th>
|
|
|
|
</thead>
|
|
|
|
<tr v-for="child in editing.children" :key="child.id">
|
|
|
|
<td>
|
|
|
|
<span v-text="child.name"></span>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
<f-text :id="`inner_name-${child.id}`" v-model="child.inner_name" label="" size="sm" :name="`inner_name-${child.id}`"></f-text>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
<f-select :id="`level-${child.id}`" v-model="child.level" label="" size="sm" :name="`level-${child.id}`" :options="meta.levels"></f-select>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</table>
|
2023-08-25 00:23:38 +02:00
|
|
|
</div>
|
2023-12-30 22:21:08 +01:00
|
|
|
</ui-popup>
|
|
|
|
<form id="groupform" class="grow p-3" @submit.prevent="submit">
|
|
|
|
<table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm table">
|
|
|
|
<thead>
|
|
|
|
<th>NaMi-Name</th>
|
|
|
|
<th>Interner Name</th>
|
|
|
|
<th>Ebene</th>
|
|
|
|
<th></th>
|
|
|
|
</thead>
|
|
|
|
|
|
|
|
<template v-for="child in childrenOf('null')" :key="child.id">
|
|
|
|
<tr>
|
|
|
|
<td>
|
|
|
|
<div class="flex space-x-2">
|
2024-06-19 21:33:59 +02:00
|
|
|
<a v-if="!isOpen(child.id)" v-tooltip="`Öffnen`" href="#" class="inline-flex btn btn-info btn-sm" @click.prevent="toggle(child)"><ui-sprite src="plus"></ui-sprite></a>
|
|
|
|
<a v-if="isOpen(child.id)" v-tooltip="`Schließen`" href="#" class="inline-flex btn btn-info btn-sm" @click.prevent="toggle(child)"
|
2023-12-30 22:21:08 +01:00
|
|
|
><ui-sprite src="close"></ui-sprite
|
|
|
|
></a>
|
|
|
|
<span v-text="child.name"></span>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
<td v-text="child.inner_name"></td>
|
|
|
|
<td v-text="child.level"></td>
|
|
|
|
<td>
|
2023-12-25 19:36:13 +01:00
|
|
|
<a v-tooltip="`Bearbeiten`" href="#" class="inline-flex btn btn-warning btn-sm" @click.prevent="edit(child)"><ui-sprite src="pencil"></ui-sprite></a>
|
2023-12-30 22:21:08 +01:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<template v-for="subchild in childrenOf(child.id)" :key="subchild.id">
|
|
|
|
<tr>
|
|
|
|
<div class="pl-12 flex space-x-2">
|
2024-06-19 21:33:59 +02:00
|
|
|
<a v-if="subchild.children_count !== 0 && !isOpen(subchild.id)" v-tooltip="`Öffnen`" href="#" class="inline-flex btn btn-info btn-sm" @click.prevent="toggle(subchild)"
|
2023-12-30 22:21:08 +01:00
|
|
|
><ui-sprite src="plus"></ui-sprite
|
|
|
|
></a>
|
2024-06-19 21:33:59 +02:00
|
|
|
<a
|
|
|
|
v-if="subchild.children_count !== 0 && isOpen(subchild.id)"
|
|
|
|
v-tooltip="`Schließen`"
|
|
|
|
href="#"
|
|
|
|
class="inline-flex btn btn-info btn-sm"
|
|
|
|
@click.prevent="toggle(subchild)"
|
2023-12-30 22:21:08 +01:00
|
|
|
><ui-sprite src="close"></ui-sprite
|
|
|
|
></a>
|
|
|
|
<span v-text="subchild.name"></span>
|
|
|
|
</div>
|
|
|
|
<td v-text="subchild.inner_name"></td>
|
|
|
|
<td v-text="subchild.level"></td>
|
|
|
|
<td>
|
|
|
|
<a v-if="subchild.children_count" v-tooltip="`Bearbeiten`" href="#" class="inline-flex btn btn-warning btn-sm" @click.prevent="edit(subchild)"
|
|
|
|
><ui-sprite src="pencil"></ui-sprite
|
|
|
|
></a>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<template v-for="subsubchild in childrenOf(subchild.id)" :key="subchild.id">
|
|
|
|
<tr>
|
|
|
|
<div class="pl-24 flex space-x-2">
|
|
|
|
<a
|
|
|
|
v-if="subsubchild.children_count !== 0 && !isOpen(subsubchild.id)"
|
|
|
|
v-tooltip="`Öffnen`"
|
|
|
|
href="#"
|
|
|
|
class="inline-flex btn btn-info btn-sm"
|
2024-06-19 21:33:59 +02:00
|
|
|
@click.prevent="toggle(subsubchild)"
|
2023-12-30 22:21:08 +01:00
|
|
|
><ui-sprite src="plus"></ui-sprite
|
|
|
|
></a>
|
|
|
|
<a
|
|
|
|
v-if="subsubchild.children_count !== 0 && isOpen(subsubchild.id)"
|
|
|
|
v-tooltip="`Schließen`"
|
|
|
|
href="#"
|
|
|
|
class="inline-flex btn btn-info btn-sm"
|
2024-06-19 21:33:59 +02:00
|
|
|
@click.prevent="toggle(subsubchild)"
|
2023-12-30 22:21:08 +01:00
|
|
|
><ui-sprite src="close"></ui-sprite
|
|
|
|
></a>
|
|
|
|
<span v-text="subsubchild.name"></span>
|
|
|
|
</div>
|
2023-12-30 23:02:08 +01:00
|
|
|
<td v-text="subsubchild.inner_name"></td>
|
|
|
|
<td v-text="subsubchild.level"></td>
|
2023-12-30 22:21:08 +01:00
|
|
|
<td>
|
|
|
|
<a v-if="subsubchild.children_count" v-tooltip="`Bearbeiten`" href="#" class="inline-flex btn btn-warning btn-sm" @click.prevent="edit(subsubchild)"
|
|
|
|
><ui-sprite src="pencil"></ui-sprite
|
|
|
|
></a>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</table>
|
2023-08-25 00:23:38 +02:00
|
|
|
</form>
|
|
|
|
</page-layout>
|
|
|
|
</template>
|
|
|
|
|
2023-12-30 22:21:08 +01:00
|
|
|
<script setup>
|
|
|
|
import {computed, ref, reactive} from 'vue';
|
|
|
|
import {indexProps, useIndex} from '../../composables/useInertiaApiIndex.js';
|
|
|
|
const props = defineProps(indexProps);
|
|
|
|
var {axios, meta, data} = useIndex(props.data, 'invoice');
|
2023-08-25 00:23:38 +02:00
|
|
|
|
2023-12-30 22:21:08 +01:00
|
|
|
const children = reactive({
|
|
|
|
null: data.value,
|
2023-08-25 00:23:38 +02:00
|
|
|
});
|
|
|
|
|
2023-12-30 22:21:08 +01:00
|
|
|
var editing = ref(null);
|
2023-08-25 00:23:38 +02:00
|
|
|
|
2024-06-19 21:33:59 +02:00
|
|
|
async function toggle(parent) {
|
|
|
|
if (isOpen(parent.id)) {
|
|
|
|
delete children[parent.id];
|
|
|
|
} else {
|
|
|
|
children[parent.id] = (await axios.get(parent.links.children)).data.data;
|
|
|
|
}
|
2023-12-30 22:21:08 +01:00
|
|
|
}
|
2023-08-25 00:23:38 +02:00
|
|
|
|
2023-12-30 22:21:08 +01:00
|
|
|
async function edit(parent) {
|
|
|
|
editing.value = {
|
|
|
|
parent: parent,
|
|
|
|
children: (await axios.get(parent.links.children)).data.data,
|
|
|
|
};
|
2023-08-25 00:23:38 +02:00
|
|
|
}
|
|
|
|
|
2023-12-30 22:21:08 +01:00
|
|
|
function isOpen(child) {
|
|
|
|
return child in children;
|
2023-08-25 00:23:38 +02:00
|
|
|
}
|
|
|
|
|
2023-12-30 22:21:08 +01:00
|
|
|
function childrenOf(parent) {
|
|
|
|
return children[parent] ? children[parent] : [];
|
2023-08-25 00:23:38 +02:00
|
|
|
}
|
|
|
|
|
2023-12-30 22:21:08 +01:00
|
|
|
async function store() {
|
|
|
|
await axios.post(meta.value.links.bulkstore, [editing.value.parent, ...editing.value.children]);
|
|
|
|
children[editing.value.parent.id] = (await axios.get(editing.value.parent.links.children)).data.data;
|
|
|
|
editing.value = null;
|
2023-08-25 00:23:38 +02:00
|
|
|
}
|
|
|
|
</script>
|