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