Add toggle

This commit is contained in:
philipp lang 2024-06-19 21:33:59 +02:00
parent 668cf9d292
commit 87377dab06
1 changed files with 17 additions and 14 deletions

View File

@ -47,8 +47,8 @@
<tr>
<td>
<div class="flex space-x-2">
<a v-if="!isOpen(child.id)" v-tooltip="`Öffnen`" href="#" class="inline-flex btn btn-info btn-sm" @click.prevent="open(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="close(child)"
<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)"
><ui-sprite src="close"></ui-sprite
></a>
<span v-text="child.name"></span>
@ -63,10 +63,15 @@
<template v-for="subchild in childrenOf(child.id)" :key="subchild.id">
<tr>
<div class="pl-12 flex space-x-2">
<a v-if="subchild.children_count !== 0 && !isOpen(subchild.id)" v-tooltip="`Öffnen`" href="#" class="inline-flex btn btn-info btn-sm" @click.prevent="open(subchild)"
<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)"
><ui-sprite src="plus"></ui-sprite
></a>
<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="close(subchild)"
<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)"
><ui-sprite src="close"></ui-sprite
></a>
<span v-text="subchild.name"></span>
@ -87,7 +92,7 @@
v-tooltip="`Öffnen`"
href="#"
class="inline-flex btn btn-info btn-sm"
@click.prevent="open(subsubchild)"
@click.prevent="toggle(subsubchild)"
><ui-sprite src="plus"></ui-sprite
></a>
<a
@ -95,7 +100,7 @@
v-tooltip="`Schließen`"
href="#"
class="inline-flex btn btn-info btn-sm"
@click.prevent="close(subsubchild)"
@click.prevent="toggle(subsubchild)"
><ui-sprite src="close"></ui-sprite
></a>
<span v-text="subsubchild.name"></span>
@ -128,10 +133,12 @@ const children = reactive({
var editing = ref(null);
async function open(parent) {
const result = (await axios.get(parent.links.children)).data;
children[parent.id] = result.data;
async function toggle(parent) {
if (isOpen(parent.id)) {
delete children[parent.id];
} else {
children[parent.id] = (await axios.get(parent.links.children)).data.data;
}
}
async function edit(parent) {
@ -141,10 +148,6 @@ async function edit(parent) {
};
}
function close(parent) {
delete children[parent.id];
}
function isOpen(child) {
return child in children;
}