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' 
-                  || ((!opened_concernement.opened_doleance.field 
-                      || opened_concernement.opened_doleance.field === 'leprobleme') 
+            v-if="opened_dol.field === 'lenquete' 
+                  || ((!opened_dol.field 
+                      || 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">