From 58489c3a80f1d075417590bfddd7ddc85824ef8f Mon Sep 17 00:00:00 2001 From: Norman Niati Date: Mon, 1 Jun 2026 16:02:01 +0200 Subject: [PATCH] feat(ui): add entity icons to dialog titles Prepend each dialog title with an icon representing the entity it concerns, generalizing the pattern already used by the group/company detail dialogs: - raw v-dialog titles (container-scope, delete and bulk-delete confirms) get a leading v-icon; - LigojConfirmDialog call sites pass the new :icon prop; - unsaved-changes guards use a save-alert icon. Icons reuse the shared TYPE_ICONS map (extended with SCOPE and DELEGATE). Closes #51 --- ui/src/components/CompanyEditPanel.vue | 2 ++ ui/src/components/GroupEditPanel.vue | 2 ++ ui/src/components/GroupMembersPanel.vue | 3 ++- ui/src/composables/delegateTypes.js | 6 ++++++ ui/src/views/CompanyListView.vue | 11 +++++++++-- ui/src/views/ContainerScopeView.vue | 11 +++++++++-- ui/src/views/DelegateEditDialog.vue | 9 ++++++--- ui/src/views/DelegateListView.vue | 6 +++++- ui/src/views/GroupListView.vue | 11 +++++++++-- ui/src/views/UserEditDialog.vue | 8 +++++--- ui/src/views/UserListView.vue | 7 ++++--- 11 files changed, 59 insertions(+), 17 deletions(-) diff --git a/ui/src/components/CompanyEditPanel.vue b/ui/src/components/CompanyEditPanel.vue index 1366f5b..0b2e21a 100644 --- a/ui/src/components/CompanyEditPanel.vue +++ b/ui/src/components/CompanyEditPanel.vue @@ -99,6 +99,7 @@ import { ref, computed, onMounted, onBeforeUnmount } from 'vue' import { useApi, useErrorStore, useI18nStore, LigojConfirmDialog } from '@ligoj/host' +import { TYPE_ICONS } from '../composables/delegateTypes.js' const props = defineProps({ /** diff --git a/ui/src/components/GroupEditPanel.vue b/ui/src/components/GroupEditPanel.vue index c174d37..1e827c8 100644 --- a/ui/src/components/GroupEditPanel.vue +++ b/ui/src/components/GroupEditPanel.vue @@ -75,6 +75,7 @@ import { ref, computed, onMounted } from 'vue' import { useApi, useErrorStore, useI18nStore, LigojConfirmDialog } from '@ligoj/host' +import { TYPE_ICONS } from '../composables/delegateTypes.js' const props = defineProps({ /** diff --git a/ui/src/components/GroupMembersPanel.vue b/ui/src/components/GroupMembersPanel.vue index 86a89d4..e0ebd2d 100644 --- a/ui/src/components/GroupMembersPanel.vue +++ b/ui/src/components/GroupMembersPanel.vue @@ -81,7 +81,7 @@ - + {{ t('id.group.removeConfirmBefore') }}{{ removeTarget?.id }}{{ t('id.group.removeConfirmAfter', { group: groupName }) }} @@ -97,6 +97,7 @@ import { LigojDataTableServer, LigojConfirmDialog, } from '@ligoj/host' +import { TYPE_ICONS } from '../composables/delegateTypes.js' const props = defineProps({ /** diff --git a/ui/src/composables/delegateTypes.js b/ui/src/composables/delegateTypes.js index c5e24f7..a8c535e 100644 --- a/ui/src/composables/delegateTypes.js +++ b/ui/src/composables/delegateTypes.js @@ -18,6 +18,12 @@ export const TYPE_ICONS = { GROUP: 'mdi-account-group', COMPANY: 'mdi-domain', TREE: 'mdi-file-tree', + // Entity icons reused for dialog titles (issue #51): the container-scope + // view and delegations have no delegation-enum entry but still need a + // representative icon. SCOPE matches the file-tree-outline used in the + // container-scope datatable header. + SCOPE: 'mdi-file-tree-outline', + DELEGATE: 'mdi-shield-account-outline', } // Receivers cannot be a TREE — only USER / GROUP / COMPANY can hold a diff --git a/ui/src/views/CompanyListView.vue b/ui/src/views/CompanyListView.vue index 3ab7c87..ff20e00 100644 --- a/ui/src/views/CompanyListView.vue +++ b/ui/src/views/CompanyListView.vue @@ -95,7 +95,10 @@ - {{ t('company.deleteTitle') }} + + {{ TYPE_ICONS.COMPANY }} + {{ t('company.deleteTitle') }} + {{ t('company.deleteConfirmBefore') }}{{ deleteTarget?.name }}{{ t('company.deleteConfirmAfter') }} @@ -109,7 +112,10 @@ - {{ t('common.bulkDeleteTitle') }} + + {{ TYPE_ICONS.COMPANY }} + {{ t('common.bulkDeleteTitle') }} + {{ t('common.bulkDeleteConfirm', { count: selected.length }) }} @@ -125,6 +131,7 @@ import { ref, computed, onMounted } from 'vue' import { useRoute, useRouter } from 'vue-router' import { useDataTable, useApi, useAppStore, useErrorStore, useI18nStore, LigojDataTableServer } from '@ligoj/host' +import { TYPE_ICONS } from '../composables/delegateTypes.js' import CompanyEditPanel from '../components/CompanyEditPanel.vue' const router = useRouter() diff --git a/ui/src/views/ContainerScopeView.vue b/ui/src/views/ContainerScopeView.vue index b487e86..3ade728 100644 --- a/ui/src/views/ContainerScopeView.vue +++ b/ui/src/views/ContainerScopeView.vue @@ -42,7 +42,10 @@ - {{ editTarget?.id ? t('containerScope.edit') : t('containerScope.new') }} + + {{ TYPE_ICONS.SCOPE }} + {{ editTarget?.id ? t('containerScope.edit') : t('containerScope.new') }} + @@ -59,7 +62,10 @@ - {{ t('containerScope.deleteTitle') }} + + {{ TYPE_ICONS.SCOPE }} + {{ t('containerScope.deleteTitle') }} + {{ t('containerScope.deleteConfirm', { name: deleteTarget?.name }) }} @@ -74,6 +80,7 @@