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

1228 lines
50 KiB
Vue

<script>
import { mapActions, mapState } from 'pinia'
import { ConcernementsStore } from '@stores/concernements'
import { UserStore } from '@/stores/user'
import { CommonStore } from '@/stores/common'
import REST from '@api/rest-axios'
// 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'
import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiArrowLeft } from '@mdi/js';
import { mdiArrowRight } from '@mdi/js';
import { mdiStickerPlusOutline } from '@mdi/js';
import ContentEditable from '@components/editable/ContentEditable.vue';
import DateEditable from '@components/editable/DateEditable.vue';
import SelectEditable from '@components/editable/SelectEditable.vue';
// import CheckboxEditable from '@components/editable/CheckboxEditable.vue';
export default {
props: ['cid'],
data(){
return {
doleance: null,
doleance_selected: null,
doleance_index: null,
arrowleft_path: mdiArrowLeft,
arrowright_path: mdiArrowRight,
mdiStickerPlusOutline_path: mdiStickerPlusOutline,
reloading_concernements: false
}
},
computed: {
...mapState(ConcernementsStore,['map_mode',
'opened_concernement',
'concernementsByID',
'ct_concernement',
'ct_cercle_politique',
'p_groupes_interets',
'p_reception_et_traitement',
'p_mise_en_oeuvre_decision',
'p_reception_application_decision',
'reloadConcernementCerclePol'
]),
...mapState(UserStore,['name',
'csrf_token',
'isloggedin',
'user_entites']),
...mapState(CommonStore,['hover_elmt']),
//
opened_dol() {
return this.opened_concernement.opened_doleance;
},
groupeinteret() {
return this.doleance.groupesinterets[this.opened_dol.field_index];
},
receptionettraitment() {
return this.doleance.reception_traitement[this.opened_dol.field_index];
},
miseenoeuvredecision() {
return this.doleance.mise_en_oeuvre_decision[this.opened_dol.field_index];
},
receptionsetapplications() {
return this.doleance.receptions_et_applications[this.opened_dol.field_index];
}
},
created () {
this.concernement = this.concernementsByID[this.cid];
console.log(`Doleancer content created, id: ${this.cid}, doleances:`,this.concernement.doleances, "opened_doleance" ,this.concernement.opened_doleance);
this.concernement.doleances.forEach((doleance, index) => {
if (doleance.id === this.concernement.opened_doleance.id) {
this.doleance = doleance;
this.doleance_index = index;
}
});
},
mounted() {
if(this.concernement && this.concernement.doleances.length){
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() {
if(this.concernement && this.concernement.doleances.length){
this.setOpenedDoleance(parseInt(this.cid), this.concernement.doleances[0].id);
}
},
watch: {
opened_concernement: {
handler (n, o) {
console.log(`${this.cid} watch opened_concernement o, n`, o, n);
if (!n) { // if there is no opened concernement
} else {
this.concernement = this.concernementsByID[this.cid];
console.log(`Doleancer watched opened_concernement, id: ${this.cid}, doleances:`,this.concernement.doleances, "opened_doleance", this.concernement.opened_doleance);
this.concernement.doleances.forEach((doleance, index) => {
if (doleance.id === this.concernement.opened_doleance.id) {
console.log('yes');
this.doleance = doleance;
this.doleance_index = index;
}
});
}
},
deep: true
}
},
methods: {
...mapActions(ConcernementsStore,['setOpenedDoleance',
'setOpenedDoleanceField'
]),
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(){
this.doleance = this.concernement.doleances[this.doleance_index];
console.log('openDoleance', this.doleance);
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)
},
// cercle po
addCerclePo(e){
console.log('add cerclepo');
this.reloading_concernements = true;
// 1 create entite node
this.createCerclepoNode()
.then((cerclepo) => {
console.log('createCerclepoNode then node', cerclepo);
// 2 record on concernement field_entites
this.recordConcernementDoleancerField(cerclepo)
.then((concernement) => {
console.log('concernement', concernement);
// reload the map item
this.reloadConcernementCerclePol(concernement.nid[0].value)
.then(() => {
this.reloading_concernements = false;
});
})
})
},
createCerclepoNode(){
return new Promise((resolve, reject) => {
// 1 create entite node
const params_node_cerclepo = {
type: 'cercle_politique',
title: [{value:'Titre à personaliser'}]
};
const configs = {
headers: {'X-CSRF-Token': this.csrf_token}
};
REST.post(`/node?_format=json`, params_node_cerclepo, configs)
.then(({ data }) => {
console.log('REST post new node cercle_politique', data);
resolve(data)
})
.catch(error => {
console.warn(`Issue with post new node cercle_politique`, error)
reject(error)
})
})
},
// adresse doleance
addAdresseDoleance(e){
this.setOpenedDoleanceField(this.cid, this.doleance.id, "adresse_de_la_doleance");
},
// decision
addDecision(e){
this.setOpenedDoleanceField(this.cid, this.doleance.id, "decision");
},
// adresse de al decision
addAdresseDecision(e){
this.setOpenedDoleanceField(this.cid, this.doleance.id, "adresse_de_la_decision");
},
// reception et application decision
addReceptionApplicationDecision(e){
this.createCerclepoParagGeneric('reception_application_decision', 'field_receptions_et_applications', 'receptions_et_applications');
},
// reussite / echec
addReussiteEchec(e){
this.setOpenedDoleanceField(this.cid, this.doleance.id, "probleme_initial_resolu");
},
// groupe interet
addgroupInteret(e){
this.createCerclepoParagGeneric('groupes_interets', 'field_groupes', 'groupesinterets')
.then(()=>{
this.setOpenedDoleanceField(this.cid, this.doleance.id, "groupesinterets", this.doleance.groupesinterets.length-1);
});
},
addReceptionEtTraitement(e){
this.createCerclepoParagGeneric('reception_et_traitement', 'field_receptions_et_traitements', 'reception_traitement');
},
addMiseEnOeuvre(e){
this.createCerclepoParagGeneric('mise_en_oeuvre_decision', 'field_mise_en_oeuvre_decision', 'mise_en_oeuvre_decision');
},
createCerclepoParagGeneric(type, prt_field_name, obj_name){
console.log('createCerclepoParagGeneric',type, prt_field_name, obj_name);
return new Promise((resolve, reject) => {
this.reloading_concernements = true;
// 1 create paragraphe
this.createParag(type, prt_field_name)
.then((parag) => {
console.log('createParag then parag', parag);
// 3 record on concernement field_entites
this.recordCerclepoParagField(parag, obj_name, prt_field_name)
.then((cercle_politique) => {
console.log('cercle_politique', cercle_politique);
// reload concernement doleances
this.reloadConcernementCerclePol(this.concernement.id)
.then(() => {
this.reloading_concernements = false;
resolve();
});
})
})
});
},
createParag(type, prt_field_name){
return new Promise((resolve, reject) => {
// 2 create paragraphe
const params_parag = {
type: [{target_id: type}],
parent_type:{value: 'node'},
parent_id:{value: this.opened_concernement.opened_doleance.id},
parent_field_name:{value: prt_field_name}, // entity reference revision
};
const configs = {
headers: {'X-CSRF-Token': this.csrf_token}
};
REST.post(`/entity/paragraph?_format=json`, params_parag, configs)
.then(({ data }) => {
console.log('REST post new parag', data);
resolve(data)
})
.catch(error => {
console.warn(`Issue with post new paragraph`, error)
reject(error)
})
})
},
recordCerclepoParagField(parag, obj_name, field_name){
return new Promise((resolve, reject) => {
// 3 record concernement field_entite
// get all the field_entite values, we don't want to ersae everything
let parag_records = [];
this.concernement.doleances.forEach((doleance) =>{
if (doleance.id === this.opened_concernement.opened_doleance.id) {
doleance[obj_name].forEach((fied) => {
console.log('fied',fied);
parag_records.push({
target_id: fied.id,
target_revision_id: fied.revision_id
})
})
}
})
console.log('parag_records', parag_records);
// add the new field value
parag_records.push({
target_id: parag.id[0].value,
target_revision_id: parag.revision_id[0].value
})
console.log('parag_records', parag_records);
const params_node = {
type: 'cercle_politique',
nid: [{value: this.opened_concernement.opened_doleance.id}],
// 'field_groupes': parag_records
};
params_node[field_name] = parag_records;
const configs = {
headers: {'X-CSRF-Token': this.csrf_token}
};
REST.patch(`/node/${this.opened_concernement.opened_doleance.id}?_format=json`, params_node, configs)
.then(({ data }) => {
console.log('REST patch cercle_politique new parag field', data)
resolve(data)
})
.catch(error => {
console.warn(`Issue with patch cercle_politique new parag field`, error)
reject(error)
})
// resolve('test')
})
},
recordConcernementDoleancerField(node){
return new Promise((resolve, reject) => {
// 2 record concernement field_doleancer
// get all the field_entite values, we don't want to ersae everything
let doleances = [];
this.concernement.doleances.forEach((doleance) =>{
doleances.push({
target_id: doleance.id
})
})
// add the new field value
doleances.push({
target_id: node.nid[0].value
})
console.log('doleances', doleances);
const params_node = {
type: 'concernement',
nid: [{value: this.cid}],
'field_doleancer': doleances
};
const configs = {
headers: {'X-CSRF-Token': this.csrf_token}
};
REST.patch(`/node/${this.cid}?_format=json`, params_node, configs)
.then(({ data }) => {
console.log('REST patch node new field_doleancer', data)
resolve(data)
})
.catch(error => {
console.warn(`Issue with patch node field_doleancer`, error)
reject(error)
})
// resolve('test')
})
},
reloadConcernementCerclePolAndChangeActiveField(field, field_index){
this.reloadConcernementCerclePol(this.cid)
.then((concernement) => {
// this.opened_concernement.opened_doleance.field = field;
this.setOpenedDoleanceField(this.cid, this.doleance.id, field, field_index);
});
}
},
components: {
CartoucheLayout,
SvgIcon,
ContentEditable,
DateEditable,
SelectEditable
// CheckboxEditable,
}
}
</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_dol && opened_dol.id === doleance.id">
<ContentEditable
tag="h3"
:value="doleance.title"
class="doleance-title"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'node',
bundle: 'cercle_politique',
id: doleance.id,
field: {field_name: 'title', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<section
v-if="opened_dol.field === 'leprobleme' || !opened_dol.field">
<!-- <span class="date">{{ doleance.date_leprobleme.start }}</span> -->
<h5>{{ ct_cercle_politique.field_le_probleme.label }}</h5>
<DateEditable
:value="doleance.date_leprobleme.start"
class="leprobleme-date"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'node',
bundle: 'cercle_politique',
id: doleance.id,
field: {field_name: 'field_date_leprobleme'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<ContentEditable
tag="h4"
:value="doleance.leprobleme"
class="doleance-leprobleme"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'node',
bundle: 'cercle_politique',
id: doleance.id,
field: {field_name: 'field_le_probleme', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
</section>
<section
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>
<!-- <h4 name="lenquete">{{ doleance.lenquete }}</h4> -->
<ContentEditable
tag="h4"
:value="doleance.lenquete"
class="doleance-lenquete"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'node',
bundle: 'cercle_politique',
id: doleance.id,
field: {field_name: 'field_enquete_terraindevie', value:'value'}
}"
v-on:updated="reloadConcernementCerclePolAndChangeActiveField('lenquete')"/>
</section>
<section
v-if="opened_dol.field === 'groupesinterets'"
class="groupesinterets">
<h5>Construction de groupes d'intérets avec qui composer la doléance</h5>
<span class="date">
<!-- {{ groupeinteret.date.start }}
&#x2192;
{{ groupeinteret.date.end }} -->
<DateEditable
:value="groupeinteret.date.start"
:end_value="groupeinteret.date.end"
class="groupeinteret-date"
: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>
<section>
<label for="groupe">{{ p_groupes_interets.field_groupe_interets.label }}</label>
<!-- <p
name="groupe"
v-html="groupeinteret.groupe_interets" /> -->
<ContentEditable
tag="p"
name="group"
:value="groupeinteret.groupe_interets"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'paragraph',
bundle: 'groupes_interets',
id: groupeinteret.id,
revision_id: groupeinteret.revision_id,
field: {field_name: 'field_groupe_interets', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<label for="accorder">{{ p_groupes_interets.field_accorder_interets.label }}</label>
<!-- <p
name="accorder"
v-html="groupeinteret.accorder_interets" /> -->
<ContentEditable
tag="p"
name="accorder"
:value="groupeinteret.accorder_interets"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'paragraph',
bundle: 'groupes_interets',
id: groupeinteret.id,
revision_id: groupeinteret.revision_id,
field: {field_name: 'field_accorder_interets', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<label for="formuler">{{ p_groupes_interets.field_formuler.label }}</label>
<!-- <p
name="formuler"
v-html="groupeinteret.formuler" /> -->
<ContentEditable
tag="p"
name="formuler"
:value="groupeinteret.formuler"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'paragraph',
bundle: 'groupes_interets',
id: groupeinteret.id,
revision_id: groupeinteret.revision_id,
field: {field_name: 'field_formuler', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
</section>
</section>
<section v-if="opened_dol.field === 'adresse_de_la_doleance'" class="adresse">
<h5>Adresse de la doléance</h5>
<!-- <span class="date">{{ doleance.date_adresse.start }}</span> -->
<DateEditable
:value="doleance.date_adresse.start"
class="adressedoleance-date"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'node',
bundle: 'cercle_politique',
id: doleance.id,
field: {field_name: 'field_date_adresse_doleance'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<label for="entite_adresse_doleance">{{ ct_cercle_politique.field_entite_adresse_doleance.label }}</label>
<!-- <p name="entite_adresse_doleance" v-html="doleance.entite_adresse_doleance" /> -->
<ContentEditable
tag="p"
name="entite_adresse_doleance"
:value="doleance.entite_adresse_doleance"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'node',
bundle: 'cercle_politique',
id: doleance.id,
field: {field_name: 'field_entite_adresse_doleance', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<label for="comment_enonce_doleance">{{ ct_cercle_politique.field_comment_enonce_doleance.label }}</label>
<!-- <p name="comment_enonce_doleance" v-html="doleance.comment_enonce_doleance" /> -->
<ContentEditable
tag="p"
name="comment_enonce_doleance"
:value="doleance.comment_enonce_doleance"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'node',
bundle: 'cercle_politique',
id: doleance.id,
field: {field_name: 'field_comment_enonce_doleance', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<label for="a_qui_adresse_doleance">{{ ct_cercle_politique.field_a_qui_adresse_doleance.label }}</label>
<!-- <p name="a_qui_adresse_doleance" v-html="doleance.a_qui_adresse_doleance" /> -->
<ContentEditable
tag="p"
name="a_qui_adresse_doleance"
:value="doleance.a_qui_adresse_doleance"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'node',
bundle: 'cercle_politique',
id: doleance.id,
field: {field_name: 'field_a_qui_adresse_doleance', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
</section>
<section
v-if="opened_dol.field === 'reception_traitement'"
class="reception_traitement">
<h5>Reception et traitement de la doléance</h5>
<span class="date">
<!-- {{ doleance.reception_traitement[opened_dol.field_index].date.start }}
&#x2192;
{{ doleance.reception_traitement[opened_dol.field_index].date.end }} -->
<DateEditable
:value="receptionettraitment.date.start"
:end_value="receptionettraitment.date.end"
class="receptionettraitment-date"
:contenteditable="opened_concernement.can_update"
mode="range"
:data="{
entitytype: 'paragraph',
bundle: 'reception_et_traitement',
id: receptionettraitment.id,
revision_id: receptionettraitment.revision_id,
field: {field_name: 'field_date_reception_traite'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
</span>
<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_dol.field_index].entite_recoit_doleance" /> -->
<ContentEditable
tag="p"
name="entite_recoit_doleance"
:value="receptionettraitment.entite_recoit_doleance"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'paragraph',
bundle: 'reception_et_traitement',
id: receptionettraitment.id,
revision_id: receptionettraitment.revision_id,
field: {field_name: 'field_entite_recoit_doleance', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<label for="traite_doleance">{{ p_reception_et_traitement.field_traite_doleance.label }}</label>
<!-- <p
name="traite_doleance"
v-html="doleance.reception_traitement[opened_dol.field_index].traite_doleance" /> -->
<ContentEditable
tag="p"
name="traite_doleance"
:value="receptionettraitment.traite_doleance"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'paragraph',
bundle: 'reception_et_traitement',
id: receptionettraitment.id,
revision_id: receptionettraitment.revision_id,
field: {field_name: 'field_traite_doleance', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<label for="doleance_formulee">{{ p_reception_et_traitement.field_doleance_formulee.label }}</label>
<!-- <p
name="doleance_formulee"
v-html="doleance.reception_traitement[opened_dol.field_index].doleance_formulee" /> -->
<ContentEditable
tag="p"
name="doleance_formulee"
:value="receptionettraitment.doleance_formulee"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'paragraph',
bundle: 'reception_et_traitement',
id: receptionettraitment.id,
revision_id: receptionettraitment.revision_id,
field: {field_name: 'field_doleance_formulee', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<label for="entite_adressee">{{ p_reception_et_traitement.field_entite_adressee.label }}</label>
<!-- <p
name="entite_adressee"
v-html="doleance.reception_traitement[opened_dol.field_index].entite_adressee" /> -->
<ContentEditable
tag="p"
name="entite_adressee"
:value="receptionettraitment.entite_adressee"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'paragraph',
bundle: 'reception_et_traitement',
id: receptionettraitment.id,
revision_id: receptionettraitment.revision_id,
field: {field_name: 'field_entite_adressee', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
</section>
<section
v-if="opened_dol.field === 'decision'"
class="decision">
<h5>Décision</h5>
<!-- <span class="date">{{ doleance.date_decision.start }}</span> -->
<DateEditable
:value="doleance.date_decision.start"
class="decision-date"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'node',
bundle: 'cercle_politique',
id: doleance.id,
field: {field_name: 'field_date_decision'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<label for="entites_decisionnaires">{{ ct_cercle_politique.field_entites_decisionnaires.label }}</label>
<!-- <p name="entites_decisionnaires" v-html="doleance.entites_decisionnaires" /> -->
<ContentEditable
tag="p"
name="entites_decisionnaires"
:value="doleance.entites_decisionnaires"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'node',
bundle: 'cercle_politique',
id: doleance.id,
field: {field_name: 'field_entites_decisionnaires', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<label for="decision_formulee">{{ ct_cercle_politique.field_decision_formulee.label }}</label>
<!-- <p name="decision_formulee" v-html="doleance.decision_formulee" /> -->
<ContentEditable
tag="p"
name="decision_formulee"
:value="doleance.decision_formulee"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'node',
bundle: 'cercle_politique',
id: doleance.id,
field: {field_name: 'field_decision_formulee', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
</section>
<section
v-if="opened_dol.field === 'mise_en_oeuvre_decision'"
class="mise_en_oeuvre_decision">
<h5>{{ ct_cercle_politique.field_mise_en_oeuvre_decision.label }}</h5>
<span class="date">
<!-- {{ doleance.mise_en_oeuvre_decision[opened_dol.field_index].date.start }}
&#x2192;
{{ doleance.mise_en_oeuvre_decision[opened_dol.field_index].date.end }} -->
<DateEditable
:value="miseenoeuvredecision.date.start"
:end_value="miseenoeuvredecision.date.end"
class="miseenoeuvredecision-date"
:contenteditable="opened_concernement.can_update"
mode="range"
:data="{
entitytype: 'paragraph',
bundle: 'mise_en_oeuvre_decision',
id: miseenoeuvredecision.id,
revision_id: miseenoeuvredecision.revision_id,
field: {field_name: 'field_date_miseeoeuvre_decision'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
</span>
<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_dol.field_index].entite_adresse_decision" /> -->
<ContentEditable
tag="p"
name="entite_adresse_decision"
:value="miseenoeuvredecision.entite_adressee_decision"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'paragraph',
bundle: 'mise_en_oeuvre_decision',
id: miseenoeuvredecision.id,
revision_id: miseenoeuvredecision.revision_id,
field: {field_name: 'field_entite_adresse_decision', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<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_dol.field_index].formule_decision" /> -->
<ContentEditable
tag="p"
name="formule_decision"
:value="miseenoeuvredecision.formule_decision"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'paragraph',
bundle: 'mise_en_oeuvre_decision',
id: miseenoeuvredecision.id,
revision_id: miseenoeuvredecision.revision_id,
field: {field_name: 'field_formule_decision', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<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_dol.field_index].entite_metenoeuvre_decisio" /> -->
<ContentEditable
tag="p"
name="entite_metenoeuvre_decisio"
:value="miseenoeuvredecision.entite_metenoeuvre_decisio"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'paragraph',
bundle: 'mise_en_oeuvre_decision',
id: miseenoeuvredecision.id,
revision_id: miseenoeuvredecision.revision_id,
field: {field_name: 'field_entite_metenoeuvre_decisio', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
</section>
<section
v-if="opened_dol.field === 'adresse_de_la_decision'"
class="adresse_de_la_decision">
<h5>Adresse de la decision à appliquer</h5>
<!-- <span class="date">{{ doleance.date_adresse.start }}</span> -->
<DateEditable
:value="doleance.date_adresse.start"
class="adressedecision-date"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'node',
bundle: 'cercle_politique',
id: doleance.id,
field: {field_name: 'field_date_adresse_decision'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<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" /> -->
<ContentEditable
tag="p"
name="entite_adresse_application"
:value="doleance.entite_adresse_doleance"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'node',
bundle: 'cercle_politique',
id: doleance.id,
field: {field_name: 'field_entite_adresse_doleance', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<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" /> -->
<ContentEditable
tag="p"
name="aqui_adresse_decision"
:value="doleance.aqui_adresse_decision"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'node',
bundle: 'cercle_politique',
id: doleance.id,
field: {field_name: 'field_aqui_adresse_decision', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<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" /> -->
<ContentEditable
tag="p"
name="comment_formule_decision"
:value="doleance.comment_formule_decision"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'node',
bundle: 'cercle_politique',
id: doleance.id,
field: {field_name: 'field_comment_formule_decision', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
</section>
<section
v-if="opened_dol.field === 'receptions_et_applications'"
class="receptions_et_applications">
<h5>{{ ct_cercle_politique.field_receptions_et_applications.label }}</h5>
<!-- <span class="date">
{{ doleance.receptions_et_applications[opened_dol.field_index].date.start }}
&#x2192;
{{ doleance.receptions_et_applications[opened_dol.field_index].date.end }}
</span> -->
<DateEditable
:value="receptionsetapplications.date.start"
:end_value="receptionsetapplications.date.end"
class="receptionsetapplications-date"
:contenteditable="opened_concernement.can_update"
mode="range"
:data="{
entitytype: 'paragraph',
bundle: 'reception_application_decision',
id: receptionsetapplications.id,
revision_id: receptionsetapplications.revision_id,
field: {field_name: 'field_date_date_traitement_decis'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<label for="applique_decision">{{ p_reception_application_decision.field_applique_decision.label }}</label>
<!-- <p
name="applique_decision"
v-html="doleance.receptions_et_applications[opened_dol.field_index].applique_decision" /> -->
<ContentEditable
tag="p"
name="applique_decision"
:value="receptionsetapplications.applique_decision"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'paragraph',
bundle: 'reception_application_decision',
id: receptionsetapplications.id,
revision_id: receptionsetapplications.revision_id,
field: {field_name: 'field_applique_decision', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<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_dol.field_index].formule_decision_applic" /> -->
<ContentEditable
tag="p"
name="formule_decision_applic"
:value="receptionsetapplications.formule_decision_applic"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'paragraph',
bundle: 'reception_application_decision',
id: receptionsetapplications.id,
revision_id: receptionsetapplications.revision_id,
field: {field_name: 'field_formule_decision_applic', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<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_dol.field_index].entite_recoit_decision" /> -->
<ContentEditable
tag="p"
name="entite_recoit_decision"
:value="receptionsetapplications.entite_recoit_decision"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'paragraph',
bundle: 'reception_application_decision',
id: receptionsetapplications.id,
revision_id: receptionsetapplications.revision_id,
field: {field_name: 'field_entite_recoit_decision', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
</section>
<section
v-if="opened_dol.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" /> -->
<SelectEditable
label="résolu"
:value="doleance.probleme_initial_resolu"
:options="{
'0': 'non',
'1': 'oui'}"
:data="{
entitytype: 'node',
bundle: 'cercle_politique',
nid: doleance.id,
field: 'field_probleme_initial_resolu'}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<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" /> -->
<ContentEditable
tag="p"
name="oui_nouvelle_situation"
:value="doleance.oui_nouvelle_situation"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'node',
bundle: 'cercle_politique',
id: doleance.id,
field: {field_name: 'field_oui_nouvelle_situation', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<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" /> -->
<ContentEditable
tag="p"
name="non_adresse_doleance"
:value="doleance.non_adresse_doleance"
:html="true"
:class="{ ellipsed: headerreduced }"
:contenteditable="opened_concernement.can_update"
:data="{
entitytype: 'node',
bundle: 'cercle_politique',
id: doleance.id,
field: {field_name: 'field_non_adresse_doleance', value:'value'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
</section>
</template>
</section>
</template>
<template v-slot:footer>
<template v-if="concernement.can_update && opened_concernement.opened_doleance">
<template v-if="opened_concernement.opened_doleance.field === 'decision' || opened_concernement.opened_doleance.field === 'mise_en_oeuvre_decision'">
<div
v-if="!reloading_concernements"
@click="addMiseEnOeuvre"
class="add-miseenoeuvre-btn btn">
<span>Ajouter une mise-en-œuvre de la décision</span>
<svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
</div>
<div v-else class="add-miseenoeuvre-btn btn">
<div class="loading">Chargement</div>
</div>
</template>
<template v-if="opened_concernement.opened_doleance.field === 'adresse_de_la_doleance' || opened_concernement.opened_doleance.field === 'reception_traitement'">
<div
v-if="!reloading_concernements"
@click="addReceptionEtTraitement"
class="add-receptiontraitement-btn btn">
<span>Ajouter réception et traitement</span>
<svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
</div>
<div v-else class="add-receptiontraitement-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"
@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 === 'adresse_de_la_decision' || opened_concernement.opened_doleance.field === 'receptions_et_applications'">
<div
v-if="!reloading_concernements"
@click="addReceptionApplicationDecision"
class="add-receptionapplicationdecision-btn btn">
<span>Ajouter réception et application</span>
<svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
</div>
<div v-else class="add-receptionapplicationdecision-btn btn">
<div class="loading">Chargement</div>
</div>
</template>
<template v-if="opened_concernement.opened_doleance.field === 'receptions_et_applications'">
<div
v-if="!reloading_concernements"
@click="addReussiteEchec"
class="add-receptionapplicationdecision-btn btn">
<span>Reussite / échec</span>
<svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
</div>
<div v-else class="add-receptionapplicationdecision-btn btn">
<div class="loading">Chargement</div>
</div>
</template>
<template v-if="opened_concernement.opened_doleance.field === 'mise_en_oeuvre_decision'">
<div
v-if="!reloading_concernements"
@click="addAdresseDecision"
class="add-adressedecision-btn btn">
<span>Adresse de la décision à appliquer</span>
<svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
</div>
<div v-else class="add-adressedecision-btn btn">
<div class="loading">Chargement</div>
</div>
</template>
<template v-if="opened_concernement.opened_doleance.field === 'reception_traitement'">
<div
v-if="!reloading_concernements"
@click="addDecision"
class="add-decision-btn btn">
<span>Décision</span>
<svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
</div>
<div v-else class="add-decision-btn btn">
<div class="loading">Chargement</div>
</div>
</template>
<template v-if="opened_concernement.opened_doleance.field === 'groupesinterets'">
<div
v-if="!reloading_concernements"
@click="addAdresseDoleance"
class="add-adressedoleance-btn btn">
<span>Adresse de la doléance</span>
<svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
</div>
<div v-else class="add-adressedoleance-btn btn">
<div class="loading">Chargement</div>
</div>
</template>
</template>
<template v-if="!opened_concernement.opened_doleance || opened_concernement.opened_doleance.field === 'leprobleme' || opened_concernement.opened_doleance.field === 'lenquete'">
<div v-if="!reloading_concernements"
@click="addCerclePo"
class="add-cerclepo-btn btn">
<span>Ajouter un cercle politique</span>
<svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
</div>
<div v-else class="add-cerclepo-btn btn">
<div class="loading">Chargement</div>
</div>
</template>
<!-- <vue-plyr>
<div class="plyr__video-embed"> -->
<iframe
v-if="!opened_concernement.opened_doleance || opened_concernement.opened_doleance.field === 'leprobleme' || opened_concernement.opened_doleance.field === 'lenquete'"
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>