loading doleance data, displaying doleance icon

src/api/gql/concernement.fragment.gql

@@ -46,4 +46,50 @@ fragment ConcernementFields on Concernement {
       quoi
     }
   }
+  doleances {
+    id
+    author
+    bundle
+    path
+    title
+    uuid
+    #1
+    leprobleme
+    lenquete
+    groupesinterets {
+      groupe_interets
+      accorder_interets
+      formuler
+    }
+    #2
+    entite_addresse_doleance
+    comment_ennonce_doleance
+    aqui_addresse_doleance
+    reception_traitement {
+      entite_adressee
+      doleance_formulee
+      traite_doleance
+      entite_recoit_doleance
+    }
+    #3
+    entites_decisionnaires
+    decision_formule
+    mise_en_oeuvre_decision {
+      entite_adresse_decision
+      formule_decision
+      entite_metenoeuvre_decisio
+    }
+    #4
+    entite_adresse_application
+    aqui_adresse_decision
+    comment_formule_decision
+    receptions_et_applications {
+      applique_decision
+      formule_decision_applic
+      entite_recoit_decision
+    }
+    probleme_initial_resolu
+    oui_nouvelle_situation
+    non_adresse_doleance
+  }
 }

src/components/ConcernementMapItem.vue

@@ -520,13 +520,17 @@ export default {
       // record the position from the main matter body
       this.pos = this.body.position;
 
+      // drawing backgrounds
       if (this.opened) {
         switch (this.map_mode) {
           case 'terraindevie':
-            this.drawBoussole();
+            this.drawBoussoleBG();
             break;
           case 'puissancedagir':
-            this.drawPuissanceagir();
+            this.drawPuissanceagirBG();
+            break;
+          case 'doleancer':
+            this.drawDoleancerBG();
             break;
         }
       }
@@ -538,12 +542,21 @@ export default {
       } 
 
       // map mode puissance d'agir
-      // if not opened and has_puissancedagir draw the puissance d'agir icone
       if (this.concernement.has_puissancedagir && this.map_mode === "puissancedagir") {
         if (!this.opened) {
-          this.drawPuissanceagirIcon();
+          this.drawPuissanceagirIcon(); // if not opened and has_puissancedagir draw the puissance d'agir icone
         } else {
-          this.drawBesoins()
+          this.drawBesoins();
+        }
+      }
+
+      // map mode doleancer
+      // if not opened and has_doleance draw the doleance icone
+      if (this.concernement.has_doleance && this.map_mode === "doleancer") {
+        if (!this.opened) {
+          this.drawDoleanceIcon(); // if not opened and has_puissancedagir draw the puissance d'agir icone
+        } else {
+          this.drawDoleanceSteps();
         }
       }
 
@@ -553,7 +566,7 @@ export default {
       
       
     },
-    drawPuissanceagir(){
+    drawPuissanceagirBG(){
       
       for (let i = 1; i < 6; i++) {
         this.ctx.beginPath();
@@ -688,7 +701,74 @@ export default {
       this.ctx.lineTo(x - r, y);
       this.ctx.lineTo(x, y - r);
     },
-    drawBoussole(){
+    drawDoleanceIcon(){
+      var r = 20 * this.scale; // ray
+      var dr = r/2;            // demi ray
+      var d = r*2;              // diameter
+
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 1;
+      this.ctx.strokeStyle = `#000`;
+      this.ctx.arc(this.pos.x, this.pos.y, r, 0, 2 * Math.PI, false);
+      this.ctx.stroke();
+      
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 1;
+      this.ctx.strokeStyle = `#000`;
+      this.ctx.arc(this.pos.x, this.pos.y, dr, 0, 2 * Math.PI, false);
+      this.ctx.stroke();
+      
+
+      // axes
+      this.ctx.beginPath();
+      this.ctx.lineWidth = 1;
+      this.ctx.strokeStyle = `#000`;
+      // vertical
+      this.ctx.moveTo(this.pos.x, this.pos.y - r);
+      this.ctx.lineTo(this.pos.x , this.pos.y - dr);
+      this.ctx.moveTo(this.pos.x, this.pos.y + r);
+      this.ctx.lineTo(this.pos.x , this.pos.y + dr);
+      // this.ctx.moveTo(this.pos.x, this.pos.y - r);
+      // this.ctx.lineTo(this.pos.x , this.pos.y + r);
+      
+      // horizontal
+      this.ctx.moveTo(this.pos.x - r, this.pos.y);
+      this.ctx.lineTo(this.pos.x - dr, this.pos.y);
+      this.ctx.moveTo(this.pos.x + r, this.pos.y);
+      this.ctx.lineTo(this.pos.x + dr, this.pos.y);
+      // this.ctx.moveTo(this.pos.x - r, this.pos.y);
+      // this.ctx.lineTo(this.pos.x + r, this.pos.y);
+
+      // diagonale
+      // https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg
+      // https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9
+      // radians = degrees * (pi/180)
+      // degrees = radians * (180/pi)
+      let m,n;
+      m = Math.sin(45*(Math.PI/180)) * r;
+      n = Math.sin(45*(Math.PI/180)) * r/2;
+      // console.log('m', m);
+      this.ctx.moveTo(this.pos.x + m, this.pos.y + m);
+      this.ctx.lineTo(this.pos.x + n, this.pos.y + n);
+      //
+      this.ctx.moveTo(this.pos.x - m, this.pos.y + m);
+      this.ctx.lineTo(this.pos.x - n, this.pos.y + n);
+      //
+      this.ctx.moveTo(this.pos.x + m, this.pos.y - m);
+      this.ctx.lineTo(this.pos.x + n, this.pos.y - n);
+      //
+      this.ctx.moveTo(this.pos.x - m, this.pos.y - m);
+      this.ctx.lineTo(this.pos.x - n, this.pos.y - n);
+      
+      this.ctx.stroke();
+    },
+    drawDoleancerBG(){
+
+    },
+    drawDoleanceSteps(){
+
+    },
+    drawBoussoleBG(){
       // BOUSSOLE
       // exterieur circle
       this.ctx.beginPath();
@@ -850,7 +930,8 @@ export default {
     isFocused(){
       return this.map_mode === 'terraindevie'
           || (this.map_mode === 'action' && this.concernement.has_agissantes)
-          || (this.map_mode === 'puissancedagir' && this.concernement.has_puissancedagir);
+          || (this.map_mode === 'puissancedagir' && this.concernement.has_puissancedagir)
+          || (this.map_mode === 'doleancer' && this.concernement.has_doleance);
     }
   },
   render() {

src/components/ConcernementMapPopup.vue

@@ -112,7 +112,7 @@ export default {
           <li v-if="concernement.has_proximite" ><span class="icon proximite"></span></li>
           <li v-if="concernement.has_superposition" ><span class="icon superposition"></span></li>
           <li v-if="concernement.has_agissantes" ><span class="icon action"></span></li>
-          <li v-if="concernement.has_doleance" ><span class="icon puissancedagir"></span></li>
+          <li v-if="concernement.has_doleance" ><span class="icon doleancer"></span></li>
         </ul>
       </section>
       <section v-if="infos.type === 'entite'" class="entite-map-popup">

src/stores/concernements.js

@@ -78,6 +78,9 @@ export const ConcernementsStore = defineStore({
                 this.allBesoinsById[besoin.id] = besoin;
               });
 
+              // doleance
+              concernement.has_doleance = concernement.doleances.length ? true : false;
+
               // common
               this.concernements.push(concernement);
               this.concernementsByID[concernement.id] = concernement;