refactor: update pan-informations component and its usage in identities table

tacxou · tacxou · commit 9b469cbd307c · 2026-03-10T15:28:31.000+01:00
- Changed component name from `sesame-core-pan-informations` to `sesame-pages-identities-pan-informations`.
- Enhanced tooltip formatting and added additional information for creation and last modification dates.
- Improved data handling with optional chaining for metadata properties.
diff --git a/apps/web/src/components/core/pan-informations.vue b/apps/web/src/components/core/pan-informations.vue
@@ -1,22 +1,30 @@
 <template lang="pug">
 q-bar.row.items-left
   span
-    q-tooltip.text-body2.bg-green-8.text-white(anchor="top middle" self="bottom middle")
-      span Créé par: {{ data.metadata.createdBy }}
+    q-tooltip.text-body1.bg-green-8.text-white(anchor="top middle" self="bottom middle")
+      i Créé par&nbsp;:&nbsp;
+      b.font-bold {{ data?.metadata?.createdBy || 'N/A' }}
       br
-      span Créé le: {{ $dayjs(data.metadata.createdAt).format('DD/MM/YYYY HH:mm:ss') }}
+      i Date de création&nbsp;:&nbsp;
+      b.font-bold {{ $dayjs(data?.metadata?.createdAt).format('DD/MM/YYYY HH:mm:ss') }}
+      br
+      small Créé par: Date de création initiale de l'identité.
     q-icon(name="mdi-database-plus" size="16px" left)
-    small {{ data.metadata.createdBy || 'N/A' }},&nbsp;
-    small &nbsp;{{ $dayjs(data.metadata.createdAt || 'N/A').fromNow() }}
+    small {{ data?.metadata?.createdBy || 'N/A' }},&nbsp;
+    small &nbsp;{{ $dayjs(data?.metadata?.createdAt || 'N/A').fromNow() }}
   q-separator.q-mx-sm(vertical inset)
   span
-    q-tooltip.text-body2.bg-orange-8.text-white(anchor="top middle" self="bottom middle" )
-      span Dernière modification par: {{ data.metadata.lastUpdatedBy }}
+    q-tooltip.text-body1.bg-orange-8.text-white(anchor="top middle" self="bottom middle" )
+      i Dernière modification effectuée par&nbsp;:&nbsp;
+      b.font-bold {{ data?.metadata?.lastUpdatedBy || 'N/A' }}
+      br
+      i Dernière modification le&nbsp;:&nbsp;
+      b.font-bold {{ $dayjs(data?.metadata?.lastUpdatedAt).format('DD/MM/YYYY HH:mm:ss') }}
       br
-      span Dernière modification le: {{ $dayjs(data.metadata.lastUpdatedAt).format('DD/MM/YYYY HH:mm:ss') }}
+      small Dernière modification: Quand l'identité à été modifiée pour la dernière fois.
     q-icon(name="mdi-database-clock" size="16px" left)
-    small {{ data.metadata.lastUpdatedBy || 'N/A' }},&nbsp;
-    small {{ $dayjs(data.metadata.lastUpdatedAt || 'N/A').fromNow() }}
+    small {{ data?.metadata?.lastUpdatedBy || 'N/A' }},&nbsp;
+    small {{ $dayjs(data?.metadata?.lastUpdatedAt || 'N/A').fromNow() }}
   q-separator.q-mx-sm(vertical inset v-if="$slots.hasOwnProperty('actions-left')")
   slot(name="actions-left")
   q-space
diff --git a/apps/web/src/components/pages/identities/pan-informations.vue b/apps/web/src/components/pages/identities/pan-informations.vue
@@ -0,0 +1,33 @@
+<template lang="pug">
+sesame-core-pan-informations(:data="data")
+  template(#actions-right)
+    span
+      q-tooltip.text-body1.bg-lime-9.text-white(anchor="top middle" self="bottom middle")
+        i Dernier import&nbsp;:&nbsp;
+        b.font-bold {{ data?.lastSync ? $dayjs(data?.lastSync).format('DD/MM/YYYY HH:mm:ss') : 'N/A' }}
+        br
+        small Dernier import: Quand l'api à été utilisée pour importer des données d'une identité.
+      q-icon(name="mdi-database-import" size="16px" left)
+      small {{ data?.lastSync ? $dayjs(data?.lastSync).fromNow() : 'N/A' }}
+    q-separator.q-mx-sm(vertical inset)
+    span
+      q-tooltip.text-body1.bg-purple-8.text-white(anchor="top middle" self="bottom middle")
+        i Dernière synchronisation&nbsp;:&nbsp;
+        b.font-bold {{ data?.lastBackendSync ? $dayjs(data?.lastBackendSync).format('DD/MM/YYYY HH:mm:ss') : 'N/A' }}
+        br
+        small Dernière synchronisation: Quand le(s) backend(s) à été utilisé(s) pour synchroniser des données d'une identité.
+      q-icon(name="mdi-database-export" size="16px" left)
+      small {{ data?.lastBackendSync ? $dayjs(data?.lastBackendSync).fromNow() : 'N/A' }}
+</template>
+
+<script lang="ts">
+export default defineNuxtComponent({
+  name: 'SesamePagesIdentitiesPanInformationsComponent',
+  props: {
+    data: {
+      type: Object as PropType<Record<string, any>>,
+      required: true,
+    },
+  },
+})
+</script>
diff --git a/apps/web/src/pages/identities/table/[_id]/index.vue b/apps/web/src/pages/identities/table/[_id]/index.vue
@@ -174,22 +174,10 @@
               :readonly="identity.state === IdentityState.TO_SYNC || !hasPermission('/management/identities', 'update')"
               :mode="isNew ? 'create' : 'update'"
             )
-          sesame-core-pan-informations(
+          sesame-pages-identities-pan-informations(
             v-if="identity?._id"
             :data="identity"
           )
-            template(#actions-right)
-              span
-                q-tooltip.text-body2.bg-lime-8.text-white(anchor="top middle" self="bottom middle")
-                  span Dernier import: {{ identity.lastSync ? $dayjs(identity.lastSync).format('DD/MM/YYYY HH:mm:ss') : 'N/A' }}
-                q-icon(name="mdi-database-import" size="16px" left)
-                small {{ identity.lastSync ? $dayjs(identity.lastSync).fromNow() : 'N/A' }}
-              q-separator.q-mx-sm(vertical inset)
-              span
-                q-tooltip.text-body2.bg-purple-8.text-white(anchor="top middle" self="bottom middle")
-                  span Dernière synchronisation: {{ identity.lastBackendSync ? $dayjs(identity.lastBackendSync).format('DD/MM/YYYY HH:mm:ss') : 'N/A' }}
-                q-icon(name="mdi-database-export" size="16px" left)
-                small {{ identity.lastBackendSync ? $dayjs(identity.lastBackendSync).fromNow() : 'N/A' }}
         q-tab-panel.q-pa-none.column.no-wrap.full-height(v-for="t in tabs" :key="t" :name="t")
           .col.overflow-auto(style="min-height: 0")
             sesame-core-jsonforms-renderer.full-width(
@@ -202,12 +190,12 @@
               :readonly="identity.state === IdentityState.TO_SYNC || !hasPermission('/management/identities', 'update')"
               :mode="isNew ? 'create' : 'update'"
             )
-          sesame-core-pan-informations(
+          sesame-pages-identities-pan-informations(
             v-if="identity?._id"
             :data="identity"
           )
   q-dialog(v-model="resetPasswordModal" persistent medium)
-    q-card(style="width:800px")
+    q-card(style="width: 800px")
       q-toolbar.bg-primary(flat)
         q-toolbar-title Définir un nouveau mot de passe
         q-btn(icon="mdi-close" flat dense @click="resetPasswordModal = false")
