resources/js/components/ui/TableToggleButton.vue

@@ -1,43 +0,0 @@
-<template>
-    <div class="flex space-x-2" :class="levelMap[level]">
-        <a
-            v-if="value.children_count > 0"
-            v-tooltip="active ? 'Schließen' : 'Öffnen'"
-            href="#"
-            class="inline-flex items-center justify-center bg-blue-700 text-blue-100 rounded w-5 h-5"
-            @click.prevent="emit('toggle')"
-        >
-            <ui-sprite class="w-3 h-3" :src="active ? 'close' : 'plus'"></ui-sprite>
-        </a>
-        <span v-text="text"></span>
-    </div>
-</template>
-
-<script setup>
-const emit = defineEmits(['toggle']);
-
-const levelMap = {
-    0: '',
-    1: 'pl-7',
-    2: 'pl-14',
-};
-
-const props = defineProps({
-    text: {
-        required: true,
-        type: String,
-    },
-    value: {
-        type: Object,
-        required: true,
-    },
-    active: {
-        type: Boolean,
-        required: true,
-    },
-    level: {
-        required: true,
-        type: Number,
-    },
-});
-</script>

resources/js/views/group/Index.vue

@@ -46,7 +46,13 @@
                 <template v-for="child in childrenOf('null')" :key="child.id">
                     <tr>
                         <td>
-                            <ui-table-toggle-button :value="child" :text="child.name" :level="0" :active="isOpen(child.id)" @toggle="toggle(child)"></ui-table-toggle-button>
+                            <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)"
+                                    ><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>
@@ -56,9 +62,15 @@
                     </tr>
                     <template v-for="subchild in childrenOf(child.id)" :key="subchild.id">
                         <tr>
-                            <td>
+                            <div class="pl-12 flex space-x-2">
-                                <ui-table-toggle-button :value="subchild" :text="subchild.name" :level="1" :active="isOpen(subchild.id)" @toggle="toggle(subchild)"></ui-table-toggle-button>
+                                <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)"
-                            </td>
+                                    ><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)"
+                                    ><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>
@@ -69,9 +81,25 @@
                         </tr>
                         <template v-for="subsubchild in childrenOf(subchild.id)" :key="subchild.id">
                             <tr>
-                                <td>
+                                <div class="pl-24 flex space-x-2">
-                                    <ui-table-toggle-button :value="subsubchild" :text="subsubchild.name" :level="2" :active="isOpen(subsubchild.id)"></ui-table-toggle-button>
+                                    <a
-                                </td>
+                                        v-if="subsubchild.children_count !== 0 && !isOpen(subsubchild.id)"
+                                        v-tooltip="`Öffnen`"
+                                        href="#"
+                                        class="inline-flex btn btn-info btn-sm"
+                                        @click.prevent="open(subsubchild)"
+                                        ><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"
+                                        @click.prevent="close(subsubchild)"
+                                        ><ui-sprite src="close"></ui-sprite
+                                    ></a>
+                                    <span v-text="subsubchild.name"></span>
+                                </div>
                                 <td v-text="subsubchild.inner_name"></td>
                                 <td v-text="subsubchild.level"></td>
                                 <td>
@@ -89,7 +117,7 @@
 </template>
 
 <script setup>
-import {ref, reactive} from 'vue';
+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');
@@ -100,12 +128,10 @@ const children = reactive({
 
 var editing = ref(null);
 
-async function toggle(parent) {
+async function open(parent) {
-    if (isOpen(parent.id)) {
+    const result = (await axios.get(parent.links.children)).data;
-        delete children[parent.id];
+
-    } else {
+    children[parent.id] = result.data;
-        children[parent.id] = (await axios.get(parent.links.children)).data.data;
-    }
 }
 
 async function edit(parent) {
@@ -115,6 +141,10 @@ async function edit(parent) {
     };
 }
 
+function close(parent) {
+    delete children[parent.id];
+}
+
 function isOpen(child) {
     return child in children;
 }