partially debuged proximites

src/assets/main.scss

@@ -224,7 +224,7 @@ div.loading{
       box-sizing: border-box;
       width:$cartouch_width_full;
       height: 100%;
-      padding: 2rem 2rem 1rem;
+      padding: 1rem 1rem 1rem;
       overflow-y: auto;
       overflow-x: hidden;
       //
@@ -263,7 +263,7 @@ div.loading{
       // layout
       >header{
         flex: 0 0 auto;
-        padding: 0 0 1em 0;
+        // padding: 0 0 1em 0;
       }
       >main{
         flex: 1 1 auto;
@@ -305,7 +305,7 @@ div.loading{
           // display: flex;
           // flex-direction: column;
           // justify-content: flex-end;
-          padding-bottom: 0.5em;
+          // padding-bottom: 0.5em;
           label, h3{
             // height: 70px;
             box-sizing: border-box;
@@ -325,22 +325,30 @@ div.loading{
               font-weight: bold;
             }
           }
-          // span.menacemaintient{
+          
-          //   display: block;
+          section.entite-params{
-          //   font-weight: 100;
+            padding:0.5em 0;
-          //   font-size: 0.882em;
+            display: flex;
-          //   padding: 1em 0;
+            flex-direction: row;
-          // }
+            gap:0.5em;
+            align-items: center;
+            >section.editable{
+              // margin: 0.3em;
+              flex: 1 0 auto;
+            }
+          }
 
         }
         div.concernement-cartouche-icons{
+          margin-bottom: 1em;
           h2{
-            font-weight: 400;
+            font-weight: 500;
             font-size: 1.512em;
             // &.faded{
             //   font-weight: 100;
             // }
             padding-bottom: 0.5em;
+            margin-top: 0;
             overflow: hidden;
             display: -webkit-box;
             -webkit-box-orient: vertical;
@@ -379,13 +387,23 @@ div.loading{
           transition: max-height 0.5s ease-in-out,padding 0.5s ease-in-out;
           max-height: 100px;
           overflow: hidden;
-          &.hidden{
+          // &.hidden{
-            max-height: 0;
+          //   max-height: 0;
-            padding-bottom: 0;
+          //   padding-bottom: 0;
+          // }
+        }
+      }
+      &.entity-opened{
+        >header{
+          div.concernement-cartouche-icons{
+            label{
+              max-height: 0;
+              padding-bottom: 0;
+            }
           }
         }
       }
-      
+
       >main{
         overflow-y: auto;
         padding-top: $gradpad;
@@ -699,7 +717,7 @@ div.loading{
       span.date{
         @include font_questions();
         display: block;
-        padding: 0 0 1em 0;
+        padding: 0 0 0.3em 0;
       }
       ul, li{
         padding:0; margin:0;
@@ -1065,7 +1083,7 @@ div.dp__main{
   border-radius: 5px;
   $p:0.3em;
   padding:$p;
-  margin:0.5em 0 0 -$p;
+  margin:0 0 0 -$p;
   box-sizing: border-box;
   transition: all 0.2s ease-in-out;
   box-shadow: 2px 2px 4px #bbb;

src/components/ConcernementMapItem.vue

@@ -87,7 +87,8 @@ export default {
                                     'detailsZoomValue',
                                     'reloadConcernements',
                                     'reloadConcernementEntites',
-                                    'concernements_loading_nb']),
+                                    'concernements_loading_nb',
+                                    'concernement_is_updating_nid']),
     ...mapState(CommonStore,['hover_elmt',
                             'map_item_ray',
                             'cartouch_width',
@@ -1464,10 +1465,14 @@ export default {
           }); // end of loop on proximite for each main entite
           
 
-          let activeEntites = this.getActiveEntites(allEntiteRefConcernementContourEntites);
+          // WARNING allEntiteRefConcernementContourEntites does contains entities just display infos so WHY getActiveEntities() it CAN'T work
+          // let activeEntites = this.getActiveEntites(allEntiteRefConcernementContourEntites);
+          // console.log('activeEntites', activeEntites);
+          
           // general contour arround proximité
           // console.log('allEntiteRefConcernementContourEntites', allEntiteRefConcernementContourEntites);
-          let genContoursEntite = this.getJarvisEnvelopeConvexeEntites(activeEntites);
+          // let genContoursEntite = this.getJarvisEnvelopeConvexeEntites(activeEntites);
+          let genContoursEntite = this.getJarvisEnvelopeConvexeEntites(allEntiteRefConcernementContourEntites);
           // console.log('genContoursEntite', genContoursEntite);
           let points = [];
           genContoursEntite.forEach(ent => {
@@ -2624,21 +2629,29 @@ export default {
           if (group_to_hit) {
             let result = group_to_hit.hitTest(event.point);
             console.log('click result', result);
-            if (result) {
+            if (result && result.item.item_id && (result.item.name != "label_click_zone" || this.detailsZoomValue > 2)) {
               switch (this.map_mode) {
                 case "terraindevie":
                 case "superposition":
                 case "action":
                   // we have clicked on an entite
-                  this.$router.push({
+                  // unfocus any active element to trigger recording if needed
-                    name: 'concernement',
+                  document.activeElement.blur();
-                    params: {cid: this.cid, eid: result.item.item_id},
+                  // setInterval to let time for editable fields to focus out and record changes
-                    query: {
+                  let interval = setInterval(() => {
-                      mapitemid: this.id,
+                    if (!this.concernement_is_updating_nid) {
-                      // superposition_id: this.mapitem.superposition_ids[0]
+                      clearInterval(interval);
-                    },
+                      this.$router.push({
-                    hash: `#${this.map_mode}`,
+                        name: 'concernement',
-                  });    
+                        params: {cid: this.cid, eid: result.item.item_id},
+                        query: {
+                          mapitemid: this.id,
+                          // superposition_id: this.mapitem.superposition_ids[0]
+                        },
+                        hash: `#${this.map_mode}`,
+                      });    
+                    }
+                  }, 1)
                   break;
                 case "proximite":
                   switch (result.item.item_type) {
@@ -2669,11 +2682,20 @@ export default {
               
             } else {
               // otherwise we close the entite and come back to the concernement
-              this.$router.push({
+              // unfocus any active element to trigger recording if needed
-                name: 'concernement',
+              document.activeElement.blur();
-                hash: `#${this.map_mode}`,
+              // setInterval to let time for editable fields to focus out and record changes
-                params: {id: this.cid, mapitemid: this.id}
+              let interval = setInterval(() => {
-              });
+                if (!this.concernement_is_updating_nid) {
+                  clearInterval(interval);
+                  this.$router.push({
+                    name: 'concernement',
+                    hash: `#${this.map_mode}`,
+                    params: {id: this.cid, mapitemid: this.id}
+                  });    
+                }
+              }, 1)
+              
 
               // reset the mousehover
               this.resetHoverElmt();
@@ -2693,10 +2715,10 @@ export default {
       }.bind(this);
 
       /*
-      * works i correlation with updateDetailsZoomScale()
+      * works in correlation with updateDetailsZoomScale()
       */
       this.paper_main_object.onMouseDrag = async function(event){
-        if (this.is_open && this.map_mode === 'terraindevie' && this.concernement.can_update) {
+        if (this.is_open && this.map_mode === 'terraindevie') { //  && this.concernement.can_update
           // console.log('paper concernement onMouseDrag', event, this);
           event.stopPropagation();
           event.preventDefault();

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/Doleancer.vue

@@ -1203,13 +1203,13 @@ export default {
       
       <!-- <vue-plyr>
         <div class="plyr__video-embed"> -->
-          <iframe
+          <!-- <iframe
             v-if="!opened_concernement.opened_doleance || opened_concernement.opened_doleance.field === 'leprobleme' || opened_concernement.opened_doleance.field === 'lenquete'"
             src="https://www.youtube.com/embed/_Uogb4tJ9c4?amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
             allowfullscreen
             allowtransparency
             frameborder="0"
-          ></iframe>
+          ></iframe> -->
         <!-- </div>
       </vue-plyr> -->
     </template>

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;
@@ -513,7 +531,7 @@ export default {
 </script>
 
 <template>
-  <CartoucheLayout ref="cartouche_layout" :cid="cid" @main_scrolled="onMainScrolled">
+  <CartoucheLayout ref="cartouche_layout" :cid="cid" :eid="eid" @main_scrolled="onMainScrolled">
     <template v-slot:header>
       <div class="entite">
         <!-- TODO update entite with revisions -->
@@ -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
@@ -575,44 +594,44 @@ export default {
           </div>
         </section>
 
-        <!-- active -->
+        <section class="entite-params" v-if="entite && entite.can_update">
-        <CheckboxEditable 
+          <!-- active -->
-          v-if="entite && entite.can_update"
+          <CheckboxEditable
-          :checked="this.parag_entite.active"
+            :checked="this.parag_entite.active"
-          label="Active" 
+            label="Active" 
-          :data="{
+            :data="{
-            entitytype: 'paragraph',
+              entitytype: 'paragraph',
-            bundle: 'entite_concernement',
+              bundle: 'entite_concernement',
-            id: this.parag_entite.id,
+              id: this.parag_entite.id,
-            field: 'field_active'}"
+              field: 'field_active'}"
-            v-on:updated="reloadConcernementEntites(cid)"/>
+              v-on:updated="reloadConcernementEntites(cid)"/>
 
-        <!-- agissante -->
+          <!-- agissante -->
-        <CheckboxEditable 
+          <CheckboxEditable
-          v-if="entite && entite.can_update"
+            :checked="entite.agissante"
-          :checked="entite.agissante"
+            label="Entité action" 
-          label="Entité action" 
+            :data="{
-          :data="{
+              entitytype: 'node',
-            entitytype: 'node',
+              bundle: 'entite',
-            bundle: 'entite',
+              id: this.entite.id,
-            id: this.entite.id,
+              field: 'field_entite_agissante'}"
-            field: 'field_entite_agissante'}"
+              v-on:updated="reloadConcernementEntites(cid)"/>
-            v-on:updated="reloadConcernementEntites(cid)"/>
 
-        <SelectEditable 
+          <!-- confidentialité -->
-          v-if="entite && entite.can_update"
+          <SelectEditable
-          label="Confidentialité"
+            label="Confidentialité"
-          :value="entite.confidentialite"
+            :value="entite.confidentialite"
-          :options="{
+            :options="{
-            'confidentialite_prive': 'privé',
+              'confidentialite_prive': 'privé',
-            'confidentialite_interne': 'interne',
+              'confidentialite_interne': 'interne',
-            'confidentialite_public': 'public'}"
+              'confidentialite_public': 'public'}"
-          :data="{
+            :data="{
-            entitytype: 'node',
+              entitytype: 'node',
-            bundle: 'entite',
+              bundle: 'entite',
-            nid: this.entite.id,
+              nid: this.entite.id,
-            field: 'field_confidentialite'}"
+              field: 'field_confidentialite'}"
-            v-on:updated="reloadConcernementEntites(cid)"/>
+              v-on:updated="reloadConcernementEntites(cid)"/>
+        </section>
 
 
       </div>
@@ -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

@@ -9,13 +9,14 @@ import { mdiHeadphones } from '@mdi/js';
 import ContentEditable from '@components/editable/ContentEditable.vue';
 
 export default {
-  props: ['cid'],
+  props: ['cid','eid'],
   emits: ['main_scrolled'],
   data(){
     return {
       headphones_path: mdiHeadphones,
       mainscrolled: false,
       headerreduced: false,
+      entite: false
     }
   },
   created () {
@@ -25,18 +26,18 @@ export default {
   },
   mounted () {
     // console.log('cartouche layout mounted', this);
-    this.$refs.cartouche_main.addEventListener('scroll', (event) => {
+    // this.$refs.cartouche_main.addEventListener('scroll', (event) => {
-      // console.log('main is scrolling', event);
+    //   console.log('main is scrolling', event);
-      let $main = event.target;
+    //   let $main = event.target;
-      let scrolled = $main.scrollTop > 0;
+    //   let scrolled = $main.scrollTop > 0;
-      this.$emit('main_scrolled', scrolled);
+    //   this.$emit('main_scrolled', scrolled);
-      // TODO how to make this failsafe limit responsive ? 
+    //   // TODO how to make this failsafe limit responsive ? 
-      if(scrolled && $main.scrollHeight > 900){
+    //   if(scrolled && $main.scrollHeight > 900){
-        this.headerreduced = true;
+    //     this.headerreduced = true;
-      } else {
+    //   } else {
-        this.headerreduced = false;
+    //     this.headerreduced = false;
-      }
+    //   }
-    })
+    // })
   },
   computed: {
     ...mapState(ConcernementsStore,['concernementsByID', 'opened_concernement', 'ct_concernement']),
@@ -51,10 +52,29 @@ export default {
         }
       },
       deep: true
+    },
+    eid: {
+      handler (n, o) {
+        console.log(`TerrainDeVie watch eid o:${o}, n:${n}`);
+        if (n) {
+          this.entite = true;
+        }else{
+          this.entite = false;
+        }
+      },
+      deep: true
     }
   },
   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,
@@ -66,19 +86,21 @@ export default {
 <template>
   <header ref="cartouche_header">
     <div class="concernement-cartouche-icons">
-      <label :class="{ hidden: headerreduced }">{{ ct_concernement.title.description }}</label>
+      <label class="concernement-label">{{ ct_concernement.title.description }}</label>
-      
+      <!-- :class="{ hidden: headerreduced }" -->
       <ContentEditable 
         tag="h2"
         :value="concernement.title" 
-        :class="{ ellipsed: headerreduced }" 
+        :class="{ ellipsed: entite }" 
-        :contenteditable="concernement.can_update"
+        :contenteditable="(concernement.can_update && !entite)"
         :data="{
           entitytype: 'node',
           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(){
-      this.resetConcernementOpened();
+      // 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: {
@@ -216,7 +230,7 @@ export default {
 </script>
 
 <template>
-  <section v-if="opened_concernement" class="concernement">
+  <section v-if="opened_concernement" class="concernement" :class="{ 'entity-opened': main_cid_eid.eid }">
     <TerrainDeVie v-if="map_mode === 'terraindevie' || map_mode === 'action' || map_mode === 'superposition' || map_mode === 'proximite'" :cid="main_cid_eid.cid" :eid="main_cid_eid.eid"/>
     <PuissanceAgir v-if="map_mode === 'puissancedagir'" :cid="cid"/>
     <Doleancer v-if="map_mode === 'doleancer'" :cid="cid"/>