can choose doleance then get a click infos on doleance steps

src/components/ConcernementMapItem.vue

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

src/components/contents/Doleancer.vue

@@ -23,13 +23,21 @@ export default {
                                     'p_groupes_interets',
                                     'p_reception_et_traitement',
                                     'p_mise_en_oeuvre_decision',
-                                    'p_reception_application_decision']),
+                                    'p_reception_application_decision'
+                                  ]),
     ...mapState(CommonStore,['hover_elmt'])
 
   },
   created () {
     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: {
     CartoucheLayout
   }
@@ -51,98 +59,104 @@ export default {
           <section
             v-for="doleance in opened_concernement.doleances"
             class="doleance">
-              <header>
+              <header
+                @click="openDoleance(doleance.id)">
                 <label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label>
                 <h3 name="leprobleme">{{ doleance.leprobleme }}</h3>
-
-                <label for="lenquete">{{ ct_cercle_politique.field_enquete_terraindevie.label }}</label>
-                <h4 name="lenquete">{{ doleance.lenquete }}</h4>
               </header>
-              <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>
-              <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>
+              <main>
+                <section class="lenquete">
+                  <label for="lenquete">{{ ct_cercle_politique.field_enquete_terraindevie.label }}</label>
+                  <h4 name="lenquete">{{ doleance.lenquete }}</h4>
+                </section>
+
+                <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>
+
+                <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>
+                  <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>
     </template>

src/stores/concernements.js

@@ -87,6 +87,9 @@ export const ConcernementsStore = defineStore({
 
               // doleance
               concernement.has_doleance = concernement.doleances.length ? true : false;
+              if (concernement.has_doleance) {
+                concernement.opened_doleance = concernement.doleances[0].id;
+              }
               
               // recit
               concernement.has_recit = concernement.recit !== null;
@@ -242,24 +245,40 @@ export const ConcernementsStore = defineStore({
       this.opened_entite_id = id;
     },
     setBesoinPaperId(paper_id, cid, bid, rid){
-      this.concernements.forEach((c, i) => {
-        if(c.id === cid){
-          this.concernements[i].besoins.forEach((b,j) => {
+      // this.concernements.forEach((c, i) => {
+      //   if(c.id === cid){
+          this.concernementsByID[cid].besoins.forEach((b,j) => {
             if(b.id === bid) {
               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 {
-                this.concernements[i].besoins[j].reponses.forEach((r,k) => {
+                this.concernementsByID[cid].besoins[j].reponses.forEach((r,k) => {
                   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
+      };
     }
   }
 })