admin front doleance improved dateEditable with optional range

src/components/editable/DateEditable.vue

@@ -13,33 +13,50 @@ export default {
   props: {
     tag: String, 
     value: String, 
+    end_value : {
+      type : String,
+      default : null
+    },
     contenteditable : {
       type : [Boolean, String],
-      default : true,
+      default : true
+    },
+    mode : {
+      type : String,
+      default : null
     },
     data: Object,
     placeholder : {
       type : String,
-      default : 'Ajouter du texte'
+      default : 'Choisir une date'
     }
   },
   emits: ['updated'],
   data(){
     return {
-      date: null,
-      // spellcheck: false
+      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.date = this.value;
+    if (this.mode && this.mode === 'range') {
+      this.date = [this.value, this.end_value]
+    }else{
+      this.date = this.value;
+    }
   },
   mounted () {
-    // if (this.contenteditable) {
-    // }
   },
   beforeUnmount() {
   },
@@ -56,25 +73,30 @@ export default {
     ...mapActions(ConcernementsStore, ['reloadConcernements']),
     save(){
       console.log('save csrf_token', this.csrf_token);
-      const params = {
+      console.log('save this.data', this.data);
+      console.log('save this.date', this.date);
+
+      let params = {
         type: this.data.bundle,
-        [this.data.field.field_name]: [{[this.data.field.value]: this.date}]
       };
+
       if (this.data.entitytype === 'node') {
         params.nid = [{"value":this.data.id}];
       } else {
         params.id = [{"value":this.data.id}];
       }
-      // we need additional values for image alt for example
-      // console.log('additional_values', this.data.field.additional_values);
-      if (this.data.field.additional_values) {
-        for (const key in this.data.field.additional_values) {
-          if (Object.hasOwnProperty.call(this.data.field.additional_values, key)) {
-            params[this.data.field.field_name][0][key] = this.data.field.additional_values[key]
-          }
-        }
+
+      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}
       };
@@ -100,7 +122,14 @@ export default {
 </script>
 
 <template>
-  <VueDatePicker v-if="contenteditable" v-model="date" model-type="yyyy-MM-dd" format="dd-MM-yyyy" :enable-time-picker="false" :clearable="false"/>
+  <VueDatePicker 
+    v-if="contenteditable" 
+    v-model="date" 
+    model-type="yyyy-MM-dd" 
+    format="dd-MM-yyyy" 
+    :enable-time-picker="false" 
+    :clearable="false"
+    v-bind="attrs"/>
   <span v-else class="date">{{ value }}</span>
 
 </template>