bug #169 rafraichissement de Etat dans le twopan

Author: alainabbas

apps/web/src/layouts/default.vue

@@ -242,6 +242,9 @@ export default defineNuxtComponent({
                 this.eventSeamless = false
               }, 2000)
               await this.identityStateStore.fetchAllStateCount()
+              // Les états n'ont leur valeur définitive qu'une fois les jobs terminés : on
+              // prévient les vues ouvertes (liste du twopane, fiche) pour qu'elles se rechargent.
+              this.identityStateStore.notifyIdentitiesChanged()
             }
             break
         }

apps/web/src/pages/identities/table.vue

@@ -136,7 +136,8 @@ export default defineNuxtComponent({
 
     const { toPathWithQueries, navigateToTab } = useRouteQueries()
     const { columns, visibleColumns, columnsType } = useColumnsIdentites()
-    const { getStateValue, fetchAllStateCount } = useIdentityStateStore()
+    const identityStateStore = useIdentityStateStore()
+    const { getStateValue, fetchAllStateCount } = identityStateStore
     const { getStateName } = useIdentityStates()
     const { countFilters, hasFilters, getFilters, removeFilter } = useFiltersQuery(columns)
     const { useHttpPaginationOptions, useHttpPaginationReactive } = usePagination()
@@ -204,6 +205,7 @@ export default defineNuxtComponent({
       debug,
       page,
       hasPermission,
+      identityStateStore,
       identities,
       identityTableRowKey,
       pending,
@@ -282,10 +284,21 @@ export default defineNuxtComponent({
     }
   },
   computed: {
+    identitiesRevision(): number {
+      return this.identityStateStore.revision
+    },
     targetId(): LocationQueryValue[] | string {
       return `${this.$route.params._id || ''}`
     },
   },
+  watch: {
+    // L'état d'une identité évolue de façon asynchrone après la sauvegarde (jobs de
+    // synchronisation) : sans cela, la colonne « États » resterait figée sur la valeur lue
+    // juste après le PATCH.
+    identitiesRevision() {
+      this.refresh()
+    },
+  },
   methods: {
     getTableSelection(): Record<string, unknown>[] {
       const pan = this.$refs.twoPan as { getSelectedRows?: () => unknown[] } | undefined

apps/web/src/pages/identities/table/[_id].vue

@@ -61,7 +61,10 @@ export default defineNuxtComponent({
       // savable: this.savable,
       save: this.save,
       sync: this.sync,
-      refresh: this.refresh,
+      // `refreshAll` et non `refresh` : toute mutation faite depuis le volet de droite
+      // (etat, cycle de vie, mot de passe, invitation...) change aussi des colonnes de la
+      // liste du twopane, qui doit donc etre rechargee en meme temps que la fiche.
+      refresh: this.refreshAll,
     }
   },
   async setup() {
@@ -72,6 +75,7 @@ export default defineNuxtComponent({
 
     if (NewTargetId === $route.params._id) {
       return {
+        identityStateStore,
         // `ref` obligatoire : un objet litteral renvoye par `setup` n'est pas reactif,
         // les erreurs de validation posees sur `additionalFields.validations` ne seraient pas affichees.
         identity: ref({
@@ -116,6 +120,7 @@ export default defineNuxtComponent({
     }
 
     return {
+      identityStateStore,
       identity,
       originTarget,
       refresh,
@@ -124,6 +129,9 @@ export default defineNuxtComponent({
     }
   },
   computed: {
+    identitiesRevision(): number {
+      return this.identityStateStore.revision
+    },
     isNew(): boolean {
       return this.$route.params._id === NewTargetId
     },
@@ -139,6 +147,13 @@ export default defineNuxtComponent({
       },
     },
   },
+  watch: {
+    // Même raison que dans la liste : l'état définitif n'est connu qu'à la fin des jobs
+    // de synchronisation déclenchés par la sauvegarde.
+    identitiesRevision() {
+      if (!this.isNew) this.refresh()
+    },
+  },
   methods: {
     async save() {
       const sanitizedIdentity = { ...this.identity }
@@ -168,8 +183,7 @@ export default defineNuxtComponent({
           icon: 'mdi-check-circle-outline',
         })
 
-        this.refresh()
-        this.$emit('refresh')
+        await this.refreshAll()
       } catch (error: any) {
         this.$q.notify({
           message: formatApiErrorMessage(error, "Erreur lors de la sauvegarde de l'identité"),
@@ -209,7 +223,11 @@ export default defineNuxtComponent({
         })
       }
 
-      this.refresh()
+      await this.refreshAll()
+    },
+    /** Recharge la fiche courante puis la liste du twopane (volet de gauche). */
+    async refreshAll() {
+      await this.refresh()
       this.$emit('refresh')
     },
   },

apps/web/src/stores/identityState.ts

@@ -7,11 +7,21 @@ export const useIdentityStateStore = defineStore('identityStates', {
     initialized: false,
     filters: {},
     counters: {},
+    // Incrémenté quand les jobs de synchronisation d'identités se terminent. Les vues qui
+    // affichent un état (liste du twopane, fiche identité) s'y abonnent pour se recharger :
+    // l'état évolue de façon asynchrone après la sauvegarde (à synchroniser -> en cours ->
+    // synchronisée) et un simple rechargement juste après le PATCH ne voit que l'état transitoire.
+    revision: 0,
   }),
   getters: {
     getStateValue: (state) => (key: IdentityState | string) => state.counters[key],
   },
   actions: {
+    /** Signale aux vues abonnées que les identités ont changé côté backend. */
+    notifyIdentitiesChanged() {
+      this.revision++
+    },
+
     async initialize(filters = {}) {
       if (this.initialized) return