ouatterrir-app/src/components/contents/Doleancer.vue

<script>

import { mapActions, mapState } from 'pinia'
import { ConcernementsStore } from '@stores/concernements'
import { UserStore } from '@/stores/user'
import { CommonStore } from '@/stores/common'

import CartoucheLayout from '@components/layout/CartoucheLayout.vue';

import SvgIcon from '@jamescoyle/vue-icon';
import { mdiArrowLeft } from '@mdi/js';
import { mdiArrowRight } from '@mdi/js';

export default {
  props: ['cid'],
  data(){
    return {
      doleance: null,
      doleance_selected: null,
      doleance_index: null,
      arrowleft_path: mdiArrowLeft,
      arrowright_path: mdiArrowRight
    }
  },
  computed: {
    ...mapState(ConcernementsStore,['map_mode',
                                    'opened_concernement',
                                    'concernementsByID',
                                    'concernements_loaded',
                                    'ct_concernement',
                                    'ct_cercle_politique',
                                    'p_groupes_interets',
                                    'p_reception_et_traitement',
                                    'p_mise_en_oeuvre_decision',
                                    'p_reception_application_decision'
                                  ]),
    ...mapState(CommonStore,['hover_elmt'])
  },
  created () {
    this.concernement = this.concernementsByID[this.cid];
    console.log(`Doleancer content created, id: ${this.cid}, doleances:`,this.concernement.doleances);
    this.concernement.doleances.forEach((doleance, index) => {
      if (doleance.id === this.concernement.opened_doleance.id) {
        this.doleance = doleance;
        this.doleance_index = index;
      }
    });
  },
  mounted() {
    if (this.doleance_index > 0) 
      this.$refs.prevDoleanceBTN.classList.add('visible');

    if (this.doleance_index < this.concernement.doleances.length-1)
      this.$refs.nextDoleanceBTN.classList.add('visible'); 
  },
  unmounted() {
    this.setOpenedDoleance(parseInt(this.cid), this.concernement.doleances[0].id);

  },
  methods: {
    ...mapActions(ConcernementsStore,['setOpenedDoleance']),
    nextDoleance(){
      this.doleance_index ++;
      this.$refs.prevDoleanceBTN.classList.add('animeleft');
      this.$refs.nextDoleanceBTN.classList.add('animeleft');
      this.openDoleance();
    },
    prevDoleance(){
      this.doleance_index --;
      this.$refs.prevDoleanceBTN.classList.add('animeright');
      this.$refs.nextDoleanceBTN.classList.add('animeright');
      this.openDoleance()
    },
    openDoleance(){
      console.log('openDoleance');
      this.doleance = this.concernement.doleances[this.doleance_index];
      this.setOpenedDoleance(parseInt(this.cid), this.doleance.id);
      setTimeout((function(that){
        return function(){
          console.log('doleance anime end', that);
          that.$refs.prevDoleanceBTN.classList.remove('animeleft', 'animeright');
          that.$refs.prevDoleanceBTN.classList.toggle('visible', that.doleance_index > 0);

          that.$refs.nextDoleanceBTN.classList.remove('animeleft', 'animeright');
          that.$refs.nextDoleanceBTN.classList.toggle('visible', that.doleance_index < that.concernement.doleances.length-1); 
        };
      }(this)), 2000)
    }
  },
  components: {
    CartoucheLayout,
    SvgIcon
  }
}

</script>

<template>
  <CartoucheLayout :cid="cid">
    <template v-slot:header>
      <div class="pre-header">
      </div>
      
    </template>
    
    <template v-slot:main>
      <section
      class="content-doleances">
      
      <template v-if="opened_concernement.opened_doleance.id === doleance.id">
            <h3 class="doleance-title">{{ doleance.title }}</h3>
            <section
              v-if="opened_concernement.opened_doleance.field === 'leprobleme' ||  !opened_concernement.opened_doleance.field">
              <span class="date">{{ doleance.date_leprobleme.start }}</span>
              <h5>{{ ct_cercle_politique.field_le_probleme.label }}</h5>
              <h4 name="leprobleme">{{ doleance.leprobleme }}</h4>
            </section>

            <section
              v-if="opened_concernement.opened_doleance.field === 'lenquete'"
              class="lenquete">
              <h5>{{ ct_cercle_politique.field_enquete_terraindevie.label }}</h5>
              <!-- <label for="lenquete">{{ ct_cercle_politique.field_enquete_terraindevie.label }}</label> -->
              <h4 name="lenquete">{{ doleance.lenquete }}</h4>
            </section>

            <section 
              v-if="opened_concernement.opened_doleance.field === 'groupesinterets'"
              class="groupesinterets">
              <span class="date">
                {{ doleance.groupesinterets[opened_concernement.opened_doleance.field_index].date.start }}
                &#x2192;
                {{ doleance.groupesinterets[opened_concernement.opened_doleance.field_index].date.end }}
              </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" />
                
                <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" />
                
                <label for="formuler">{{ p_groupes_interets.field_formuler.label }}</label>
                <p 
                  name="formuler"
                  v-html="doleance.groupesinterets[opened_concernement.opened_doleance.field_index].formuler" />
              </section>
            </section>

            <section
              v-if="opened_concernement.opened_doleance.field === 'adresse_de_la_doleance'"
              class="adresse">
              <span class="date">{{ doleance.date_adresse.start }}</span>
              
              <h5>Adresse de la doléance</h5>

              <label for="entite_addresse_doleance">{{ ct_cercle_politique.field_entite_adresse_doleance.label }}</label>
              <p
                name="entite_addresse_doleance"
                v-html="doleance.entite_addresse_doleance" />
              
                <label for="comment_ennonce_doleance">{{ ct_cercle_politique.field_comment_enonce_doleance.label }}</label>
              <p
                name="comment_ennonce_doleance"
                v-html="doleance.comment_ennonce_doleance" />
              
                <label for="aqui_addresse_doleance">{{ ct_cercle_politique.field_a_qui_adresse_doleance.label }}</label>
              <p
                name="aqui_addresse_doleance"
                v-html="doleance.aqui_addresse_doleance" />               
            </section>

            <section
              v-if="opened_concernement.opened_doleance.field === 'reception_traitement'"
              class="reception_traitement">
              <span class="date">
                {{ doleance.reception_traitement[opened_concernement.opened_doleance.field_index].date.start }}
                &#x2192;
                {{ doleance.reception_traitement[opened_concernement.opened_doleance.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" />
              <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" />
              <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" />
              <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" />
            </section>

            <section
              v-if="opened_concernement.opened_doleance.field === 'decision'"
              class="decision">
              <span class="date">{{ doleance.date_decision.start }}</span>
              
              <h5>Décision</h5>
              <label for="entites_decisionnaires">{{ ct_cercle_politique.field_entites_decisionnaires.label }}</label>
              <p name="entites_decisionnaires" v-html="doleance.entites_decisionnaires" />
              <label for="decision_formule">{{ ct_cercle_politique.field_decision_formulee.label }}</label>
              <p name="decision_formule" v-html="doleance.decision_formule" />
            </section>

            <section
              v-if="opened_concernement.opened_doleance.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 }}
                &#x2192;
                {{ doleance.mise_en_oeuvre_decision[opened_concernement.opened_doleance.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" />
              <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" />
              <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" />
            </section>


            <section 
              v-if="opened_concernement.opened_doleance.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>
            
              <label for="entite_adresse_application">{{ ct_cercle_politique.field_entite_adresse_application.label }}</label>
              <p name="entite_adresse_application" v-html="doleance.entite_adresse_application" />
              <label for="aqui_adresse_decision">{{ ct_cercle_politique.field_aqui_adresse_decision.label }}</label>
              <p name="aqui_adresse_decision" v-html="doleance.aqui_adresse_decision" />
              <label for="comment_formule_decision">{{ ct_cercle_politique.field_comment_formule_decision.label }}</label>
              <p name="comment_formule_decision" v-html="doleance.comment_formule_decision" />
            </section>

            <section
              v-if="opened_concernement.opened_doleance.field === 'receptions_et_applications'"
              class="receptions_et_applications">
              <span class="date">
                {{ doleance.receptions_et_applications[opened_concernement.opened_doleance.field_index].date.start }}
                &#x2192;
                {{ doleance.receptions_et_applications[opened_concernement.opened_doleance.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" />

              <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" />

              <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" />
            </section>
            
            <section
              v-if="opened_concernement.opened_doleance.field === 'probleme_initial_resolu'"
              class="probleme_initial_resolu">

              <h5>Réussite / échec / reprise du cercle politique</h5>

              <label for="probleme_initial_resolu">{{ ct_cercle_politique.field_probleme_initial_resolu.label }}</label>
              <p
                name="probleme_initial_resolu"
                v-html="doleance.probleme_initial_resolu" />

              <label for="oui_nouvelle_situation">{{ ct_cercle_politique.field_oui_nouvelle_situation.label }}</label>
              <p
                name="oui_nouvelle_situation"
                v-html="doleance.oui_nouvelle_situation" />

              <label for="non_adresse_doleance">{{ ct_cercle_politique.field_non_adresse_doleance.label }}</label>
              <p
                name="non_adresse_doleance"
                v-html="doleance.non_adresse_doleance" />
            </section>
          </template>
      </section>
    </template>

    <template v-slot:footer>
      <!-- <vue-plyr>
        <div class="plyr__video-embed"> -->
          <iframe
            src="https://www.youtube.com/embed/_Uogb4tJ9c4?amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
            allowfullscreen
            allowtransparency
            frameborder="0"
          ></iframe>
        <!-- </div>
      </vue-plyr> -->
    </template>
  </CartoucheLayout> 
  
  <nav v-if="map_mode === 'doleancer'" class="doleance-switch">
    <div 
      @click="prevDoleance"
      class="prev"
      ref="prevDoleanceBTN" />
    <div
      @click="nextDoleance"
      class="next"
      ref="nextDoleanceBTN" />
  </nav>
  
</template>

<style lang="css">
  iframe{
    width:100%;
    /* height:calc() */
    aspect-ratio: 16/9;
  }
</style>