User management

2026-06-21 21:56:35 +02:00
parent cfc7c7eee2
commit aebb2f9aaa
11 changed files with 717 additions and 0 deletions
@@ -0,0 +1,167 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import AdminAppLayout from "../../../../resources/js/layouts/AdminAppLayout.vue";
+import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";
+import FullScreenModal from "../../../Views/Components/FullScreenModal.vue";
+import UserDetail from "./Partials/UserDetail.vue";
+import { useAjax } from "../../../../resources/js/components/ajaxHandler.js";
+
+const { request } = useAjax()
+
+const props = defineProps({
+    isLvTenant: Boolean,
+})
+
+const users = ref([])
+const selectedUserId = ref(null)
+const userDetail = ref(null)
+
+onMounted(async () => {
+    await loadUsers()
+})
+
+async function loadUsers() {
+    const response = await fetch('/api/v1/admin/users/list', {
+        headers: {
+            'Accept': 'application/json',
+            'X-Requested-With': 'XMLHttpRequest',
+        },
+        credentials: 'same-origin',
+    })
+    const data = await response.json()
+    users.value = data.users
+}
+
+async function selectUser(userId) {
+    if (selectedUserId.value === userId) {
+        selectedUserId.value = null
+        userDetail.value = null
+        return
+    }
+
+    selectedUserId.value = userId
+    const response = await fetch('/api/v1/admin/users/' + userId, {
+        headers: {
+            'Accept': 'application/json',
+            'X-Requested-With': 'XMLHttpRequest',
+        },
+        credentials: 'same-origin',
+    })
+    userDetail.value = await response.json()
+}
+
+function onUserUpdated() {
+    loadUsers()
+    if (selectedUserId.value) {
+        selectUser(selectedUserId.value)
+    }
+}
+
+function onDetailClosed() {
+    selectedUserId.value = null
+    userDetail.value = null
+    loadUsers()
+}
+</script>
+
+<template>
+    <AdminAppLayout title="Benutzer*innen">
+        <shadowed-box style="width: 95%; margin: 20px auto; padding: 20px; overflow-x: hidden;">
+            <table class="user-table">
+                <thead>
+                    <tr>
+                        <th>Nachname</th>
+                        <th>Vorname</th>
+                        <th>Pfadiname</th>
+                        <th v-if="props.isLvTenant">Stamm</th>
+                        <th>Status</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="user in users"
+                        :key="user.id"
+                        :class="['user-row', { 'user-row-selected': selectedUserId === user.id }]"
+                        @click="selectUser(user.id)">
+                        <td>{{ user.lastname }}</td>
+                        <td>{{ user.firstname }}</td>
+                        <td>{{ user.nickname }}</td>
+                        <td v-if="props.isLvTenant">{{ user.local_group_name }}</td>
+                        <td>
+                            <span :class="user.active ? 'badge-active' : 'badge-inactive'">
+                                {{ user.active ? 'Aktiv' : 'Inaktiv' }}
+                            </span>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+
+        </shadowed-box>
+
+        <FullScreenModal :show="userDetail !== null" @close="onDetailClosed">
+            <UserDetail
+                v-if="userDetail"
+                :data="userDetail"
+                @updated="onUserUpdated"
+                @closed="onDetailClosed"
+            />
+        </FullScreenModal>
+    </AdminAppLayout>
+</template>
+
+<style scoped>
+.user-table {
+    width: 100%;
+    border-collapse: collapse;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.user-table thead th {
+    text-align: left;
+    padding: 10px 16px;
+    background-color: #f9fafb;
+    color: #374151;
+    font-weight: bold;
+    border-bottom: 2px solid #d1d5db;
+}
+
+.user-table tbody td {
+    padding: 10px 16px;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.user-row {
+    cursor: pointer;
+}
+
+.user-row:hover {
+    background-color: #f3f4f6;
+}
+
+.user-row-selected {
+    background-color: #eff6ff;
+}
+
+.badge-active {
+    display: inline-block;
+    padding: 3px 12px;
+    border-radius: 12px;
+    font-size: 0.85rem;
+    font-weight: bold;
+    color: #166534;
+    background-color: #dcfce7;
+    border: 1px solid #22c55e;
+}
+
+.badge-inactive {
+    display: inline-block;
+    padding: 3px 12px;
+    border-radius: 12px;
+    font-size: 0.85rem;
+    font-weight: bold;
+    color: #991b1b;
+    background-color: #fee2e2;
+    border: 1px solid #ef4444;
+}
+</style>