Support oft parent groups
This commit is contained in:
@@ -0,0 +1,249 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import AdminAppLayout from "../../../../resources/js/layouts/AdminAppLayout.vue";
|
||||
import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";
|
||||
import { useAjax } from "../../../../resources/js/components/ajaxHandler.js";
|
||||
import { toast } from "vue3-toastify";
|
||||
|
||||
const props = defineProps({
|
||||
groupLabels: {
|
||||
type: Object,
|
||||
default: () => ({ localGroupPlural: 'Stämme', parentGroup: 'Bund', parentGroupPlural: 'Bünde' }),
|
||||
},
|
||||
})
|
||||
|
||||
const { request } = useAjax()
|
||||
|
||||
const parentGroups = ref([])
|
||||
const newName = ref('')
|
||||
const showCreate = ref(false)
|
||||
// ID des Eintrags, der gerade umbenannt wird, samt Entwurf des neuen Namens.
|
||||
const editingId = ref(null)
|
||||
const editName = ref('')
|
||||
|
||||
onMounted(async () => {
|
||||
await loadParentGroups()
|
||||
})
|
||||
|
||||
async function loadParentGroups() {
|
||||
const response = await request('/api/v1/admin/parent-groups/list')
|
||||
parentGroups.value = response?.parentGroups ?? []
|
||||
}
|
||||
|
||||
async function createParentGroup() {
|
||||
const response = await request('/api/v1/admin/parent-groups/create', {
|
||||
method: 'POST',
|
||||
body: { name: newName.value },
|
||||
})
|
||||
|
||||
if (response && response.status === 'success') {
|
||||
toast.success(response.message)
|
||||
newName.value = ''
|
||||
showCreate.value = false
|
||||
await loadParentGroups()
|
||||
} else {
|
||||
toast.error(response?.message ?? 'Fehler beim Anlegen')
|
||||
}
|
||||
}
|
||||
|
||||
function startEditing(parentGroup) {
|
||||
editingId.value = parentGroup.id
|
||||
editName.value = parentGroup.name
|
||||
}
|
||||
|
||||
async function saveName(parentGroup) {
|
||||
const response = await request('/api/v1/admin/parent-groups/' + parentGroup.id, {
|
||||
method: 'POST',
|
||||
body: { name: editName.value },
|
||||
})
|
||||
|
||||
if (response && response.status === 'success') {
|
||||
toast.success(response.message)
|
||||
editingId.value = null
|
||||
await loadParentGroups()
|
||||
} else {
|
||||
toast.error(response?.message ?? 'Fehler beim Speichern')
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteParentGroup(parentGroup) {
|
||||
if (!confirm('„' + parentGroup.name + '" wirklich löschen?')) {
|
||||
return
|
||||
}
|
||||
|
||||
const response = await request('/api/v1/admin/parent-groups/' + parentGroup.id, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
|
||||
if (response && response.status === 'success') {
|
||||
toast.success(response.message)
|
||||
await loadParentGroups()
|
||||
} else {
|
||||
toast.error(response?.message ?? 'Fehler beim Löschen')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AdminAppLayout :title="props.groupLabels.parentGroupPlural">
|
||||
<shadowed-box style="width: 95%; margin: 20px auto; padding: 20px; overflow-x: hidden;">
|
||||
<table class="parent-group-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Zugeordnete {{ props.groupLabels.localGroupPlural }}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="parentGroup in parentGroups" :key="parentGroup.id">
|
||||
<td>
|
||||
<input v-if="editingId === parentGroup.id" type="text" v-model="editName" class="form-input"
|
||||
@keyup.enter="saveName(parentGroup)" />
|
||||
<span v-else>{{ parentGroup.name }}</span>
|
||||
</td>
|
||||
<td>{{ parentGroup.tenantCount }}</td>
|
||||
<td class="actions">
|
||||
<template v-if="editingId === parentGroup.id">
|
||||
<button class="btn-save" @click="saveName(parentGroup)">Speichern</button>
|
||||
<button class="btn-cancel" @click="editingId = null">Abbrechen</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="btn-edit" @click="startEditing(parentGroup)">Umbenennen</button>
|
||||
<button v-if="parentGroup.deletable" class="btn-delete" @click="deleteParentGroup(parentGroup)">Löschen</button>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="hint">
|
||||
Löschen ist nur möglich, solange keine {{ props.groupLabels.localGroupPlural }} und keine Anmeldungen
|
||||
zugeordnet sind. „Ohne Zuordnung" bleibt immer bestehen.
|
||||
</p>
|
||||
|
||||
<div style="margin-top: 20px;">
|
||||
<button v-if="!showCreate" class="btn-create" @click="showCreate = true">Neuen Eintrag anlegen</button>
|
||||
|
||||
<div v-if="showCreate" class="create-form">
|
||||
<h3>Neuen Eintrag anlegen ({{ props.groupLabels.parentGroup }})</h3>
|
||||
<input type="text" v-model="newName" class="form-input" placeholder="Name"
|
||||
@keyup.enter="createParentGroup" />
|
||||
<div class="btn-group">
|
||||
<button class="btn-save" @click="createParentGroup">Anlegen</button>
|
||||
<button class="btn-cancel" @click="showCreate = false">Abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</shadowed-box>
|
||||
</AdminAppLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.parent-group-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.parent-group-table thead th {
|
||||
text-align: left;
|
||||
padding: 10px 16px;
|
||||
background-color: #f9fafb;
|
||||
color: #374151;
|
||||
font-weight: bold;
|
||||
border-bottom: 2px solid #d1d5db;
|
||||
}
|
||||
|
||||
.parent-group-table tbody td {
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin-top: 12px;
|
||||
color: #6b7280;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.create-form {
|
||||
margin-top: 15px;
|
||||
padding: 20px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.create-form h3 {
|
||||
margin: 0 0 15px 0;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
font-size: 0.95rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.btn-create, .btn-save, .btn-cancel, .btn-edit, .btn-delete {
|
||||
padding: 6px 16px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.btn-create, .btn-edit {
|
||||
background-color: #1d4899;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-create:hover, .btn-edit:hover {
|
||||
background-color: #163a7a;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
background-color: #16a34a;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-save:hover {
|
||||
background-color: #15803d;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background-color: #e5e7eb;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background-color: #d1d5db;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background-color: #dc2626;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background-color: #b91c1c;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user