doleance le problème is editable

src/components/contents/Doleancer.vue

@@ -11,6 +11,11 @@ import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiArrowLeft } from '@mdi/js';
 import { mdiArrowRight } from '@mdi/js';
 
+import ContentEditable from '@components/editable/ContentEditable.vue';
+// import CheckboxEditable from '@components/editable/CheckboxEditable.vue';
+// import SelectEditable from '@components/editable/SelectEditable.vue';
+
+
 export default {
   props: ['cid'],
   data(){
@@ -31,7 +36,8 @@ 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'])
   },
@@ -44,6 +50,7 @@ export default {
         this.doleance_index = index;
       }
     });
+    
   },
   mounted() {
     if (this.doleance_index > 0) 
@@ -71,8 +78,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(){
@@ -88,7 +96,10 @@ export default {
   },
   components: {
     CartoucheLayout,
-    SvgIcon
+    SvgIcon,
+    ContentEditable
+    // CheckboxEditable,
+    // SelectEditable
   }
 }
 
@@ -112,7 +123,19 @@ export default {
               v-if="opened_concernement.opened_doleance.field === 'leprobleme' ||  !opened_concernement.opened_doleance.field">
               <span class="date">{{ doleance.date_leprobleme.start }}</span>
               <h5>{{ ct_cercle_politique.field_le_probleme.label }}</h5>
-              <h4 name="leprobleme">{{ doleance.leprobleme }}</h4>
+              <!-- <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