From 79345e6d208963cd3ef3dcb521c85861a149a0d4 Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Wed, 27 May 2026 17:09:50 +0200
Subject: [PATCH] feat(delegate): highlight name in delete confirmations

Both delete dialogs of the Delegate screen now render the receiver
name in <strong class="text-error"> via the LigojConfirmDialog
default slot, matching the pattern of PR #39 for User / Company /
Group / GroupMembers:

- DelegateListView: the trash-icon dialog from each row (inline
  <v-dialog> converted to LigojConfirmDialog + slot)
- DelegateEditDialog: the "Delete" button inside the edit popup
  (existing LigojConfirmDialog with :message= switched to the slot)

The host's monolithic delegate.deleteConfirm key stays intact; two
plugin-local fragments (delegate.deleteConfirmBefore/After) are
added in FR + EN to wrap the name.

Mini-commit deliberately split from PR #39 because the Delegate
dialog files did not exist on feature/vuejs until PR #35 was merged.

Closes #37
---
 ui/src/i18n/en.js                   |  5 +++++
 ui/src/i18n/fr.js                   |  5 +++++
 ui/src/views/DelegateEditDialog.vue | 12 ++++++++++--
 ui/src/views/DelegateListView.vue   | 29 +++++++++++++++--------------
 4 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/ui/src/i18n/en.js b/ui/src/i18n/en.js
index e2cc492..3ea4652 100644
--- a/ui/src/i18n/en.js
+++ b/ui/src/i18n/en.js
@@ -38,6 +38,11 @@ export default {
   'delegate.write': 'Write',
   'delegate.adminHelp': 'With the administration security level on this resource, the receivers of this delegation can create other delegations to share this access with other valid receivers',
   'delegate.writeHelp': 'With the write security level, the receivers of this delegation can modify the members of the involved groups. Without this access, this delegation grants read-only rights',
+  // Fragments wrapping the receiver name in bold red on the delete
+  // confirmation (issue #37). The host keeps the monolithic
+  // `delegate.deleteConfirm` key intact.
+  'delegate.deleteConfirmBefore': 'Are you sure you want to delete the delegation for ',
+  'delegate.deleteConfirmAfter': '?',
   'user.deleteConfirmBefore': 'Are you sure you want to delete ',
   'user.deleteConfirmAfter': '?',
   'group.deleteConfirmBefore': 'Are you sure you want to delete ',
diff --git a/ui/src/i18n/fr.js b/ui/src/i18n/fr.js
index 6997d56..dcc9721 100644
--- a/ui/src/i18n/fr.js
+++ b/ui/src/i18n/fr.js
@@ -31,6 +31,11 @@ export default {
   'delegate.write': 'Écriture',
   'delegate.adminHelp': 'Avec le niveau de sécurité d\'administration sur cette ressource, les receveurs de cette délégation peuvent créer d\'autres délégations pour partager cet accès avec d\'autres receveurs valides',
   'delegate.writeHelp': 'Avec le niveau de sécurité d\'écriture, les receveurs de cette délégation peuvent modifier les membres des groupes impliqués. Sans cet accès cette délégation ne donne qu\'un droit de lecture',
+  // Fragments encadrant le nom du destinataire en gras-rouge dans la
+  // confirmation de suppression (issue #37). Le host garde la clé
+  // monolithique `delegate.deleteConfirm` intacte.
+  'delegate.deleteConfirmBefore': 'Êtes-vous certain de supprimer la délégation pour ',
+  'delegate.deleteConfirmAfter': ' ?',
   'user.deleteConfirmBefore': 'Êtes-vous certain de supprimer ',
   'user.deleteConfirmAfter': ' ?',
   'group.deleteConfirmBefore': 'Êtes-vous certain de supprimer ',
diff --git a/ui/src/views/DelegateEditDialog.vue b/ui/src/views/DelegateEditDialog.vue
index 9c5418d..7f05d95 100644
--- a/ui/src/views/DelegateEditDialog.vue
+++ b/ui/src/views/DelegateEditDialog.vue
@@ -103,8 +103,16 @@
       </v-card>
     </v-dialog>
 
-    <LigojConfirmDialog v-model="confirmDelete" :title="t('delegate.deleteTitle')" :message="t('delegate.deleteConfirm', { name: form.receiver })" :confirm-label="t('common.delete')"
-      confirm-color="error" :loading="deleting" @confirm="remove" />
+    <!-- Receiver name rendered in bold red via the LigojConfirmDialog
+         default slot, mirroring the User/Group/Company/GroupMembers
+         confirmation pattern. The host's monolithic
+         `delegate.deleteConfirm` key stays intact for any other
+         consumer; we just use two plugin-local fragments around the
+         name. -->
+    <LigojConfirmDialog v-model="confirmDelete" :title="t('delegate.deleteTitle')" :confirm-label="t('common.delete')"
+      confirm-color="error" :loading="deleting" @confirm="remove">
+      {{ t('delegate.deleteConfirmBefore') }}<strong class="text-error">{{ form.receiver }}</strong>{{ t('delegate.deleteConfirmAfter') }}
+    </LigojConfirmDialog>
 
     <!-- Unsaved-changes guard. Triggered either by a dialog close request
          (Cancel / Esc / scrim) or by useFormGuard's onBeforeRouteLeave
diff --git a/ui/src/views/DelegateListView.vue b/ui/src/views/DelegateListView.vue
index 726bb36..e61baa3 100644
--- a/ui/src/views/DelegateListView.vue
+++ b/ui/src/views/DelegateListView.vue
@@ -67,19 +67,20 @@
       {{ t('delegate.empty') }}
     </v-alert>
 
-    <v-dialog v-model="deleteDialog" max-width="400">
-      <v-card>
-        <v-card-title>{{ t('delegate.deleteTitle') }}</v-card-title>
-        <v-card-text>
-          {{ t('delegate.deleteConfirm', { name: deleteTarget?.receiver?.name || deleteTarget?.name || deleteTarget?.id }) }}
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn variant="text" @click="deleteDialog = false">{{ t('common.cancel') }}</v-btn>
-          <v-btn color="error" variant="elevated" :loading="deleting" @click="confirmDelete">{{ t('common.delete') }}</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+    <!-- Receiver name rendered in bold red via the LigojConfirmDialog
+         default slot (issue #37), matching the pattern of PR #39
+         for User / Company / Group / GroupMembers and the in-popup
+         delete confirmation of DelegateEditDialog. -->
+    <LigojConfirmDialog
+      v-model="deleteDialog"
+      :title="t('delegate.deleteTitle')"
+      :confirm-label="t('common.delete')"
+      confirm-color="error"
+      :loading="deleting"
+      @confirm="confirmDelete"
+    >
+      {{ t('delegate.deleteConfirmBefore') }}<strong class="text-error">{{ deleteTarget?.receiver?.name || deleteTarget?.name || deleteTarget?.id }}</strong>{{ t('delegate.deleteConfirmAfter') }}
+    </LigojConfirmDialog>
 
     <v-dialog v-model="bulkDeleteDialog" max-width="400">
       <v-card>
@@ -100,7 +101,7 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import { useDataTable, useApi, useAppStore, useI18nStore, LigojDataTableServer } from '@ligoj/host'
+import { useDataTable, useApi, useAppStore, useI18nStore, LigojDataTableServer, LigojConfirmDialog } from '@ligoj/host'
 import DelegateEditDialog from './DelegateEditDialog.vue'
 import { TYPE_ICONS } from '../composables/delegateTypes.js'