admin front doleance groupes d'intérets done

src/components/contents/Doleancer.vue

@@ -430,7 +430,7 @@ export default {
               <DateEditable
                 :value="groupeinteret.date.start"
                 :end_value="groupeinteret.date.end"
-                class="groupeinteret-date-start" 
+                class="groupeinteret-date" 
                 :contenteditable="opened_concernement.can_update"
                 mode="range"
                 :data="{
@@ -445,19 +445,61 @@ export default {
             <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="groupeinteret.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'}
+                }" />
               
               <label for="accorder">{{ p_groupes_interets.field_accorder_interets.label }}</label>
-              <p 
+              <!-- <p 
                 name="accorder"
-                v-html="groupeinteret.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'}
+                }" />
               
               <label for="formuler">{{ p_groupes_interets.field_formuler.label }}</label>
-              <p 
+              <!-- <p 
                 name="formuler"
-                v-html="groupeinteret.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'}
+                }" />
             </section>
           </section>
 

src/components/editable/DateEditable.vue

@@ -50,27 +50,42 @@ export default {
   },
   created () {
     console.log('DateEditable created');
-    if (this.mode && this.mode === 'range') {
-      this.date = [this.value, this.end_value]
-    }else{
-      this.date = this.value;
-    }
+    this.initDateValues();
   },
+  // updated() {
+  //   console.log('DateEditable updated');
+  //   this.initDateValues();
+  // },
   mounted () {
   },
   beforeUnmount() {
   },
   watch: {
-    date (n, o) { 
-      console.log(`datEditable watch date n, o`, n, o);
+    value (n, o) { 
+      console.log(`dateEditable watch value n, o`, n, o);
       
       if(n !== o){
-        this.save();
+        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);
@@ -129,6 +144,8 @@ export default {
     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>