Add useTableToggle composable for group index

resources/js/composables/useTableToggle.js

@@ -0,0 +1,34 @@
+import {computed, ref, inject} from 'vue';
+
+export default function (init) {
+    const axios = inject('axios');
+
+    const children = ref(init);
+
+    function isOpen(child) {
+        return child in children.value;
+    }
+
+    async function toggle(parent) {
+        if (isOpen(parent.id)) {
+            delete children.value[parent.id];
+        } else {
+            children.value[parent.id] = (await axios.get(parent.links.children)).data.data;
+        }
+    }
+
+    function childrenOf(parentId) {
+        return children.value[parentId] ? children.value[parentId] : [];
+    }
+
+    function clearToggle() {
+        children.value = {};
+    }
+
+    return {
+        isOpen,
+        toggle,
+        childrenOf,
+        clearToggle,
+    };
+}

resources/js/views/group/Index.vue

@@ -89,25 +89,16 @@
 </template>
 
 <script setup>
-import {ref, reactive} from 'vue';
+import {ref} from 'vue';
 import {indexProps, useIndex} from '../../composables/useInertiaApiIndex.js';
+import useTableToggle from '../../composables/useTableToggle.js';
+
 const props = defineProps(indexProps);
 var {axios, meta, data} = useIndex(props.data, 'invoice');
-
+const {isOpen, toggle, childrenOf} = useTableToggle({null: data.value});
-const children = reactive({
-    null: data.value,
-});
 
 var editing = ref(null);
 
-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) {
     editing.value = {
         parent: parent,
@@ -115,14 +106,6 @@ async function edit(parent) {
     };
 }
 
-function isOpen(child) {
-    return child in children;
-}
-
-function childrenOf(parent) {
-    return children[parent] ? children[parent] : [];
-}
-
 async function store() {
     await axios.post(meta.value.links.bulkstore, [editing.value.parent, ...editing.value.children]);
     children[editing.value.parent.id] = (await axios.get(editing.value.parent.links.children)).data.data;