cercle po: adresse doleance & reception et traitement OK

package-lock.json

@@ -15,6 +15,7 @@
         "@mdi/js": "^7.2.96",
         "@tweenjs/tween.js": "^21.0.0",
         "@vojtechlanka/vue-simple-suggest": "^2.0.6",
+        "@vuepic/vue-datepicker": "^11.0.1",
         "fabric": "^6.0.0-beta7",
         "granim": "^2.0.0",
         "lodash": "^4.17.21",
@@ -939,6 +940,21 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
       "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-11.0.1.tgz",
+      "integrity": "sha512-xtGbgZAftBiU1H8pwM54vOCutLzEHsHiolRuDn+memTjqpfzT0x1Ml1tykJ53PLvdkCTyb6sB+1muv5Gsd4nQA==",
+      "license": "MIT",
+      "dependencies": {
+        "date-fns": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.3.0"
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -1505,6 +1521,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

package.json

@@ -15,6 +15,7 @@
     "@mdi/js": "^7.2.96",
     "@tweenjs/tween.js": "^21.0.0",
     "@vojtechlanka/vue-simple-suggest": "^2.0.6",
+    "@vuepic/vue-datepicker": "^11.0.1",
     "fabric": "^6.0.0-beta7",
     "granim": "^2.0.0",
     "lodash": "^4.17.21",

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
@@ -135,6 +139,8 @@ fragment ConcernementFields on Concernement {
     entites_decisionnaires
     decision_formule
     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/assets/main.scss

@@ -607,55 +607,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 +689,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;
@@ -1090,15 +1058,18 @@ div.loading{
   }
 }
 
-*[contenteditable="true"] {
+*[contenteditable="true"],
+div.dp__main{
   background: #eee;
   border: #eee 2px solid;
   border-radius: 5px;
   $p:0.3em;
   padding:$p;
-  margin:0 0 0 -$p;
+  margin:0.5em 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;
@@ -1329,3 +1300,16 @@ 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{
+  @include add-btn();
+  margin: 0 0 1em;
+  height: 60px;
+  line-height: 50px;
+  >svg{
+    width:30px; height:30px;
+  }
+}

src/components/ConcernementMapItem.vue

@@ -377,6 +377,24 @@ 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
+        }
+      },
+      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
+    },
     wait: {
       handler (n, o){
         // when we are reloading entites par exemple
@@ -915,9 +933,12 @@ export default {
             this.paper_main_object.addChild(this.setPaperAgissantes());
             break;
           case 'doleancer':
+            if (this.concernement.doleances.length) {
               this.addNewPaperSymbolInstance('doleance_bg');
               this.paper_main_object.addChild(this.setPaperDoleances());
+            }
             break;
+            
         }
         this.paperContentsIsSet = true;  
       }
@@ -1106,6 +1127,8 @@ export default {
       
     },
     setPaperEntites(){
+      console.log(`setPaperEntites ${this.cid}`);
+      
       let g = new paper.Group({
         pivot: new paper.Point(this.pos),
         name: 'entites'
@@ -1120,6 +1143,7 @@ export default {
       // for (let i = 0; i < this.entites.length; i++) {
       for (let i = 0; i < this.concernement.revisions_byid[this.active_revision].entites.length; i++) {
         let entite = this.concernement.revisions_byid[this.active_revision].entites[i];
+        console.log('entite', entite);
         
         if (!entite.active && !this.concernement.can_update) {
           continue;
@@ -1144,7 +1168,7 @@ export default {
           }
         } 
 
-        // console.log(`item_type: ${item_type}, symbol_name: ${symbol_name}`);
+        console.log(`item_type: ${item_type}, symbol_name: ${symbol_name}`);
 
         let instance = new paper.SymbolItem(this.paper_symbol_definitions[symbol_name]);
         instance.name = 'entite';
@@ -1157,6 +1181,7 @@ export default {
         instance.is_symbol_instance = true;
         g.addChild(instance);
         // instance.bringToFront();
+        console.log('instance', instance);
         
         if (entite.entite && entite.entite.title) {
           let pad = 2;
@@ -1209,6 +1234,8 @@ export default {
           instance.label_item = label;
         }
       }
+      console.log(`g`, g);
+      
       return g;
     },
     setPaperEntitesSuperposees(){
@@ -1653,23 +1680,60 @@ export default {
     //     }
     //   }
     // },
-    setPaperDoleances(){
-      let g = new paper.Group({
+    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({
+    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 = [
         [
@@ -1685,9 +1749,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: [
@@ -1906,7 +1970,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,

src/components/MapConcernements.vue

@@ -1614,8 +1614,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/Doleancer.vue

@@ -5,11 +5,28 @@ import { ConcernementsStore } from '@stores/concernements'
 import { UserStore } from '@/stores/user'
 import { CommonStore } from '@/stores/common'
 
+import REST from '@api/rest-axios'
+
+// import { print } from 'graphql/language/printer'
+// import gql from 'graphql-tag'
+// import GQL from '@api/graphql-axios'
+// import EntiteFields from '@api/gql/entite.fragment.gql'
+
+
 import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
 
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiArrowLeft } from '@mdi/js';
 import { mdiArrowRight } from '@mdi/js';
+import { mdiStickerPlusOutline } from '@mdi/js';
+
+
+
+import ContentEditable from '@components/editable/ContentEditable.vue';
+import DateEditable from '@components/editable/DateEditable.vue';
+// import CheckboxEditable from '@components/editable/CheckboxEditable.vue';
+// import SelectEditable from '@components/editable/SelectEditable.vue';
+
 
 export default {
   props: ['cid'],
@@ -19,7 +36,9 @@ export default {
       doleance_selected: null,
       doleance_index: null,
       arrowleft_path: mdiArrowLeft,
-      arrowright_path: mdiArrowRight
+      arrowright_path: mdiArrowRight,
+      mdiStickerPlusOutline_path: mdiStickerPlusOutline,
+      reloading_concernements: false
     }
   },
   computed: {
@@ -31,9 +50,24 @@ export default {
                                     'p_groupes_interets',
                                     'p_reception_et_traitement',
                                     'p_mise_en_oeuvre_decision',
-                                    'p_reception_application_decision'
+                                    'p_reception_application_decision',
+                                    'reloadConcernementCerclePol'
                                   ]),
-    ...mapState(CommonStore,['hover_elmt'])
+    ...mapState(UserStore,['name',
+                           'csrf_token',
+                           'isloggedin',
+                           'user_entites']),
+    ...mapState(CommonStore,['hover_elmt']),
+    // 
+    opened_dol() {
+      return this.opened_concernement.opened_doleance;
+    },
+    groupeinteret() {
+      return this.doleance.groupesinterets[this.opened_dol.field_index];
+    },
+    receptionettraitment() {
+      return this.doleance.reception_traitement[this.opened_dol.field_index];
+    }
   },
   created () {
     this.concernement = this.concernementsByID[this.cid];
@@ -44,20 +78,48 @@ export default {
         this.doleance_index = index;
       }
     });
+    
   },
   mounted() {
+    if(this.concernement && this.concernement.doleances.length){
       if (this.doleance_index > 0) 
         this.$refs.prevDoleanceBTN.classList.add('visible');
 
       if (this.doleance_index < this.concernement.doleances.length-1)
         this.$refs.nextDoleanceBTN.classList.add('visible'); 
+    }
   },
   unmounted() {
+    if(this.concernement && this.concernement.doleances.length){
       this.setOpenedDoleance(parseInt(this.cid), this.concernement.doleances[0].id);
 
+    }
+
+  },
+  watch: {
+    opened_concernement: {
+      handler (n, o) {
+        console.log(`${this.cid} watch opened_concernement o, n`, o, n);
+        if (!n) { // if there is no opened concernement
+          
+        } else {
+          this.concernement = this.concernementsByID[this.cid];
+          console.log(`Doleancer content created, id: ${this.cid}, doleances:`,this.concernement.doleances);
+          this.concernement.doleances.forEach((doleance, index) => {
+            if (doleance.id === this.concernement.opened_doleance.id) {
+              this.doleance = doleance;
+              this.doleance_index = index;
+            }
+          });
+        }
+      },
+      deep: true
+    }
   },
   methods: {
-    ...mapActions(ConcernementsStore,['setOpenedDoleance']),
+    ...mapActions(ConcernementsStore,['setOpenedDoleance',
+                                      'setOpenedDoleanceField'
+                                    ]),
     nextDoleance(){
       this.doleance_index ++;
       this.$refs.prevDoleanceBTN.classList.add('animeleft');
@@ -71,8 +133,9 @@ export default {
       this.openDoleance()
     },
     openDoleance(){
-      console.log('openDoleance');
       this.doleance = this.concernement.doleances[this.doleance_index];
+      console.log('openDoleance', this.doleance);
+      
       this.setOpenedDoleance(parseInt(this.cid), this.doleance.id);
       setTimeout((function(that){
         return function(){
@@ -84,11 +147,210 @@ export default {
           that.$refs.nextDoleanceBTN.classList.toggle('visible', that.doleance_index < that.concernement.doleances.length-1); 
         };
       }(this)), 2000)
+    },
+    // cercle po
+    addCerclePo(e){
+      console.log('add cerclepo');
+      this.reloading_concernements = true;
+      // 1 create entite node
+      this.createCerclepoNode()
+        .then((cerclepo) => {
+          console.log('createCerclepoNode then node', cerclepo);
+          // 2 record on concernement field_entites
+          this.recordConcernementDoleancerField(cerclepo)
+                .then((concernement) => {
+                  console.log('concernement', concernement);
+                  // reload the map item
+                  this.reloadConcernementCerclePol(concernement.nid[0].value)
+                    .then(() => {
+                      this.reloading_concernements = false;
+                    });
+                })
+        })
+
+    },
+    createCerclepoNode(){
+      return new Promise((resolve, reject) => {
+        // 1 create entite node
+        const params_node_cerclepo = {
+          type: 'cercle_politique',
+          title: [{value:'Titre à personaliser'}]
+        };
+        
+        const configs = {
+          headers: {'X-CSRF-Token': this.csrf_token}
+        };
+
+        REST.post(`/node?_format=json`, params_node_cerclepo, configs)
+          .then(({ data }) => {
+            console.log('REST post new node cercle_politique', data);
+            resolve(data)
+          })
+          .catch(error => {
+            console.warn(`Issue with post new node cercle_politique`, error)
+            reject(error)
+          })
+      })
+    },
+    // adresse doleance
+    addAdresseDoleance(e){
+      this.setOpenedDoleanceField(this.cid, this.doleance.id, "adresse_de_la_doleance");
+    },
+    // groupe interet
+    addgroupInteret(e){
+      this.createCerclepoParagGeneric('groupes_interets', 'field_groupes', 'groupesinterets');
+    },
+    addReceptionEtTraitement(e){
+      this.createCerclepoParagGeneric('reception_et_traitement', 'field_receptions_et_traitements', 'reception_traitement');
+    },
+    createCerclepoParagGeneric(type, prt_field_name, obj_name){
+      console.log('createCerclepoParagGeneric',type, prt_field_name, obj_name);
+      this.reloading_concernements = true;
+      // 1 create paragraphe
+      this.createParag(type, prt_field_name)
+        .then((parag) => {
+          console.log('createParag then parag', parag);
+          // 3 record on concernement field_entites
+          this.recordCerclepoParagField(parag, obj_name, prt_field_name)
+            .then((cercle_politique) => {
+              console.log('cercle_politique', cercle_politique);
+              // reload concernement doleances
+              this.reloadConcernementCerclePol(this.concernement.id)
+                .then(() => {
+                  this.reloading_concernements = false;
+                });
+            })
+        })
+    },
+    createParag(type, prt_field_name){
+      return new Promise((resolve, reject) => {
+        // 2 create paragraphe
+        const params_parag = {
+          type: [{target_id: type}],
+          parent_type:{value: 'node'},
+          parent_id:{value: this.opened_concernement.opened_doleance.id},
+          parent_field_name:{value: prt_field_name}, // entity reference revision
+        };
+        
+        const configs = {
+          headers: {'X-CSRF-Token': this.csrf_token}
+        };
+
+        REST.post(`/entity/paragraph?_format=json`, params_parag, configs)
+          .then(({ data }) => {
+            console.log('REST post new parag', data);
+            resolve(data)
+          })
+          .catch(error => {
+            console.warn(`Issue with post new paragraph`, error)
+            reject(error)
+          })
+      })
+    },
+    recordCerclepoParagField(parag, obj_name, field_name){
+      return new Promise((resolve, reject) => {
+        // 3 record concernement field_entite
+
+        // get all the field_entite values, we don't want to ersae everything
+        let parag_records = [];
+        this.concernement.doleances.forEach((doleance) =>{
+          if (doleance.id === this.opened_concernement.opened_doleance.id) {
+            doleance[obj_name].forEach((fied) => {
+              console.log('fied',fied);
+              
+              parag_records.push({
+                target_id: fied.id,
+                target_revision_id: fied.revision_id
+              })
+            })
+          }
+        })
+        console.log('parag_records', parag_records);
+        
+        // add the new field value
+        parag_records.push({
+          target_id: parag.id[0].value,
+          target_revision_id: parag.revision_id[0].value
+        })
+        console.log('parag_records', parag_records);
+        
+        const params_node = {
+          type: 'cercle_politique',
+          nid: [{value: this.opened_concernement.opened_doleance.id}],
+          // 'field_groupes': parag_records
+        };
+        params_node[field_name] = parag_records;
+        
+        const configs = {
+          headers: {'X-CSRF-Token': this.csrf_token}
+        };
+
+        REST.patch(`/node/${this.opened_concernement.opened_doleance.id}?_format=json`, params_node, configs)
+          .then(({ data }) => {
+            console.log('REST patch cercle_politique new parag field', data)
+            resolve(data)
+          })
+          .catch(error => {
+            console.warn(`Issue with patch cercle_politique new parag field`, error)
+            reject(error)
+          })
+        // resolve('test')
+      })
+    },
+    recordConcernementDoleancerField(node){
+      return new Promise((resolve, reject) => {
+        // 2 record concernement field_doleancer
+
+        // get all the field_entite values, we don't want to ersae everything
+        let doleances = [];
+        this.concernement.doleances.forEach((doleance) =>{
+          doleances.push({
+            target_id: doleance.id
+          })
+        })
+        // add the new field value
+        doleances.push({
+          target_id: node.nid[0].value
+        })
+        console.log('doleances', doleances);
+        
+        const params_node = {
+          type: 'concernement',
+          nid: [{value: this.cid}],
+          'field_doleancer': doleances
+        };
+        
+        const configs = {
+          headers: {'X-CSRF-Token': this.csrf_token}
+        };
+
+        REST.patch(`/node/${this.cid}?_format=json`, params_node, configs)
+          .then(({ data }) => {
+            console.log('REST patch node new field_doleancer', data)
+            resolve(data)
+          })
+          .catch(error => {
+            console.warn(`Issue with patch node field_doleancer`, error)
+            reject(error)
+          })
+        // resolve('test')
+      })
+    },
+    reloadConcernementCerclePolAndChangeActiveField(field, field_index){
+      this.reloadConcernementCerclePol(this.cid)
+        .then((concernement) => {
+          // this.opened_concernement.opened_doleance.field = field;
+          this.setOpenedDoleanceField(this.cid, this.doleance.id, field, field_index);
+        });
     }
   },
   components: {
     CartoucheLayout,
-    SvgIcon
+    SvgIcon,
+    ContentEditable,
+    DateEditable,
+    // CheckboxEditable,
+    // SelectEditable
   }
 }
 
@@ -106,102 +368,329 @@ export default {
       <section
         class="content-doleances">
         
-      <template v-if="opened_concernement.opened_doleance.id === doleance.id">
-            <h3 class="doleance-title">{{ doleance.title }}</h3>
+        <template v-if="opened_dol && opened_dol.id === doleance.id">
+          <ContentEditable
+            tag="h3"
+            :value="doleance.title" 
+            class="doleance-title" 
+            :contenteditable="opened_concernement.can_update"
+            :data="{
+              entitytype: 'node',
+              bundle: 'cercle_politique',
+              id: doleance.id,
+              field: {field_name: 'title', value:'value'}
+            }"
+            v-on:updated="reloadConcernementCerclePol(cid)"/>
           <section
-              v-if="opened_concernement.opened_doleance.field === 'leprobleme' ||  !opened_concernement.opened_doleance.field">
-              <span class="date">{{ doleance.date_leprobleme.start }}</span>
+            v-if="opened_dol.field === 'leprobleme' || !opened_dol.field">
+            <!-- <span class="date">{{ doleance.date_leprobleme.start }}</span> -->
+             <DateEditable
+              :value="doleance.date_leprobleme.start"
+              class="leprobleme-date" 
+              :contenteditable="opened_concernement.can_update"
+              :data="{
+                entitytype: 'node',
+                bundle: 'cercle_politique',
+                id: doleance.id,
+                field: {field_name: 'field_date_leprobleme'}
+              }"
+              v-on:updated="reloadConcernementCerclePol(cid)"/>
             <h5>{{ ct_cercle_politique.field_le_probleme.label }}</h5>
-              <h4 name="leprobleme">{{ doleance.leprobleme }}</h4>
+            <ContentEditable
+              tag="h4"
+              :value="doleance.leprobleme" 
+              class="doleance-leprobleme" 
+              :contenteditable="opened_concernement.can_update"
+              :data="{
+                entitytype: 'node',
+                bundle: 'cercle_politique',
+                id: doleance.id,
+                field: {field_name: 'field_le_probleme', value:'value'}
+              }"
+              v-on:updated="reloadConcernementCerclePol(cid)"/>
+            
           </section>
 
           <section
-              v-if="opened_concernement.opened_doleance.field === 'lenquete'"
+            v-if="opened_dol.field === 'lenquete' 
+                  || ((!opened_dol.field 
+                      || opened_dol.field === 'leprobleme') 
+                      && !doleance.lenquete)"
             class="lenquete">
             <h5>{{ ct_cercle_politique.field_enquete_terraindevie.label }}</h5>
-              <!-- <label for="lenquete">{{ ct_cercle_politique.field_enquete_terraindevie.label }}</label> -->
-              <h4 name="lenquete">{{ doleance.lenquete }}</h4>
+            <!-- <h4 name="lenquete">{{ doleance.lenquete }}</h4> -->
+            <ContentEditable
+              tag="h4"
+              :value="doleance.lenquete" 
+              class="doleance-lenquete" 
+              :contenteditable="opened_concernement.can_update"
+              :data="{
+                entitytype: 'node',
+                bundle: 'cercle_politique',
+                id: doleance.id,
+                field: {field_name: 'field_enquete_terraindevie', value:'value'}
+              }"
+              v-on:updated="reloadConcernementCerclePolAndChangeActiveField('lenquete')"/>
           </section>
 
           <section 
-              v-if="opened_concernement.opened_doleance.field === 'groupesinterets'"
+            v-if="opened_dol.field === 'groupesinterets'"
             class="groupesinterets">
             <span class="date">
-                {{ doleance.groupesinterets[opened_concernement.opened_doleance.field_index].date.start }}
+              <!-- {{ groupeinteret.date.start }}
               &#x2192;
-                {{ doleance.groupesinterets[opened_concernement.opened_doleance.field_index].date.end }}
+              {{ groupeinteret.date.end }} -->
+              <DateEditable
+                :value="groupeinteret.date.start"
+                :end_value="groupeinteret.date.end"
+                class="groupeinteret-date" 
+                :contenteditable="opened_concernement.can_update"
+                mode="range"
+                :data="{
+                  entitytype: 'paragraph',
+                  bundle: 'groupes_interets',
+                  id: groupeinteret.id,
+                  revision_id: groupeinteret.revision_id,
+                  field: {field_name: 'field_date_groupe_interets'}
+                }"
+                v-on:updated="reloadConcernementCerclePol(cid)"/>
             </span>
             <h5>Construction de groupes d'intérets avec qui composer la doléance</h5>
             <section>
               <label for="groupe">{{ p_groupes_interets.field_groupe_interets.label }}</label>
-                <p 
+              <!-- <p 
                 name="groupe"
-                  v-html="doleance.groupesinterets[opened_concernement.opened_doleance.field_index].groupe_interets" />
+                v-html="groupeinteret.groupe_interets" /> -->
+              <ContentEditable 
+                tag="p"
+                name="group"
+                :value="groupeinteret.groupe_interets"
+                :html="true" 
+                :class="{ ellipsed: headerreduced }" 
+                :contenteditable="opened_concernement.can_update"
+                :data="{
+                  entitytype: 'paragraph',
+                  bundle: 'groupes_interets',
+                  id: groupeinteret.id,
+                  revision_id: groupeinteret.revision_id,
+                  field: {field_name: 'field_groupe_interets', value:'value'}
+                }"
+                v-on:updated="reloadConcernementCerclePol(cid)"/>
               
               <label for="accorder">{{ p_groupes_interets.field_accorder_interets.label }}</label>
-                <p 
+              <!-- <p 
                 name="accorder"
-                  v-html="doleance.groupesinterets[opened_concernement.opened_doleance.field_index].accorder_interets" />
+                v-html="groupeinteret.accorder_interets" /> -->
+              <ContentEditable 
+                tag="p"
+                name="accorder"
+                :value="groupeinteret.accorder_interets"
+                :html="true" 
+                :class="{ ellipsed: headerreduced }" 
+                :contenteditable="opened_concernement.can_update"
+                :data="{
+                  entitytype: 'paragraph',
+                  bundle: 'groupes_interets',
+                  id: groupeinteret.id,
+                  revision_id: groupeinteret.revision_id,
+                  field: {field_name: 'field_accorder_interets', value:'value'}
+                }"
+                v-on:updated="reloadConcernementCerclePol(cid)"/>
               
               <label for="formuler">{{ p_groupes_interets.field_formuler.label }}</label>
-                <p 
+              <!-- <p 
                 name="formuler"
-                  v-html="doleance.groupesinterets[opened_concernement.opened_doleance.field_index].formuler" />
+                v-html="groupeinteret.formuler" /> -->
+              <ContentEditable 
+                tag="p"
+                name="formuler"
+                :value="groupeinteret.formuler"
+                :html="true" 
+                :class="{ ellipsed: headerreduced }" 
+                :contenteditable="opened_concernement.can_update"
+                :data="{
+                  entitytype: 'paragraph',
+                  bundle: 'groupes_interets',
+                  id: groupeinteret.id,
+                  revision_id: groupeinteret.revision_id,
+                  field: {field_name: 'field_formuler', value:'value'}
+                }"
+                v-on:updated="reloadConcernementCerclePol(cid)"/>
             </section>
           </section>
 
-            <section
-              v-if="opened_concernement.opened_doleance.field === 'adresse_de_la_doleance'"
-              class="adresse">
-              <span class="date">{{ doleance.date_adresse.start }}</span>
+          <section v-if="opened_dol.field === 'adresse_de_la_doleance'" class="adresse">
             
             <h5>Adresse de la doléance</h5>
 
-              <label for="entite_addresse_doleance">{{ ct_cercle_politique.field_entite_adresse_doleance.label }}</label>
-              <p
-                name="entite_addresse_doleance"
-                v-html="doleance.entite_addresse_doleance" />
+            <!-- <span class="date">{{ doleance.date_adresse.start }}</span> -->
+            <DateEditable
+              :value="doleance.date_adresse.start"
+              class="adressedoleance-date" 
+              :contenteditable="opened_concernement.can_update"
+              :data="{
+                entitytype: 'node',
+                bundle: 'cercle_politique',
+                id: doleance.id,
+                field: {field_name: 'field_date_adresse'}
+              }"
+              v-on:updated="reloadConcernementCerclePol(cid)"/>
             
-                <label for="comment_ennonce_doleance">{{ ct_cercle_politique.field_comment_enonce_doleance.label }}</label>
-              <p
-                name="comment_ennonce_doleance"
-                v-html="doleance.comment_ennonce_doleance" />
+            <label for="entite_adresse_doleance">{{ ct_cercle_politique.field_entite_adresse_doleance.label }}</label>
+            <!-- <p name="entite_adresse_doleance" v-html="doleance.entite_adresse_doleance" /> -->
+            <ContentEditable 
+              tag="p"
+              name="entite_adresse_doleance"
+              :value="doleance.entite_adresse_doleance"
+              :html="true" 
+              :class="{ ellipsed: headerreduced }" 
+              :contenteditable="opened_concernement.can_update"
+              :data="{
+                entitytype: 'node',
+                bundle: 'cercle_politique',
+                id: doleance.id,
+                field: {field_name: 'field_entite_adresse_doleance', value:'value'}
+              }"
+              v-on:updated="reloadConcernementCerclePol(cid)"/>
             
-                <label for="aqui_addresse_doleance">{{ ct_cercle_politique.field_a_qui_adresse_doleance.label }}</label>
-              <p
-                name="aqui_addresse_doleance"
-                v-html="doleance.aqui_addresse_doleance" />               
+            <label for="comment_enonce_doleance">{{ ct_cercle_politique.field_comment_enonce_doleance.label }}</label>
+            <!-- <p name="comment_enonce_doleance" v-html="doleance.comment_enonce_doleance" /> -->
+            <ContentEditable 
+              tag="p"
+              name="comment_enonce_doleance"
+              :value="doleance.comment_enonce_doleance"
+              :html="true" 
+              :class="{ ellipsed: headerreduced }" 
+              :contenteditable="opened_concernement.can_update"
+              :data="{
+                entitytype: 'node',
+                bundle: 'cercle_politique',
+                id: doleance.id,
+                field: {field_name: 'field_comment_enonce_doleance', value:'value'}
+              }"
+              v-on:updated="reloadConcernementCerclePol(cid)"/>
+            
+            <label for="a_qui_adresse_doleance">{{ ct_cercle_politique.field_a_qui_adresse_doleance.label }}</label>
+            <!-- <p name="a_qui_adresse_doleance" v-html="doleance.a_qui_adresse_doleance" />                -->
+            <ContentEditable 
+              tag="p"
+              name="a_qui_adresse_doleance"
+              :value="doleance.a_qui_adresse_doleance"
+              :html="true" 
+              :class="{ ellipsed: headerreduced }" 
+              :contenteditable="opened_concernement.can_update"
+              :data="{
+                entitytype: 'node',
+                bundle: 'cercle_politique',
+                id: doleance.id,
+                field: {field_name: 'field_a_qui_adresse_doleance', value:'value'}
+              }"
+              v-on:updated="reloadConcernementCerclePol(cid)"/>
           </section>
 
           <section
-              v-if="opened_concernement.opened_doleance.field === 'reception_traitement'"
+            v-if="opened_dol.field === 'reception_traitement'"
             class="reception_traitement">
             <span class="date">
-                {{ doleance.reception_traitement[opened_concernement.opened_doleance.field_index].date.start }}
+              <!-- {{ doleance.reception_traitement[opened_dol.field_index].date.start }}
               &#x2192;
-                {{ doleance.reception_traitement[opened_concernement.opened_doleance.field_index].date.end }}
+              {{ doleance.reception_traitement[opened_dol.field_index].date.end }} -->
+              <DateEditable
+                :value="receptionettraitment.date.start"
+                :end_value="receptionettraitment.date.end"
+                class="receptionettraitment-date" 
+                :contenteditable="opened_concernement.can_update"
+                mode="range"
+                :data="{
+                  entitytype: 'paragraph',
+                  bundle: 'reception_et_traitement',
+                  id: receptionettraitment.id,
+                  revision_id: receptionettraitment.revision_id,
+                  field: {field_name: 'field_date_reception_traite'}
+                }"
+                v-on:updated="reloadConcernementCerclePol(cid)"/>
             </span>
             <h5>Reception et traitement de la doléance</h5>
-              <label for="entite_adressee">{{ p_reception_et_traitement.field_entite_adressee.label }}</label>
-              <p 
-                name="entite_adressee"
-                v-html="doleance.reception_traitement[opened_concernement.opened_doleance.field_index].entite_adressee" />
-              <label for="doleance_formulee">{{ p_reception_et_traitement.field_doleance_formulee.label }}</label>
-              <p 
-                name="doleance_formulee"
-                v-html="doleance.reception_traitement[opened_concernement.opened_doleance.field_index].doleance_formulee" />
-              <label for="traite_doleance">{{ p_reception_et_traitement.field_traite_doleance.label }}</label>
-              <p 
-                name="traite_doleance"
-                v-html="doleance.reception_traitement[opened_concernement.opened_doleance.field_index].traite_doleance" />
             <label for="entite_recoit_doleance">{{ p_reception_et_traitement.field_entite_recoit_doleance.label }}</label>
-              <p 
+            <!-- <p 
               name="entite_recoit_doleance"
-                v-html="doleance.reception_traitement[opened_concernement.opened_doleance.field_index].entite_recoit_doleance" />
+              v-html="doleance.reception_traitement[opened_dol.field_index].entite_recoit_doleance" /> -->
+            <ContentEditable 
+              tag="p"
+              name="entite_recoit_doleance"
+              :value="receptionettraitment.entite_recoit_doleance"
+              :html="true" 
+              :class="{ ellipsed: headerreduced }" 
+              :contenteditable="opened_concernement.can_update"
+              :data="{
+                entitytype: 'paragraph',
+                bundle: 'reception_et_traitement',
+                id: receptionettraitment.id,
+                revision_id: receptionettraitment.revision_id,
+                field: {field_name: 'field_entite_recoit_doleance', value:'value'}
+              }"
+              v-on:updated="reloadConcernementCerclePol(cid)"/>
+            <label for="traite_doleance">{{ p_reception_et_traitement.field_traite_doleance.label }}</label>
+            <!-- <p 
+              name="traite_doleance"
+              v-html="doleance.reception_traitement[opened_dol.field_index].traite_doleance" /> -->
+            <ContentEditable 
+              tag="p"
+              name="traite_doleance"
+              :value="receptionettraitment.traite_doleance"
+              :html="true" 
+              :class="{ ellipsed: headerreduced }" 
+              :contenteditable="opened_concernement.can_update"
+              :data="{
+                entitytype: 'paragraph',
+                bundle: 'reception_et_traitement',
+                id: receptionettraitment.id,
+                revision_id: receptionettraitment.revision_id,
+                field: {field_name: 'field_traite_doleance', value:'value'}
+              }"
+              v-on:updated="reloadConcernementCerclePol(cid)"/>
+            <label for="doleance_formulee">{{ p_reception_et_traitement.field_doleance_formulee.label }}</label>
+            <!-- <p 
+              name="doleance_formulee"
+              v-html="doleance.reception_traitement[opened_dol.field_index].doleance_formulee" /> -->
+            <ContentEditable 
+              tag="p"
+              name="doleance_formulee"
+              :value="receptionettraitment.doleance_formulee"
+              :html="true" 
+              :class="{ ellipsed: headerreduced }" 
+              :contenteditable="opened_concernement.can_update"
+              :data="{
+                entitytype: 'paragraph',
+                bundle: 'reception_et_traitement',
+                id: receptionettraitment.id,
+                revision_id: receptionettraitment.revision_id,
+                field: {field_name: 'field_doleance_formulee', value:'value'}
+              }"
+              v-on:updated="reloadConcernementCerclePol(cid)"/>
+            <label for="entite_adressee">{{ p_reception_et_traitement.field_entite_adressee.label }}</label>
+            <!-- <p 
+              name="entite_adressee"
+              v-html="doleance.reception_traitement[opened_dol.field_index].entite_adressee" /> -->
+            <ContentEditable 
+              tag="p"
+              name="entite_adressee"
+              :value="receptionettraitment.entite_adressee"
+              :html="true" 
+              :class="{ ellipsed: headerreduced }" 
+              :contenteditable="opened_concernement.can_update"
+              :data="{
+                entitytype: 'paragraph',
+                bundle: 'reception_et_traitement',
+                id: receptionettraitment.id,
+                revision_id: receptionettraitment.revision_id,
+                field: {field_name: 'field_entite_adressee', value:'value'}
+              }"
+              v-on:updated="reloadConcernementCerclePol(cid)"/>
           </section>
 
           <section
-              v-if="opened_concernement.opened_doleance.field === 'decision'"
+            v-if="opened_dol.field === 'decision'"
             class="decision">
             <span class="date">{{ doleance.date_decision.start }}</span>
             
@@ -213,31 +702,31 @@ export default {
           </section>
 
           <section
-              v-if="opened_concernement.opened_doleance.field === 'mise_en_oeuvre_decision'"
+            v-if="opened_dol.field === 'mise_en_oeuvre_decision'"
             class="mise_en_oeuvre_decision">
             <span class="date">
-                {{ doleance.mise_en_oeuvre_decision[opened_concernement.opened_doleance.field_index].date.start }}
+              {{ doleance.mise_en_oeuvre_decision[opened_dol.field_index].date.start }}
               &#x2192;
-                {{ doleance.mise_en_oeuvre_decision[opened_concernement.opened_doleance.field_index].date.end }}
+              {{ doleance.mise_en_oeuvre_decision[opened_dol.field_index].date.end }}
             </span>
             <h5>{{ ct_cercle_politique.field_mise_en_oeuvre_decision.label }}</h5>
             <label for="entite_adresse_decision">{{ p_mise_en_oeuvre_decision.field_entite_adresse_decision.label }}</label>
             <p 
               name="entite_adresse_decision"
-                v-html="doleance.mise_en_oeuvre_decision[opened_concernement.opened_doleance.field_index].entite_adresse_decision" />
+              v-html="doleance.mise_en_oeuvre_decision[opened_dol.field_index].entite_adresse_decision" />
             <label for="formule_decision">{{ p_mise_en_oeuvre_decision.field_formule_decision.label }}</label>
             <p 
               name="formule_decision"
-                v-html="doleance.mise_en_oeuvre_decision[opened_concernement.opened_doleance.field_index].formule_decision" />
+              v-html="doleance.mise_en_oeuvre_decision[opened_dol.field_index].formule_decision" />
             <label for="entite_metenoeuvre_decisio">{{ p_mise_en_oeuvre_decision.field_entite_metenoeuvre_decisio.label }}</label>
             <p 
               name="entite_metenoeuvre_decisio"
-                v-html="doleance.mise_en_oeuvre_decision[opened_concernement.opened_doleance.field_index].entite_metenoeuvre_decisio" />
+              v-html="doleance.mise_en_oeuvre_decision[opened_dol.field_index].entite_metenoeuvre_decisio" />
           </section>
 
 
           <section 
-              v-if="opened_concernement.opened_doleance.field === 'adresse_de_la_decision'"
+            v-if="opened_dol.field === 'adresse_de_la_decision'"
             class="adresse_de_la_decision">
             <span class="date">{{ doleance.date_adresse.start }}</span>
             <h5>Adresse de la decision à appliquer</h5>
@@ -251,33 +740,33 @@ export default {
           </section>
 
           <section
-              v-if="opened_concernement.opened_doleance.field === 'receptions_et_applications'"
+            v-if="opened_dol.field === 'receptions_et_applications'"
             class="receptions_et_applications">
             <span class="date">
-                {{ doleance.receptions_et_applications[opened_concernement.opened_doleance.field_index].date.start }}
+              {{ doleance.receptions_et_applications[opened_dol.field_index].date.start }}
               &#x2192;
-                {{ doleance.receptions_et_applications[opened_concernement.opened_doleance.field_index].date.end }}
+              {{ doleance.receptions_et_applications[opened_dol.field_index].date.end }}
             </span>
             <h5>{{ ct_cercle_politique.field_receptions_et_applications.label }}</h5>
           
             <label for="applique_decision">{{ p_reception_application_decision.field_applique_decision.label }}</label>
             <p
               name="applique_decision"
-                v-html="doleance.receptions_et_applications[opened_concernement.opened_doleance.field_index].applique_decision" />
+              v-html="doleance.receptions_et_applications[opened_dol.field_index].applique_decision" />
 
             <label for="formule_decision_applic">{{ p_reception_application_decision.field_formule_decision_applic.label }}</label>
             <p
               name="formule_decision_applic"
-                v-html="doleance.receptions_et_applications[opened_concernement.opened_doleance.field_index].formule_decision_applic" />
+              v-html="doleance.receptions_et_applications[opened_dol.field_index].formule_decision_applic" />
 
             <label for="entite_recoit_decision">{{ p_reception_application_decision.field_entite_recoit_decision.label }}</label>
             <p
               name="entite_recoit_decision"
-                v-html="doleance.receptions_et_applications[opened_concernement.opened_doleance.field_index].entite_recoit_decision" />
+              v-html="doleance.receptions_et_applications[opened_dol.field_index].entite_recoit_decision" />
           </section>
           
           <section
-              v-if="opened_concernement.opened_doleance.field === 'probleme_initial_resolu'"
+            v-if="opened_dol.field === 'probleme_initial_resolu'"
             class="probleme_initial_resolu">
 
             <h5>Réussite / échec / reprise du cercle politique</h5>
@@ -302,9 +791,70 @@ export default {
     </template>
 
     <template v-slot:footer>
+
+      <template v-if="concernement.can_update">
+
+
+
+        <template v-if="opened_concernement.opened_doleance.field === 'adresse_de_la_doleance' || opened_concernement.opened_doleance.field === 'reception_et_traitement'">
+          <div 
+            v-if="!reloading_concernements" 
+            @click="addReceptionEtTraitement" 
+            class="add-receptiontraitement-btn btn">
+              <span>Ajouter réception et traitement</span>
+              <svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
+          </div>
+          <div v-else class="add-receptiontraitement-btn btn">
+            <div class="loading">Chargement</div>
+          </div>
+        </template>
+
+
+        <template v-if="opened_concernement.opened_doleance.field === 'lenquete' || opened_concernement.opened_doleance.field === 'groupesinterets'">
+          <div 
+            v-if="!reloading_concernements" 
+            @click="addgroupInteret" 
+            class="add-groupinteret-btn btn">
+              <span>Ajouter un group d'intérêt</span>
+              <svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
+          </div>
+          <div v-else class="add-groupinteret-btn btn">
+            <div class="loading">Chargement</div>
+          </div>
+        </template>
+
+        <template v-if="opened_concernement.opened_doleance.field === 'groupesinterets'">
+          <div 
+            v-if="!reloading_concernements" 
+            @click="addAdresseDoleance" 
+            class="add-adressedoleance-btn btn">
+              <span>Adresse de la doléance</span>
+              <svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
+          </div>
+          <div v-else class="add-adressedoleance-btn btn">
+            <div class="loading">Chargement</div>
+          </div>
+        </template>
+
+        <template v-if="opened_concernement.opened_doleance.field === 'leprobleme' || opened_concernement.opened_doleance.field === 'lenquete'">
+          <div v-if="!reloading_concernements" 
+            @click="addCerclePo" 
+            class="add-cerclepo-btn btn">
+              <span>Ajouter un cercle politique</span>
+              <svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
+          </div>
+          <div v-else class="add-cerclepo-btn btn">
+            <div class="loading">Chargement</div>
+          </div>
+        </template>
+        
+      </template>
+
+
       <!-- <vue-plyr>
         <div class="plyr__video-embed"> -->
           <iframe
+            v-if="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

src/components/contents/TerrainDeVie.vue

@@ -308,7 +308,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)
           })
       })

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/stores/concernements.js

@@ -389,7 +389,7 @@ export const ConcernementsStore = defineStore({
             // records and/or merge into general object and on conernement entitites_byid
             tmp_conc.entites.forEach(entite => {
               entite.cid = tmp_conc.id;
-              // if(entite.entite){
+              if(entite.entite){
                 if (this.allEntitesById[entite.entite.id]) {
                   _assign(this.allEntitesById[entite.entite.id], entite);
                 }else{
@@ -400,7 +400,7 @@ export const ConcernementsStore = defineStore({
                 }else{
                   tmp_conc.entites_byid[entite.entite.id] = entite;
                 }
-              // }
+              }
             });
             // add and/or merge revisions
             tmp_conc.active_revision = concernement.revision_id;
@@ -546,6 +546,127 @@ export const ConcernementsStore = defineStore({
           })
       });
     },
+    reloadConcernementCerclePol(nid){
+      // let tmp_conc = this.concernementsByID[nid];
+      console.log(`reloadConcernementCerclePol nid: ${nid} ${Math.random()*10000}`);
+      return new Promise((resolve, reject) => {
+        const ast = gql`{
+          concernement(id:${nid}) {
+            id
+            doleances {
+              id
+              author
+              bundle
+              path
+              title
+              uuid
+              #1
+              date_leprobleme {
+                start
+              }
+              leprobleme
+              lenquete
+              groupesinterets {
+                id
+                revision_id
+                date {
+                  end
+                  start
+                }
+                groupe_interets
+                accorder_interets
+                formuler
+              }
+              #2
+              date_adresse {
+                start
+              }
+              entite_adresse_doleance
+              comment_enonce_doleance
+              a_qui_adresse_doleance
+              reception_traitement {
+                id
+                revision_id
+                date {
+                  end
+                  start
+                }
+                entite_adressee
+                doleance_formulee
+                traite_doleance
+                entite_recoit_doleance
+              }
+              #3
+              date_decision {
+                start
+              }
+              entites_decisionnaires
+              decision_formule
+              mise_en_oeuvre_decision {
+                id
+                revision_id
+                date {
+                  end
+                  start
+                }
+                entite_adresse_decision
+                formule_decision
+                entite_metenoeuvre_decisio
+              }
+              #4
+              date_application {
+                start
+              }
+              entite_adresse_application
+              aqui_adresse_decision
+              comment_formule_decision
+              receptions_et_applications {
+                id
+                revision_id
+                date {
+                  end
+                  start
+                }
+                applique_decision
+                formule_decision_applic
+                entite_recoit_decision
+              }
+              probleme_initial_resolu
+              oui_nouvelle_situation
+              non_adresse_doleance
+            }
+          }
+        }
+        `
+        // console.log('ast', ast);
+        GQL.post('', { query: print(ast) })
+          .then(({ data : { data  : { concernement } } }) => {
+            console.log(`reloadConcernementCerclePol loaded len: ${concernement.doleances.length} revision: ${concernement.revision_id}`, concernement)
+            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 => {
+            console.warn('Issue with reloadConcernementCerclePol', error)
+            reject(error);
+            Promise.reject(error)
+          })
+      });
+    },
     loadContentTypeDefinition () {
       const body = {
         query: `
@@ -706,7 +827,7 @@ export const ConcernementsStore = defineStore({
       // })
     },
     setOpenedDoleance(cid, did){
-      console.log(`setOpenedDoleance(${cid}, ${did})`, cid, did);
+      console.log(`setOpenedDoleance cid:${cid}, did:${did})`, cid, did);
       this.concernementsByID[cid].opened_doleance = {id: did};
       // console.log('this.opened_concernement.opened_doleance', this.opened_concernement.opened_doleance);
     },