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();

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

@@ -531,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 -->
@@ -594,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>

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,6 +52,17 @@ 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: {
@@ -74,13 +86,13 @@ 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',

src/views/Concernement.vue

@@ -230,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"/>