mareike/app/Domains/Admin/Views/ParentGroupList.vue

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