Support oft parent groups

app/Domains/Admin/Views/TenantList.vue

@@ -5,6 +5,13 @@ 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: () => ({ localGroup: 'Stamm', localGroupPlural: 'Stämme', parentGroup: 'Bund' }),
+    },
+})
+
 const { request } = useAjax()
 
 function openTenant(slug) {
@@ -12,12 +19,16 @@ function openTenant(slug) {
 }
 
 const tenants = ref([])
+const parentGroups = ref([])
 const showCreate = ref(false)
-const createForm = ref({
+const emptyForm = () => ({
     name: '',
     slug: '',
     url: '',
+    // Pflichtangabe; vorbelegt mit „Ohne Zuordnung", sobald die Liste geladen ist.
+    parent_group_id: parentGroups.value.find(g => g.isFallback)?.id ?? null,
 })
+const createForm = ref(emptyForm())
 
 onMounted(async () => {
     await loadTenants()
@@ -33,6 +44,11 @@ async function loadTenants() {
     })
     const data = await response.json()
     tenants.value = data.tenants
+    parentGroups.value = data.parentGroups ?? []
+
+    if (createForm.value.parent_group_id === null) {
+        createForm.value.parent_group_id = parentGroups.value.find(g => g.isFallback)?.id ?? null
+    }
 }
 
 async function createTenant() {
@@ -44,7 +60,7 @@ async function createTenant() {
     if (response && response.status === 'success') {
         toast.success(response.message)
         showCreate.value = false
-        createForm.value = { name: '', slug: '', url: '' }
+        createForm.value = emptyForm()
         await loadTenants()
     } else {
         toast.error(response?.message ?? 'Fehler beim Anlegen')
@@ -53,12 +69,13 @@ async function createTenant() {
 </script>
 
 <template>
-    <AdminAppLayout title="Stämme">
+    <AdminAppLayout :title="props.groupLabels.localGroupPlural">
         <shadowed-box style="width: 95%; margin: 20px auto; padding: 20px; overflow-x: hidden;">
             <table class="tenant-table">
                 <thead>
                     <tr>
                         <th>Name</th>
+                        <th>{{ props.groupLabels.parentGroup }}</th>
                         <th>Slug</th>
                         <th>URL</th>
                         <th>Status</th>
@@ -67,6 +84,7 @@ async function createTenant() {
                 <tbody>
                     <tr v-for="tenant in tenants" :key="tenant.slug" class="tenant-row" @click="openTenant(tenant.slug)">
                         <td>{{ tenant.name }}</td>
+                        <td>{{ tenant.parentGroup ?? '—' }}</td>
                         <td>{{ tenant.slug }}</td>
                         <td>{{ tenant.url }}</td>
                         <td>
@@ -79,15 +97,23 @@ async function createTenant() {
             </table>
 
             <div style="margin-top: 20px;">
-                <button v-if="!showCreate" class="btn-create" @click="showCreate = true">Neuen Stamm anlegen</button>
+                <button v-if="!showCreate" class="btn-create" @click="showCreate = true">Neuen Eintrag anlegen ({{ props.groupLabels.localGroup }})</button>
 
                 <div v-if="showCreate" class="create-form">
-                    <h3>Neuen Stamm anlegen</h3>
+                    <h3>Neuen Eintrag anlegen ({{ props.groupLabels.localGroup }})</h3>
                     <table class="form-table">
                         <tr>
                             <th>Name</th>
                             <td><input type="text" v-model="createForm.name" class="form-input" /></td>
                         </tr>
+                        <tr>
+                            <th>{{ props.groupLabels.parentGroup }}</th>
+                            <td>
+                                <select v-model="createForm.parent_group_id" class="form-input">
+                                    <option v-for="group in parentGroups" :key="group.id" :value="group.id">{{ group.name }}</option>
+                                </select>
+                            </td>
+                        </tr>
                         <tr>
                             <th>Slug</th>
                             <td><input type="text" v-model="createForm.slug" class="form-input" /></td>