refactor: enhance tab handling in identities, agents, and roles components

tacxou · tacxou · commit dc5be55d1083 · 2026-03-11T17:43:05.000+01:00
- Updated tab rendering logic to support separators for better organization.
- Refactored tab definitions to include optional properties for background and text colors.
- Improved consistency in tab structure across identities, agents, and roles pages.
diff --git a/apps/web/src/pages/identities/table.vue b/apps/web/src/pages/identities/table.vue
@@ -49,16 +49,18 @@ q-page.grid
       q-btn(:to='toPathWithQueries(`/identities/table/${row._id}`)' color='primary' icon='mdi-eye' size='sm' flat round dense)
       q-btn-dropdown(:class="[$q.dark.isActive ? 'text-white' : 'text-black']" dropdown-icon="mdi-dots-horizontal" size='sm' flat round dense)
         q-list(dense)
-          q-item(
-            v-for="tab in tabs.filter(tab => tab.name !== 'index')" :key="tab.name"
-            v-show='typeof tab?.condition === "function" ? tab.condition() : true'
-            @click='tab?.action(row)'
-            clickable v-close-popup
-          )
-            q-item-section(avatar)
-              q-icon(:name="tab.icon" :class="tab.textColor ? `text-${tab.textColor}` : 'text-primary'")
-            q-item-section
-              q-item-label(v-text="tab.label")
+          template(v-for="tab in tabs" :key="tab.name")
+            q-separator(v-if="tab.type === 'separator'")
+            q-item(
+              v-else-if="tab.type !== 'separator'"
+              v-show='typeof tab?.condition === "function" ? tab.condition() : true'
+              @click='tab?.action(row)'
+              clickable v-close-popup
+            )
+              q-item-section(avatar)
+                q-icon(:name="tab.icon" :class="tab.textColor ? `text-${tab.textColor}` : 'text-primary'")
+              q-item-section
+                q-item-label(v-text="tab.label")
           q-separator
           q-item(clickable v-close-popup @click="deleteIdentity(row)" :disable='!hasPermission("/management/identities", "delete")')
             q-tooltip.text-body2.bg-negative.text-white(
@@ -90,6 +92,8 @@ type TabItem = {
   label: string
   action: Function
   bgColor?: string
+  textColor?: string
+  type?: 'separator'
   condition?: () => boolean
 }
 
@@ -189,30 +193,39 @@ export default defineNuxtComponent({
           name: 'index',
           icon: 'mdi-card-account-details',
           label: 'Fiche identité',
+          bgColor: 'primary',
+          textColor: 'primary',
           action: (i) => navigateToTab(`/identities/table/${i._id}`),
           condition: () => hasPermission('/management/identities', 'read'),
         },
         {
           name: 'audits',
           icon: 'mdi-clipboard-text-clock',
           label: 'Historique des changements',
+          bgColor: 'lime-8',
+          textColor: 'lime-8',
           action: (i) => navigateToTab(`/identities/table/${i._id}/audits`),
           condition: () => hasPermission('/core/audits', 'read'),
         },
         {
           name: 'jobs',
           icon: 'mdi-book-clock',
           label: 'Journaux des tâches',
+          bgColor: 'info',
+          textColor: 'info',
           action: (i) => navigateToTab(`/identities/table/${i._id}/jobs`),
           condition: () => hasPermission('/core/jobs', 'read'),
         },
         {
           name: 'lifecycle',
           icon: 'mdi-timeline-clock-outline',
           label: 'Historique des cycles de vie',
+          bgColor: 'info',
+          textColor: 'info',
           action: (i) => navigateToTab(`/identities/table/${i._id}/lifecycle`),
           condition: () => hasPermission('/management/lifecycle', 'read'),
         },
+        { type: 'separator' },
         {
           name: 'debug',
           icon: 'mdi-bug',
diff --git a/apps/web/src/pages/identities/table/[_id].vue b/apps/web/src/pages/identities/table/[_id].vue
@@ -9,25 +9,27 @@ q-card.flex.column.fit.absolute(flat)
       span(v-if='isNew') Nouvelle identitée
       span(v-else v-text='identity?.inetOrgPerson?.cn || "Identité sans nom"')
     q-tabs.full-height(:model-value='tab' v-if='!isSmall && !isNew')
-      q-tab.q-px-none(
-        v-for="tab in tabs" :key="tab.name"
-        @click='tab?.action(identity)'
-        v-show='typeof tab?.condition === "function" ? tab.condition() : true'
-        :class="[tab.textColor ? `text-${tab.textColor}` : 'text-primary']"
-        :name="tab.name"
-        :icon="tab.icon"
-      )
-        q-popup-proxy(context-menu :offset="[0, 10]")
-          q-list(dense bordered separator)
-            q-item(@click='tab?.action()' clickable)
-              q-item-section(avatar)
-                q-icon(name="mdi-open-in-new" :class="tab.textColor ? `text-${tab.textColor}` : 'text-primary'")
-              q-item-section
-                q-item-label Ouvrir dans un nouvel onglet
-        q-tooltip.text-body2(
-          :delay="200"
-          v-text="tab.label" :class="tab.bgColor ? `bg-${tab.bgColor}` : 'bg-primary'"
+      template(v-for="tab in tabs" :key="tab.name")
+        q-separator.q-mx-xs(v-if="tab.type === 'separator'" inset vertical)
+        q-tab.q-px-none(
+          v-else-if="tab.type !== 'separator'"
+          @click='tab?.action(identity)'
+          v-show='typeof tab?.condition === "function" ? tab.condition() : true'
+          :class="[tab.textColor ? `text-${tab.textColor}` : 'text-primary']"
+          :name="tab.name"
+          :icon="tab.icon"
         )
+          q-popup-proxy(context-menu :offset="[0, 10]")
+            q-list(dense bordered separator)
+              q-item(@click='tab?.action()' clickable)
+                q-item-section(avatar)
+                  q-icon(name="mdi-open-in-new" :class="tab.textColor ? `text-${tab.textColor}` : 'text-primary'")
+                q-item-section
+                  q-item-label Ouvrir dans un nouvel onglet
+          q-tooltip.text-body2(
+            :delay="200"
+            v-text="tab.label" :class="tab.bgColor ? `bg-${tab.bgColor}` : 'bg-primary'"
+          )
   q-separator(v-for='_ in 2' :key='_')
   q-card-section.col.q-pa-none.overflow-auto
     nuxt-page(:identity='identity' ref='page')
diff --git a/apps/web/src/pages/settings/agents/[_id].vue b/apps/web/src/pages/settings/agents/[_id].vue
@@ -8,14 +8,16 @@ q-card.flex.column.fit.absolute(flat)
       span(v-if='isNew') Nouvel agent
       span(v-else v-text='agent?.username || "Agent sans nom"')
     q-tabs.full-height(:model-value='tab' v-if='!isSmall && !isNew')
-      q-tab.q-px-none(
-        v-for="tab in tabs" :key="tab.name"
-        @click='tab?.action(agent)'
-        v-show='typeof tab?.condition === "function" ? tab.condition() : true'
-        :class="[tab.textColor ? `text-${tab.textColor}` : 'text-primary']"
-        :name="tab.name"
-        :icon="tab.icon"
-      )
+      template(v-for="tab in tabs" :key="tab.name")
+        q-separator.q-mx-xs(v-if="tab.type === 'separator'" inset vertical)
+        q-tab.q-px-none(
+          v-else-if="tab.type !== 'separator'"
+          @click='tab?.action(agent)'
+          v-show='typeof tab?.condition === "function" ? tab.condition() : true'
+          :class="[tab.textColor ? `text-${tab.textColor}` : 'text-primary']"
+          :name="tab.name"
+          :icon="tab.icon"
+        )
   q-separator(v-for='_ in 2' :key='_')
   q-card-section.col.q-pa-none.overflow-auto
     nuxt-page(:data='{ agent }' ref='page')
@@ -95,6 +97,7 @@ export default defineNuxtComponent({
           label: 'Fiche agent',
           action: (i) => this.navigateToTab(`/settings/agents/${this.isNew ? NewTargetId : i._id}`),
         },
+        { type: 'separator' },
         {
           name: 'debug',
           icon: 'mdi-bug',
diff --git a/apps/web/src/pages/settings/roles/[_id].vue b/apps/web/src/pages/settings/roles/[_id].vue
@@ -8,14 +8,16 @@ q-card.flex.column.fit.absolute(flat)
       span(v-if='isNew') Nouvel agent
       span(v-else v-text='role?.name || "Rôle sans nom"')
     q-tabs.full-height(:model-value='tab' v-if='!isSmall && !isNew')
-      q-tab.q-px-none(
-        v-for="tab in tabs" :key="tab.name"
-        @click='tab?.action(role)'
-        v-show='typeof tab?.condition === "function" ? tab.condition() : true'
-        :class="[tab.textColor ? `text-${tab.textColor}` : 'text-primary']"
-        :name="tab.name"
-        :icon="tab.icon"
-      )
+      template(v-for="tab in tabs" :key="tab.name")
+        q-separator.q-mx-xs(v-if="tab.type === 'separator'" inset vertical)
+        q-tab.q-px-none(
+          v-else-if="tab.type !== 'separator'"
+          @click='tab?.action(role)'
+          v-show='typeof tab?.condition === "function" ? tab.condition() : true'
+          :class="[tab.textColor ? `text-${tab.textColor}` : 'text-primary']"
+          :name="tab.name"
+          :icon="tab.icon"
+        )
   q-separator(v-for='_ in 2' :key='_')
   q-card-section.col.q-pa-none.overflow-auto
     nuxt-page(:data='{ role }' ref='page')
@@ -26,8 +28,8 @@ import type { components, operations } from '#build/types/service-api'
 import type { _Transform } from 'nuxt/dist/app/composables/asyncData'
 import { NewTargetId } from '~/constants/variables'
 
-type Agent = components['schemas']['AgentsDto']
-type Response = operations['AgentsController_read']['responses']['200']['content']['application/json']
+type Role = components['schemas']['RolesDto']
+type Response = operations['RolesController_read']['responses']['200']['content']['application/json']
 
 export default defineNuxtComponent({
   name: 'SettingsAgentsIdPage',
@@ -95,6 +97,7 @@ export default defineNuxtComponent({
           label: 'Fiche de rôle',
           action: (i) => this.navigateToTab(`/settings/roles/${this.isNew ? NewTargetId : i._id}`),
         },
+        { type: 'separator' },
         {
           name: 'debug',
           icon: 'mdi-bug',
