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

Add TableToggleButton component

This commit is contained in:
philipp lang 2024-06-19 22:00:18 +02:00
parent 87377dab06
commit e4f195ee3e
2 changed files with 62 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
resources/js/components/ui/TableToggleButton.vue Normal file
View File

@ -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>

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

@ -46,13 +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>
<div class="flex space-x-2"> <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>
<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>
</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>
@ -62,20 +56,15 @@
</tr> </tr>
<template v-for="subchild in childrenOf(child.id)" :key="subchild.id"> <template v-for="subchild in childrenOf(child.id)" :key="subchild.id">
<tr> <tr>
<div class="pl-12 flex space-x-2"> <td>
<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-table-toggle-button
><ui-sprite src="plus"></ui-sprite :children-count="subchild.children_count"
></a> :text="subchild.name"
<a :level="1"
v-if="subchild.children_count !== 0 && isOpen(subchild.id)" :active="isOpen(subchild.id)"
v-tooltip="`Schließen`" @toggle="toggle(subchild)"
href="#" ></ui-table-toggle-button>
class="inline-flex btn btn-info btn-sm" </td>
@click.prevent="toggle(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.inner_name"></td>
<td v-text="subchild.level"></td> <td v-text="subchild.level"></td>
<td> <td>
@ -86,25 +75,15 @@
</tr> </tr>
<template v-for="subsubchild in childrenOf(subchild.id)" :key="subchild.id"> <template v-for="subsubchild in childrenOf(subchild.id)" :key="subchild.id">
<tr> <tr>
<div class="pl-24 flex space-x-2"> <td>
<a <ui-table-toggle-button
v-if="subsubchild.children_count !== 0 && !isOpen(subsubchild.id)" :children-count="subsubchild.children_count"
v-tooltip="`Öffnen`" :text="subsubchild.name"
href="#" :level="2"
class="inline-flex btn btn-info btn-sm" :active="isOpen(subsubchild.id)"
@click.prevent="toggle(subsubchild)" @toggle="toggle(subsubchild)"
><ui-sprite src="plus"></ui-sprite ></ui-table-toggle-button>
></a> </td>
<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 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>
<td> <td>