admin front doleance groupes d'intérets done

src/assets/main.scss

@@ -611,10 +611,10 @@ div.loading{
             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;
           }
@@ -1058,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;

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.initDateValues();
-      this.date = [this.value, this.end_value]
-    }else{
-      this.date = this.value;
-    }
   },
+  // updated() {
+  //   console.log('DateEditable updated');
+  //   this.initDateValues();
+  // },
   mounted () {
   },
   beforeUnmount() {
   },
   watch: {
-    date (n, o) { 
+    value (n, o) { 
-      console.log(`datEditable watch date n, o`, 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>