From 73089ae65455b063173690dbe7389248f67bd8ec Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Wed, 19 Jun 2024 22:36:24 +0200
Subject: [PATCH] Add TableToggleButton for group index

---
 .../js/components/ui/TableToggleButton.vue    |  6 +++---
 resources/js/views/group/Index.vue            | 20 ++++---------------
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/resources/js/components/ui/TableToggleButton.vue b/resources/js/components/ui/TableToggleButton.vue
index 925bf7cc..b3163b51 100644
--- a/resources/js/components/ui/TableToggleButton.vue
+++ b/resources/js/components/ui/TableToggleButton.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="flex space-x-2" :class="levelMap[level]">
         <a
-            v-if="childrenCount > 0"
+            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"
@@ -27,8 +27,8 @@ const props = defineProps({
         required: true,
         type: String,
     },
-    childrenCount: {
-        type: Number,
+    value: {
+        type: Object,
         required: true,
     },
     active: {
diff --git a/resources/js/views/group/Index.vue b/resources/js/views/group/Index.vue
index fc4a35dd..56a0194c 100644
--- a/resources/js/views/group/Index.vue
+++ b/resources/js/views/group/Index.vue
@@ -46,7 +46,7 @@
                 <template v-for="child in childrenOf('null')" :key="child.id">
                     <tr>
                         <td>
-                            <ui-table-toggle-button :children-count="child.children_count" :text="child.name" :level="0" :active="isOpen(child.id)" @toggle="toggle(child)"></ui-table-toggle-button>
+                            <ui-table-toggle-button :value="child" :text="child.name" :level="0" :active="isOpen(child.id)" @toggle="toggle(child)"></ui-table-toggle-button>
                         </td>
                         <td v-text="child.inner_name"></td>
                         <td v-text="child.level"></td>
@@ -57,13 +57,7 @@
                     <template v-for="subchild in childrenOf(child.id)" :key="subchild.id">
                         <tr>
                             <td>
-                                <ui-table-toggle-button
-                                    :children-count="subchild.children_count"
-                                    :text="subchild.name"
-                                    :level="1"
-                                    :active="isOpen(subchild.id)"
-                                    @toggle="toggle(subchild)"
-                                ></ui-table-toggle-button>
+                                <ui-table-toggle-button :value="subchild" :text="subchild.name" :level="1" :active="isOpen(subchild.id)" @toggle="toggle(subchild)"></ui-table-toggle-button>
                             </td>
                             <td v-text="subchild.inner_name"></td>
                             <td v-text="subchild.level"></td>
@@ -76,13 +70,7 @@
                         <template v-for="subsubchild in childrenOf(subchild.id)" :key="subchild.id">
                             <tr>
                                 <td>
-                                    <ui-table-toggle-button
-                                        :children-count="subsubchild.children_count"
-                                        :text="subsubchild.name"
-                                        :level="2"
-                                        :active="isOpen(subsubchild.id)"
-                                        @toggle="toggle(subsubchild)"
-                                    ></ui-table-toggle-button>
+                                    <ui-table-toggle-button :value="subsubchild" :text="subsubchild.name" :level="2" :active="isOpen(subsubchild.id)"></ui-table-toggle-button>
                                 </td>
                                 <td v-text="subsubchild.inner_name"></td>
                                 <td v-text="subsubchild.level"></td>
@@ -101,7 +89,7 @@
 </template>
 
 <script setup>
-import {computed, ref, reactive} from 'vue';
+import {ref, reactive} from 'vue';
 import {indexProps, useIndex} from '../../composables/useInertiaApiIndex.js';
 const props = defineProps(indexProps);
 var {axios, meta, data} = useIndex(props.data, 'invoice');