64 lines
3.6 KiB
Vue
64 lines
3.6 KiB
Vue
<script setup>
|
|
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
|
|
import Pagination from '@/Components/Pagination.vue'
|
|
import { Head, Link, router } from '@inertiajs/vue3'
|
|
|
|
defineProps({ users: Object, services: Array, roles: Array })
|
|
|
|
const roleLabels = { admin: 'Administrateur', responsable: 'Responsable', acheteur: 'Acheteur', lecteur: 'Lecteur' }
|
|
|
|
function toggleActive(user) {
|
|
router.patch(route('users.toggle-active', user.id))
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Utilisateurs" />
|
|
<AuthenticatedLayout>
|
|
<template #header>
|
|
<h1 class="text-xl font-semibold text-gray-900">Utilisateurs</h1>
|
|
</template>
|
|
|
|
<div class="rounded-xl bg-white shadow-sm border border-gray-100 overflow-hidden">
|
|
<table class="min-w-full divide-y divide-gray-100 text-sm">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nom</th>
|
|
<th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
|
|
<th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Service</th>
|
|
<th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase">Rôle</th>
|
|
<th class="px-5 py-3 text-center text-xs font-medium text-gray-500 uppercase">Statut</th>
|
|
<th class="px-5 py-3 text-center text-xs font-medium text-gray-500 uppercase">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-50">
|
|
<tr v-for="u in users.data" :key="u.id" :class="['hover:bg-gray-50', !u.active ? 'opacity-60' : '']">
|
|
<td class="px-5 py-3 font-medium text-gray-900">{{ u.name }}</td>
|
|
<td class="px-5 py-3 text-gray-500">{{ u.email }}</td>
|
|
<td class="px-5 py-3 text-gray-500">{{ u.service?.nom ?? '—' }}</td>
|
|
<td class="px-5 py-3">
|
|
<span class="rounded-full bg-blue-100 px-2.5 py-1 text-xs font-medium text-blue-700">
|
|
{{ roleLabels[u.roles?.[0]?.name] ?? u.roles?.[0]?.name ?? 'Aucun' }}
|
|
</span>
|
|
</td>
|
|
<td class="px-5 py-3 text-center">
|
|
<button @click="toggleActive(u)"
|
|
:class="['rounded-full px-2.5 py-1 text-xs font-medium transition-colors', u.active ? 'bg-green-100 text-green-700 hover:bg-green-200' : 'bg-gray-100 text-gray-600 hover:bg-gray-200']">
|
|
{{ u.active ? 'Actif' : 'Inactif' }}
|
|
</button>
|
|
</td>
|
|
<td class="px-5 py-3 text-center">
|
|
<Link :href="route('users.edit', u.id)" class="text-gray-400 hover:text-indigo-600 transition-colors">
|
|
<svg class="h-4 w-4 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
|
|
</Link>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="border-t border-gray-100 px-5 py-3">
|
|
<Pagination :links="users.links" :meta="users.meta" />
|
|
</div>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
</template>
|