partially debuged proximites

.gitignore

@@ -14,6 +14,8 @@ dist-ssr
 coverage
 *.local
 
+.env
+
 /cypress/videos/
 /cypress/screenshots/
 

package.json

@@ -13,8 +13,13 @@
     "@material-design-icons/svg": "^0.14.2",
     "@mdi/font": "^7.1.96",
     "@mdi/js": "^7.2.96",
+    "@sentry/browser": "^9.7.0",
+    "@sentry/integrations": "^7.114.0",
+    "@sentry/vue": "^9.7.0",
     "@tweenjs/tween.js": "^21.0.0",
     "@vojtechlanka/vue-simple-suggest": "^2.0.6",
+    "@vuepic/vue-datepicker": "^11.0.1",
+    "dotenv": "^16.4.7",
     "fabric": "^6.0.0-beta7",
     "granim": "^2.0.0",
     "lodash": "^4.17.21",
@@ -34,6 +39,7 @@
   "devDependencies": {
     "@rollup/plugin-graphql": "^2.0.0",
     "@rushstack/eslint-patch": "^1.1.4",
+    "@sentry/vite-plugin": "^3.2.2",
     "@types/medium-editor": "^5.0.8",
     "@vitejs/plugin-vue": "^4.4.0",
     "@vue/eslint-config-prettier": "^8.0.0",

src/App.vue

@@ -21,8 +21,11 @@ export default {
     }
   },
   created () {
-    this.loadContentTypeDefinition();
+    this.loadContentTypeDefinition()
     this.loadConcernements()
+    // setTimeout(()=>{
+    //   throw new Error("sentry test error");
+    // })
   },
   mounted () {
     console.log('APP onMounted')

src/api/gql/concernement.fragment.gql

@@ -103,6 +103,8 @@ fragment ConcernementFields on Concernement {
     leprobleme
     lenquete
     groupesinterets {
+      id
+      revision_id
       date {
         end
         start
@@ -115,10 +117,12 @@ fragment ConcernementFields on Concernement {
     date_adresse {
       start
     }
-    entite_addresse_doleance
-    comment_ennonce_doleance
-    aqui_addresse_doleance
+    entite_adresse_doleance
+    comment_enonce_doleance
+    a_qui_adresse_doleance
     reception_traitement {
+      id
+      revision_id
       date {
         end
         start
@@ -133,8 +137,10 @@ fragment ConcernementFields on Concernement {
       start
     }
     entites_decisionnaires
-    decision_formule
+    decision_formulee
     mise_en_oeuvre_decision {
+      id
+      revision_id
       date {
         end
         start
@@ -151,6 +157,8 @@ fragment ConcernementFields on Concernement {
     aqui_adresse_decision
     comment_formule_decision
     receptions_et_applications {
+      id
+      revision_id
       date {
         end
         start

src/api/graphql-axios.js

@@ -21,8 +21,8 @@ MGQ.interceptors.response.use(
     return Promise.resolve(response)
   },
   error => {
-    const { status } = error.response
-    console.warn('error in graphql-axios', status)
+    // const { status } = error.response
+    // console.warn('error in graphql-axios', status)
     // if (status === 403) {
     //   window.location = '/'
     // }

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;
-          //   font-weight: 100;
-          //   font-size: 0.882em;
-          //   padding: 1em 0;
-          // }
+          
+          section.entite-params{
+            padding:0.5em 0;
+            display: flex;
+            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{
-            max-height: 0;
-            padding-bottom: 0;
+          // &.hidden{
+          //   max-height: 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;
@@ -607,55 +625,23 @@ div.loading{
               margin: 0 0 0.5em 0;
             }
           }
+          >section{
+            margin:1em 0 0;
+          }
           label{
-            margin:0;
+            margin:1em 0 0;
             padding:0 0 0.5em 0;
           }
-          p{
+          p:not(.editable):not(.html-editable){
             margin:0;
             padding:0 0 0.5em 0;
           }
           ul{
             // padding:0 0 0 1em;
           }
-          
-          // .v-select{
-          //   input.vs__search{
-          //     display: none;
-          //   }
-          //   div.vs__dropdown-toggle{
-          //     border-radius: 0;
-          //     border: none;
-          //   }
-          //   div.vs__selected-options{
-          //     padding: 0;
-          //     span.vs__selected{
-          //       padding: 0;
-          //       margin: 0;
-          //       font-weight: 400;
-          //       font-size: 1.323em;
-          //       color:inherit;
-          //       line-height: 1.15;
-          //     }
-          //   }
-          //   ul.vs__dropdown-menu{
-          //     border-radius: 0;
-          //     border: none;
-          //     li.vs__dropdown-option{
-          //       white-space:normal;
-          //       padding:1em 1em 0 1em;
-          //       &:last-of-type{
-          //         padding:1em;
-          //       }
-          //       color: #aaa;
-          //       transition: color 0.2s ease-in-out;
-          //       &.vs__dropdown-option--highlight{
-          //         color:#000;
-          //         background-color: #fff;
-          //       }
-          //     }
-          //   }
-          // }
+          .leprobleme-date{
+            margin: 0.5em 0;
+          }
         }
 
       }
@@ -721,7 +707,7 @@ div.loading{
         font-weight: 400;
         font-size: 1.1em;
       }
-      section>div, p{
+      section>div:not(.btn), p{
         // font-size: 1em;
         // font-weight: 300;
         // line-height: 1.40;
@@ -731,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;
@@ -1090,7 +1076,8 @@ div.loading{
   }
 }
 
-*[contenteditable="true"] {
+*[contenteditable="true"],
+div.dp__main{
   background: #eee;
   border: #eee 2px solid;
   border-radius: 5px;
@@ -1099,6 +1086,8 @@ div.loading{
   margin:0 0 0 -$p;
   box-sizing: border-box;
   transition: all 0.2s ease-in-out;
+  box-shadow: 2px 2px 4px #bbb;
+  width: calc(100% - 4px);
   &:focus{
     outline: none;
     border: #01ffe2 2px solid;
@@ -1328,4 +1317,21 @@ div.add-besoin-btn{
 
 div.add-ressource-btn{
   @include add-btn();
+}
+
+div.add-cerclepo-btn,
+div.add-groupinteret-btn,
+div.add-adressedoleance-btn,
+div.add-receptiontraitement-btn,
+div.add-decision-btn,
+div.add-miseenoeuvre-btn,
+div.add-adressedecision-btn,
+div.add-receptionapplicationdecision-btn{
+  @include add-btn();
+  margin: 0 0 1em;
+  height: 60px;
+  line-height: 50px;
+  >svg{
+    width:30px; height:30px;
+  }
 }

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',
@@ -377,6 +378,32 @@ export default {
       },
       deep: true
     },
+    'concernement.doleances': {
+      handler (n, o) {
+        console.log(`${this.id} watch concernement.doleances o, n`, o, n);
+        if (this.is_open && this.map_mode === "doleancer") {
+          this.setPaperDoleances(true); // true for update=true
+          this.focusOpenedDoleanceStep();
+        }
+      },
+      deep: true
+    },
+    'concernement.doleances.length': {
+      handler (n, o){
+        console.log(`${this.id} watch concernement.doleances.length o, n`, o, n);
+        if (this.is_open && this.map_mode === "doleancer" && o != null && n !== o) {
+          this.resetPaperContents();
+        }
+      },
+      deep: true
+    },
+    'concernement.opened_doleance': {
+      handler (n, o) {
+        console.log(`${this.id} watch concernement.opened_doleance o, n`, o, n);
+        this.focusOpenedDoleanceStep();
+      },
+      deep: true
+    },
     wait: {
       handler (n, o){
         // when we are reloading entites par exemple
@@ -915,9 +942,12 @@ export default {
             this.paper_main_object.addChild(this.setPaperAgissantes());
             break;
           case 'doleancer':
-            this.addNewPaperSymbolInstance('doleance_bg');
-            this.paper_main_object.addChild(this.setPaperDoleances());
+            if (this.concernement.doleances.length) {
+              this.addNewPaperSymbolInstance('doleance_bg');
+              this.paper_main_object.addChild(this.setPaperDoleances());
+            }
             break;
+            
         }
         this.paperContentsIsSet = true;  
       }
@@ -1118,6 +1148,8 @@ export default {
         opacity: 0
       });
       g.addChild(g_label);
+      // when we are re-setting the entitie (e.g. arfter one entity moved) also check the detail zoom and apply correct dim
+      g_label.opacity = -2 + this.detailsZoomValue;
       g_label.sendToBack();
       // for (let i = 0; i < this.entites.length; i++) {
       for (let i = 0; i < this.concernement.revisions_byid[this.active_revision].entites.length; i++) {
@@ -1207,6 +1239,7 @@ export default {
           label.addChild(label_bg);
           label_txt.insertAbove(label_bg);
           label_click_zone.insertAbove(label_txt);
+          label.scale(this.scale);
           // label.sendToBack();
           g_label.addChild(label);
 
@@ -1432,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 => {
@@ -1659,23 +1696,60 @@ export default {
     //     }
     //   }
     // },
-    setPaperDoleances(){
-      let g = new paper.Group({
-        pivot: new paper.Point({x:0,y:0}),
-        name: `doleances`
-      });
+    setPaperDoleances(update){
+      console.log(`setPaperDoleances cid:${this.concernement.id}, update: ${update}`);
+      let g;
+      if (update) {
+        g = this.paper_main_object.children['doleances'];
+        console.log('REUSING doleances group', g);
+      } else{
+        g = new paper.Group({
+          pivot: new paper.Point({x:0,y:0}),
+          name: `doleances`
+        });
+      }
+
+      if (!g) {
+        console.warn('no doleances group created nor found')
+        return;
+      }
+      console.log('doleances main group: ', g);
+      
       this.concernement.doleances.forEach((d) => {
-        g.addChild(this.setPaperDoleanceSteps(d))
+        console.log('each doleance, d:', d);
+        
+        let doleance_group;
+        console.log('is update: ', update);
+        if (update) {
+          doleance_group = g.children[`doleance_${d.id}`];
+          console.log('doleance_group', doleance_group);
+          if (doleance_group) {
+            this.setPaperDoleanceSteps(d, doleance_group);
+          }else{
+            g.addChild(this.setPaperDoleanceSteps(d));  
+          }
+        }else{
+          g.addChild(this.setPaperDoleanceSteps(d));
+        }
       });
       return g;
     },
-    setPaperDoleanceSteps(doleance){
-      let g = new paper.Group({
-        pivot: new paper.Point({x:0,y:0}),
-        name: `doleance_${doleance.id}`,
-        doleance_id: doleance.id,
-        visible: false
-      });
+    setPaperDoleanceSteps(doleance, groupToUpdate){
+      console.log(`setPaperDoleanceSteps doleance`, doleance);
+      console.log(`setPaperDoleanceSteps groupToUpdate`, groupToUpdate);
+      
+      let g;
+      if (groupToUpdate) {
+        g = groupToUpdate;
+        g.removeChildren();
+      } else {
+        g = new paper.Group({
+          pivot: new paper.Point({x:0,y:0}),
+          name: `doleance_${doleance.id}`,
+          doleance_id: doleance.id,
+          visible: false
+        });
+      }
       // let doleance = this.concernement.doleances[0];
       let all_fields = [
         [
@@ -1691,9 +1765,9 @@ export default {
           }
         ],
         [
-          'entite_addresse_doleance',
-          'comment_ennonce_doleance',
-          'aqui_addresse_doleance',
+          'entite_adresse_doleance',
+          'comment_enonce_doleance',
+          'a_qui_adresse_doleance',
           {
             fieldname: 'reception_traitement',
             fields: [
@@ -1912,7 +1986,7 @@ export default {
       
 
       // adresse de la doleance
-      if (doleance.entite_addresse_doleance || doleance.aqui_addresse_doleance || doleance.comment_ennonce_doleance) {
+      if (doleance.entite_adresse_doleance || doleance.a_qui_adresse_doleance || doleance.comment_enonce_doleance) {
         g.addChild(new paper.Path.Circle({
           center: [this.pos.x - r, this.pos.y],
           radius: 3 * this.scale,
@@ -2151,8 +2225,9 @@ export default {
             } else if(!this.doleance_transition) {
               this.concernement.doleances.forEach((d) => {
                 this.paper_main_object.children.doleances.children[`doleance_${d.id}`].visible = d.id === this.concernement.opened_doleance.id;
-            })
+              })
             }
+
           }
         } else {
           // this.paper_main_object.children.doleance_icon.visible = false;
@@ -2180,20 +2255,62 @@ export default {
             }
           })
         }
-        let labels_group = this.paper_main_object.children['entites'].children['entites_labels'];
-        if (labels_group) {
-          labels_group.children.forEach((item) => {
-            if (this.opened_entite_id && item.item_id === parseInt(this.opened_entite_id) && item.item_type !== 'entite_hidden') {
-              item.bringToFront();
-              item.children[0].strokeColor = "#01ffe2";
-            }else{
-              // item.children[0].strokeColor = "#fff";
-            }
-          })
+        if (this.paper_main_object.children && this.paper_main_object.children['entites']) {
+          let labels_group = this.paper_main_object.children['entites'].children['entites_labels'];
+          if (labels_group) {
+            labels_group.children.forEach((item) => {
+              if (this.opened_entite_id && item.item_id === parseInt(this.opened_entite_id) && item.item_type !== 'entite_hidden') {
+                item.bringToFront();
+                item.children[0].strokeColor = "#01ffe2";
+              }else{
+                // item.children[0].strokeColor = "#fff";
+              }
+            })
+          }
         }
+          
       }
       
 
+    },
+    focusOpenedDoleanceStep(){
+      console.log('focusOpenedDoleanceStep', this.concernement.opened_doleance);
+      
+      if (this.concernement.has_doleance) {
+        if (this.map_mode === "doleancer") {
+          if (this.is_open) {
+            // focus on opened doleance step
+            if (this.concernement.opened_doleance.field) {
+              let paper_doleance = this.paper_main_object.children.doleances.children[`doleance_${this.concernement.opened_doleance.id}`];
+              // console.log('paper_doleance', paper_doleance);
+              paper_doleance.children.forEach((step) =>{
+                // console.log('step.item_type', step.item_type);
+                let active = false;
+                if (step.field ===  this.concernement.opened_doleance.field) {
+                  if(typeof this.concernement.opened_doleance.field_index != 'undefined'){
+                    // we have an index, let find if we have the right step here
+                    if (this.concernement.opened_doleance.field_index === step.field_index) {
+                      active = true;
+                    }
+                  }else{
+                    // we do not have a field index, so it is a single step, so it is active no matter the index
+                    active = true
+                  } 
+                }
+
+                if (active) {
+                  // step.data.prevStrokeColor is for hover_elmt watch in MapConcernements.vue 
+                  step.data.prevStrokeColor = step.strokeColor = "#01ffe2";
+                  step.bringToFront();
+                } else {
+                  step.data.prevStrokeColor = step.strokeColor = "#fff";
+                }
+                
+              }); 
+            }
+          }
+        }
+      }
     },
     initDoleanceTransition(from, to){
       if (!this.doleance_transition) {
@@ -2512,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({
-                    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}`,
-                  });    
+                  // unfocus any active element to trigger recording if needed
+                  document.activeElement.blur();
+                  // setInterval to let time for editable fields to focus out and record changes
+                  let interval = setInterval(() => {
+                    if (!this.concernement_is_updating_nid) {
+                      clearInterval(interval);
+                      this.$router.push({
+                        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) {
@@ -2557,11 +2682,20 @@ export default {
               
             } else {
               // otherwise we close the entite and come back to the concernement
-              this.$router.push({
-                name: 'concernement',
-                hash: `#${this.map_mode}`,
-                params: {id: this.cid, mapitemid: this.id}
-              });
+              // unfocus any active element to trigger recording if needed
+              document.activeElement.blur();
+              // setInterval to let time for editable fields to focus out and record changes
+              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();
@@ -2581,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();
@@ -2643,7 +2777,7 @@ export default {
             this.recordNewEntitePos(pid, af, mm, p)
               .then((parag) => {
                 // then reload value
-                // redrawing entites is handle by watch concernement.entites
+                // redrawing entites is handled by watch concernement.entites
                 this.reloadConcernementEntites(this.concernement.id)
                   .then(() => {
                     this.wait = false;
@@ -2916,7 +3050,9 @@ export default {
         x: (this.canvas.width - this.cartouch_width) / 2,
         y: this.canvas.height / 2
       };
-      this.constraint.pointA = this.pos;
+      if (this.constraint) {
+        this.constraint.pointA = this.pos;
+      }
       console.log('resetMapItemPosition', this.cartouch_width, this.pos);
       Matter.Body.setPosition(this.body, this.pos);
     },

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();
-        this.$router.push({
-          name: 'home',
-          hash: `#${this.map_mode}`
-        });
+        // // 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
+        // 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 () {
@@ -1614,8 +1641,9 @@ export default {
       <li>
         <a 
           title="cercle politique" href="#doleancer" @click="setMapMode('doleancer')"
-          :class="{ disabled: opened_concernement && !opened_concernement.has_doleance, active: map_mode === 'doleancer'}"
+          :class="{ active: map_mode === 'doleancer'}"
         >
+        <!-- disabled: opened_concernement && !opened_concernement.has_doleance,  -->
           <span class="icon doleancer"/> <span class="label"> cercle politique</span>
         </a>
       </li>

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;
@@ -308,7 +326,7 @@ export default {
             resolve(data)
           })
           .catch(error => {
-            console.warn(`Issue with post new paragraph source`, error)
+            console.warn(`Issue with post new node cercle_politique`, error)
             reject(error)
           })
       })
@@ -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 -->
-        <CheckboxEditable 
-          v-if="entite && entite.can_update"
-          :checked="this.parag_entite.active"
-          label="Active" 
-          :data="{
-            entitytype: 'paragraph',
-            bundle: 'entite_concernement',
-            id: this.parag_entite.id,
-            field: 'field_active'}"
-            v-on:updated="reloadConcernementEntites(cid)"/>
+        <section class="entite-params" v-if="entite && entite.can_update">
+          <!-- active -->
+          <CheckboxEditable
+            :checked="this.parag_entite.active"
+            label="Active" 
+            :data="{
+              entitytype: 'paragraph',
+              bundle: 'entite_concernement',
+              id: this.parag_entite.id,
+              field: 'field_active'}"
+              v-on:updated="reloadConcernementEntites(cid)"/>
 
-        <!-- agissante -->
-        <CheckboxEditable 
-          v-if="entite && entite.can_update"
-          :checked="entite.agissante"
-          label="Entité action" 
-          :data="{
-            entitytype: 'node',
-            bundle: 'entite',
-            id: this.entite.id,
-            field: 'field_entite_agissante'}"
-            v-on:updated="reloadConcernementEntites(cid)"/>
+          <!-- agissante -->
+          <CheckboxEditable
+            :checked="entite.agissante"
+            label="Entité action" 
+            :data="{
+              entitytype: 'node',
+              bundle: 'entite',
+              id: this.entite.id,
+              field: 'field_entite_agissante'}"
+              v-on:updated="reloadConcernementEntites(cid)"/>
 
-        <SelectEditable 
-          v-if="entite && entite.can_update"
-          label="Confidentialité"
-          :value="entite.confidentialite"
-          :options="{
-            'confidentialite_prive': 'privé',
-            'confidentialite_interne': 'interne',
-            'confidentialite_public': 'public'}"
-          :data="{
-            entitytype: 'node',
-            bundle: 'entite',
-            nid: this.entite.id,
-            field: 'field_confidentialite'}"
-            v-on:updated="reloadConcernementEntites(cid)"/>
+          <!-- confidentialité -->
+          <SelectEditable
+            label="Confidentialité"
+            :value="entite.confidentialite"
+            :options="{
+              'confidentialite_prive': 'privé',
+              'confidentialite_interne': 'interne',
+              'confidentialite_public': 'public'}"
+            :data="{
+              entitytype: 'node',
+              bundle: 'entite',
+              nid: this.entite.id,
+              field: 'field_confidentialite'}"
+              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/editable/DateEditable.vue

@@ -0,0 +1,152 @@
+<script>
+
+import REST from '@api/rest-axios'
+
+import { mapActions, mapState } from 'pinia'
+import { ConcernementsStore } from '@stores/concernements'
+import { UserStore } from '@stores/user'
+
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
+
+export default {
+  props: {
+    tag: String, 
+    value: String, 
+    end_value : {
+      type : String,
+      default : null
+    },
+    contenteditable : {
+      type : [Boolean, String],
+      default : true
+    },
+    mode : {
+      type : String,
+      default : null
+    },
+    data: Object,
+    placeholder : {
+      type : String,
+      default : 'Choisir une date'
+    }
+  },
+  emits: ['updated'],
+  data(){
+    return {
+      date: null
+    }
+  },
+  computed: {
+    ...mapState(UserStore,['csrf_token']),
+      attrs() {
+        // console.log(`this.mode: ${this.mode}`);
+        let a = {};
+        if (this.mode && this.mode === 'range') {
+         a.range = true;
+        }
+        return a;
+      }
+  },
+  created () {
+    console.log('DateEditable created');
+    this.initDateValues();
+  },
+  // updated() {
+  //   console.log('DateEditable updated');
+  //   this.initDateValues();
+  // },
+  mounted () {
+  },
+  beforeUnmount() {
+  },
+  watch: {
+    value (n, o) { 
+      console.log(`dateEditable watch value n, o`, n, o);
+      
+      if(n !== o){
+        this.initDateValues();
+      } 
+    },
+  },
+  methods: {
+    ...mapActions(ConcernementsStore, ['reloadConcernements']),
+    initDateValues(){
+      if (this.value) {
+        if (this.mode && this.mode === 'range') {
+          this.date = [this.value, this.end_value]
+        }else{
+          this.date = this.value;
+        }
+      } else {
+        this.date = null;
+      }
+    },
+    onDateSelected(modeldata){
+      console.log('onDateSelected, modeldata', modeldata);
+      this.save();
+    },
+    save(){
+      console.log('save csrf_token', this.csrf_token);
+      console.log('save this.data', this.data);
+      console.log('save this.date', this.date);
+
+      let params = {
+        type: this.data.bundle,
+      };
+
+      if (this.data.entitytype === 'node') {
+        params.nid = [{"value":this.data.id}];
+      } else {
+        params.id = [{"value":this.data.id}];
+      }
+
+      if (this.mode && this.mode === "range") {
+        params[this.data.field.field_name] = [{
+          value: this.date[0],
+          end_value: this.date[1]
+        }]
+      } else {
+        params[this.data.field.field_name] = [{
+          value: this.date
+        }]
+      }
+
+      const configs = {
+        headers: {'X-CSRF-Token': this.csrf_token}
+      };
+
+      // url is not the same between nodes and others entities
+      let url_base = `/${this.data.entitytype === 'node' ? '' : 'entity/'}${this.data.entitytype}`;
+      // call the api
+      REST.patch(`${url_base}/${this.data.id}?_format=json`, params, configs)
+        .then(({ data }) => {
+          console.log('user REST post node data', data)
+          this.$emit('updated');
+        })
+        .catch(error => {
+          console.warn(`Issue with patch ${this.data.entitytype} ${this.data.bundle}`, error)
+          Promise.reject(error)
+        })
+    }
+  },
+  components: {
+    VueDatePicker
+  }
+}
+</script>
+
+<template>
+  <VueDatePicker 
+    v-if="contenteditable" 
+    v-model="date" 
+    model-type="yyyy-MM-dd" 
+    format="dd-MM-yyyy" 
+    :enable-time-picker="false" 
+    :clearable="false"
+    @update:model-value="onDateSelected"
+    :placeholder="placeholder"
+    v-bind="attrs"/>
+  <span v-else class="date">{{ value }}</span>
+
+</template>

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) => {
-      // console.log('main is scrolling', event);
-      let $main = event.target;
-      let scrolled = $main.scrollTop > 0;
-      this.$emit('main_scrolled', scrolled);
-      // TODO how to make this failsafe limit responsive ? 
-      if(scrolled && $main.scrollHeight > 900){
-        this.headerreduced = true;
-      } else {
-        this.headerreduced = false;
-      }
-    })
+    // this.$refs.cartouche_main.addEventListener('scroll', (event) => {
+    //   console.log('main is scrolling', event);
+    //   let $main = event.target;
+    //   let scrolled = $main.scrollTop > 0;
+    //   this.$emit('main_scrolled', scrolled);
+    //   // TODO how to make this failsafe limit responsive ? 
+    //   if(scrolled && $main.scrollHeight > 900){
+    //     this.headerreduced = true;
+    //   } else {
+    //     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 }" 
-        :contenteditable="concernement.can_update"
+        :class="{ ellipsed: entite }" 
+        :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/main.js

@@ -1,3 +1,4 @@
+// import Vue from "vue"
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
@@ -14,10 +15,36 @@ import './assets/main.scss'
 import VuePlyr from 'vue-plyr'
 import 'vue-plyr/dist/vue-plyr.css'
 
+// import * as Sentry from "@sentry/browser";
+// import * as Integrations from "@sentry/integrations";
+
+// Sentry.init({
+//   dsn: "https://d1780f9da2fc4dd28c9c17cb344a088f@frontlog.figli.io/2",
+//   integrations: [new Integrations.Vue()],
+// });
+import * as Sentry from "@sentry/vue";
+import { createSentryPiniaPlugin } from "@sentry/vue";
+
+
 const app = createApp(App)
 
+Sentry.init({
+  app,
+  dsn: "https://d1780f9da2fc4dd28c9c17cb344a088f@frontlog.figli.io/2",
+  integrations: [
+    Sentry.browserTracingIntegration({ router }),
+  ],
+  tracesSampleRate: 0.01,
+  normalizeDepth: 10, // Or however deep you want your state context to be.
+  environment: "prod",
+  // release : '1'
+  release: __SENTRY_RELEASE__
+});
+
 const pinia = createPinia()
 pinia.use( ({store}) => { store.router = router } )
+pinia.use(createSentryPiniaPlugin());
+
 app.use(pinia)
 app.use(router)
 // app.use(VueCollapsiblePanel)
@@ -25,3 +52,5 @@ app.use(VuePlyr, {
   plyr: {}
 })
 app.mount('#app')
+
+// Sentry.captureMessage("sentry vue is working", "info");

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}) {
@@ -548,7 +579,7 @@ export const ConcernementsStore = defineStore({
     },
     reloadConcernementCerclePol(nid){
       // let tmp_conc = this.concernementsByID[nid];
-      // console.log(`reloadConcernementCerclePol nid: ${nid} ${Math.random()*10000}`);
+      console.log(`reloadConcernementCerclePol nid: ${nid} ${Math.random()*10000}`);
       return new Promise((resolve, reject) => {
         const ast = gql`{
           concernement(id:${nid}) {
@@ -567,6 +598,8 @@ export const ConcernementsStore = defineStore({
               leprobleme
               lenquete
               groupesinterets {
+                id
+                revision_id
                 date {
                   end
                   start
@@ -579,10 +612,12 @@ export const ConcernementsStore = defineStore({
               date_adresse {
                 start
               }
-              entite_addresse_doleance
-              comment_ennonce_doleance
-              aqui_addresse_doleance
+              entite_adresse_doleance
+              comment_enonce_doleance
+              a_qui_adresse_doleance
               reception_traitement {
+                id
+                revision_id
                 date {
                   end
                   start
@@ -597,8 +632,10 @@ export const ConcernementsStore = defineStore({
                 start
               }
               entites_decisionnaires
-              decision_formule
+              decision_formulee
               mise_en_oeuvre_decision {
+                id
+                revision_id
                 date {
                   end
                   start
@@ -615,6 +652,8 @@ export const ConcernementsStore = defineStore({
               aqui_adresse_decision
               comment_formule_decision
               receptions_et_applications {
+                id
+                revision_id
                 date {
                   end
                   start
@@ -637,6 +676,19 @@ export const ConcernementsStore = defineStore({
             let tmp_conc = this.concernementsByID[concernement.id];
             // merge old concernement entites with new once
             _assign(tmp_conc.doleances, concernement.doleances);
+
+            // redefine opened doleance if needed
+            tmp_conc.has_doleance = tmp_conc.doleances.length ? true : false;
+            if (tmp_conc.has_doleance) {
+              // console.log('concernement has doleance', tmp_conc.doleances);
+              if (!tmp_conc.opened_doleance) {
+                tmp_conc.opened_doleance = {
+                  id: tmp_conc.doleances[0].id
+                };
+              }
+            }
+
+            // resolve
             resolve(concernement);
           })
           .catch(error => {

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"/>

vite.config.js

@@ -5,6 +5,21 @@ import vue from '@vitejs/plugin-vue'
 import graphql from '@rollup/plugin-graphql';
 import { viteRequire } from 'vite-require'
 import svgLoader from 'vite-svg-loader'
+import { sentryVitePlugin } from "@sentry/vite-plugin";
+import { execSync } from 'child_process'
+
+require('dotenv').config();
+
+// Get short Git commit hash
+function getGitCommitHash() {
+  try {
+    return execSync('git rev-parse --short HEAD').toString().trim()
+  } catch (e) {
+    console.warn('Could not retrieve Git commit hash')
+    return 'unknown'
+  }
+}
+const release = `ouatterrir@${getGitCommitHash()}`
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -14,7 +29,18 @@ export default defineConfig({
           whitespace: 'preserve'
         }
       }
-    }), graphql(), viteRequire(), svgLoader({defaultImport: 'raw'})],
+    }), graphql(), viteRequire(), svgLoader({defaultImport: 'raw'}),
+    sentryVitePlugin({
+      org: "figures-libres",
+      project: "atlas-atterrissage.com",
+      authToken: process.env.AUTH_TOKEN,
+      release: { 
+        // name: "ouatterrir",
+        name: release
+      },
+      url: "https://frontlog.figli.io",
+    })
+  ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
@@ -36,6 +62,7 @@ export default defineConfig({
     },
   },
   build: {
+    sourcemap: true,
     rollupOptions: {
       // https://rollupjs.org/configuration-options/
     },
@@ -44,4 +71,7 @@ export default defineConfig({
   esbuild: {
     drop: ['console', 'debugger'],
   },
+  define: {
+    __SENTRY_RELEASE__: JSON.stringify(release),
+  }
 })