From e4f195ee3e7dc0d5bad81becac15477dfa89c147 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Wed, 19 Jun 2024 22:00:18 +0200
Subject: [PATCH] Add TableToggleButton component

---
 .../js/components/ui/TableToggleButton.vue    | 43 ++++++++++++++
 resources/js/views/group/Index.vue            | 59 ++++++-------------
 2 files changed, 62 insertions(+), 40 deletions(-)
 create mode 100644 resources/js/components/ui/TableToggleButton.vue

diff --git a/resources/js/components/ui/TableToggleButton.vue b/resources/js/components/ui/TableToggleButton.vue
new file mode 100644
index 00000000..925bf7cc
--- /dev/null
+++ b/resources/js/components/ui/TableToggleButton.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="flex space-x-2" :class="levelMap[level]">
+        <a
+            v-if="childrenCount > 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,
+    },
+    childrenCount: {
+        type: Number,
+        required: true,
+    },
+    active: {
+        type: Boolean,
+        required: true,
+    },
+    level: {
+        required: true,
+        type: Number,
+    },
+});
+</script>
diff --git a/resources/js/views/group/Index.vue b/resources/js/views/group/Index.vue
index c039cf04..fc4a35dd 100644
--- a/resources/js/views/group/Index.vue
+++ b/resources/js/views/group/Index.vue
@@ -46,13 +46,7 @@
                 <template v-for="child in childrenOf('null')" :key="child.id">
                     <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="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>
-                            </div>
+                            <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>
                         </td>
                         <td v-text="child.inner_name"></td>
                         <td v-text="child.level"></td>
@@ -62,20 +56,15 @@
                     </tr>
                     <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="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="toggle(subchild)"
-                                    ><ui-sprite src="close"></ui-sprite
-                                ></a>
-                                <span v-text="subchild.name"></span>
-                            </div>
+                            <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>
+                            </td>
                             <td v-text="subchild.inner_name"></td>
                             <td v-text="subchild.level"></td>
                             <td>
@@ -86,25 +75,15 @@
                         </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"
-                                        @click.prevent="toggle(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="toggle(subsubchild)"
-                                        ><ui-sprite src="close"></ui-sprite
-                                    ></a>
-                                    <span v-text="subsubchild.name"></span>
-                                </div>
+                                <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>
+                                </td>
                                 <td v-text="subsubchild.inner_name"></td>
                                 <td v-text="subsubchild.level"></td>
                                 <td>