From 9aecfc62e9bd6e170ba576fbc774d76a7b4db0ba Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Tue, 9 Apr 2024 15:56:23 +0200
Subject: [PATCH] BIG UPDATE: can now change the entites position in front

---
 package-lock.json                        |   4 +-
 package.json                             |   1 +
 src/App.vue                              |  18 +-
 src/components/ConcernementMapItem.vue   | 257 +++++++++++++++++++----
 src/components/ConcernementMapPopup.vue  |   4 +-
 src/components/MapConcernements.vue      |  10 +-
 src/components/contents/TerrainDeVie.vue |   7 +-
 src/stores/concernements.js              | 127 ++++++++---
 8 files changed, 336 insertions(+), 92 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 41be712..906d9d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@tweenjs/tween.js": "^21.0.0",
         "fabric": "^6.0.0-beta7",
         "granim": "^2.0.0",
+        "lodash": "^4.17.21",
         "matter-attractors": "^0.1.6",
         "matter-js": "^0.19.0",
         "medium-editor-x": "^0.0.5",
@@ -2726,8 +2727,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
diff --git a/package.json b/package.json
index e6b3587..8524312 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@tweenjs/tween.js": "^21.0.0",
     "fabric": "^6.0.0-beta7",
     "granim": "^2.0.0",
+    "lodash": "^4.17.21",
     "matter-attractors": "^0.1.6",
     "matter-js": "^0.19.0",
     "medium-editor-x": "^0.0.5",
diff --git a/src/App.vue b/src/App.vue
index 6091307..effb6c9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -55,7 +55,14 @@ export default {
         this.parseMapitems();
       },
       deep: true
-    }
+    },
+    // concernementsByID:{
+    //   handler (n, o) {
+    //     console.log('App watch concernementsByID o, n', o, n);
+    //     this.parseMapitems();
+    //   },
+    //   deep: true
+    // }
   },
   methods: {
     ...mapActions(ConcernementsStore,['loadConcernements']),
@@ -71,7 +78,9 @@ export default {
         // create the main mapitem object
         let mapitem = {
           id: concernement.id,
-          concernement: concernement,
+          cid: concernement.id,
+          visible: concernement.visible,
+          // concernement: concernement,
           // superposition_ids: [],
           superposition_cluster_index: -1,
           clone: false,
@@ -95,7 +104,8 @@ export default {
             }else{
               let mapitem_superposition = {
                 id: `${concernement.id}___${cluster_index}`,
-                concernement: concernement,
+                cid: concernement.id,
+                // concernement: concernement,
                 superposition_cluster_index: cluster_index,
                 clone: true
               };
@@ -145,7 +155,7 @@ export default {
         <template v-for="(mapitem,index) in mapitems">
           <!--  && ((map_mode === 'superposition' && mapitem.clone) || !mapitem.clone) -->
           <ConcernementMapItem
-            v-if="mapitem.concernement.visible"
+            v-if="mapitem.visible"
             :key="mapitem.id"
             :mapitem="mapitem"
           />
diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue
index 934e895..a6834f8 100644
--- a/src/components/ConcernementMapItem.vue
+++ b/src/components/ConcernementMapItem.vue
@@ -1,5 +1,6 @@
 <script>
 
+import REST from '@api/rest-axios'
 
 import { nextTick } from 'vue'
 
@@ -8,6 +9,7 @@ import MatterAttractors from "matter-attractors";
 // Matter.use(MatterAttractors);
 // import polydecomp from "poly-decomp";
 
+
 import paper from 'paper';
 
 // import { easeInOutQuad, easeInOutQuart } from 'easing-utils';
@@ -16,7 +18,9 @@ import Tween from "@tweenjs/tween.js";
 import { mapState, mapActions } from 'pinia'
 import { ConcernementsStore } from '@/stores/concernements'
 import { CommonStore } from '@/stores/common'
-import { mdiPictureInPictureBottomRight } from '@mdi/js';
+import { UserStore } from '@stores/user'
+
+// import { mdiPictureInPictureBottomRight } from '@mdi/js';
 
 export default {
   inject: ['canvasMap', 'matterEngine'],
@@ -41,6 +45,9 @@ export default {
       scale: 1,
       prev_scale: 1,
       //
+      entite_mouse_downed: null, // for entite dragging (admin front)
+      wait: false,
+      //
       details_zoom_scale: 1,
       is_dragging: false,
       //
@@ -76,12 +83,15 @@ export default {
                                     'opened_entite_id',
                                     'concernement_active_revision',
                                     'detailsZoomValue',
+                                    'reloadConcernements',
+                                    'reloadConcernementEntites',
                                     'concernements_loading_nb']),
     ...mapState(CommonStore,['hover_elmt',
                             'map_item_ray',
                             'cartouch_width',
                             'cartouch_is_opened',
-                            'paper_symbol_definitions'])
+                            'paper_symbol_definitions']),
+    ...mapState(UserStore,['csrf_token']),
   },
   created () {
     console.log('ConcernementMapItem created', this.mapitem);
@@ -319,16 +329,37 @@ export default {
     //   },
     //   deep: true
     // },
-    mapitem: {
+    'mapitem.concernements_loading_nb': {
       handler (n, o) {
-        console.log(`ConcernementMapItem ${this.id} watch mapitem o, n`, o, n);
-        if (n.concernements_loading_nb !== o.concernements_loading_nb) {
+        console.log(`ConcernementMapItem ${this.id} watch mapitem.concernements_loading_nb o, n`, o, n);
+        // if (n.concernements_loading_nb !== o.concernements_loading_nb) {
           // this.resetPaperEntitesAndContours();
           // this.concernement = this.mapitem.concernement;
           this.resetConcernement();
+        // }
+      },
+      deep: true
+    },
+    'concernement.entites': {
+      handler (n, o) {
+        console.log(`ConcernementMapItem ${this.id} watch concernement.entites o, n`, o, n);
+        // do not trigger on first fill of the property (if o is null)
+        if (o) {
+          this.resetPaperEntitesAndContours();
         }
       },
       deep: true
+    },
+    wait: {
+      handler (n, o){
+        // when we are reloading entites par exemple
+        // also handled by onMouseMove
+        if (n) {
+          document.body.style.cursor = "wait";
+        } else {
+          document.body.style.cursor = "auto";
+        }
+      }
     }
   },
   methods: {
@@ -343,8 +374,9 @@ export default {
                                       'setDetailsZoomValue',
                                     ]),
     resetConcernement(){
+      console.log(`resetConcernement() ${this.mapitem.id}`);
       this.id = this.mapitem.id;
-      this.concernement = this.mapitem.concernement;
+      this.concernement = this.concernementsByID[this.mapitem.cid];// this.mapitem.concernement;
       this.cid = this.concernement.id;
       // console.log('mapitem this.cid', this.cid);
       this.active_revision = this.concernement.active_revision;
@@ -354,6 +386,7 @@ export default {
       this.entites = this.concernement.revisions_byid[this.concernement.revision_id].entites;
     },
     parseEntityPointsValues (){
+      console.log(`parseEntityPointsValues`);
       // converts data (menace/maintien, actuel/future, prise) into atcual position x,y
       for (let r = 0; r < this.concernement.revisions.length; r++) { // loop through all revisions
         for (let i = 0; i < this.concernement.revisions[r].entites.length; i++) { // loop through all entite for each revision
@@ -372,9 +405,6 @@ export default {
           let init_max = 100
           let slope = this.ray / init_max
           entite.display.ray = slope * (init_max - entite.prise);
-          // if (this.concernement.id === 28) {
-          //   console.log(`entity prise: ${entite.prise} | ray: ${entite.display.ray}`);
-          // }
           
 
           // ANGLE
@@ -807,6 +837,7 @@ export default {
         case 'terraindevie':
           this.addNewPaperSymbolInstance('boussole_bg', true);
           this.paper_main_object.addChild(this.setPaperEntites());
+          // this.setPaperEntitesEvents();
           break;
         case 'superposition':
           this.addNewPaperSymbolInstance('boussole_bg', true);
@@ -834,6 +865,11 @@ export default {
       if (!this.isResetingPaperEntites) {
         console.log(`ResetingPaperEntites ${this.id}`);
         this.isResetingPaperEntites = true;
+
+        this.active_revision = this.concernement.active_revision;
+        console.log(`this.active_revision ${this.active_revision}`);
+        console.log(`entite len : ${this.concernement.revisions_byid[this.active_revision].entites.length}`);
+
         this.parseEntityPointsValues()
   
         this.sailentEntites = this.getJarvisEnvelopeConvexeEntites(this.concernement.revisions_byid[this.active_revision].entites);
@@ -962,7 +998,7 @@ export default {
       let paper_segments = [];
       segments.forEach(seg => {
         paper_segments.push(new paper.Segment({
-          point: [this.pos.x+seg.point[0]*this.scale, this.pos.y+seg.point[1]*this.scale],
+          point: [this.pos.x+seg.point[0]*this.details_zoom_scale, this.pos.y+seg.point[1]*this.details_zoom_scale],
           handleIn: seg.handleIn,
           handleout: seg.handleOut
         }))
@@ -973,10 +1009,11 @@ export default {
         segments: paper_segments,
         fillColor: 'rgba(255,255,255,0.4)',
         // selected: true,
-        strokeColor: this.mapitem.clone ? '#f00' : '#fff',
+        strokeColor: '#fff',
         strokeWidth: 1,
         pivot: new paper.Point(this.pos),
-        cid: this.cid
+        // scale: this.details_zoom_scale,
+        cid: this.cid,
       });
       // return the paper path
       return contrs;
@@ -1018,7 +1055,7 @@ export default {
 
         let instance = new paper.SymbolItem(this.paper_symbol_definitions[symbol_name]);
         instance.name = 'entite';
-        let pos_point = new paper.Point([this.pos.x + entite.display.pos.x * this.scale, this.pos.y + entite.display.pos.y * this.scale]);
+        let pos_point = new paper.Point([this.pos.x + entite.display.pos.x * this.details_zoom_scale, this.pos.y + entite.display.pos.y  * this.details_zoom_scale]);
         instance.position = pos_point;
         instance.scale(this.scale);
         instance.fillColor = '#000';
@@ -1075,6 +1112,8 @@ export default {
           label_click_zone.insertAbove(label_txt);
           // label.sendToBack();
           g_label.addChild(label);
+
+          instance.label_item = label;
         }
       }
       return g;
@@ -1797,20 +1836,31 @@ export default {
     },
     handlePaperVisibilityOnAfterEnginUpdate(){
       // contours focused
+      let fc, sc, sw;
       if (!this.isFocused()){
-        this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.1)"; // this.mapitem.clone ? "rgba(255,0,0,0.1)" : "rgba(255,255,255,0.1)"; // 
+        fc = "rgba(255,255,255,0.1)";
       }else{
-        this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.4)"; // this.mapitem.clone ? "rgba(255,0,0,0.4)" : "rgba(255,255,255,0.4)"; // 
-        if (this.is_hover) {
-          this.paper_main_object.children['contours'].strokeColor = "#01ffe2";
-          this.paper_main_object.children['contours'].strokeWidth = 2;
-
-
-        }else{
-          this.paper_main_object.children['contours'].strokeColor = "#fff";
-          this.paper_main_object.children['contours'].strokeWidth = 1;
+        fc = "rgba(255,255,255,0.4)";
+        if (this.concernement.can_update) {
+          sc = "#01ffe2";
+          if (this.is_hover) {
+            sw = 2;
+          }else{
+            sw = 1;
+          }
+        } else {
+          if (this.is_hover) {
+            sc = "#01ffe2";
+            sw = 2;
+          }else{
+            sc = "#fff";
+            sw = 1;
+          }
         }
       }
+      this.paper_main_object.children['contours'].fillColor = fc
+      this.paper_main_object.children['contours'].strokeColor = sc;
+      this.paper_main_object.children['contours'].strokeWidth = sw;
 
       // contours visibility
       if (!this.is_open 
@@ -2037,12 +2087,19 @@ export default {
     initPaperEvents(){
 
       this.paper_main_object.onMouseLeave = function(event){
-        if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened
-          this.resetHoverElmt();
-          document.body.style.cursor = "auto";
-        }
-        if (this.is_open) {
-          document.body.style.cursor = "auto";
+        if (this.wait) {
+          // when we are reloading entites par exemple
+            // also handled by watch and onMouseMove for more reactivity
+            document.body.style.cursor = "wait";
+        } else {
+          if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened
+            this.resetHoverElmt();
+            document.body.style.cursor = "auto";
+          }
+          if (this.is_open) {
+            document.body.style.cursor = "auto";
+          }
+          
         }
       }.bind(this);
 
@@ -2131,8 +2188,13 @@ export default {
 
           let result = paper_group_tohit ? paper_group_tohit.hitTest(event.point) : null;
           // console.log('move result', result);
-          if (result && result.item.item_id && (result.item.name != "label_click_zone" || this.detailsZoomValue > 2)) {
-            console.log('move has result', result);
+
+          if (this.wait) {
+            // when we are reloading entites par exemple
+            // also handled by watch for more reactivity
+            document.body.style.cursor = "wait";
+          } else if (result && result.item.item_id && (result.item.name != "label_click_zone" || this.detailsZoomValue > 2)) {
+            // console.log('move has result', result);
             let new_hover_elmt = {
               paper_id: result.item.id,
               type: result.item.item_type,
@@ -2322,28 +2384,136 @@ export default {
         }
       }.bind(this);
 
+      this.paper_main_object.onMouseDown = function(event){
+        console.log('onMouseDown', event);
+        if (this.is_open && this.map_mode === 'terraindevie' && this.concernement.can_update) {
+          let group_to_hit = this.paper_main_object.children['entites'];
+          let result = group_to_hit.hitTest(event.point);
+          console.log('drag result', result);
+          this.entite_mouse_downed = result;
+        }
+      }.bind(this);
+
       /*
       * works i correlation with updateDetailsZoomScale()
       */
       this.paper_main_object.onMouseDrag = async function(event){
-        if (this.is_open && this.map_mode === 'terraindevie') {
+        if (this.is_open && this.map_mode === 'terraindevie' && this.concernement.can_update) {
+          // console.log('paper concernement onMouseDrag', event, this);
           event.stopPropagation();
           event.preventDefault();
           
-          console.log('paper concernement onMouseDrag', event.delta);
-          if (this.detailsZoomValue > 1) {
-            let x = this.pos.x + event.delta.x;
-            let y = this.pos.y + event.delta.y;
-
-            this.pos = this.paper_main_object.position = this.constraint.pointA = {x: x, y: y};
-            Matter.Body.setPosition(this.body, this.pos);
+          
+          if (this.entite_mouse_downed) {
+            // console.log('paper concernement onMouseDrag entite', this.entite_mouse_downed);
+            this.entite_mouse_downed.item.position.x += event.delta.x;
+            this.entite_mouse_downed.item.position.y += event.delta.y;
             
-            this.is_dragging = true;
+            // Hide popup
+            this.resetHoverElmt();
+
+            // move the label
+            let pad = 2;
+            this.entite_mouse_downed.item.label_item.position.x = this.entite_mouse_downed.item.position.x + pad;
+            this.entite_mouse_downed.item.label_item.position.y = this.entite_mouse_downed.item.position.y - pad*2;
+
+            // indicate that the entity is been dragged (for onMouseUp)
+            this.entite_mouse_downed.dragged = true;
+          } else {
+            // console.log('paper concernement onMouseDrag general', event.delta);
+            if (this.detailsZoomValue > 1) {
+              let x = this.pos.x + event.delta.x;
+              let y = this.pos.y + event.delta.y;
+  
+              this.pos = this.paper_main_object.position = this.constraint.pointA = {x: x, y: y};
+              Matter.Body.setPosition(this.body, this.pos);
+              
+              this.is_dragging = true;
+            }
+            event.stop();
+            return false;
           }
-          event.stop();
-          return false;
+
         }
       }.bind(this);
+      
+      this.paper_main_object.onMouseUp = function(event){
+        console.log('onMouseUp', event);
+        if (this.is_open && this.map_mode === 'terraindevie' && this.entite_mouse_downed) {
+          if (this.entite_mouse_downed.dragged) {
+            // console.log('onMouseUp entite_mouse_downed', this.entite_mouse_downed);
+            
+            this.wait = true;
+
+            let pos = {
+              x:this.entite_mouse_downed.item.position.x - this.pos.x,
+              y:this.entite_mouse_downed.item.position.y - this.pos.y
+            };
+          
+            // compute value for api
+            let {af, mm, p} = this.computeNewEntitePos(pos);
+            // record value
+            let pid = this.concernement.entites_byid[this.entite_mouse_downed.item.item_id].id;
+            this.recordNewEntitePos(pid, af, mm, p)
+              .then((parag) => {
+                // then reload value
+                // redrawing entites is handle by watch concernement.entites
+                this.reloadConcernementEntites(this.concernement.id)
+                  .then(() => {
+                    this.wait = false;
+                  });
+              })
+          }
+          this.entite_mouse_downed = null;
+        }
+      }.bind(this);
+      
+    },
+    computeNewEntitePos(pos){
+      // actuel future
+      let af = pos.y >= 0 ? 0 : 1;
+      
+      // menace / maintien (angle)
+      let mm = parseFloat(Math.atan(pos.x/Math.abs(pos.y)) * (180/Math.PI)).toFixed(2);
+      
+      // Prise (rayon)
+      let r = Math.sqrt(Math.pow(pos.x,2)+Math.pow(pos.y,2));
+      // https://stackoverflow.com/questions/5731863/mapping-a-numeric-range-onto-another
+      // from range 0 -> rayon_de_la_boussole moins 8% de padding |to| range 0 -> 100
+      let ext_circle_factor = 1;//0.915; // this factor is also used in MapConcernement
+      let r_max = this.ray * ext_circle_factor * this.details_zoom_scale; 
+      let r_slope = (100 - 0) / (r_max - 0);
+      let p = Math.max(0, 100 - parseFloat(0 + r_slope * (r - 0)).toFixed(2));
+      // console.log(`onMouseUp af: ${af}, mm: ${mm}, p: ${p}`);
+
+      return {af, mm, p};
+    },
+    recordNewEntitePos(pid, af, mm, p){
+      return new Promise((resolve, reject) => {
+        // record new values of entite parag (prise, actuel/future, menace/maintien)
+        const params = {
+          id: [{'value': pid}],
+          type: 'entite_concernement',
+          'field_actuel_future': [{'value': af}],
+          'field_menace_maintien_degres': [{'value': mm}],
+          'field_prise': [{'value': p}]
+        };
+        
+        const configs = {
+          headers: {'X-CSRF-Token': this.csrf_token}
+        };
+
+        // call the api
+        REST.patch(`/entity/paragraph/${pid}?_format=json`, params, configs)
+          .then(({ data }) => {
+            console.log('concernementMapItem REST patch parag entite', data)
+            resolve(data);
+          })
+          .catch(error => {
+            console.warn(`Issue with patch ${this.data.entitytype} ${this.data.bundle}`, error)
+            Promise.reject(error)
+          })
+      });
     },
     resetHoverElmt(){
       // console.log('resetHoverElmt');
@@ -2437,6 +2607,8 @@ export default {
           Matter.Events.off(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
           Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
       } else {
+        this.setDetailsZoomValue(1);
+        this.updateDetailsZoomScale();
         // CLOSING
         this.is_closing = true;
 
@@ -2447,6 +2619,7 @@ export default {
         // this.active_revision = this.concernement.revision_id;
         // this.setActiveRevision(this.cid, this.concernement.revision_id);//this.concernement.revisions[this.concernement.revisions.length -1].revision_id);
         // this.resetPaperEntitesAndContours();
+        
 
         this.handlePaperVisibilityOnBeforeClose();
 
diff --git a/src/components/ConcernementMapPopup.vue b/src/components/ConcernementMapPopup.vue
index c21bc80..6836866 100644
--- a/src/components/ConcernementMapPopup.vue
+++ b/src/components/ConcernementMapPopup.vue
@@ -25,7 +25,7 @@ export default {
     }
   },
   created () {
-    console.log(`popup created type: ${this.infos.type}`, this.infos);
+    // console.log(`popup created type: ${this.infos.type}`, this.infos);
     this.parseInfos()
   },
   mounted () {
@@ -52,7 +52,7 @@ export default {
   },
   methods: {
     parseInfos(){
-      console.log('mapPopup infos', this.infos);
+      // console.log('mapPopup infos', this.infos);
       switch (this.infos.type) {
         case 'concernement':
           this.concernement = this.concernementsByID[this.infos.cid];  
diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue
index abcf62a..6e0beea 100644
--- a/src/components/MapConcernements.vue
+++ b/src/components/MapConcernements.vue
@@ -156,7 +156,7 @@ export default {
         // over highlight effect on paper items
         if (n && n.paper_id) {
           let nitem = paper.project.getItem({id: n.paper_id});
-          console.log('watch hover_element nitem', nitem.definition);
+          // console.log('watch hover_element nitem', nitem.definition);
           if (!nitem.is_symbol_instance) { // not symbol instance
             nitem.bringToFront();
             if (nitem.strokeColor) {
@@ -168,7 +168,7 @@ export default {
             }
             
           } else { // is a symbol instanceof, then swap
-            console.log(`symbol instance n.type:${n.type}, nitem`, nitem);
+            // console.log(`symbol instance n.type:${n.type}, nitem`, nitem);
             switch (n.type) {
               case 'entite':
                 nitem.definition = this.paper_symbol_definitions.entite_hover;
@@ -189,7 +189,7 @@ export default {
         if (o && o.paper_id && (!n || o.paper_id !== n.paper_id)) {
           let oitem = paper.project.getItem({id: o.paper_id})
           if (oitem) {
-            console.log('watch hover_element oitem', oitem);
+            // console.log('watch hover_element oitem', oitem);
             if (!oitem.is_symbol_instance) { // not symbol instance
               if (oitem.data.prevStrokeColor) {
                 oitem.strokeColor = oitem.data.prevStrokeColor;
@@ -197,7 +197,7 @@ export default {
                 oitem.fillColor = oitem.data.prevFillColor;
               }            
             } else { // is a symbol instanceof, then swap
-              console.log(`symbol instance o.type:${o.type}, oitem`, oitem);
+              // console.log(`symbol instance o.type:${o.type}, oitem`, oitem);
               switch (o.type) {
                 case 'entite':
                   // console.log('this.opened_entite_id', parseInt(this.opened_entite_id), 'oitem.item_id', oitem.item_id);
@@ -448,7 +448,7 @@ export default {
       // }
 
       // cercle exterieur
-      let ext_circle_factor = 0.915;
+      let ext_circle_factor = 0.915; // be eware that concernement map item also use this factor
       children.push(new paper.Path.Circle({
         center: [pos.x, pos.y],
         radius: ray*ext_circle_factor,
diff --git a/src/components/contents/TerrainDeVie.vue b/src/components/contents/TerrainDeVie.vue
index 3f3a81f..63593c1 100644
--- a/src/components/contents/TerrainDeVie.vue
+++ b/src/components/contents/TerrainDeVie.vue
@@ -246,11 +246,14 @@ export default {
                 .then((concernement) => {
                   console.log('concernement', concernement);
                   // TODO reload the map item
-                  // this.reloadConcernementEntites(concernement.nid[0].value);
-                  this.reloadConcernements()
+                  this.reloadConcernementEntites(concernement.nid[0].value)
                     .then(() => {
                       this.reloading_concernements = false;
                     });
+                  // this.reloadConcernements()
+                  //   .then(() => {
+                  //     this.reloading_concernements = false;
+                  //   });
                 })
             })
         })
diff --git a/src/stores/concernements.js b/src/stores/concernements.js
index 1ccbea0..e00ec71 100644
--- a/src/stores/concernements.js
+++ b/src/stores/concernements.js
@@ -13,6 +13,8 @@ import GQL from '@api/graphql-axios'
 import ConcernementFields from '@api/gql/concernement.fragment.gql'
 // import EntityFields from '@api/gql/entitydef.fragment.gql'
 
+import _assign from 'lodash/assign';
+
 export const ConcernementsStore = defineStore({
   id: 'concernements',
   state: () => ({
@@ -307,41 +309,96 @@ export const ConcernementsStore = defineStore({
       })
     },
     reloadConcernementEntites(nid){
-      // console.log('reloadConcernementEntites nid', nid);
-      // const ast = gql`{
-      //   concernement(id:${nid}) {
-      //     entites {
-      //       id
-      //       revision_id
-      //       menacemaintien
-      //       actuelfuture
-      //       entite {
-      //         title
-      //         id
-      //         agissante
-      //         proximite {
-      //           id
-      //           title
-      //         }
-      //         superposition {
-      //           id
-      //           title
-      //         }
-      //       }
-      //     }
-      //   }
-      // }
-      // `
-      // // console.log('ast', ast);
-      // GQL.post('', { query: print(ast) })
-      //   .then(({ data : { data  : { concernement } } }) => {
-      //     console.log('reloadConcernementEntites loaded', concernement)
-      //     // this.concernementsByID[concernement.id].entites = concernement.entites;
-      //   })
-      //   .catch(error => {
-      //     console.warn('Issue with reloadConcernementEntites', error)
-      //     Promise.reject(error)
-      //   })
+      let tmp_conc = this.concernementsByID[nid];
+      console.log(`reloadConcernementEntites len: ${tmp_conc.entites.length} revision: ${tmp_conc.revision_id} nid: ${nid}`);
+      return new Promise((resolve, reject) => {
+        const ast = gql`{
+          concernement(id:${nid}) {
+            id
+            entites {
+              id
+              revision_id
+              menacemaintien
+              actuelfuture
+              entite {
+                title
+                id
+                agissante
+                proximite {
+                  id
+                  title
+                }
+                superposition {
+                  id
+                  title
+                }
+              }
+            }
+            revision_id
+            revisions {
+              revision_id
+              changed
+              entites {
+                menacemaintien
+                prise
+                actuelfuture
+                entite {
+                  id
+                  title
+                  agissante
+                  proximite {
+                    id
+                    title
+                  }
+                  superposition {
+                    id
+                    title
+                  }
+                }
+              }
+            }
+          }
+        }
+        `
+        // console.log('ast', ast);
+        GQL.post('', { query: print(ast) })
+          .then(({ data : { data  : { concernement } } }) => {
+            console.log(`reloadConcernementEntites loaded len: ${concernement.entites.length} revision: ${concernement.revision_id}`, concernement)
+            let tmp_conc = this.concernementsByID[concernement.id];
+            // merge old concernement entites with new once
+            _assign(tmp_conc.entites, concernement.entites);
+            // records and/or merge into general object and on cpnernement entitites_byid
+            tmp_conc.entites.forEach(entite => {
+              entite.cid = tmp_conc.id;
+              if (this.allEntitesById[entite.entite.id]) {
+                _assign(this.allEntitesById[entite.entite.id], entite);
+              }else{
+                this.allEntitesById[entite.entite.id] = entite;
+              }
+              if (tmp_conc.entites_byid[entite.entite.id]) {
+                _assign(tmp_conc.entites_byid[entite.entite.id], entite);
+              }else{
+                tmp_conc.entites_byid[entite.entite.id] = entite;
+              }
+            });
+            // add and/or merge revisions
+            tmp_conc.active_revision = concernement.revision_id;
+            concernement.revisions.forEach(rev => {
+              if(tmp_conc.revisions_byid[rev.revision_id]){
+                _assign(tmp_conc.revisions_byid[rev.revision_id], rev);
+              }else{
+                tmp_conc.revisions_byid[rev.revision_id] = rev;
+                tmp_conc.revisions.push(rev);
+              }
+            })
+            resolve(concernement);
+          })
+          .catch(error => {
+            console.warn('Issue with reloadConcernementEntites', error)
+            reject(error);
+            Promise.reject(error)
+          })
+      })
     },
     loadContentTypeDefinition () {
       const body = {