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>
80 lines
2.2 KiB
Vue
80 lines
2.2 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<Transition name="fade">
|
|
<div
|
|
v-if="modelValue"
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
|
|
@click.self="cancel"
|
|
>
|
|
<div class="w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
|
|
<h3 class="text-lg font-semibold text-neutral-900">
|
|
{{ t('admin.roles.delete.title') }}
|
|
</h3>
|
|
<p class="mt-3 text-sm text-neutral-600">
|
|
{{ t('admin.roles.delete.message', { label: roleLabel }) }}
|
|
</p>
|
|
<div class="mt-6 flex justify-end gap-3">
|
|
<MalioButton
|
|
:label="t('common.cancel')"
|
|
variant="secondary"
|
|
@click="cancel"
|
|
/>
|
|
<MalioButton
|
|
:label="t('common.delete')"
|
|
variant="danger"
|
|
icon-name="mdi:delete-outline"
|
|
icon-position="left"
|
|
:disabled="loading"
|
|
@click="confirm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { t } = useI18n()
|
|
|
|
defineProps<{
|
|
modelValue: boolean
|
|
roleLabel: string
|
|
loading: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: boolean]
|
|
confirm: []
|
|
}>()
|
|
|
|
// Ferme la modale sans confirmer
|
|
function cancel() {
|
|
emit('update:modelValue', false)
|
|
}
|
|
|
|
// Emet l'evenement de confirmation de suppression
|
|
function confirm() {
|
|
emit('confirm')
|
|
}
|
|
|
|
// Fermer la modale avec la touche Escape
|
|
function onKeydown(e: KeyboardEvent) {
|
|
if (e.key === 'Escape') cancel()
|
|
}
|
|
|
|
onMounted(() => document.addEventListener('keydown', onKeydown))
|
|
onUnmounted(() => document.removeEventListener('keydown', onKeydown))
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|