Skip to content

feat(ui): add entity icons to dialog titles #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fdaugan merged 1 commit into from
Jun 1, 2026
Merged

feat(ui): add entity icons to dialog titles #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions ui/src/components/CompanyEditPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
<LigojConfirmDialog
v-model="confirmDelete"
:title="t('company.deleteTitle')"
:icon="TYPE_ICONS.COMPANY"
:confirm-label="t('common.delete')"
confirm-color="error"
:loading="deleting"
Expand All @@ -112,6 +113,7 @@
<script setup>
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({
/**
Expand Down
2 changes: 2 additions & 0 deletions ui/src/components/GroupEditPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@
<LigojConfirmDialog
v-model="confirmDelete"
:title="t('group.deleteTitle')"
:icon="TYPE_ICONS.GROUP"
:confirm-label="t('common.delete')"
confirm-color="error"
:loading="deleting"
Expand All @@ -88,6 +89,7 @@
<script setup>
import { ref, computed, onMounted } from 'vue'
import { useApi, useErrorStore, useI18nStore, LigojConfirmDialog } from '@ligoj/host'
import { TYPE_ICONS } from '../composables/delegateTypes.js'

const props = defineProps({
/**
Expand Down
3 changes: 2 additions & 1 deletion ui/src/components/GroupMembersPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
<!-- Confirm dialog. Vuetify teleports it to <body>, so being
nested inside this panel — which itself can be inside a
<v-dialog> — doesn't cause z-index issues. -->
<LigojConfirmDialog v-model="removeDialog" :title="t('id.group.removeTitle')" :confirm-label="t('common.remove')" confirm-color="error" :loading="removing" @confirm="confirmRemove">
<LigojConfirmDialog v-model="removeDialog" :title="t('id.group.removeTitle')" :icon="TYPE_ICONS.USER" :confirm-label="t('common.remove')" confirm-color="error" :loading="removing" @confirm="confirmRemove">
{{ t('id.group.removeConfirmBefore') }}<strong class="text-error">{{ removeTarget?.id }}</strong>{{ t('id.group.removeConfirmAfter', { group: groupName }) }}
</LigojConfirmDialog>
</div>
Expand All @@ -97,6 +97,7 @@ import {
LigojDataTableServer,
LigojConfirmDialog,
} from '@ligoj/host'
import { TYPE_ICONS } from '../composables/delegateTypes.js'

const props = defineProps({
/**
Expand Down
6 changes: 6 additions & 0 deletions ui/src/composables/delegateTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
11 changes: 9 additions & 2 deletions ui/src/views/CompanyListView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,10 @@

<v-dialog v-model="deleteDialog" max-width="400">
<v-card>
<v-card-title>{{ t('company.deleteTitle') }}</v-card-title>
<v-card-title class="d-flex align-center ga-2">
<v-icon color="primary">{{ TYPE_ICONS.COMPANY }}</v-icon>
<span>{{ t('company.deleteTitle') }}</span>
</v-card-title>
<v-card-text>
{{ t('company.deleteConfirmBefore') }}<strong class="text-error">{{ deleteTarget?.name }}</strong>{{ t('company.deleteConfirmAfter') }}
</v-card-text>
Expand All @@ -109,7 +112,10 @@

<v-dialog v-model="bulkDeleteDialog" max-width="400">
<v-card>
<v-card-title>{{ t('common.bulkDeleteTitle') }}</v-card-title>
<v-card-title class="d-flex align-center ga-2">
<v-icon color="primary">{{ TYPE_ICONS.COMPANY }}</v-icon>
<span>{{ t('common.bulkDeleteTitle') }}</span>
</v-card-title>
<v-card-text>{{ t('common.bulkDeleteConfirm', { count: selected.length }) }}</v-card-text>
<v-card-actions>
<v-spacer />
Expand All @@ -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()
Expand Down
11 changes: 9 additions & 2 deletions ui/src/views/ContainerScopeView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,10 @@

<v-dialog v-model="editDialog" max-width="500">
<v-card>
<v-card-title>{{ editTarget?.id ? t('containerScope.edit') : t('containerScope.new') }}</v-card-title>
<v-card-title class="d-flex align-center ga-2">
<v-icon color="primary">{{ TYPE_ICONS.SCOPE }}</v-icon>
<span>{{ editTarget?.id ? t('containerScope.edit') : t('containerScope.new') }}</span>
</v-card-title>
<v-card-text>
<v-form ref="formRef" @submit.prevent="save">
<v-text-field v-model="editForm.name" :label="t('common.name')" :rules="[rules.required]" variant="outlined" class="mb-2" />
Expand All @@ -59,7 +62,10 @@

<v-dialog v-model="deleteDialog" max-width="400">
<v-card>
<v-card-title>{{ t('containerScope.deleteTitle') }}</v-card-title>
<v-card-title class="d-flex align-center ga-2">
<v-icon color="primary">{{ TYPE_ICONS.SCOPE }}</v-icon>
<span>{{ t('containerScope.deleteTitle') }}</span>
</v-card-title>
<v-card-text>{{ t('containerScope.deleteConfirm', { name: deleteTarget?.name }) }}</v-card-text>
<v-card-actions>
<v-spacer />
Expand All @@ -74,6 +80,7 @@
<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { useApi, useAppStore, useErrorStore, useI18nStore, LigojDataTable } from '@ligoj/host'
import { TYPE_ICONS } from '../composables/delegateTypes.js'

const api = useApi()
const appStore = useAppStore()
Expand Down
9 changes: 6 additions & 3 deletions ui/src/views/DelegateEditDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@
pattern as UserEditDialog. -->
<v-dialog :model-value="modelValue" @update:model-value="onDialogModel" max-width="700" scrollable>
<v-card>
<v-card-title>{{ isEdit ? t('delegate.edit') : t('delegate.new') }}</v-card-title>
<v-card-title class="d-flex align-center ga-2">
<v-icon color="primary">{{ TYPE_ICONS.DELEGATE }}</v-icon>
<span>{{ isEdit ? t('delegate.edit') : t('delegate.new') }}</span>
</v-card-title>

<v-card-text>
<v-skeleton-loader v-if="loading" type="article" />
Expand Down Expand Up @@ -109,7 +112,7 @@
`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')"
<LigojConfirmDialog v-model="confirmDelete" :title="t('delegate.deleteTitle')" :icon="TYPE_ICONS.DELEGATE" :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>
Expand All @@ -119,7 +122,7 @@
when navigating away from the list with the dialog still open.
persistent: only the explicit buttons dismiss it, so pendingClose
is always reset through onGuardConfirm/onGuardCancel. -->
<LigojConfirmDialog v-model="showGuardDialog" :title="t('common.unsavedTitle')" :message="t('common.unsavedMsg')" :confirm-label="t('common.discard')" confirm-color="warning"
<LigojConfirmDialog v-model="showGuardDialog" :title="t('common.unsavedTitle')" icon="mdi-content-save-alert" icon-color="warning" :message="t('common.unsavedMsg')" :confirm-label="t('common.discard')" confirm-color="warning"
persistent @confirm="onGuardConfirm" @cancel="onGuardCancel" />
</div>
</template>
Expand Down
6 changes: 5 additions & 1 deletion ui/src/views/DelegateListView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@
<LigojConfirmDialog
v-model="deleteDialog"
:title="t('delegate.deleteTitle')"
:icon="TYPE_ICONS.DELEGATE"
:confirm-label="t('common.delete')"
confirm-color="error"
:loading="deleting"
Expand All @@ -107,7 +108,10 @@

<v-dialog v-model="bulkDeleteDialog" max-width="400">
<v-card>
<v-card-title>{{ t('common.bulkDeleteTitle') }}</v-card-title>
<v-card-title class="d-flex align-center ga-2">
<v-icon color="primary">{{ TYPE_ICONS.DELEGATE }}</v-icon>
<span>{{ t('common.bulkDeleteTitle') }}</span>
</v-card-title>
<v-card-text>{{ t('common.bulkDeleteConfirm', { count: selected.length }) }}</v-card-text>
<v-card-actions>
<v-spacer />
Expand Down
11 changes: 9 additions & 2 deletions ui/src/views/GroupListView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,10 @@

<v-dialog v-model="deleteDialog" max-width="400">
<v-card>
<v-card-title>{{ t('group.deleteTitle') }}</v-card-title>
<v-card-title class="d-flex align-center ga-2">
<v-icon color="primary">{{ TYPE_ICONS.GROUP }}</v-icon>
<span>{{ t('group.deleteTitle') }}</span>
</v-card-title>
<v-card-text>
{{ t('group.deleteConfirmBefore') }}<strong class="text-error">{{ deleteTarget?.name }}</strong>{{ t('group.deleteConfirmAfter') }}
</v-card-text>
Expand All @@ -122,7 +125,10 @@

<v-dialog v-model="bulkDeleteDialog" max-width="400">
<v-card>
<v-card-title>{{ t('common.bulkDeleteTitle') }}</v-card-title>
<v-card-title class="d-flex align-center ga-2">
<v-icon color="primary">{{ TYPE_ICONS.GROUP }}</v-icon>
<span>{{ t('common.bulkDeleteTitle') }}</span>
</v-card-title>
<v-card-text>{{ t('common.bulkDeleteConfirm', { count: selected.length }) }}</v-card-text>
<v-card-actions>
<v-spacer />
Expand All @@ -138,6 +144,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 { useGroupMembersDialog } from '../composables/useGroupMembersDialog.js'
import GroupEditPanel from '../components/GroupEditPanel.vue'

Expand Down
8 changes: 5 additions & 3 deletions ui/src/views/UserEditDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
details and group-members dialogs. Sourced from the prop
— `form.id` would lag until the load completes. -->
<v-card-title class="d-flex align-center ga-2">
<v-icon color="primary">{{ TYPE_ICONS.USER }}</v-icon>
<span>{{ isEdit ? t('user.edit') : t('user.new') }}</span>
<span v-if="isEdit" class="text-primary">{{ userId }}</span>
</v-card-title>
Expand Down Expand Up @@ -113,7 +114,7 @@
</v-card>
</v-dialog>

<LigojConfirmDialog v-model="confirmDelete" :title="t('user.deleteTitle')" :confirm-label="t('common.delete')" confirm-color="error" :loading="deleting" @confirm="remove">
<LigojConfirmDialog v-model="confirmDelete" :title="t('user.deleteTitle')" :icon="TYPE_ICONS.USER" :confirm-label="t('common.delete')" confirm-color="error" :loading="deleting" @confirm="remove">
{{ t('user.deleteConfirmBefore') }}<strong class="text-error">{{ form.id }}</strong>{{ t('user.deleteConfirmAfter') }}
</LigojConfirmDialog>

Expand All @@ -122,15 +123,15 @@
navigating away from the list with the dialog still open.
persistent: only the explicit buttons dismiss it, so pendingClose
is always reset through onGuardConfirm/onGuardCancel. -->
<LigojConfirmDialog v-model="showGuardDialog" :title="t('common.unsavedTitle')" :message="t('common.unsavedMsg')" :confirm-label="t('common.discard')" confirm-color="warning" persistent
<LigojConfirmDialog v-model="showGuardDialog" :title="t('common.unsavedTitle')" icon="mdi-content-save-alert" icon-color="warning" :message="t('common.unsavedMsg')" :confirm-label="t('common.discard')" confirm-color="warning" persistent
@confirm="onGuardConfirm" @cancel="onGuardCancel" />

<!-- Chantier D2 (rattrapage): mirror the UserListView pattern so the
login is rendered in bold red here too. The previous monolithic
`user.<action>Confirm` message with {id} interpolation kept the
name as plain text, which felt visually weaker than the same
action triggered from the list row. -->
<LigojConfirmDialog v-model="actionDialog" :title="t('user.' + actionType)" :loading="actionLoading" @confirm="confirmAction">
<LigojConfirmDialog v-model="actionDialog" :title="t('user.' + actionType)" :icon="TYPE_ICONS.USER" :loading="actionLoading" @confirm="confirmAction">
{{ t('user.' + actionType + 'ConfirmBefore') }}<strong class="text-error">{{ form.id }}</strong>{{ t('user.' + actionType + 'ConfirmAfter') }}
</LigojConfirmDialog>
</div>
Expand All @@ -139,6 +140,7 @@
<script setup>
import { ref, computed, watch } from 'vue'
import { useApi, useFormGuard, useErrorStore, useI18nStore, LigojConfirmDialog } from '@ligoj/host'
import { TYPE_ICONS } from '../composables/delegateTypes.js'

const props = defineProps({
// Dialog visibility (v-model).
Expand Down
7 changes: 4 additions & 3 deletions ui/src/views/UserListView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@

<!-- Single-user delete (chantier D2): name in bold red via the
default slot of LigojConfirmDialog. -->
<LigojConfirmDialog v-model="deleteDialog" :title="t('user.deleteTitle')" :confirm-label="t('common.delete')" confirm-color="error" :loading="deleting" @confirm="confirmDeleteUser">
<LigojConfirmDialog v-model="deleteDialog" :title="t('user.deleteTitle')" :icon="TYPE_ICONS.USER" :confirm-label="t('common.delete')" confirm-color="error" :loading="deleting" @confirm="confirmDeleteUser">
{{ t('user.deleteConfirmBefore') }}<strong class="text-error">{{ deleteTarget?.id }}</strong>{{ t('user.deleteConfirmAfter') }}
</LigojConfirmDialog>

Expand All @@ -129,15 +129,15 @@
as a sensitive single-item confirmation. The host's monolithic
`common.bulkDeleteConfirm` key stays intact; we just use two
new plugin-local fragments around the count. -->
<LigojConfirmDialog v-model="bulkDeleteDialog" :title="t('common.bulkDeleteTitle')" :confirm-label="t('common.delete')" confirm-color="error" :loading="deleting" @confirm="confirmBulkDelete">
<LigojConfirmDialog v-model="bulkDeleteDialog" :title="t('common.bulkDeleteTitle')" :icon="TYPE_ICONS.USER" :confirm-label="t('common.delete')" confirm-color="error" :loading="deleting" @confirm="confirmBulkDelete">
{{ t('common.bulkDeleteConfirmBefore') }}<strong class="text-error">{{ selected.length }}</strong>{{ t('common.bulkDeleteConfirmAfter') }}
</LigojConfirmDialog>

<!-- Confirmation for the sensitive lock/isolate/reset actions
triggered from the row gear menu (chantier D2): the login is
now bolded and coloured via two i18n fragments around it
(user.<action>ConfirmBefore / user.<action>ConfirmAfter). -->
<LigojConfirmDialog v-model="actionDialog" :title="t('user.' + actionType)" :confirm-label="t('common.confirm')" :loading="actionLoading" @confirm="confirmUserAction">
<LigojConfirmDialog v-model="actionDialog" :title="t('user.' + actionType)" :icon="TYPE_ICONS.USER" :confirm-label="t('common.confirm')" :loading="actionLoading" @confirm="confirmUserAction">
{{ t('user.' + actionType + 'ConfirmBefore') }}<strong class="text-error">{{ actionTarget?.id }}</strong>{{ t('user.' + actionType + 'ConfirmAfter') }}
</LigojConfirmDialog>

Expand All @@ -149,6 +149,7 @@
<script setup>
import { ref, computed, onMounted } from 'vue'
import { useDataTable, useApi, useAppStore, useErrorStore, useI18nStore, ImportExportBar, LigojDataTableServer, LigojConfirmDialog } from '@ligoj/host'
import { TYPE_ICONS } from '../composables/delegateTypes.js'
import UserEditDialog from './UserEditDialog.vue'

const appStore = useAppStore()
Expand Down
Loading