silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 104 Wiki Activity

Add TableToggleButton for group index
continuous-integration/drone/push Build is passing Details

This commit is contained in:
philipp lang 2024-06-19 22:36:24 +02:00
parent e4f195ee3e
commit 73089ae654
2 changed files with 7 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/components/ui/TableToggleButton.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="flex space-x-2" :class="levelMap[level]"> <div class="flex space-x-2" :class="levelMap[level]">
<a <a
v-if="childrenCount > 0" v-if="value.children_count > 0"
v-tooltip="active ? 'Schließen' : 'Öffnen'" v-tooltip="active ? 'Schließen' : 'Öffnen'"
href="#" href="#"
class="inline-flex items-center justify-center bg-blue-700 text-blue-100 rounded w-5 h-5" 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, required: true,
type: String, type: String,
}, },
childrenCount: { value: {
type: Number, type: Object,
required: true, required: true,
}, },
active: { active: {

20
resources/js/views/group/Index.vue
View File

@ -46,7 +46,7 @@
<template v-for="child in childrenOf('null')" :key="child.id"> <template v-for="child in childrenOf('null')" :key="child.id">
<tr> <tr>
<td> <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>
<td v-text="child.inner_name"></td> <td v-text="child.inner_name"></td>
<td v-text="child.level"></td> <td v-text="child.level"></td>
@ -57,13 +57,7 @@
<template v-for="subchild in childrenOf(child.id)" :key="subchild.id"> <template v-for="subchild in childrenOf(child.id)" :key="subchild.id">
<tr> <tr>
<td> <td>
<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>
:children-count="subchild.children_count"
:text="subchild.name"
:level="1"
:active="isOpen(subchild.id)"
@toggle="toggle(subchild)"
></ui-table-toggle-button>
</td> </td>
<td v-text="subchild.inner_name"></td> <td v-text="subchild.inner_name"></td>
<td v-text="subchild.level"></td> <td v-text="subchild.level"></td>
@ -76,13 +70,7 @@
<template v-for="subsubchild in childrenOf(subchild.id)" :key="subchild.id"> <template v-for="subsubchild in childrenOf(subchild.id)" :key="subchild.id">
<tr> <tr>
<td> <td>
<ui-table-toggle-button <ui-table-toggle-button :value="subsubchild" :text="subsubchild.name" :level="2" :active="isOpen(subsubchild.id)"></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>
<td v-text="subsubchild.inner_name"></td> <td v-text="subsubchild.inner_name"></td>
<td v-text="subsubchild.level"></td> <td v-text="subsubchild.level"></td>
@ -101,7 +89,7 @@
</template> </template>
<script setup> <script setup>
import {computed, ref, reactive} from 'vue'; import {ref, reactive} from 'vue';
import {indexProps, useIndex} from '../../composables/useInertiaApiIndex.js'; import {indexProps, useIndex} from '../../composables/useInertiaApiIndex.js';
const props = defineProps(indexProps); const props = defineProps(indexProps);
var {axios, meta, data} = useIndex(props.data, 'invoice'); var {axios, meta, data} = useIndex(props.data, 'invoice');