feat: enhance UI components with improved layout and functionality adjustments

Author: tacxou

src/components/2pan/index.vue

@@ -67,24 +67,24 @@ q-splitter(
     q-avatar(v-if='!isSimple' size="sm" color="primary" icon="mdi-unfold-more-vertical" class="text-white")
 
   template(#after)
-    q-card.full-height.q-pa-sm(bordered :class='{"hidden": isSimple && !targetId}')
+    q-card.full-height.q-pa-none(bordered :class='{"hidden": isSimple && !targetId}')
       q-card-section.q-pa-none.flex.items-center.full-height.justify-center(v-if='!targetId')
         slot(name="right-panel-empty")
           slot(name="right-panel-empty-content-before")
           p Selectionnez une entrée pour afficher son contenu...
           slot(name="right-panel-empty-content-after")
       div.full-height.q-pa-none.flex.justify-start(v-else style='flex-flow: column; overflow-y: auto;')
-        q-card-actions
+        q-toolbar.q-py-none(style='height: 50px;')
+          q-btn(color="primary" icon="mdi-chevron-left" @click="cancel" tooltip="Retour" dense)
+            q-tooltip.text-body2 Retour
+          q-separator.q-mx-sm(vertical)
           slot(name="right-panel-title" :target="target")
             slot(name="right-panel-title-before" :target="target")
-            q-toolbar-title(v-text='getTitle' style='flex: 100 1 0%')
+            q-toolbar-title(v-html=`isNew ? defaultTitle : getTitle` style='flex: 100 1 0%')
             slot(name="right-panel-title-after" :target="target")
           q-space
           slot(name="right-panel-actions")
             slot(name="right-panel-actions-content-before" :target="target")
-            q-btn(color="primary", icon="mdi-chevron-left" @click="cancel" tooltip="Retour")
-              q-tooltip.text-body2 Retour
-            q-separator.q-mx-sm(vertical)
             slot(name="right-panel-actions-content" v-if="defaultRightPanelButton" :target="target" :isNew="isNew" :crud="crud")
               q-btn(color="positive" icon='mdi-content-save-plus' @click="create(target)" v-show="isNew" v-if="crud.create")
                 q-tooltip.text-body2 Créer
@@ -240,6 +240,7 @@ const props = defineProps({
   },
 })
 
+const defaultTitle = "<span class='text-grey-8'>Création d'un nouveau élément</span>"
 const simple = ref(props.simple)
 const isSimple = computed(() => {
   if ($q.platform.is.mobile) return true

src/components/identityForm/actions.vue

@@ -20,6 +20,7 @@ div.flex
     q-btn(color="positive" icon='mdi-content-save-plus' @click="create" v-show="isNew" v-if="crud.create")
       q-tooltip.text-body2 Créer
     q-toggle.q-px-md.q-gutter-y-lg(
+      v-if="props.identity?._id"
       checked-icon="mdi-account-check"
       unchecked-icon="mdi-account-cancel"
       indeterminate-icon="mdi-lock-reset"
@@ -33,12 +34,12 @@ div.flex
       :indeterminate-value="-2"
       :false-value="-3"
       )
-    q-btn-group(push)
-      q-btn( @click="forceChangePassword()" color="orange-8" icon="mdi-lock-reset"  :disabled="props.identity.state != IdentityState.SYNCED")
+    q-btn-group(v-if="props.identity?._id" push flat)
+      q-btn(@click="forceChangePassword()" color="orange-8" icon="mdi-lock-reset" :disabled="props.identity.state != IdentityState.SYNCED" padding='5px 10px' dense)
         q-tooltip.text-body2(slot="trigger") Obliger l'utilisateur à changer son mot de passe
-      q-btn(@click="resetPasswordModal = true" color="red-8" icon="mdi-account-key"  :disabled="props.identity.state != IdentityState.SYNCED")
+      q-btn(@click="resetPasswordModal = true" color="red-8" icon="mdi-account-key" :disabled="props.identity.state != IdentityState.SYNCED" padding='5px 10px' dense)
         q-tooltip.text-body2(slot="trigger") Définir le mot de passe
-      q-btn(@click="sendInit" color="primary" icon="mdi-email-arrow-right"  :disabled="props.identity.state != IdentityState.SYNCED")
+      q-btn(@click="sendInit" color="primary" icon="mdi-email-arrow-right"  :disabled="props.identity.state != IdentityState.SYNCED" padding='5px 10px' dense)
         q-tooltip.text-body2(slot="trigger") Envoyer le mail d'invitation
 
       q-separator(size='3px' vertical)
@@ -49,9 +50,9 @@ div.flex
         q-tooltip.text-body2(slot="trigger" v-if="props.identity.state == IdentityState.TO_VALIDATE") Synchroniser l'identité
         q-tooltip.text-body2(slot="trigger" v-else) L'état de l'identité ne permet pas de la synchroniser
 
-      q-separator(size='3px' vertical)
+      q-separator(v-if="props.identity?._id" size='3px' vertical)
 
-      q-btn-dropdown.text-white(dropdown-icon="mdi-dots-vertical" style='background-color: rgba(0, 0, 0, .6)' no-caps)
+      q-btn-dropdown.text-white(v-if="props.identity?._id" dropdown-icon="mdi-dots-vertical" style='background-color: rgba(0, 0, 0, .6)' padding='5px 10px' dense no-caps)
         q-list
           a(:href="'/jobs?filters[:concernedTo.id]=' + props.identity?._id" target="_blank" style='text-decoration: none; color: inherit' @click.prevent="dialogLog = true")
             q-item(v-if="props.identity?._id" clickable v-close-popup)

src/components/identityForm/index.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 div
   //- pre(v-html="JSON.stringify(identity, null, 2)")
-  q-tabs(v-model="tab" align="justify")
+  q-tabs(v-model="tab" align="justify" dense)
     q-tab(name="inetOrgPerson" label="inetOrgPerson" :alert="getTabValidations('inetOrgPerson')" alert-icon="mdi-alert" :class="`q-mr-xs`")
     q-tab.q-pr-none(v-for="tab in tabs" :key="tab" :name="tab" :alert="getTabValidations(tab)" alert-icon="mdi-alert" :class="`q-mr-xs`")
       div.flex.row.full-height.items-center(style='flex-wrap: nowrap;')

src/components/searchfilters/Main.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.row.q-gutter-sm.items-center.q-mt-sm
+.row.q-gutter-sm.items-center.q-mt-none
   //- .col.col-md-2
   //-     q-select(:options="fieldTypes" label="Type de champ" v-model="fieldType" clearable @update:model-value="clearFields(['field', 'comparator'])")
   .col.col-md-2

src/components/searchfilters/index.vue

@@ -1,10 +1,10 @@
 <template lang="pug" @keypress.enter="addFilter">
-.q-pa-sm
+.q-pb-sm
   sesameSearchfiltersMain(ref="mainData")
     template(#rightSelect)
       slot(name="rightSelect")
   //Filters chips
-  .row.q-gutter-sm.items-center.q-mt-sm
+  .row.q-gutter-sm.items-center.q-mt-xs
     q-chip(
       v-for="filter in filterArray" :key="filter.field"
       removable @remove="removeFilter(filter)" @click="editFilter(filter)" clickable

src/composables/useMenu.ts

@@ -46,6 +46,13 @@ function useMenu(identityStateStore) {
       color: 'primary',
       part: 'Données',
       hideInMenuBar: false
+    }, {
+      icon: 'mdi-timeline-clock-outline',
+      label: 'Journal des jobs',
+      path: '/lifecycles/table',
+      color: 'primary',
+      part: 'Données',
+      hideInMenuBar: false
     },
     {
       icon: 'mdi-set-merge',

src/layouts/default.vue

@@ -12,9 +12,10 @@ q-layout(view="hHh LpR lff" style="margin-top: -1px;")
         q-list(v-for="part in menuParts" :key="part")
           div(v-for="menu in getMenuByPart(part)")
             q-item(v-if="menu.hideInMenuBar !== true"
-              :key="part"  clickable v-ripple
-              :to="menu.path" :active="menu.path === $route.fullPath"
+              :key="part" clickable v-ripple
+              :to="menu.path" :active="menu.path === $route.fullPath" active-class="q-item--active"
             )
+              q-separator(vertical color='primary' size="5px" style='position: absolute; left: 0; height: 100%; margin-top: -8px;')
               q-item-section(avatar)
                 q-icon(:name="menu.icon" :color="menu.color")
               q-badge(v-if="menu.badge" :color="menu.badge.color" floating) {{ menu.badge.value }}