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 vSelect from 'vue-select';
import 'vue-select/dist/vue-select.css';

export default {
  props: ['cid'],
  data(){
    return {
      doleance: null,
      doleance_selected: null
    }
  },
  computed: {
    ...mapState(ConcernementsStore,['map_mode',
                                    'opened_concernement',
                                    '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']),
    doleances_select_options () {
      let os = [];
      this.opened_concernement.doleances.forEach((doleance, index) => {
        let o = {
          label: doleance.leprobleme,
          id: doleance.id
        }
        if (doleance.id === this.opened_concernement.opened_doleance.id) {
          this.doleance_selected = o;
        }
        os.push(o);
      })
      return  os;
    },
    // doleances_select_value () {
    //   let value;
    //   this.opened_concernement.doleances.forEach((doleance, index) => {
    //     if (doleance.id === this.opened_concernement.opened_doleance.id) {
    //       value = {
    //         label: doleance.leprobleme,
    //         id: doleance.id
    //       }
    //     }
    //   });
    //   return value;
    // }
  },
  created () {
    console.log(`Doleancer content created, id: ${this.id}, opened_concernement:`,this.opened_concernement);
    this.opened_concernement.doleances.forEach((doleance, index) => {
      if (doleance.id === this.opened_concernement.opened_doleance.id) {
        this.doleance = doleance;
      }
    });
  },
  methods: {
    ...mapActions(ConcernementsStore,['setOpenedDoleance']),
    onDoleanceSelected(option){
      console.log('openDoleance', option);
      this.setOpenedDoleance(parseInt(this.id), option.id)
      
      this.opened_concernement.doleances.forEach((doleance, index) => {
      if (option.id === this.opened_concernement.opened_doleance.id) {
        this.doleance = doleance;
      }
    });
    }
  },
  components: {
    CartoucheLayout,
    vSelect
  }
}

</script>

<template>
  <CartoucheLayout :cid="cid">
    <template v-slot:header>
      <div class="pre-header">
      </div>
      
    </template>
    
    <template v-slot:main>
      <section
        class="content-doleances">
          
          <label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label>
          <v-select 
            :options="doleances_select_options"
            item-value="id"
            v-model="doleance_selected"
            :clearable="false"
            :searchable="false"
            @option:selected="onDoleanceSelected"
            >
          </v-select>

          <main v-if="opened_concernement.opened_doleance.id === doleance.id && opened_concernement.opened_doleance.field">
            <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">
              <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">

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

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