cercle politique nav is done #2156

This commit is contained in:
2023-07-11 22:55:25 +02:00
parent 28c653dcab
commit 58f77d22e3
7 changed files with 359 additions and 163 deletions

View File

@@ -7,11 +7,15 @@ 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: ['id'],
data(){
return {
doleance: null,
doleance_selected: null
}
},
computed: {
@@ -25,21 +29,58 @@ export default {
'p_mise_en_oeuvre_decision',
'p_reception_application_decision'
]),
...mapState(CommonStore,['hover_elmt'])
...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']),
openDoleance(did){
console.log('openDoleance', did);
this.setOpenedDoleance(parseInt(this.id), did)
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
CartoucheLayout,
vSelect
}
}
@@ -56,108 +97,179 @@ export default {
<template v-slot:main>
<section
class="content-doleances">
<section
v-for="doleance in opened_concernement.doleances"
class="doleance">
<header
@click="openDoleance(doleance.id)">
<label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label>
<h3 name="leprobleme">{{ doleance.leprobleme }}</h3>
</header>
<main>
<section class="lenquete">
<label for="lenquete">{{ ct_cercle_politique.field_enquete_terraindevie.label }}</label>
<h4 name="lenquete">{{ doleance.lenquete }}</h4>
</section>
<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>
<section class="groupesinterets">
<h5>{{ ct_cercle_politique.field_groupes.label }}</h5>
<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>
<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>Enquête menée sur le terrain de vie</h5>
<label for="lenquete">{{ ct_cercle_politique.field_enquete_terraindevie.label }}</label>
<h4 name="lenquete">{{ doleance.lenquete }}</h4>
</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" />
<h5>{{ ct_cercle_politique.field_receptions_et_traitements.label }}</h5>
<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
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 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" />
<h5>{{ ct_cercle_politique.field_mise_en_oeuvre_decision.label }}</h5>
<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
v-if="opened_concernement.opened_doleance.field === 'adresse_de_la_doleance'"
class="adresse">
<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" />
<h5>{{ ct_cercle_politique.field_receptions_et_applications.label }}</h5>
<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>
<h5>Adresse de la doléance</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>
<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>