From 64618cf8faac2c336e7cb8ae690e783b04953ae0 Mon Sep 17 00:00:00 2001 From: Norman Niati Date: Tue, 19 May 2026 13:59:29 +0200 Subject: [PATCH] feat(plugin-id/ui): highlight entity name in delete confirmation dialogs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Per Fabrice's review (18 mai 13h30): make the entity name stand out (bold + error color) in the "Confirm delete" dialogs for user, group and company, so the user can quickly verify what they're about to delete. Covers both the single-entity edit views (User/Group/CompanyEditView) and the row-level delete dialogs in the list views (User/Group/ CompanyListView). Bulk-delete dialogs are not touched — they show a count, not a name. Implementation: split the i18n message into two halves (before/after the name) and render the name as a styled span in the template. Keeps i18n strings free of HTML markup. Plugin-local translations live under ui/src/i18n/{en,fr}.js and are merged into the host i18n store from the plugin's install() hook via useI18nStore().merge() — same pattern documented in the host store. The original *.deleteConfirm keys remain in the host translations (unused after this change, left for any external consumer). --- ui/src/i18n/en.js | 11 +++++++++++ ui/src/i18n/fr.js | 11 +++++++++++ ui/src/index.js | 7 +++++++ ui/src/views/CompanyEditView.vue | 2 +- ui/src/views/CompanyListView.vue | 2 +- ui/src/views/GroupEditView.vue | 2 +- ui/src/views/GroupListView.vue | 2 +- ui/src/views/UserEditView.vue | 2 +- ui/src/views/UserListView.vue | 2 +- 9 files changed, 35 insertions(+), 6 deletions(-) create mode 100644 ui/src/i18n/en.js create mode 100644 ui/src/i18n/fr.js diff --git a/ui/src/i18n/en.js b/ui/src/i18n/en.js new file mode 100644 index 0000000..778f7a6 --- /dev/null +++ b/ui/src/i18n/en.js @@ -0,0 +1,11 @@ +// Plugin-local translations merged into the host i18n store at install +// time. Keep keys flat (dot-separated) to match the host's existing +// convention. +export default { + 'user.deleteConfirmBefore': 'Are you sure you want to delete ', + 'user.deleteConfirmAfter': '?', + 'group.deleteConfirmBefore': 'Are you sure you want to delete ', + 'group.deleteConfirmAfter': '?', + 'company.deleteConfirmBefore': 'Are you sure you want to delete ', + 'company.deleteConfirmAfter': '?', +} diff --git a/ui/src/i18n/fr.js b/ui/src/i18n/fr.js new file mode 100644 index 0000000..4a9c5cd --- /dev/null +++ b/ui/src/i18n/fr.js @@ -0,0 +1,11 @@ +// Plugin-local translations merged into the host i18n store at install +// time. Keep keys flat (dot-separated) to match the host's existing +// convention. +export default { + 'user.deleteConfirmBefore': 'Êtes-vous certain de supprimer ', + 'user.deleteConfirmAfter': ' ?', + 'group.deleteConfirmBefore': 'Êtes-vous certain de supprimer ', + 'group.deleteConfirmAfter': ' ?', + 'company.deleteConfirmBefore': 'Êtes-vous certain de supprimer ', + 'company.deleteConfirmAfter': ' ?', +} diff --git a/ui/src/index.js b/ui/src/index.js index ad93610..a10e316 100644 --- a/ui/src/index.js +++ b/ui/src/index.js @@ -33,6 +33,7 @@ if (typeof document !== 'undefined') { * Shared host surface (stores, composables) is imported from `@ligoj/host`, * kept external at build so plugin and host share the same instances. */ +import { useI18nStore } from '@ligoj/host' import IdPlugin from './IdPlugin.vue' import UserListView from './views/UserListView.vue' import UserEditView from './views/UserEditView.vue' @@ -43,6 +44,8 @@ import CompanyEditView from './views/CompanyEditView.vue' import DelegateListView from './views/DelegateListView.vue' import DelegateEditView from './views/DelegateEditView.vue' import ContainerScopeView from './views/ContainerScopeView.vue' +import enMessages from './i18n/en.js' +import frMessages from './i18n/fr.js' import service from './service.js' const features = { @@ -76,6 +79,10 @@ export default { for (const route of routes) { router.addRoute(route) } + // Register plugin-local translations into the host i18n store + const i18n = useI18nStore() + i18n.merge(enMessages, 'en') + i18n.merge(frMessages, 'fr') }, feature(action, ...args) { const fn = features[action] diff --git a/ui/src/views/CompanyEditView.vue b/ui/src/views/CompanyEditView.vue index 02138e2..7cf8162 100644 --- a/ui/src/views/CompanyEditView.vue +++ b/ui/src/views/CompanyEditView.vue @@ -60,7 +60,7 @@ {{ t('company.deleteTitle') }} - {{ t('company.deleteConfirm', { name: form.name }) }} + {{ t('company.deleteConfirmBefore') }}{{ form.name }}{{ t('company.deleteConfirmAfter') }} diff --git a/ui/src/views/CompanyListView.vue b/ui/src/views/CompanyListView.vue index 165203a..00b13f0 100644 --- a/ui/src/views/CompanyListView.vue +++ b/ui/src/views/CompanyListView.vue @@ -50,7 +50,7 @@ {{ t('company.deleteTitle') }} - {{ t('company.deleteConfirm', { name: deleteTarget?.name }) }} + {{ t('company.deleteConfirmBefore') }}{{ deleteTarget?.name }}{{ t('company.deleteConfirmAfter') }} diff --git a/ui/src/views/GroupEditView.vue b/ui/src/views/GroupEditView.vue index a660fcf..97089b4 100644 --- a/ui/src/views/GroupEditView.vue +++ b/ui/src/views/GroupEditView.vue @@ -30,7 +30,7 @@ {{ t('group.deleteTitle') }} - {{ t('group.deleteConfirm', { name: form.name }) }} + {{ t('group.deleteConfirmBefore') }}{{ form.name }}{{ t('group.deleteConfirmAfter') }} diff --git a/ui/src/views/GroupListView.vue b/ui/src/views/GroupListView.vue index 160129d..cb2beb7 100644 --- a/ui/src/views/GroupListView.vue +++ b/ui/src/views/GroupListView.vue @@ -50,7 +50,7 @@ {{ t('group.deleteTitle') }} - {{ t('group.deleteConfirm', { name: deleteTarget?.name }) }} + {{ t('group.deleteConfirmBefore') }}{{ deleteTarget?.name }}{{ t('group.deleteConfirmAfter') }} diff --git a/ui/src/views/UserEditView.vue b/ui/src/views/UserEditView.vue index 48424ec..0ec13b8 100644 --- a/ui/src/views/UserEditView.vue +++ b/ui/src/views/UserEditView.vue @@ -119,7 +119,7 @@ {{ t('user.deleteTitle') }} - {{ t('user.deleteConfirm', { id: form.id }) }} + {{ t('user.deleteConfirmBefore') }}{{ form.id }}{{ t('user.deleteConfirmAfter') }} diff --git a/ui/src/views/UserListView.vue b/ui/src/views/UserListView.vue index a275852..d4b7ce5 100644 --- a/ui/src/views/UserListView.vue +++ b/ui/src/views/UserListView.vue @@ -62,7 +62,7 @@ {{ t('user.deleteTitle') }} - {{ t('user.deleteConfirm', { id: deleteTarget?.id }) }} + {{ t('user.deleteConfirmBefore') }}{{ deleteTarget?.id }}{{ t('user.deleteConfirmAfter') }}