can choose doleance then get a click infos on doleance steps

This commit is contained in:
Bachir Soussi Chiadmi 2023-07-07 16:01:12 +02:00
parent d1164c4353
commit 28c653dcab
3 changed files with 198 additions and 137 deletions

View File

@ -162,9 +162,11 @@ export default {
}, },
methods: { methods: {
...mapActions(CommonStore,['setHoverElmt']), ...mapActions(CommonStore,['setHoverElmt']),
...mapActions(ConcernementsStore,['openCloseConcernements']), ...mapActions(ConcernementsStore,['openCloseConcernements',
...mapActions(ConcernementsStore,['hideShowConcernement']), 'hideShowConcernement',
...mapActions(ConcernementsStore,['setBesoinPaperId']), 'setBesoinPaperId',
'setOpenedDoleanceField']),
// getResponsiveRay(){ // getResponsiveRay(){
// return Math.min(this.canvas.width, this.canvas.height) * 0.08; // return Math.min(this.canvas.width, this.canvas.height) * 0.08;
// }, // },
@ -450,7 +452,14 @@ export default {
if (this.concernement.has_doleance) { if (this.concernement.has_doleance) {
this.addNewPaperSymbolInstance('doleance_bg'); this.addNewPaperSymbolInstance('doleance_bg');
this.addNewPaperSymbolInstance('doleance_icon'); this.addNewPaperSymbolInstance('doleance_icon');
this.paper_main_object.addChild(this.setPaperDoleanceSteps()); let g = new paper.Group({
pivot: new paper.Point({x:0,y:0}),
name: `doleances`
});
this.concernement.doleances.forEach((d) => {
g.addChild(this.setPaperDoleanceSteps(d))
});
this.paper_main_object.addChild(g);
} }
// console.log(`initPaperObjects ${this.id}`, this.paper_main_object); // console.log(`initPaperObjects ${this.id}`, this.paper_main_object);
@ -635,12 +644,13 @@ export default {
return g; return g;
}, },
setPaperDoleanceSteps(){ setPaperDoleanceSteps(doleance){
let g = new paper.Group({ let g = new paper.Group({
pivot: new paper.Point({x:0,y:0}), pivot: new paper.Point({x:0,y:0}),
name: 'doleance_steps' name: `doleance_${doleance.id}`,
doleance_id: doleance.id
}); });
let doleance = this.concernement.doleances[0]; // let doleance = this.concernement.doleances[0];
let all_fields = [ let all_fields = [
[ [
'leprobleme', 'leprobleme',
@ -717,8 +727,7 @@ export default {
// let fontsize = 4; // let fontsize = 4;
// // // TODO POINTS CARDINAUX
// // POINTS CARDINAUX
// // // //
// // le problème // // le problème
// // // //
@ -760,7 +769,10 @@ export default {
strokeWidth: 2, strokeWidth: 2,
fillColor: "rgba(255, 255, 255, 0.4)", fillColor: "rgba(255, 255, 255, 0.4)",
item_type: 'doleance_step', item_type: 'doleance_step',
item_id: 'lenquete' item_id: `lenquete`,
did: doleance.id,
field: 'lenquete',
field_index: null
}); });
cam.add({x: this.pos.x , y: this.pos.y + dr}); cam.add({x: this.pos.x , y: this.pos.y + dr});
cam.lineTo({x: this.pos.x, y: this.pos.y + r}); cam.lineTo({x: this.pos.x, y: this.pos.y + r});
@ -791,7 +803,10 @@ export default {
fillColor: "rgba(255, 255, 255, 0.4)", fillColor: "rgba(255, 255, 255, 0.4)",
closed: true, closed: true,
item_type: 'doleance_step', item_type: 'doleance_step',
item_id: 'probleme_initial_resolu', item_id: `probleme_initial_resolu`,
did: doleance.id,
field: 'probleme_initial_resolu',
field_index: null
}); });
rescam.add({x: this.pos.x + n, y: this.pos.y + n}); rescam.add({x: this.pos.x + n, y: this.pos.y + n});
rescam.lineTo({x: this.pos.x + m , y: this.pos.y + m}); rescam.lineTo({x: this.pos.x + m , y: this.pos.y + m});
@ -850,7 +865,9 @@ export default {
fillColor: "rgba(255, 255, 255, 0.4)", fillColor: "rgba(255, 255, 255, 0.4)",
item_type: 'doleance_step', item_type: 'doleance_step',
item_id: `${mf.field_name}-${i}`, item_id: `${mf.field_name}-${i}`,
item_field: mf.field_name did: doleance.id,
field: mf.field_name,
field_index: i
}); });
p.add([x1,y1]); p.add([x1,y1]);
p.lineTo([x2,y2]); p.lineTo([x2,y2]);
@ -978,14 +995,18 @@ export default {
if (this.map_mode === "doleancer") { if (this.map_mode === "doleancer") {
if (!this.is_opened) { if (!this.is_opened) {
this.paper_main_object.children.doleance_icon.visible = true; this.paper_main_object.children.doleance_icon.visible = true;
this.paper_main_object.children.doleance_steps.visible = false; this.paper_main_object.children.doleances.visible = false;
} else { } else {
this.paper_main_object.children.doleance_icon.visible = false; this.paper_main_object.children.doleance_icon.visible = false;
this.paper_main_object.children.doleance_steps.visible = true; this.paper_main_object.children.doleances.visible = true;
// display the right (opened) doleance
this.concernement.doleances.forEach((d) => {
this.paper_main_object.children.doleances.children[`doleance_${d.id}`].visible = d.id === this.concernement.opened_doleance;
})
} }
} else { } else {
this.paper_main_object.children.doleance_icon.visible = false; this.paper_main_object.children.doleance_icon.visible = false;
this.paper_main_object.children.doleance_steps.visible = false; this.paper_main_object.children.doleances.visible = false;
} }
} }
@ -1019,20 +1040,20 @@ export default {
let paper_group_tohit; let paper_group_tohit;
switch (this.map_mode) { switch (this.map_mode) {
case "terraindevie": case "terraindevie":
paper_group_tohit = 'entites'; paper_group_tohit = this.paper_main_object.children['entites'];
break; break;
case "action": case "action":
paper_group_tohit = 'agissantes'; paper_group_tohit = this.paper_main_object.children['agissantes'];
break; break;
case "puissancedagir": case "puissancedagir":
paper_group_tohit = 'puissanceagir_besoins'; paper_group_tohit = this.paper_main_object.children['puissanceagir_besoins'];
break; break;
case "doleancer": case "doleancer":
paper_group_tohit = 'doleance_steps'; paper_group_tohit = this.paper_main_object.children['doleances'].children[`doleance_${this.concernement.opened_doleance}`];
break; break;
} }
let result = this.paper_main_object.children[paper_group_tohit].hitTest(event.point); let result = paper_group_tohit.hitTest(event.point);
// console.log('move result', result); // console.log('move result', result);
if (result && result.item.item_id) { if (result && result.item.item_id) {
// console.log('move has result', result); // console.log('move has result', result);
@ -1066,8 +1087,8 @@ export default {
this.paper_main_object.onClick = function(event){ this.paper_main_object.onClick = function(event){
console.log('paper concernement onClick'); console.log('paper concernement onClick');
if (!this.is_opened) { if (!this.is_opened) { // si ce concernement n'est pas ouvet
if (!this.opened_concernement) { if (!this.opened_concernement) { // si aucun concernement n'est ouvert
console.log(`Open me ${this.id}`); console.log(`Open me ${this.id}`);
// open/close all concernements // open/close all concernements
this.openCloseConcernements(this.id) this.openCloseConcernements(this.id)
@ -1080,32 +1101,39 @@ export default {
// reset the mousehover // reset the mousehover
this.resetHoverElmt(); this.resetHoverElmt();
} }
} else { } else { // si ce concernement est ouvert
// lets define some options regarding the map_mode // lets define some options regarding the map_mode
// debugger; let group_to_hit = null;
let op = {pg: null};
switch (this.map_mode) { switch (this.map_mode) {
case "terraindevie": case "terraindevie":
op = { group_to_hit = this.paper_main_object.children['entites'];
pg: 'entites', // paper group to hittest
}
break; break;
case "action": case "action":
op = { group_to_hit = this.paper_main_object.children['agissantes'];
pg: 'agissantes', // paper group to hittest break;
} case "doleancer":
group_to_hit = this.paper_main_object.children['doleances'].children[`doleance_${this.concernement.opened_doleance}`];
break; break;
} }
if (op.pg) { if (group_to_hit) {
let result = this.paper_main_object.children[op.pg].hitTest(event.point); let result = group_to_hit.hitTest(event.point);
// console.log('click result', result); console.log('click result', result);
if (result) { if (result) {
// we have clicked on an entite switch (this.map_mode) {
this.$router.push({ case "terraindevie":
name: 'concernement', case "action":
hash: `#${this.map_mode}`, // we have clicked on an entite
params: {id: this.opened_concernement.id, eid: result.item.item_id} this.$router.push({
}); name: 'concernement',
hash: `#${this.map_mode}`,
params: {id: this.id, eid: result.item.item_id}
});
break;
case "doleancer":
this.setOpenedDoleanceField(this.id, result.item.did, result.item.field, result.item.field_index);
break;
}
} else { } else {
// otherwise we close the entite and come back to the concernement // otherwise we close the entite and come back to the concernement
this.$router.push({ this.$router.push({

View File

@ -23,13 +23,21 @@ export default {
'p_groupes_interets', 'p_groupes_interets',
'p_reception_et_traitement', 'p_reception_et_traitement',
'p_mise_en_oeuvre_decision', 'p_mise_en_oeuvre_decision',
'p_reception_application_decision']), 'p_reception_application_decision'
]),
...mapState(CommonStore,['hover_elmt']) ...mapState(CommonStore,['hover_elmt'])
}, },
created () { created () {
console.log(`Doleancer content created, id: ${this.id}, opened_concernement:`,this.opened_concernement); console.log(`Doleancer content created, id: ${this.id}, opened_concernement:`,this.opened_concernement);
}, },
methods: {
...mapActions(ConcernementsStore,['setOpenedDoleance']),
openDoleance(did){
console.log('openDoleance', did);
this.setOpenedDoleance(parseInt(this.id), did)
}
},
components: { components: {
CartoucheLayout CartoucheLayout
} }
@ -51,98 +59,104 @@ export default {
<section <section
v-for="doleance in opened_concernement.doleances" v-for="doleance in opened_concernement.doleances"
class="doleance"> class="doleance">
<header> <header
@click="openDoleance(doleance.id)">
<label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label> <label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label>
<h3 name="leprobleme">{{ doleance.leprobleme }}</h3> <h3 name="leprobleme">{{ doleance.leprobleme }}</h3>
<label for="lenquete">{{ ct_cercle_politique.field_enquete_terraindevie.label }}</label>
<h4 name="lenquete">{{ doleance.lenquete }}</h4>
</header> </header>
<section class="groupesinterets"> <main>
<h5>{{ ct_cercle_politique.field_groupes.label }}</h5> <section class="lenquete">
<ul> <label for="lenquete">{{ ct_cercle_politique.field_enquete_terraindevie.label }}</label>
<li <h4 name="lenquete">{{ doleance.lenquete }}</h4>
v-for="groupe in doleance.groupesinterets"> </section>
<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" />
<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 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 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>
<label for="probleme_initial_resolu">{{ ct_cercle_politique.field_probleme_initial_resolu.label }}</label> <section class="groupesinterets">
<p name="probleme_initial_resolu" v-html="doleance.probleme_initial_resolu" /> <h5>{{ ct_cercle_politique.field_groupes.label }}</h5>
<label for="oui_nouvelle_situation">{{ ct_cercle_politique.field_oui_nouvelle_situation.label }}</label> <ul>
<p name="oui_nouvelle_situation" v-html="doleance.oui_nouvelle_situation" /> <li
<label for="non_adresse_doleance">{{ ct_cercle_politique.field_non_adresse_doleance.label }}</label> v-for="groupe in doleance.groupesinterets">
<p name="non_adresse_doleance" v-html="doleance.non_adresse_doleance" />
<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>
</section> <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" />
<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 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 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>
<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> </section>
</section> </section>
</template> </template>

View File

@ -87,6 +87,9 @@ export const ConcernementsStore = defineStore({
// doleance // doleance
concernement.has_doleance = concernement.doleances.length ? true : false; concernement.has_doleance = concernement.doleances.length ? true : false;
if (concernement.has_doleance) {
concernement.opened_doleance = concernement.doleances[0].id;
}
// recit // recit
concernement.has_recit = concernement.recit !== null; concernement.has_recit = concernement.recit !== null;
@ -242,24 +245,40 @@ export const ConcernementsStore = defineStore({
this.opened_entite_id = id; this.opened_entite_id = id;
}, },
setBesoinPaperId(paper_id, cid, bid, rid){ setBesoinPaperId(paper_id, cid, bid, rid){
this.concernements.forEach((c, i) => { // this.concernements.forEach((c, i) => {
if(c.id === cid){ // if(c.id === cid){
this.concernements[i].besoins.forEach((b,j) => { this.concernementsByID[cid].besoins.forEach((b,j) => {
if(b.id === bid) { if(b.id === bid) {
if (!rid) { if (!rid) {
this.concernements[i].besoins[j].paper_id = this.concernementsByID[cid].besoins[j].paper_id = paper_id; // this.concernements[i].besoins[j].paper_id = this.concernementsByID[cid].besoins[j].paper_id = paper_id;
this.concernementsByID[cid].besoins[j].paper_id = paper_id;
} else { } else {
this.concernements[i].besoins[j].reponses.forEach((r,k) => { this.concernementsByID[cid].besoins[j].reponses.forEach((r,k) => {
if (r.id === rid) { if (r.id === rid) {
this.concernements[i].besoins[j].reponses[k].paper_id = this.concernementsByID[cid].besoins[j].reponses[k].paper_id = paper_id; // this.concernements[i].besoins[j].reponses[k].paper_id = this.concernementsByID[cid].besoins[j].reponses[k].paper_id = paper_id;
this.concernementsByID[cid].besoins[j].reponses[k].paper_id = paper_id;
} }
}) })
} }
} }
}) })
} // }
}) // })
},
setOpenedDoleance(cid, did){
console.log(`setOpenedDoleance(${cid}, ${did})`, cid, did);
this.concernementsByID[cid].opened_doleance = did;
// console.log('this.opened_concernement.opened_doleance', this.opened_concernement.opened_doleance);
},
setOpenedDoleanceField(cid, did, field, index){
console.log(`setOpenedDoleanceField`, cid, did, field, index);
this.concernementsByID[cid].opened_doleance_field = {
cid: cid,
did: did,
field: field,
index: index
};
} }
} }
}) })