fixed concernement field recording

src/components/MapConcernements.vue

@@ -61,6 +61,7 @@ export default {
                                     'concernements',
                                     'concernementsByID',
                                     'opened_concernement',
+                                    'concernement_is_updating_nid',
                                     'opened_entite_id',
                                     'opened_recit',
                                     'allSuperpositions',
@@ -122,11 +123,17 @@ export default {
     this.paper.view.onClick = function(event) {
       // console.log("view onClick", this, event.target);
       if(event.target._id === "paper-view-0") {
-        this.resetConcernementOpened();
+        // // unfocus any active element to trigger recording if needed
-        this.$router.push({
+        // document.activeElement.blur();
-          name: 'home',
+        // // setTimeout to let time for editable fields to focus out and record changes
-          hash: `#${this.map_mode}`
+        // setTimeout(() => {
-        });
+        //   this.resetConcernementOpened();
+        //   this.$router.push({
+        //     name: 'home',
+        //     hash: `#${this.map_mode}`
+        //   });
+        // }, 1);
+        this.closeConcernement();
       }
     }.bind(this);
 
@@ -1543,6 +1550,26 @@ export default {
         });
         wall_rects.addChildren(children);
       }
+    },
+    closeConcernement(){
+      // unfocus any active element to trigger recording if needed
+      document.activeElement.blur();
+      // setTimeout to let time for editable fields to focus out and record changes
+      this.waitForUpdatingEnded();
+    },
+    waitForUpdatingEnded(){
+      setTimeout(() => {
+        if (!this.concernement_is_updating_nid) {
+          this.resetConcernementOpened();
+          this.$router.push({
+            name: 'home',
+            hash: `#${this.map_mode}`
+          });
+        } else {
+          this.waitForUpdatingEnded();
+        }
+      }, 1);
+      
     }
   },
   beforeUpdate () {

src/components/contents/TerrainDeVie.vue

@@ -211,8 +211,10 @@ export default {
     ...mapActions(ConcernementsStore, ['setActiveRevision',
                                         'setDetailsZoomValue',
                                         'loadConcernements',
+                                        'setConcernementIsUpdating',
                                         'reloadConcernements',
                                         'reloadConcernementEntites',
+                                        'reloadConcernementField',
                                         'reloadProximites'
                                       ]),
     ...mapActions(UserStore, ['getUserEntitees']),
@@ -258,6 +260,22 @@ export default {
         this.headerreduced = false;
       }
     },
+    // triggered when focus out and gql patch xhr triggered
+    onFieldIsUpdating(cid){
+      this.setConcernementIsUpdating(cid);
+    },
+    // triggered when gql patch done
+    onFieldUpdated(cid){
+      this.setConcernementIsUpdating(null);
+      this.reloadConcernementEntites(cid);
+    },
+    concernementFieldIsUpdating(field){
+      this.setConcernementIsUpdating(this.cid);
+    },
+    concernementFieldUpdated(field){
+      this.setConcernementIsUpdating(null);
+      this.reloadConcernementField(this.cid, field);
+    },
     onContentEditableFocusOut(e){
       console.log('onContentEditableFocusOut', e);
       let new_field_content = e.target.innerText;
@@ -531,7 +549,8 @@ export default {
             id: this.entite.id,
             field: {field_name: 'title', value:'value'}
           }"
-          v-on:updated="reloadConcernementEntites(cid)"/>
+          v-on:updating="onFieldIsUpdating(cid)"
+          v-on:updated="onFieldUpdated(cid)"/>
 
         <!-- proximité -->
         <section
@@ -635,7 +654,9 @@ export default {
                 bundle: 'concernement',
                 id: this.concernement.id,
                 field: {field_name: 'field_description', value:'value'}
-              }" />
+              }" 
+              v-on:updating="concernementFieldIsUpdating('description')"
+              v-on:updated="concernementFieldUpdated('description')"/>
 
         </section>
         <section v-if="concernement.caillou || concernement.can_update" class="caillou">
@@ -651,7 +672,9 @@ export default {
                 bundle: 'concernement',
                 id: this.concernement.id,
                 field: {field_name: 'field_caillou', value:'value'}
-              }" />
+              }" 
+              v-on:updating="concernementFieldIsUpdating('caillou')"
+              v-on:updated="concernementFieldUpdated('caillou')"/>
 
         </section>
         <template v-if="concernement.can_update">
@@ -666,7 +689,15 @@ export default {
       </template>
 
       <!-- entite -->
-      <Entite v-if="entite" :concernement="concernement" :entite="entite" :eid="eid" v-on:reloadEntite="loadEntite"/>
+      <Entite 
+        v-if="entite" 
+        :concernement="concernement" 
+        :entite="entite" 
+        :eid="eid" 
+        v-on:reloadEntite="loadEntite"/>
+      <!-- v-on:updating="onFieldIsUpdating(cid)"
+        v-on:updated="onFieldUpdated(cid)" -->
+
     </template>
 
     <template v-slot:footer>

src/components/editable/ContentEditable.vue

@@ -29,7 +29,7 @@ export default {
       default : 'Ajouter du texte'
     }
   },
-  emits: ['updated'],
+  emits: ['updating', 'updated'],
   data(){
     return {
       editor: null,
@@ -74,6 +74,7 @@ export default {
       }
     },
     save(content){
+      this.$emit('updating');
       // console.log('save csrf_token', this.csrf_token);
       const params = {
         type: this.data.bundle,

src/components/layout/CartoucheLayout.vue

@@ -54,7 +54,15 @@ export default {
     }
   },
   methods: {
-    ...mapActions(ConcernementsStore,['setMapMode']),
+    ...mapActions(ConcernementsStore,['setMapMode',"setConcernementIsUpdating","reloadConcernementField"]),
+    // triggered when focus out and gql patch xhr triggered
+    concernementFieldIsUpdating(field){
+      this.setConcernementIsUpdating(this.cid);
+    },
+    concernementFieldUpdated(field){
+      this.setConcernementIsUpdating(null);
+      this.reloadConcernementField(this.cid, field);
+    }
   },
   components: {
     SvgIcon,
@@ -78,7 +86,9 @@ export default {
           bundle: 'concernement',
           id: this.concernement.id,
           field: {field_name: 'title', value:'value'}
-        }" />
+        }" 
+        v-on:updating="concernementFieldIsUpdating('title')"
+        v-on:updated="concernementFieldUpdated('title')"/>
 
 
       <!-- <nav class="icons">

src/stores/concernements.js

@@ -50,6 +50,7 @@ export const ConcernementsStore = defineStore({
     concernements_are_loading: false,
     concernement_active_revision: null,
     detailsZoomValue: 1,
+    concernement_is_updating_nid: null
   }),
   getters: {
     
@@ -309,6 +310,9 @@ export const ConcernementsStore = defineStore({
       // console.log(`end of parsing concernements`);
 
     },
+    setConcernementIsUpdating(nid){
+      this.concernement_is_updating_nid = nid;
+    },
     reloadConcernements () {
       console.log('reloadConcernements');
       return new Promise((resolve, reject) => {
@@ -429,9 +433,36 @@ export const ConcernementsStore = defineStore({
           })
       })
     },
+    reloadConcernementField(nid, field){
+      console.log('reloadConcernementField', nid, field);
+      // let tmp_conc = this.concernementsByID[nid];
+      return new Promise((resolve, reject) => {
+        const ast = gql`{
+          concernement(id:${nid}) {
+            id
+            ${field}
+          }
+        }
+        `
+        GQL.post('', { query: print(ast) })
+        .then(({ data : { data  : { concernement } } }) => {
+          console.log(`reloadConcernementField loaded ${field}`, concernement)
+          let tmp_conc = this.concernementsByID[concernement.id];
+          // merge old concernement besoins with new once
+          _merge(tmp_conc, concernement);
+          
+          resolve(concernement);
+        })
+        .catch(error => {
+          console.warn('Issue with reloadConcernementField', error)
+          reject(error);
+          Promise.reject(error)
+        })
+      });
+    },
     reloadConcernementBesoins(nid){
       let tmp_conc = this.concernementsByID[nid];
-      console.log(`reloadConcernementEntites len: ${tmp_conc.entites.length} revision: ${tmp_conc.revision_id} nid: ${nid}`);
+      // console.log(`reloadConcernementBesoins len: ${tmp_conc.entites.length} revision: ${tmp_conc.revision_id} nid: ${nid}`);
       return new Promise((resolve, reject) => {
         const ast = gql`{
           concernement(id:${nid}) {

src/views/Concernement.vue

@@ -40,7 +40,8 @@ export default {
     ...mapState(ConcernementsStore,['map_mode',
                                     'opened_concernement',
                                     'concernements_loaded',
-                                    'allSuperpositions_clustered']),
+                                    'allSuperpositions_clustered',
+                                    'concernement_is_updating_nid']),
     ...mapState(CommonStore,['cartouch_width']),
     // 
     main_cid_eid () {
@@ -203,7 +204,20 @@ export default {
       
     },
     closeConcernement(){
+      // unfocus any active element to trigger recording if needed
+      document.activeElement.blur();
+      // setTimeout to let time for editable fields to focus out and record changes
+      this.waitForUpdatingEnded();
+    },
+    waitForUpdatingEnded(){
+      setTimeout(() => {
+        if (!this.concernement_is_updating_nid) {
           this.resetConcernementOpened();
+        } else {
+          this.waitForUpdatingEnded();
+        }
+      }, 1);
+      
     }
   },
   components: {