ouatterrir-app/src/views/Concernement.vue

<script>

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

import { print } from 'graphql/language/printer'
import gql from 'graphql-tag'
import GQL from '@api/graphql-axios'
import EntiteFields from '@api/gql/entite.fragment.gql'


export default {
  props: ['id', 'eid'],
  data(){
    return {
      entite: null,
      opened_besoin_id: null
    }
  },
  computed: {
    ...mapState(UserStore,['isloggedin']),
    ...mapState(ConcernementsStore,['map_mode']),
    ...mapState(ConcernementsStore,['opened']),
    // ...mapState(ConcernementsStore,['opened_entity_id']),
    ...mapState(ConcernementsStore,['concernements_loaded']),
    ...mapState(ConcernementsStore,['ct_concernement']),
    ...mapState(ConcernementsStore,['ct_entite']),
    ...mapState(ConcernementsStore,['ct_cercle_politique']),
    ...mapState(ConcernementsStore,['p_groupes_interets']),
    ...mapState(ConcernementsStore,['p_reception_et_traitement']),
    ...mapState(ConcernementsStore,['p_mise_en_oeuvre_decision']),
    ...mapState(ConcernementsStore,['p_reception_application_decision']),
    ...mapState(CommonStore,['hover_elmt'])
  },
  created () {
    console.log(`Concernement view created, id: ${this.id}, eid: ${this.eid}, opened:${this.opened}`);
    
    // when we arrived directly to the url, load the entite
    // this.eid provided by route params
    if (!this.entity && this.eid) {
      this.openEntity();
    }
  },
  watch: {
    concernements_loaded: {
      handler (n, o){
        console.log(`watch concernements_loaded n: ${n}, opened:${this.opened}, id:${this.id}`);
        // when we arrived directly to the url then all concernement are loaded: do open the concernement
        if (!this.opened) {
          this.openCloseConcernements(this.id)
        }
   
      },
      deep: true
    },
    eid: {
      handler (n, o){
        if(n){
          this.openEntity()
        }else{
          this.entite = false;
          this.setOpenedEntityId(null);
        }
      },
      deep: true
    },
  },
  methods: {
    ...mapActions(ConcernementsStore,['openCloseConcernements']),
    ...mapActions(ConcernementsStore,['setOpenedEntityId']),
    openEntity(){
      this.setOpenedEntityId(parseInt(this.eid))
      this.loadEntite()
    },
    loadEntite(){
      const ast = gql`{
        entite (id: ${this.eid}) {
          ...EntiteFields
        }
      }
      ${EntiteFields}
      `
      console.log('ast', ast);
      GQL.post('', { query: print(ast) })
        .then(({data: { data: { entite }}}) => {
          console.log('load entite loaded', entite)
          this.entite = entite
        })
        .catch(error => {
          console.warn('Issue with load entite', error)
        })
    },
    onClickBesoin(id){
      console.log("onClickBesoin", id);
      this.opened_besoin_id = id === this.opened_besoin_id ? null : id;
    },
    besoinClass(id){
      return this.opened_besoin_id === id ? "opened" : "";
    }
  },
  components: {
  }
}

</script>

<template>
  <section v-if="opened" class="concernement">
    <header v-if="concernements_loaded">
      <label 
        v-if="ct_concernement && !entite && map_mode !== 'puissancedagir'&& map_mode !== 'doleancer'"
        >
          {{ ct_concernement.title.description }}
        </label>
      <h3 v-if="entite">{{ entite.title }}</h3>
      <span v-if="entite && opened.entites_byid[eid].menacemaintien > 0">menace</span>
      <span v-if="entite && opened.entites_byid[eid].menacemaintien < 0">maintient</span>
      <h2>{{ opened.title }}</h2>
    </header>
    <!-- concernement -->
    <section
      v-if="map_mode === 'terraindevie' && !entite"
      class="content-concernement">
      <section class="description">
          <label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
          <div v-html="opened.description"/>
      </section>
      <section class="caillou">
          <label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
          <div v-html="opened.caillou "/>
      </section>
    </section>
    <!-- entite -->
    <section
      v-if="map_mode === 'terraindevie' && entite"
      class="content-entite">
      <section class="action">
          <label v-if="ct_entite">{{ ct_entite.field_action.description }}</label>
          <div v-html="entite.action"/>
      </section>
      <section class="menace-maintien">
          <label v-if="ct_entite">{{ ct_entite.field_menace_maintien.description }}</label>
          <div v-html="entite.menacemaintien"/>
      </section>
    </section>
    <!-- puissance d'agir -->
    <section
      v-if="map_mode === 'puissancedagir'"
      class="content-besoins">
        <ul class="besoins">
          <li
            v-for="besoin in opened.besoins"
            :key="besoin.id"
            class="besoin"
            :id="besoin.id"
            :class="besoinClass(besoin.id)"
          >
            <span 
              class="open-btn mdi"
              :class="{ 'mdi-chevron-right': besoin.id !== opened_besoin_id, 'mdi-chevron-down': besoin.id === opened_besoin_id } "
              @click="onClickBesoin(besoin.id)"
              />
            <header>
              <label 
                class="mdi mdi-rhombus"
                :class="{ hover: hover_elmt && hover_elmt.type === 'besoin' && (hover_elmt.id === besoin.id || hover_elmt.bid === besoin.id) }"
                @click="onClickBesoin(besoin.id)"
                >
                  Besoin de l'enqueteur
              </label>
              <h4 class="besoin-description" v-html="besoin.description"/>
              <a 
                v-if="isloggedin"
                :href="'/api/node/add/reponse?besoin_id='+besoin.id" 
                target="_blank" 
                rel="noopener noreferrer"
                class="contribute-link mdi mdi-pencil-plus">
                  contribuer à ce besoin
              </a>
            </header>
            <ul class="reponses">
              <li
                v-for="reponse in besoin.reponses"
                :key="reponse.id"
                class="reponse"
                :id="reponse.id"
              >
                <label class="mdi mdi-rhombus-outline">Ressource</label>
                <section v-if="reponse.qui">
                  <label for="reponse-qui">Qui</label>
                  <p name="reponse-qui" v-html="reponse.qui" />
                </section>
                <section v-if="reponse.quoi">
                  <label for="reponse-quoi">Quoi</label>
                  <p name="reponse-quoi" v-html="reponse.quoi" />
                </section>    
                <section v-if="reponse.ou">
                  <label for="reponse-ou">Où</label>
                  <p name="reponse-ou" v-html="reponse.ou" />
                </section>    
                <section v-if="reponse.avec">
                  <label for="reponse-avec">Avec</label>
                  <p name="reponse-avec" v-html="reponse.avec" />
                </section>    
              </li>
            </ul>
          </li>
        </ul>
    </section>
    <section
      v-if="map_mode === 'doleancer'"
      class="content-doleances">
        <section
          v-for="doleance in opened.doleances"
          class="doleance">
            <header>
              <label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label>
              <h4 name="leprobleme">{{ doleance.leprobleme }}</h4>

              <label for="lenquete">{{ ct_cercle_politique.field_enquete_terraindevie.label }}</label>
              <h3 name="lenquete">{{ doleance.lenquete }}</h3>
            </header>
            <section class="groupesinterets">
              <h2>{{ ct_cercle_politique.field_groupes.label }}</h2>
              <ul>
                <li
                  v-for="groupe in doleance.groupesinterets">
                    
                    <label for="groupe">{{ p_groupes_interets.field_groupe_interets.label }}</label>
                    <p name="groupe" v-html="groupe.groupe_interets" />
                    <label for="accorder">{{ p_groupes_interets.field_accorder_interets.label }}</label>
                    <p name="accorder" v-html="groupe.accorder_interets" />
                    <label for="formuler">{{ p_groupes_interets.field_formuler.label }}</label>
                    <p name="formuler" v-html="groupe.formuler" />
                </li>
              </ul>
            </section>
            <section class="adresse">
              <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" />
              <h2>{{ ct_cercle_politique.field_receptions_et_traitements.label }}</h2>
              <ul class="reception_traitement">
                <li
                  v-for="rec in doleance.reception_traitement">
                    <label for="entite_adressee">{{ p_reception_et_traitement.field_entite_adressee.label }}</label>
                    <p name="entite_adressee" v-html="rec.entite_adressee" />
                    <label for="doleance_formulee">{{ p_reception_et_traitement.field_doleance_formulee.label }}</label>
                    <p name="doleance_formulee" v-html="rec.doleance_formulee" />
                    <label for="traite_doleance">{{ p_reception_et_traitement.field_traite_doleance.label }}</label>
                    <p name="traite_doleance" v-html="rec.traite_doleance" />
                    <label for="entite_recoit_doleance">{{ p_reception_et_traitement.field_entite_recoit_doleance.label }}</label>
                    <p name="entite_recoit_doleance" v-html="rec.entite_recoit_doleance" />
                </li>
              </ul>               
            </section>
            <section class="miseenoeuvre">
              <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" />
              <h2>{{ ct_cercle_politique.field_mise_en_oeuvre_decision.label }}</h2>
              <ul class="mise_en_oeuvre_decision">
                <li
                  v-for="dec in doleance.mise_en_oeuvre_decision">
                    <label for="entite_adresse_decision">{{ p_mise_en_oeuvre_decision.field_entite_adresse_decision.label }}</label>
                    <p name="entite_adresse_decision" v-html="dec.entite_adresse_decision" />
                    <label for="formule_decision">{{ p_mise_en_oeuvre_decision.field_formule_decision.label }}</label>
                    <p name="formule_decision" v-html="dec.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="dec.entite_metenoeuvre_decisio" />
                </li>
              </ul>
            </section>
            <section class="receptions_et_applications">
              <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" />
              <h2>{{ ct_cercle_politique.field_receptions_et_applications.label }}</h2>
              <ul class="receptions_et_applications">
                <li
                  v-for="app in doleance.receptions_et_applications">
                    <label for="applique_decision">{{ p_reception_application_decision.field_applique_decision.label }}</label>
                    <p name="applique_decision" v-html="app.applique_decision" />
                    <label for="formule_decision_applic">{{ p_reception_application_decision.field_formule_decision_applic.label }}</label>
                    <p name="formule_decision_applic" v-html="app.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="app.entite_recoit_decision" />
                </li>
              </ul>

              <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>
        </section>
    </section>
  </section>
</template>

<style lang="scss" scoped>

</style>