From 52bea38d22a877fbecafd920f3a99bc481f7927e Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Tue, 26 May 2026 16:13:03 +0200
Subject: [PATCH] feat(delegate): popup dialog + list polish (D3+D5+D6+D7+D8)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- D3: convert DelegateEditView to dialog (pattern I.2 user edit)
- D5: add type icons to Receiver and Resource columns on the list
  (lookup normalizes lowercase enum values from the backend)
- D6+D8: fuse Type and Resource columns into one — the type becomes
  the row's leading icon
- D7: add Admin/Write checkbox tooltips with i18n texts recovered
  from the legacy plugin-id

Also: rename DelegateEditView → DelegateEditDialog, drop the now-unused
/id/delegate/new and /id/delegate/:id routes, align the actions column
width on the existing Groups/Users/Companies views (120 px, center).
---
 ui/src/__tests__/plugin-id.test.js  |   7 +-
 ui/src/composables/delegateTypes.js |  46 +++
 ui/src/i18n/en.js                   |   6 +
 ui/src/i18n/fr.js                   |   6 +
 ui/src/index.js                     |   5 +-
 ui/src/views/DelegateEditDialog.vue | 445 ++++++++++++++++++++++++++++
 ui/src/views/DelegateEditView.vue   | 382 ------------------------
 ui/src/views/DelegateListView.vue   |  60 +++-
 8 files changed, 554 insertions(+), 403 deletions(-)
 create mode 100644 ui/src/composables/delegateTypes.js
 create mode 100644 ui/src/views/DelegateEditDialog.vue
 delete mode 100644 ui/src/views/DelegateEditView.vue

diff --git a/ui/src/__tests__/plugin-id.test.js b/ui/src/__tests__/plugin-id.test.js
index 0c6e0c1..9b3acba 100644
--- a/ui/src/__tests__/plugin-id.test.js
+++ b/ui/src/__tests__/plugin-id.test.js
@@ -40,12 +40,15 @@ describe('plugin-id contract', () => {
       '/id/user',
       '/id/group', '/id/group/new', '/id/group/:id',
       '/id/company', '/id/company/new', '/id/company/:id',
-      '/id/delegate', '/id/delegate/new', '/id/delegate/:id',
+      // Delegates likewise edit through a dialog (DelegateEditDialog,
+      // chantier D3), so /id/delegate/new and /id/delegate/:id are
+      // no longer routes either.
+      '/id/delegate',
       '/id/container-scope',
       // Subscription-scoped group members view (legacy id.html port).
       '/id/subscription/:id',
     ]))
-    expect(registered).toHaveLength(12)
+    expect(registered).toHaveLength(10)
   })
 
   it('feature("renderFeatures") returns VNodes the host can mount', () => {
diff --git a/ui/src/composables/delegateTypes.js b/ui/src/composables/delegateTypes.js
new file mode 100644
index 0000000..c5e24f7
--- /dev/null
+++ b/ui/src/composables/delegateTypes.js
@@ -0,0 +1,46 @@
+// Shared type catalog for delegations. Used by:
+//   - DelegateEditDialog: drives the v-select items for receiver/resource
+//     types and the prepend-inner-icon shown on the selected value.
+//   - DelegateListView: maps the raw enum value to a row icon in the
+//     Receiver and Resource columns (chantier D5+D8).
+//
+// The previous inline copy in DelegateEditView would have drifted as soon
+// as the list started rendering icons too; this module is the single
+// source of truth.
+
+import { computed } from 'vue'
+
+// Raw-enum-keyed icon map. Const at module scope so it's never re-created
+// reactively — both the #item slot (dropdown rows) and the
+// prepend-inner-icon computed reference the same object.
+export const TYPE_ICONS = {
+  USER: 'mdi-account',
+  GROUP: 'mdi-account-group',
+  COMPANY: 'mdi-domain',
+  TREE: 'mdi-file-tree',
+}
+
+// Receivers cannot be a TREE — only USER / GROUP / COMPANY can hold a
+// delegation. Items are plain objects with the raw enum value + an i18n
+// key the caller resolves via t() (kept out of this module so the
+// composable stays test-friendly).
+export const RECEIVER_TYPES = [
+  { value: 'USER', titleKey: 'delegate.type.user' },
+  { value: 'GROUP', titleKey: 'delegate.type.group' },
+  { value: 'COMPANY', titleKey: 'delegate.type.company' },
+]
+
+// Resources can additionally be a TREE (LDAP subtree DN).
+export const RESOURCE_TYPES = [
+  { value: 'USER', titleKey: 'delegate.type.user' },
+  { value: 'GROUP', titleKey: 'delegate.type.group' },
+  { value: 'COMPANY', titleKey: 'delegate.type.company' },
+  { value: 'TREE', titleKey: 'delegate.type.tree' },
+]
+
+// Reactive icon helper: pass a ref/computed that yields the current enum
+// value and get back a computed yielding the matching MDI string (empty
+// if the value is unknown).
+export function useTypeIcon(valueRef) {
+  return computed(() => TYPE_ICONS[valueRef.value] || '')
+}
diff --git a/ui/src/i18n/en.js b/ui/src/i18n/en.js
index 4153cf8..e2cc492 100644
--- a/ui/src/i18n/en.js
+++ b/ui/src/i18n/en.js
@@ -32,6 +32,12 @@ export default {
   'delegate.type.company': 'Company',
   'delegate.type.tree': 'Tree',
   'delegate.resourceDnHint': 'LDAP DN of the subtree (e.g. ou=project,dc=acme,dc=com)',
+  // Chantier D7 — labels and help text for the Admin/Write security
+  // levels in the delegate dialog. Mirrors the legacy plugin-id wording.
+  'delegate.admin': 'Administration',
+  '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',
   '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 0d37d8f..6997d56 100644
--- a/ui/src/i18n/fr.js
+++ b/ui/src/i18n/fr.js
@@ -25,6 +25,12 @@ export default {
   'delegate.type.company': 'Entité',
   'delegate.type.tree': 'Arborescence',
   'delegate.resourceDnHint': 'DN LDAP du sous-arbre (ex. ou=project,dc=acme,dc=com)',
+  // Chantier D7 — libellés et aides pour les niveaux de sécurité Admin/Write
+  // du dialog de délégation. Textes récupérés du plugin-id legacy.
+  'delegate.admin': 'Administration',
+  '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',
   'user.deleteConfirmBefore': 'Êtes-vous certain de supprimer ',
   'user.deleteConfirmAfter': ' ?',
   'group.deleteConfirmBefore': 'Êtes-vous certain de supprimer ',
diff --git a/ui/src/index.js b/ui/src/index.js
index f56f121..c7107d1 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -41,7 +41,6 @@ import GroupEditView from './views/GroupEditView.vue'
 import CompanyListView from './views/CompanyListView.vue'
 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 GroupMembersView from './views/GroupMembersView.vue'
 import enMessages from './i18n/en.js'
@@ -72,9 +71,9 @@ const routes = [
   { path: '/id/company', name: 'id-company', component: CompanyListView },
   { path: '/id/company/new', name: 'id-company-new', component: CompanyEditView },
   { path: '/id/company/:id', name: 'id-company-edit', component: CompanyEditView },
+  // Delegate create/edit is a dialog hosted by DelegateListView (chantier D3),
+  // so there is no per-entity delegate route — mirrors the Users screen.
   { path: '/id/delegate', name: 'id-delegate', component: DelegateListView },
-  { path: '/id/delegate/new', name: 'id-delegate-new', component: DelegateEditView },
-  { path: '/id/delegate/:id', name: 'id-delegate-edit', component: DelegateEditView },
   { path: '/id/container-scope', name: 'id-container-scope', component: ContainerScopeView },
   // Per-subscription configuration view (ported from the legacy
   // `service/id/id.html`): lists group members, lets the user add
diff --git a/ui/src/views/DelegateEditDialog.vue b/ui/src/views/DelegateEditDialog.vue
new file mode 100644
index 0000000..9c5418d
--- /dev/null
+++ b/ui/src/views/DelegateEditDialog.vue
@@ -0,0 +1,445 @@
+<template>
+  <div>
+    <!-- Delegate create/edit popup (chantier D3). Replaces the former
+         routed DelegateEditView page; hosted by DelegateListView, opened
+         from the "New" button and the row pencil. model-value is bound
+         one-way so a close request (Cancel / Esc / scrim) can be vetoed
+         by the unsaved-changes guard before it actually closes — same
+         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-text>
+          <v-skeleton-loader v-if="loading" type="article" />
+
+          <v-form v-else ref="formRef" @submit.prevent="save">
+            <!-- Receiver: pick the kind first (drives the autocomplete
+                 endpoint for the identifier), then the identifier itself.
+                 Rendered side-by-side on >= sm to keep the dependency
+                 visible. -->
+            <v-row density="comfortable">
+              <v-col cols="12" sm="5">
+                <v-select v-model="form.receiverType" :label="t('delegate.receiverType')" :items="RECEIVER_TYPES" :item-title="typeTitle" item-value="value" :prepend-inner-icon="receiverIcon"
+                  :rules="[rules.required]" variant="outlined" class="mb-2">
+                  <template #item="{ props: itemProps, item }">
+                    <v-list-item v-bind="itemProps">
+                      <template #prepend>
+                        <v-icon :icon="TYPE_ICONS[item?.value] || ''" />
+                      </template>
+                    </v-list-item>
+                  </template>
+                </v-select>
+              </v-col>
+              <v-col cols="12" sm="7">
+                <v-autocomplete v-model="form.receiver" v-model:search="receiverSearch" :label="t('delegate.receiver')" :items="receiverDisplayItems" item-title="label" item-value="id"
+                  :loading="receiverLoading" :rules="[rules.required]" no-filter clearable auto-select-first variant="outlined" class="mb-2" @update:search="onReceiverSearch"
+                  @update:menu="onReceiverMenu" />
+              </v-col>
+            </v-row>
+
+            <!-- Resource: same pattern — the type drives the
+                 autocomplete endpoint (USER id, GROUP / TREE / COMPANY
+                 name). -->
+            <v-row density="comfortable">
+              <v-col cols="12" sm="5">
+                <v-select v-model="form.type" :label="t('delegate.type')" :items="RESOURCE_TYPES" :item-title="typeTitle" item-value="value" :prepend-inner-icon="typeIcon" :rules="[rules.required]"
+                  variant="outlined" class="mb-2">
+                  <template #item="{ props: itemProps, item }">
+                    <v-list-item v-bind="itemProps">
+                      <template #prepend>
+                        <v-icon :icon="TYPE_ICONS[item?.value] || ''" />
+                      </template>
+                    </v-list-item>
+                  </template>
+                </v-select>
+              </v-col>
+              <v-col cols="12" sm="7">
+                <!-- TREE-typed delegates point at an arbitrary LDAP DN
+                     (e.g. ou=project,dc=acme,dc=com) — there's no entity
+                     list to pick from, so swap the autocomplete out for a
+                     free-form text field. -->
+                <v-text-field v-if="form.type === 'TREE'" v-model="form.name" :label="t('delegate.resource')" :rules="[rules.required]" :hint="t('delegate.resourceDnHint')" persistent-hint
+                  variant="outlined" class="mb-2" />
+                <v-autocomplete v-else v-model="form.name" v-model:search="resourceSearch" :label="t('delegate.resource')" :items="resourceDisplayItems" item-title="label" item-value="id"
+                  :loading="resourceLoading" :rules="[rules.required]" :hint="t('delegate.resourceHint')" persistent-hint no-filter clearable auto-select-first variant="outlined" class="mb-2"
+                  @update:search="onResourceSearch" @update:menu="onResourceMenu" />
+              </v-col>
+            </v-row>
+
+            <!-- Admin/Write checkboxes with inline help (chantier D7):
+                 a small mdi-help-circle-outline icon hosts a v-tooltip
+                 (activator="parent") so hovering the icon surfaces the
+                 long-form explanation. The label text stays clickable
+                 to toggle the checkbox — only the icon triggers the
+                 tooltip. -->
+            <v-checkbox v-model="form.canAdmin" hide-details class="mb-2">
+              <template #label>
+                <span class="me-1">{{ t('delegate.admin') }}</span>
+                <v-icon size="x-small" color="grey">mdi-help-circle-outline</v-icon>
+                <v-tooltip activator="parent" :text="t('delegate.adminHelp')" location="top" max-width="320" />
+              </template>
+            </v-checkbox>
+            <v-checkbox v-model="form.canWrite" hide-details class="mb-2">
+              <template #label>
+                <span class="me-1">{{ t('delegate.write') }}</span>
+                <v-icon size="x-small" color="grey">mdi-help-circle-outline</v-icon>
+                <v-tooltip activator="parent" :text="t('delegate.writeHelp')" location="top" max-width="320" />
+              </template>
+            </v-checkbox>
+          </v-form>
+        </v-card-text>
+
+        <v-card-actions>
+          <v-btn v-if="isEdit" color="error" variant="tonal" :disabled="loading" @click="confirmDelete = true">
+            <v-icon start>mdi-delete</v-icon> {{ t('common.delete') }}
+          </v-btn>
+          <v-spacer />
+          <v-btn variant="text" @click="requestClose">{{ t('common.cancel') }}</v-btn>
+          <v-btn color="primary" variant="elevated" :loading="saving" :disabled="loading" @click="save">
+            <v-icon start>mdi-content-save</v-icon> {{ t('common.save') }}
+          </v-btn>
+        </v-card-actions>
+      </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" />
+
+    <!-- Unsaved-changes guard. Triggered either by a dialog close request
+         (Cancel / Esc / scrim) or by useFormGuard's onBeforeRouteLeave
+         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"
+      persistent @confirm="onGuardConfirm" @cancel="onGuardCancel" />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue'
+import { useApi, useFormGuard, useI18nStore, LigojConfirmDialog } from '@ligoj/host'
+import { TYPE_ICONS, RECEIVER_TYPES, RESOURCE_TYPES } from '../composables/delegateTypes.js'
+
+const props = defineProps({
+  // Dialog visibility (v-model).
+  modelValue: { type: Boolean, default: false },
+  // Delegate id to edit; null/absent means create mode. Accepts Number or
+  // String because the list passes item.id directly (the dt items
+  // sometimes carry numeric ids, sometimes string ones depending on the
+  // backend serializer).
+  delegateId: { type: [Number, String], default: null },
+})
+const emit = defineEmits(['update:modelValue', 'saved'])
+
+const api = useApi()
+const i18n = useI18nStore()
+const t = i18n.t
+
+const formRef = ref(null)
+const loading = ref(false)
+const saving = ref(false)
+const deleting = ref(false)
+const confirmDelete = ref(false)
+
+const isEdit = computed(() => props.delegateId !== null && props.delegateId !== undefined && props.delegateId !== '')
+
+/** v-select item-title callback: resolves the i18n key from the item object. */
+function typeTitle(item) {
+  return t(item.titleKey)
+}
+
+const form = ref({
+  receiver: '',
+  receiverType: 'USER',
+  name: '',
+  type: 'GROUP',
+  canAdmin: false,
+  canWrite: false,
+})
+
+// Icon shown inside the field, driven by the currently selected value.
+const receiverIcon = computed(() => TYPE_ICONS[form.value.receiverType] || '')
+const typeIcon = computed(() => TYPE_ICONS[form.value.type] || '')
+
+/* -------------------------------------------------------------------------
+ *  Autocomplete: receiver / resource
+ *
+ *  The two text inputs in section "receiver" and "resource" are dynamic
+ *  v-autocompletes that hit the matching identity endpoint:
+ *    receiverType=USER     → rest/service/id/user
+ *    receiverType=GROUP    → rest/service/id/group
+ *    receiverType=COMPANY  → rest/service/id/company
+ *    type=USER/GROUP/COMPANY → same as above
+ *    type=TREE             → groups (TREE delegates scope on a group)
+ *
+ *  Server-side filtering only (the autocomplete passes `?q=`), so we
+ *  set `no-filter` on the components to disable Vuetify's local filter.
+ *  ------------------------------------------------------------------- */
+
+// TREE is intentionally absent — TREE-typed delegates use a free-form
+// DN (rendered via v-text-field), so no list endpoint applies.
+const TYPE_TO_ENDPOINT = {
+  USER: 'service/id/user',
+  GROUP: 'service/id/group',
+  COMPANY: 'service/id/company',
+}
+
+/** Normalize a backend row to `{ id, label }` regardless of the entity
+ *  kind. Users get `id — First Last` so the dropdown is scannable;
+ *  groups/companies are identified by name only. */
+function normalizeEntity(row, kind) {
+  if (!row) return null
+  if (kind === 'USER') {
+    const full = [row.firstName, row.lastName].filter(Boolean).join(' ')
+    return { id: row.id, label: full ? `${row.id} — ${full}` : row.id }
+  }
+  return { id: row.name, label: row.name }
+}
+
+/** Fetch the first page (rows=20) for the kind. An empty query is
+ *  allowed so the dropdown can be populated before the user types —
+ *  see `loadReceiverItems` / `loadResourceItems`. */
+async function fetchEntities(kind, query) {
+  const endpoint = TYPE_TO_ENDPOINT[kind]
+  if (!endpoint) return []
+  const q = (query || '').trim()
+  const qp = q ? `q=${encodeURIComponent(q)}&` : ''
+  const data = await api.get(`rest/${endpoint}?${qp}rows=20`)
+  const rows = Array.isArray(data) ? data : (data?.data || [])
+  return rows.map((r) => normalizeEntity(r, kind)).filter(Boolean)
+}
+
+const receiverItems = ref([])
+const receiverSearch = ref('')
+const receiverLoading = ref(false)
+let receiverTimer = null
+
+const resourceItems = ref([])
+const resourceSearch = ref('')
+const resourceLoading = ref(false)
+let resourceTimer = null
+
+/** Keep the currently-selected value visible in the dropdown even
+ *  before the user has typed anything (e.g. on edit-mode initial
+ *  load): pre-pend a synthetic item with `id = current value`. */
+const receiverDisplayItems = computed(() => {
+  const cur = form.value.receiver
+  const items = receiverItems.value
+  if (cur && !items.find((i) => i.id === cur)) {
+    return [{ id: cur, label: cur }, ...items]
+  }
+  return items
+})
+const resourceDisplayItems = computed(() => {
+  const cur = form.value.name
+  const items = resourceItems.value
+  if (cur && !items.find((i) => i.id === cur)) {
+    return [{ id: cur, label: cur }, ...items]
+  }
+  return items
+})
+
+async function loadReceiverItems() {
+  receiverLoading.value = true
+  try { receiverItems.value = await fetchEntities(form.value.receiverType, receiverSearch.value) }
+  finally { receiverLoading.value = false }
+}
+async function loadResourceItems() {
+  resourceLoading.value = true
+  try { resourceItems.value = await fetchEntities(form.value.type, resourceSearch.value) }
+  finally { resourceLoading.value = false }
+}
+
+function onReceiverSearch(q) {
+  // Vuetify mirrors the picked item's title into the search input;
+  // that fires `update:search` with a label that matches an existing
+  // item. Skip the round-trip in that case — otherwise we'd refetch
+  // with the label and lose the row the user just picked from.
+  if (receiverDisplayItems.value.some((i) => i.label === q)) return
+  clearTimeout(receiverTimer)
+  receiverTimer = setTimeout(loadReceiverItems, 250)
+}
+
+function onResourceSearch(q) {
+  if (resourceDisplayItems.value.some((i) => i.label === q)) return
+  clearTimeout(resourceTimer)
+  resourceTimer = setTimeout(loadResourceItems, 250)
+}
+
+// Selecting a new type invalidates the corresponding identifier and
+// drops the cached items. We deliberately don't refetch here — the
+// next dropdown-open (or first keystroke) will lazy-load the first
+// page for the new kind. This keeps the form quiet when the user
+// doesn't actually interact with these selects.
+watch(() => form.value.receiverType, () => {
+  form.value.receiver = ''
+  receiverSearch.value = ''
+  receiverItems.value = []
+})
+watch(() => form.value.type, () => {
+  form.value.name = ''
+  resourceSearch.value = ''
+  resourceItems.value = []
+})
+
+/** Fires when v-autocomplete opens/closes its dropdown. We fetch the
+ *  first page only when the menu opens AND no items have been
+ *  fetched for the current kind yet — so a user who never opens the
+ *  dropdown (or types) doesn't trigger any network call. */
+function onReceiverMenu(open) {
+  if (open && receiverItems.value.length === 0) loadReceiverItems()
+}
+function onResourceMenu(open) {
+  if (open && resourceItems.value.length === 0) loadResourceItems()
+}
+
+const { isDirty, showGuardDialog, confirmLeave, cancelLeave, markClean, init: initGuard } = useFormGuard(form)
+// True while the guard dialog was raised by a dialog-close request (vs a
+// route-leave), so the confirm/cancel handlers know which path to resume.
+const pendingClose = ref(false)
+
+const rules = {
+  required: v => !!v || t('common.required'),
+}
+
+/** Reset all form state to a clean create-mode baseline. Called every
+ *  time the dialog opens so a previous edit never bleeds into the next
+ *  one. */
+function resetForm() {
+  form.value = {
+    receiver: '',
+    receiverType: 'USER',
+    name: '',
+    type: 'GROUP',
+    canAdmin: false,
+    canWrite: false,
+  }
+  receiverItems.value = []
+  receiverSearch.value = ''
+  resourceItems.value = []
+  resourceSearch.value = ''
+  formRef.value?.resetValidation()
+}
+
+/** Load (or reset) the form when the dialog opens. Replaces the routed
+ *  page's onMounted: the component stays mounted across opens, so the
+ *  work is keyed on the modelValue transition instead. */
+async function loadOnOpen() {
+  resetForm()
+  if (isEdit.value) {
+    loading.value = true
+    const data = await api.get(`rest/security/delegate/${props.delegateId}`)
+    if (data) {
+      // Set the discriminator selects FIRST. Their watchers run on
+      // the next microtask and reset the matching identifier
+      // (receiver / name) to '' — which is fine while we're still in
+      // the empty default. The `await nextTick()` below lets that
+      // pass run before we write the actual values, so the loaded
+      // identifier sticks instead of being wiped.
+      //
+      // Normalize to the uppercase enum form used by the v-select
+      // items. The backend stores some delegates with lowercase
+      // values ("company", "tree", …) and v-model would otherwise
+      // mismatch every item, locking the select in a "Maximum
+      // recursive updates exceeded" loop.
+      form.value.receiverType = (data.receiverType || 'USER').toUpperCase()
+      form.value.type = (data.type || 'GROUP').toUpperCase()
+      await nextTick()
+      form.value.receiver = data.receiver?.id || data.receiver || ''
+      // TREE delegates store the DN separately — `name` is a "-"
+      // placeholder server-side. Show the DN in the resource input so
+      // the user can read/edit the actual subtree path.
+      form.value.name = form.value.type === 'TREE'
+        ? (data.dn || data.name || '')
+        : (data.name || '')
+      form.value.canAdmin = !!data.canAdmin
+      form.value.canWrite = !!data.canWrite
+    }
+    loading.value = false
+  }
+  // Snapshot the loaded state so the guard only flags real edits.
+  initGuard()
+}
+
+watch(() => props.modelValue, val => {
+  if (val) loadOnOpen()
+})
+
+// --- Close handling with the unsaved-changes guard ---
+
+/** v-dialog requests a visibility change. Opening is parent-driven, so
+ *  only close requests (Esc / scrim click) reach here. */
+function onDialogModel(val) {
+  if (!val) requestClose()
+}
+
+/** Close request from Cancel / Esc / scrim. Vetoed (guard dialog shown)
+ *  when the form has unsaved changes. */
+function requestClose() {
+  if (isDirty.value) {
+    pendingClose.value = true
+    showGuardDialog.value = true
+  } else {
+    emit('update:modelValue', false)
+  }
+}
+
+/** Guard dialog — "Discard changes". */
+function onGuardConfirm() {
+  if (pendingClose.value) {
+    pendingClose.value = false
+    showGuardDialog.value = false
+    markClean()
+    emit('update:modelValue', false)
+  } else {
+    // Raised by onBeforeRouteLeave — let useFormGuard resume navigation.
+    confirmLeave()
+  }
+}
+
+/** Guard dialog — "Cancel", keep editing. */
+function onGuardCancel() {
+  if (pendingClose.value) {
+    pendingClose.value = false
+    showGuardDialog.value = false
+  } else {
+    cancelLeave()
+  }
+}
+
+async function save() {
+  const { valid } = await formRef.value.validate()
+  if (!valid) return
+
+  saving.value = true
+  const payload = {
+    receiver: form.value.receiver,
+    receiverType: form.value.receiverType,
+    name: form.value.name,
+    type: form.value.type,
+    canAdmin: form.value.canAdmin,
+    canWrite: form.value.canWrite,
+  }
+
+  if (isEdit.value) {
+    await api.put('rest/security/delegate', { id: Number(props.delegateId), ...payload })
+  } else {
+    await api.post('rest/security/delegate', payload)
+  }
+  saving.value = false
+  markClean()
+  emit('saved')
+  emit('update:modelValue', false)
+}
+
+async function remove() {
+  deleting.value = true
+  await api.del(`rest/security/delegate/${props.delegateId}`)
+  deleting.value = false
+  confirmDelete.value = false
+  markClean()
+  emit('saved')
+  emit('update:modelValue', false)
+}
+</script>
diff --git a/ui/src/views/DelegateEditView.vue b/ui/src/views/DelegateEditView.vue
deleted file mode 100644
index 3620b04..0000000
--- a/ui/src/views/DelegateEditView.vue
+++ /dev/null
@@ -1,382 +0,0 @@
-<template>
-  <div>
-    <v-skeleton-loader v-if="loading" type="card, actions" max-width="700" class="mb-4" />
-
-    <v-card v-if="!loading" class="edit-card">
-      <v-card-text>
-        <v-form ref="formRef" @submit.prevent="save">
-          <!-- Receiver: pick the kind first (drives the autocomplete
-               endpoint for the identifier), then the identifier itself.
-               Rendered side-by-side on >= sm to keep the dependency
-               visible. -->
-          <v-row density="comfortable">
-            <v-col cols="12" sm="5">
-              <v-select v-model="form.receiverType" :label="t('delegate.receiverType')" :items="receiverTypes" :item-title="typeTitle" item-value="value" :prepend-inner-icon="receiverIcon"
-                :rules="[rules.required]" variant="outlined" class="mb-2">
-                <template #item="{ props: itemProps, item }">
-                  <v-list-item v-bind="itemProps">
-                    <template #prepend>
-                      <v-icon :icon="TYPE_ICONS[item?.value] || ''" />
-                    </template>
-                  </v-list-item>
-                </template>
-              </v-select>
-            </v-col>
-            <v-col cols="12" sm="7">
-              <v-autocomplete v-model="form.receiver" v-model:search="receiverSearch" :label="t('delegate.receiver')" :items="receiverDisplayItems" item-title="label" item-value="id"
-                :loading="receiverLoading" :rules="[rules.required]" no-filter clearable auto-select-first variant="outlined" class="mb-2" @update:search="onReceiverSearch"
-                @update:menu="onReceiverMenu" />
-            </v-col>
-          </v-row>
-
-          <!-- Resource: same pattern — the type drives the
-               autocomplete endpoint (USER id, GROUP / TREE / COMPANY
-               name). -->
-          <v-row density="comfortable">
-            <v-col cols="12" sm="5">
-              <v-select v-model="form.type" :label="t('delegate.type')" :items="resourceTypes" :item-title="typeTitle" item-value="value" :prepend-inner-icon="typeIcon" :rules="[rules.required]"
-                variant="outlined" class="mb-2">
-                <template #item="{ props: itemProps, item }">
-                  <v-list-item v-bind="itemProps">
-                    <template #prepend>
-                      <v-icon :icon="TYPE_ICONS[item?.value] || ''" />
-                    </template>
-                  </v-list-item>
-                </template>
-              </v-select>
-            </v-col>
-            <v-col cols="12" sm="7">
-              <!-- TREE-typed delegates point at an arbitrary LDAP DN
-                   (e.g. ou=project,dc=acme,dc=com) — there's no entity
-                   list to pick from, so swap the autocomplete out for a
-                   free-form text field. -->
-              <v-text-field v-if="form.type === 'TREE'" v-model="form.name" :label="t('delegate.resource')" :rules="[rules.required]" :hint="t('delegate.resourceDnHint')" persistent-hint
-                variant="outlined" class="mb-2" />
-              <v-autocomplete v-else v-model="form.name" v-model:search="resourceSearch" :label="t('delegate.resource')" :items="resourceDisplayItems" item-title="label" item-value="id"
-                :loading="resourceLoading" :rules="[rules.required]" :hint="t('delegate.resourceHint')" persistent-hint no-filter clearable auto-select-first variant="outlined" class="mb-2"
-                @update:search="onResourceSearch" @update:menu="onResourceMenu" />
-            </v-col>
-          </v-row>
-
-          <v-checkbox v-model="form.canAdmin" :label="t('delegate.admin')" hide-details class="mb-2" />
-          <v-checkbox v-model="form.canWrite" :label="t('delegate.write')" hide-details class="mb-2" />
-        </v-form>
-      </v-card-text>
-      <v-card-actions>
-        <v-btn v-if="isEdit" color="error" variant="tonal" @click="confirmDelete = true">
-          <v-icon start>mdi-delete</v-icon> {{ t('common.delete') }}
-        </v-btn>
-        <v-spacer />
-        <v-btn variant="text" @click="router.push('/id/delegate')">{{ t('common.cancel') }}</v-btn>
-        <v-btn color="primary" variant="elevated" :loading="saving" @click="save">
-          <v-icon start>mdi-content-save</v-icon> {{ t('common.save') }}
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-
-    <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" />
-
-    <LigojConfirmDialog v-model="showGuardDialog" :title="t('common.unsavedTitle')" :message="t('common.unsavedMsg')" :confirm-label="t('common.discard')" confirm-color="warning"
-      @confirm="confirmLeave" @cancel="cancelLeave" />
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch, nextTick, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useApi, useFormGuard, useAppStore, useI18nStore, LigojConfirmDialog } from '@ligoj/host'
-
-const route = useRoute()
-const router = useRouter()
-const api = useApi()
-const appStore = useAppStore()
-const i18n = useI18nStore()
-const t = i18n.t
-
-const formRef = ref(null)
-const loading = ref(false)
-const saving = ref(false)
-const deleting = ref(false)
-const confirmDelete = ref(false)
-
-const isEdit = computed(() => !!route.params.id)
-
-// Static icon map keyed by the raw enum value. Const at module scope so
-// it is never re-created reactively — referenced from both the
-// prepend-inner-icon computed (selected value) and the #item slot
-// (dropdown rows).
-const TYPE_ICONS = {
-  USER: 'mdi-account',
-  GROUP: 'mdi-account-group',
-  COMPANY: 'mdi-domain',
-  TREE: 'mdi-file-tree',
-}
-
-// Items as plain objects with the raw enum value + an i18n key. v-model
-// still holds the value, item-value="value" wires it back. The earlier
-// attempt at adding icons via the #selection slot (with item.raw.icon)
-// triggered "Maximum recursive updates exceeded" inside v-select — this
-// version keeps only the #item slot and renders the selected icon via
-// prepend-inner-icon, which sidesteps that loop.
-const receiverTypes = [
-  { value: 'USER', titleKey: 'delegate.type.user' },
-  { value: 'GROUP', titleKey: 'delegate.type.group' },
-  { value: 'COMPANY', titleKey: 'delegate.type.company' },
-]
-const resourceTypes = [
-  { value: 'USER', titleKey: 'delegate.type.user' },
-  { value: 'GROUP', titleKey: 'delegate.type.group' },
-  { value: 'COMPANY', titleKey: 'delegate.type.company' },
-  { value: 'TREE', titleKey: 'delegate.type.tree' },
-]
-
-/** v-select item-title callback: resolves the i18n key from the item object. */
-function typeTitle(item) {
-  return t(item.titleKey)
-}
-
-const form = ref({
-  receiver: '',
-  receiverType: 'USER',
-  name: '',
-  type: 'GROUP',
-  canAdmin: false,
-  canWrite: false,
-})
-
-// Icon shown inside the field, driven by the currently selected value.
-const receiverIcon = computed(() => TYPE_ICONS[form.value.receiverType] || '')
-const typeIcon = computed(() => TYPE_ICONS[form.value.type] || '')
-
-/* -------------------------------------------------------------------------
- *  Autocomplete: receiver / resource
- *
- *  The two text inputs in section "receiver" and "resource" are dynamic
- *  v-autocompletes that hit the matching identity endpoint:
- *    receiverType=USER     → rest/service/id/user
- *    receiverType=GROUP    → rest/service/id/group
- *    receiverType=COMPANY  → rest/service/id/company
- *    type=USER/GROUP/COMPANY → same as above
- *    type=TREE             → groups (TREE delegates scope on a group)
- *
- *  Server-side filtering only (the autocomplete passes `?q=`), so we
- *  set `no-filter` on the components to disable Vuetify's local filter.
- *  ------------------------------------------------------------------- */
-
-// TREE is intentionally absent — TREE-typed delegates use a free-form
-// DN (rendered via v-text-field), so no list endpoint applies.
-const TYPE_TO_ENDPOINT = {
-  USER: 'service/id/user',
-  GROUP: 'service/id/group',
-  COMPANY: 'service/id/company',
-}
-
-/** Normalize a backend row to `{ id, label }` regardless of the entity
- *  kind. Users get `id — First Last` so the dropdown is scannable;
- *  groups/companies are identified by name only. */
-function normalizeEntity(row, kind) {
-  if (!row) return null
-  if (kind === 'USER') {
-    const full = [row.firstName, row.lastName].filter(Boolean).join(' ')
-    return { id: row.id, label: full ? `${row.id} — ${full}` : row.id }
-  }
-  return { id: row.name, label: row.name }
-}
-
-/** Fetch the first page (rows=20) for the kind. An empty query is
- *  allowed so the dropdown can be populated before the user types —
- *  see `loadReceiverItems` / `loadResourceItems`. */
-async function fetchEntities(kind, query) {
-  const endpoint = TYPE_TO_ENDPOINT[kind]
-  if (!endpoint) return []
-  const q = (query || '').trim()
-  const qp = q ? `q=${encodeURIComponent(q)}&` : ''
-  const data = await api.get(`rest/${endpoint}?${qp}rows=20`)
-  const rows = Array.isArray(data) ? data : (data?.data || [])
-  return rows.map((r) => normalizeEntity(r, kind)).filter(Boolean)
-}
-
-const receiverItems = ref([])
-const receiverSearch = ref('')
-const receiverLoading = ref(false)
-let receiverTimer = null
-
-const resourceItems = ref([])
-const resourceSearch = ref('')
-const resourceLoading = ref(false)
-let resourceTimer = null
-
-/** Keep the currently-selected value visible in the dropdown even
- *  before the user has typed anything (e.g. on edit-mode initial
- *  load): pre-pend a synthetic item with `id = current value`. */
-const receiverDisplayItems = computed(() => {
-  const cur = form.value.receiver
-  const items = receiverItems.value
-  if (cur && !items.find((i) => i.id === cur)) {
-    return [{ id: cur, label: cur }, ...items]
-  }
-  return items
-})
-const resourceDisplayItems = computed(() => {
-  const cur = form.value.name
-  const items = resourceItems.value
-  if (cur && !items.find((i) => i.id === cur)) {
-    return [{ id: cur, label: cur }, ...items]
-  }
-  return items
-})
-
-async function loadReceiverItems() {
-  receiverLoading.value = true
-  try { receiverItems.value = await fetchEntities(form.value.receiverType, receiverSearch.value) }
-  finally { receiverLoading.value = false }
-}
-async function loadResourceItems() {
-  resourceLoading.value = true
-  try { resourceItems.value = await fetchEntities(form.value.type, resourceSearch.value) }
-  finally { resourceLoading.value = false }
-}
-
-function onReceiverSearch(q) {
-  // Vuetify mirrors the picked item's title into the search input;
-  // that fires `update:search` with a label that matches an existing
-  // item. Skip the round-trip in that case — otherwise we'd refetch
-  // with the label and lose the row the user just picked from.
-  if (receiverDisplayItems.value.some((i) => i.label === q)) return
-  clearTimeout(receiverTimer)
-  receiverTimer = setTimeout(loadReceiverItems, 250)
-}
-
-function onResourceSearch(q) {
-  if (resourceDisplayItems.value.some((i) => i.label === q)) return
-  clearTimeout(resourceTimer)
-  resourceTimer = setTimeout(loadResourceItems, 250)
-}
-
-// Selecting a new type invalidates the corresponding identifier and
-// drops the cached items. We deliberately don't refetch here — the
-// next dropdown-open (or first keystroke) will lazy-load the first
-// page for the new kind. This keeps the form quiet when the user
-// doesn't actually interact with these selects.
-watch(() => form.value.receiverType, () => {
-  form.value.receiver = ''
-  receiverSearch.value = ''
-  receiverItems.value = []
-})
-watch(() => form.value.type, () => {
-  form.value.name = ''
-  resourceSearch.value = ''
-  resourceItems.value = []
-})
-
-/** Fires when v-autocomplete opens/closes its dropdown. We fetch the
- *  first page only when the menu opens AND no items have been
- *  fetched for the current kind yet — so a user who never opens the
- *  dropdown (or types) doesn't trigger any network call. */
-function onReceiverMenu(open) {
-  if (open && receiverItems.value.length === 0) loadReceiverItems()
-}
-function onResourceMenu(open) {
-  if (open && resourceItems.value.length === 0) loadResourceItems()
-}
-
-const { showGuardDialog, confirmLeave, cancelLeave, markClean, init: initGuard } = useFormGuard(form)
-
-const rules = {
-  required: v => !!v || t('common.required'),
-}
-
-onMounted(async () => {
-  if (isEdit.value) {
-    loading.value = true
-    const data = await api.get(`rest/security/delegate/${route.params.id}`)
-    if (data) {
-      // Set the discriminator selects FIRST. Their watchers run on
-      // the next microtask and reset the matching identifier
-      // (receiver / name) to '' — which is fine while we're still in
-      // the empty default. The `await nextTick()` below lets that
-      // pass run before we write the actual values, so the loaded
-      // identifier sticks instead of being wiped.
-      //
-      // Normalize to the uppercase enum form used by the v-select
-      // items. The backend stores some delegates with lowercase
-      // values ("company", "tree", …) and v-model would otherwise
-      // mismatch every item, locking the select in a "Maximum
-      // recursive updates exceeded" loop.
-      form.value.receiverType = (data.receiverType || 'USER').toUpperCase()
-      form.value.type = (data.type || 'GROUP').toUpperCase()
-      await nextTick()
-      form.value.receiver = data.receiver?.id || data.receiver || ''
-      // TREE delegates store the DN separately — `name` is a "-"
-      // placeholder server-side. Show the DN in the resource input so
-      // the user can read/edit the actual subtree path.
-      form.value.name = form.value.type === 'TREE'
-        ? (data.dn || data.name || '')
-        : (data.name || '')
-      form.value.canAdmin = !!data.canAdmin
-      form.value.canWrite = !!data.canWrite
-    }
-    loading.value = false
-    appStore.setBreadcrumbs([
-      { title: t('nav.home'), to: '/' },
-      { title: t('nav.identity') },
-      { title: t('delegate.title'), to: '/id/delegate' },
-      { title: form.value.receiver || t('delegate.edit') },
-    ])
-  } else {
-    appStore.setBreadcrumbs([
-      { title: t('nav.home'), to: '/' },
-      { title: t('nav.identity') },
-      { title: t('delegate.title'), to: '/id/delegate' },
-      { title: t('delegate.new') },
-    ])
-  }
-  initGuard()
-})
-
-async function save() {
-  const { valid } = await formRef.value.validate()
-  if (!valid) return
-
-  saving.value = true
-  const payload = {
-    receiver: form.value.receiver,
-    receiverType: form.value.receiverType,
-    name: form.value.name,
-    type: form.value.type,
-    canAdmin: form.value.canAdmin,
-    canWrite: form.value.canWrite,
-  }
-
-  if (isEdit.value) {
-    await api.put('rest/security/delegate', { id: Number(route.params.id), ...payload })
-  } else {
-    await api.post('rest/security/delegate', payload)
-  }
-  saving.value = false
-  markClean()
-  router.push('/id/delegate')
-}
-
-async function remove() {
-  deleting.value = true
-  await api.del(`rest/security/delegate/${route.params.id}`)
-  deleting.value = false
-  confirmDelete.value = false
-  markClean()
-  router.push('/id/delegate')
-}
-</script>
-
-<style scoped>
-.edit-card {
-  max-width: 700px;
-}
-
-@media (max-width: 600px) {
-  .edit-card {
-    max-width: 100%;
-  }
-}
-</style>
diff --git a/ui/src/views/DelegateListView.vue b/ui/src/views/DelegateListView.vue
index a4894a4..c3f60c1 100644
--- a/ui/src/views/DelegateListView.vue
+++ b/ui/src/views/DelegateListView.vue
@@ -4,7 +4,7 @@
       <v-spacer />
       <v-text-field v-model="dt.search.value" prepend-inner-icon="mdi-magnify" :label="t('common.search')" variant="outlined" density="compact" hide-details class="search-field"
         @update:model-value="onSearch" />
-      <v-btn color="primary" prepend-icon="mdi-plus" @click="router.push('/id/delegate/new')">
+      <v-btn color="primary" prepend-icon="mdi-plus" @click="openDialog(null)">
         {{ t('delegate.new') }}
       </v-btn>
     </div>
@@ -27,14 +27,25 @@
 
     <LigojDataTableServer filename="delegates.csv" :fetch-all="dt.loadAll" v-if="!dt.error.value" v-show="dt.items.value.length > 0 || !dt.loading.value" v-model="selected"
       v-model:items-per-page="itemsPerPage" :headers="headers" :items="dt.items.value" :items-length="dt.totalItems.value" :loading="dt.loading.value" item-value="id" show-select hover
-      @update:options="loadData" @click:row="(_, { item }) => router.push('/id/delegate/' + item.id)">
+      @update:options="loadData" @click:row="(_, { item }) => openDialog(item.id)">
+      <!-- Receiver column (chantier D5): the receiver's *kind* is rendered
+           as a small leading icon (Account / Group / Domain) followed by
+           its identifier. The dedicated Type chip column has been removed
+           entirely (chantier D6+D8).
+           Note: backend stores receiverType in lowercase ("company", …)
+           for some rows, so normalize before the TYPE_ICONS lookup —
+           same rationale as DelegateEditDialog.loadOnOpen(). -->
       <template #item.receiver="{ item }">
+        <v-icon size="small" class="me-1">{{ TYPE_ICONS[item.receiverType?.toUpperCase()] || 'mdi-account' }}</v-icon>
         {{ item.receiver?.name || item.receiver?.id || item.name || '-' }}
       </template>
-      <template #item.type="{ item }">
-        <v-chip size="small" :color="typeColor(item.type || item.receiverType)">
-          {{ item.type || item.receiverType || '-' }}
-        </v-chip>
+      <!-- Resource column (chantier D5+D8): fuses the former Type and
+           Resource columns. The kind is the leading icon (Account /
+           Group / Domain / File-tree); the text is the resource name
+           (or DN for TREE delegates). Same lowercase-normalize as above. -->
+      <template #item.name="{ item }">
+        <v-icon size="small" class="me-1">{{ TYPE_ICONS[item.type?.toUpperCase()] || '' }}</v-icon>
+        {{ item.name || '-' }}
       </template>
       <template #item.canAdmin="{ item }">
         <v-icon v-if="item.canAdmin" color="success" size="small">mdi-check</v-icon>
@@ -43,7 +54,7 @@
         <v-icon v-if="item.canWrite" color="success" size="small">mdi-check</v-icon>
       </template>
       <template #item.actions="{ item }">
-        <v-btn icon size="small" variant="text" @click.stop="router.push('/id/delegate/' + item.id)">
+        <v-btn icon size="small" variant="text" @click.stop="openDialog(item.id)">
           <v-icon size="small">mdi-pencil</v-icon>
         </v-btn>
         <v-btn icon size="small" variant="text" color="error" @click.stop="startDelete(item)">
@@ -81,15 +92,18 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+
+    <!-- Delegate create/edit popup (chantier D3). editDelegateId null = create mode. -->
+    <DelegateEditDialog v-model="editDialog" :delegate-id="editDelegateId" @saved="onDelegateSaved" />
   </div>
 </template>
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
 import { useDataTable, useApi, useAppStore, useI18nStore, LigojDataTableServer } from '@ligoj/host'
+import DelegateEditDialog from './DelegateEditDialog.vue'
+import { TYPE_ICONS } from '../composables/delegateTypes.js'
 
-const router = useRouter()
 const appStore = useAppStore()
 const api = useApi()
 const i18n = useI18nStore()
@@ -106,20 +120,23 @@ const deleting = ref(false)
 const bulkDeleteDialog = ref(false)
 let lastOptions = {}
 
+// Delegate create/edit dialog state. editDelegateId null = create mode.
+const editDialog = ref(false)
+const editDelegateId = ref(null)
+
+// Headers revised per Fabrice's 22-may review (chantiers D5+D6+D8):
+//  - Receiver gets a leading kind icon (slot below).
+//  - Type and Resource are fused into a single "Resource" column whose
+//    text is the resource name and whose leading icon is the type. The
+//    Type chip column is gone.
 const headers = computed(() => [
   { title: t('delegate.receiver'), key: 'receiver', sortable: true },
-  { title: t('delegate.type'), key: 'type', sortable: false, width: '120px' },
   { title: t('delegate.resource'), key: 'name', sortable: false },
   { title: t('delegate.admin'), key: 'canAdmin', sortable: false, width: '80px' },
   { title: t('delegate.write'), key: 'canWrite', sortable: false, width: '80px' },
-  { title: '', key: 'actions', sortable: false, width: '100px', align: 'end' },
+  { title: '', key: 'actions', sortable: false, width: '120px', align: 'center' },
 ])
 
-function typeColor(type) {
-  const colors = { USER: 'blue', GROUP: 'teal', COMPANY: 'indigo', TREE: 'orange' }
-  return colors[type] || 'grey'
-}
-
 function loadData(options) {
   lastOptions = options
   dt.load(options)
@@ -130,6 +147,17 @@ function onSearch() {
   searchTimeout = setTimeout(() => dt.load({ page: 1, itemsPerPage: itemsPerPage.value }), 300)
 }
 
+function openDialog(id = null) {
+  editDelegateId.value = id
+  editDialog.value = true
+}
+
+function onDelegateSaved() {
+  // Reload the current page after a create/edit/delete performed from
+  // the dialog so the list reflects the new state.
+  dt.load(lastOptions)
+}
+
 function startDelete(item) {
   deleteTarget.value = item
   deleteDialog.value = true