admin front doleance improved dateEditable with optional range

src/components/contents/Doleancer.vue

@@ -57,7 +57,14 @@ export default {
                            'csrf_token',
                            'isloggedin',
                            'user_entites']),
-    ...mapState(CommonStore,['hover_elmt'])
+    ...mapState(CommonStore,['hover_elmt']),
+    // 
+    opened_dol() {
+      return this.opened_concernement.opened_doleance;
+    },
+    groupeinteret() {
+      return this.doleance.groupesinterets[this.opened_dol.field_index];
+    }
   },
   created () {
     this.concernement = this.concernementsByID[this.cid];
@@ -234,7 +241,6 @@ export default {
 
         // get all the field_entite values, we don't want to ersae everything
         let groupes = [];
-
         this.concernement.doleances.forEach((doleance) =>{
           if (doleance.id === this.opened_concernement.opened_doleance.id) {
             doleance.groupesinterets.forEach((group) => {
@@ -349,7 +355,7 @@ export default {
       <section
         class="content-doleances">
         
-        <template v-if="opened_concernement.opened_doleance && opened_concernement.opened_doleance.id === doleance.id">
+        <template v-if="opened_dol && opened_dol.id === doleance.id">
           <ContentEditable
             tag="h3"
             :value="doleance.title" 
@@ -363,7 +369,7 @@ export default {
             }"
             v-on:updated="reloadConcernementCerclePol(cid)"/>
           <section
-            v-if="opened_concernement.opened_doleance.field === 'leprobleme' ||  !opened_concernement.opened_doleance.field">
+            v-if="opened_dol.field === 'leprobleme' || !opened_dol.field">
             <!-- <span class="date">{{ doleance.date_leprobleme.start }}</span> -->
              <DateEditable
               :value="doleance.date_leprobleme.start"
@@ -373,7 +379,7 @@ export default {
                 entitytype: 'node',
                 bundle: 'cercle_politique',
                 id: doleance.id,
-                field: {field_name: 'field_date_leprobleme', value:'value'}
+                field: {field_name: 'field_date_leprobleme'}
               }"
               v-on:updated="reloadConcernementCerclePol(cid)"/>
             <h5>{{ ct_cercle_politique.field_le_probleme.label }}</h5>
@@ -393,9 +399,9 @@ export default {
           </section>
 
           <section
-            v-if="opened_concernement.opened_doleance.field === 'lenquete' 
+            v-if="opened_dol.field === 'lenquete' 
-                  || ((!opened_concernement.opened_doleance.field 
+                  || ((!opened_dol.field 
-                      || opened_concernement.opened_doleance.field === 'leprobleme') 
+                      || opened_dol.field === 'leprobleme') 
                       && !doleance.lenquete)"
             class="lenquete">
             <h5>{{ ct_cercle_politique.field_enquete_terraindevie.label }}</h5>
@@ -415,34 +421,48 @@ export default {
           </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-start" 
+                :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 
                 name="groupe"
-                v-html="doleance.groupesinterets[opened_concernement.opened_doleance.field_index].groupe_interets" />
+                v-html="groupeinteret.groupe_interets" />
               
               <label for="accorder">{{ p_groupes_interets.field_accorder_interets.label }}</label>
               <p 
                 name="accorder"
-                v-html="doleance.groupesinterets[opened_concernement.opened_doleance.field_index].accorder_interets" />
+                v-html="groupeinteret.accorder_interets" />
               
               <label for="formuler">{{ p_groupes_interets.field_formuler.label }}</label>
               <p 
                 name="formuler"
-                v-html="doleance.groupesinterets[opened_concernement.opened_doleance.field_index].formuler" />
+                v-html="groupeinteret.formuler" />
             </section>
           </section>
 
           <section
-            v-if="opened_concernement.opened_doleance.field === 'adresse_de_la_doleance'"
+            v-if="opened_dol.field === 'adresse_de_la_doleance'"
             class="adresse">
             <span class="date">{{ doleance.date_adresse.start }}</span>
             
@@ -465,34 +485,34 @@ export default {
           </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 }}
             </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" />
+              v-html="doleance.reception_traitement[opened_dol.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" />
+              v-html="doleance.reception_traitement[opened_dol.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" />
+              v-html="doleance.reception_traitement[opened_dol.field_index].traite_doleance" />
             <label for="entite_recoit_doleance">{{ p_reception_et_traitement.field_entite_recoit_doleance.label }}</label>
             <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" />
           </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>
             
@@ -504,31 +524,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>
@@ -542,33 +562,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>
@@ -595,6 +615,20 @@ export default {
     <template v-slot:footer>
 
       <template v-if="concernement.can_update">
+
+        <!-- <template v-if="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 === 'lenquete' || opened_concernement.opened_doleance.field === 'groupesinterets'">
           <div 
             v-if="!reloading_concernements" 
@@ -607,9 +641,10 @@ export default {
             <div class="loading">Chargement</div>
           </div>
         </template>
+
         <template v-if="opened_concernement.opened_doleance.field === 'lenquete'">
           <div v-if="!reloading_concernements" @click="addCerclePo" class="add-cerclepo-btn btn">
-            <span>Ajouter un crecle politique</span>
+            <span>Ajouter un cercle politique</span>
             <svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
           </div>
           <div v-else class="add-cerclepo-btn btn">

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,
+      date: null
-      // spellcheck: false
     }
   },
   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.mode && this.mode === "range") {
-      if (this.data.field.additional_values) {
+        params[this.data.field.field_name] = [{
-        for (const key in this.data.field.additional_values) {
+          value: this.date[0],
-          if (Object.hasOwnProperty.call(this.data.field.additional_values, key)) {
+          end_value: this.date[1]
-            params[this.data.field.field_name][0][key] = this.data.field.additional_values[key]
+        }]
-          }
+      } 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>