168 lines
4.3 KiB
Vue
168 lines
4.3 KiB
Vue
<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>
|