tristan
681775d367
Supprime la colonne actions des tables users et roles (la ligne cliquable ouvre deja le drawer). Deplace la suppression d'un role dans le drawer d'edition (bouton danger avec icone, desactive pour les roles systeme). Harmonise les boutons annuler en variant tertiary et ajoute les icones manquantes (plus pour nouveau role, poubelle pour supprimer). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
108 lines
2.8 KiB
Vue
108 lines
2.8 KiB
Vue
<template>
|
|
<div>
|
|
<!-- En-tete -->
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-xl font-bold text-primary-500 sm:text-2xl">
|
|
{{ t('admin.users.title') }}
|
|
</h1>
|
|
</div>
|
|
|
|
<!-- Table des utilisateurs -->
|
|
<MalioDataTable
|
|
class="mt-6"
|
|
:columns="columns"
|
|
:items="userItems"
|
|
:total-items="users.length"
|
|
:row-clickable="canManage"
|
|
:empty-message="t('admin.users.noUsers')"
|
|
@row-click="onRowClick"
|
|
>
|
|
<template #cell-admin="{ item }">
|
|
<span
|
|
v-if="item.admin"
|
|
class="inline-flex items-center rounded-full bg-purple-100 px-2.5 py-0.5 text-xs font-medium text-purple-800"
|
|
>
|
|
{{ t('admin.users.table.admin') }}
|
|
</span>
|
|
</template>
|
|
</MalioDataTable>
|
|
|
|
<!-- Drawer RBAC -->
|
|
<UserRbacDrawer
|
|
v-model="drawerOpen"
|
|
:user="selectedUser"
|
|
@saved="onUserSaved"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { UserListItem } from '~/shared/types/rbac'
|
|
|
|
const { t } = useI18n()
|
|
const api = useApi()
|
|
const { can } = usePermissions()
|
|
|
|
useHead({ title: t('admin.users.title') })
|
|
|
|
const canManage = computed(() => can('core.users.manage'))
|
|
|
|
const users = ref<UserListItem[]>([])
|
|
const loading = ref(false)
|
|
const drawerOpen = ref(false)
|
|
const selectedUser = ref<UserListItem | null>(null)
|
|
|
|
const columns = [
|
|
{ key: 'username', label: t('admin.users.table.username') },
|
|
{ key: 'admin', label: t('admin.users.table.admin') },
|
|
{ key: 'roles', label: t('admin.users.table.roles') },
|
|
{ key: 'directPermissions', label: t('admin.users.table.directPermissions') },
|
|
]
|
|
|
|
const userItems = computed(() =>
|
|
users.value.map(user => ({
|
|
id: user.id,
|
|
username: user.username,
|
|
admin: user.isAdmin,
|
|
roles: user.roles.length,
|
|
directPermissions: user.directPermissions.length,
|
|
}))
|
|
)
|
|
|
|
async function loadUsers() {
|
|
loading.value = true
|
|
try {
|
|
const data = await api.get<{ member: UserListItem[] }>(
|
|
'/users',
|
|
{},
|
|
{ toast: false },
|
|
)
|
|
users.value = data.member
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function getUserById(id: number): UserListItem | undefined {
|
|
return users.value.find(u => u.id === id)
|
|
}
|
|
|
|
function openDrawer(user: UserListItem) {
|
|
selectedUser.value = user
|
|
drawerOpen.value = true
|
|
}
|
|
|
|
function onRowClick(item: Record<string, unknown>) {
|
|
const user = getUserById(item.id as number)
|
|
if (user) openDrawer(user)
|
|
}
|
|
|
|
function onUserSaved() {
|
|
loadUsers()
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadUsers()
|
|
})
|
|
</script>
|