display all doleance fields in cartouche

src/components/ConcernementMapItem.vue

@@ -753,6 +753,10 @@ export default {
         strokeColor: '#fff',
         strokeWidth: 1
       }
+      let felchesstyle = {
+        strokeColor: '#fff',
+        strokeWidth: 2
+      }
 
       let legende_style = {
         strokeColor: '#000',
@@ -880,7 +884,7 @@ export default {
             [this.pos.x, this.pos.y - dr*1.5],
             [this.pos.x - 2, this.pos.y - dr*1.5 + 2]
           ],
-          style: style
+          style: felchesstyle
         }),
         // bas
         new paper.Path({
@@ -889,7 +893,7 @@ export default {
             [this.pos.x, this.pos.y + dr*1.5],
             [this.pos.x + 2, this.pos.y + dr*1.5 + 2]
           ],
-          style: style
+          style: felchesstyle
         }),
         // gauche
         new paper.Path({
@@ -898,7 +902,7 @@ export default {
             [this.pos.x - dr*1.5, this.pos.y],
             [this.pos.x - dr*1.5 + 2, this.pos.y + 2]
           ],
-          style: style
+          style: felchesstyle
         }),
         // droite
         new paper.Path({
@@ -907,7 +911,7 @@ export default {
             [this.pos.x + dr*1.5, this.pos.y],
             [this.pos.x + dr*1.5 + 2, this.pos.y - 2]
           ],
-          style: style
+          style: felchesstyle
         }),
         //
         // LEGENDES
@@ -1033,7 +1037,8 @@ export default {
           justification: 'left'
         }),
         //
-        // legendes petits cercles
+        // Points Cardinaux
+        //
         // haut
         new paper.Path.Circle({
           center: [this.pos.x, this.pos.y -r],
@@ -1202,7 +1207,7 @@ export default {
     setPaperDoleanceSteps(){
       let g = new paper.Group({
         pivot: new paper.Point(this.pos),
-        name: 'doleance steps'
+        name: 'doleance_steps'
       });
       let doleance = this.concernement.doleances[0];
       let all_fields = [
@@ -1282,9 +1287,9 @@ export default {
       let fontsize = 2.1;
       
       //
-      // PREMIER QUART
+      // POINTS CARDINAUX
       //
-      // #1 le problème
+      // le problème
       //
       g.addChild(new paper.Path.Circle({
         center: [this.pos.x, this.pos.y + r],
@@ -1292,22 +1297,31 @@ export default {
         style: {
           fillColor: '#fff'
         }
-      }))
+      }));
       g.addChild(new paper.Path.Line({
         from: [this.pos.x, this.pos.y + r],
         to: [this.pos.x, this.pos.y + r + 8],
         strokeColor: '#fff'
-      }))
+      }));
       g.addChild(new paper.PointText({
-        point: [this.pos.x, this.pos.y + r + 10],
+          point: [this.pos.x, this.pos.y + r + 10],
+          content: "Début du cercle\nLe problème (injustice, indignation, plainte...)",
+          fontSize: fontsize,
+          fillColor: '#000',
+          justification: 'center'
+      }));
+      g.addChild(new paper.PointText({
+        point: [this.pos.x, this.pos.y + r + 16],
         content: doleance['leprobleme'],
-        fontSize: fontsize,
+        fontSize: 2.3,
         fillColor: '#fff',
         justification: 'center'
-      }))
-
+      }));
+      
       //
-      // #2 l'enquete
+      // CAMENBERT STATIQUES
+      //
+      // l'enquete
       //
       let enquete = new paper.Group({
         name: 'enquete'
@@ -1318,16 +1332,17 @@ export default {
         strokeWidth: 2,
         fillColor: "rgba(255, 255, 255, 0.4)"
       });
-      cam.add({x: this.pos.x , y: this.pos.y + dr});
-      cam.lineTo({x: this.pos.x, y: this.pos.y + r});
-      cam.arcTo({x: this.pos.x - p, y: this.pos.y + o}, {x: this.pos.x - m, y: this.pos.y + m});
-      cam.lineTo({x: this.pos.x - n, y: this.pos.y + n});
-      cam.arcTo({x: this.pos.x - p_d, y: this.pos.y + o_d}, {x: this.pos.x , y: this.pos.y + dr});
+
+      cam.add({x: this.pos.x + n, y: this.pos.y + n});
+      cam.lineTo({x: this.pos.x + m , y: this.pos.y + m});
+      cam.arcTo({x: this.pos.x + p, y: this.pos.y + o}, {x: this.pos.x, y: this.pos.y + r});
+      cam.lineTo({x: this.pos.x, y: this.pos.y + dr});
+      cam.arcTo({x: this.pos.x + p_d, y: this.pos.y + o_d}, {x: this.pos.x + n, y: this.pos.y + n});
       enquete.addChild(cam)
       // texte
       enquete.addChild(new paper.PointText({
         point: {
-          x:this.pos.x - Math.sin(22.5*(Math.PI/180)) * r*0.75,
+          x:this.pos.x + Math.sin(22.5*(Math.PI/180)) * r*0.75,
           y:this.pos.y + Math.cos(22.5*(Math.PI/180)) * r*0.75
         },
         content: doleance['lenquete'],
@@ -1337,30 +1352,47 @@ export default {
       }));
       g.addChild(enquete);
       
+      //
+      // probleme_initial_resolu
+      //
+      let resolution = new paper.Group({
+        name: 'resolution'
+      });
+      // camenbert
+      let rescam = new paper.Path({
+        strokeColor: '#fff',
+        strokeWidth: 2,
+        fillColor: "rgba(255, 255, 255, 0.4)"
+      });
+      rescam.add({x: this.pos.x , y: this.pos.y + dr});
+      rescam.lineTo({x: this.pos.x, y: this.pos.y + r});
+      rescam.arcTo({x: this.pos.x - p, y: this.pos.y + o}, {x: this.pos.x - m, y: this.pos.y + m});
+      rescam.lineTo({x: this.pos.x - n, y: this.pos.y + n});
+      rescam.arcTo({x: this.pos.x - p_d, y: this.pos.y + o_d}, {x: this.pos.x , y: this.pos.y + dr});
+      resolution.addChild(rescam)
+      // texte
+      resolution.addChild(new paper.PointText({
+        point: {
+          x:this.pos.x - Math.sin(22.5*(Math.PI/180)) * r*0.75,
+          y:this.pos.y + Math.cos(22.5*(Math.PI/180)) * r*0.75
+        },
+        content: doleance['probleme_initial_resolu'] ? doleance['oui_nouvelle_situation'] : doleance['non_adresse_doleance'],
+        fontSize: fontsize,
+        fillColor: '#fff',
+        justification: 'center'
+      }));
+      g.addChild(resolution);
+      
+
+      
       //
       // MULTIPLE FIELDS
       //
       let multiple_fields = [
-        {
-          field_name: 'groupesinterets',
-          arc: 45,
-          decalage: -45
-        },
-        {
-          field_name: 'reception_traitement',
-          arc: 90,
-          decalage: -90
-        },
-        {
-          field_name: 'mise_en_oeuvre_decision',
-          arc: 90,
-          decalage: -180
-        },
-        {
-          field_name: 'receptions_et_applications',
-          arc: 45,
-          decalage: 90 
-        }
+        { field_name: 'groupesinterets',            arc: 45, decalage: -45 },
+        { field_name: 'reception_traitement',       arc: 90, decalage: -90 },
+        { field_name: 'mise_en_oeuvre_decision',    arc: 90, decalage: -180 },
+        { field_name: 'receptions_et_applications', arc: 45, decalage: 90 }
       ]
 
       multiple_fields.forEach((mf, j) => {
@@ -1816,15 +1848,14 @@ export default {
         if (this.map_mode === "doleancer") {
           if (!this.is_opened) {
             this.paper_objects.children.doleance_icon.visible = true;
-            // this.paper_objects.children.doleance_steps.visible = false;
+            this.paper_objects.children.doleance_steps.visible = false;
           } else {
             this.paper_objects.children.doleance_icon.visible = false;
-            // this.paper_objects.children.doleance_steps.visible = true;
-            // this.drawBesoins();
+            this.paper_objects.children.doleance_steps.visible = true;
           }
         } else {
           this.paper_objects.children.doleance_icon.visible = false;
-          // this.paper_objects.children.doleance_steps.visible = false;
+          this.paper_objects.children.doleance_steps.visible = false;
         }
       }
     

src/stores/concernements.js

@@ -25,6 +25,11 @@ export const ConcernementsStore = defineStore({
     opened_entite_id: null,
     ct_concernement: {},
     ct_entite: {},
+    ct_cercle_politique: {},
+    p_groupes_interets: {},
+    p_reception_et_traitement: {},
+    p_mise_en_oeuvre_decision: {},
+    p_reception_application_decision: {},
     concernements_loaded: false,
   }),
   getters: {
@@ -123,7 +128,7 @@ export const ConcernementsStore = defineStore({
           
         })
 
-              // concernement
+      // entite
       body.variables = { type: 'node', bundle: 'entite' } 
       GQL.post('', body)
         .then(({ data: { data: { entitydef }}}) => {
@@ -135,6 +140,66 @@ export const ConcernementsStore = defineStore({
           
         })
 
+      // cercle_politique
+      body.variables = { type: 'node', bundle: 'cercle_politique' } 
+      GQL.post('', body)
+        .then(({ data: { data: { entitydef }}}) => {
+          // console.log('loadContentTypeDefinition entitydef', entitydef);
+          entitydef.fields.forEach(field => {
+            this.ct_cercle_politique[field.field_name] = field;
+          });
+          console.log('loadContentTypeDefinition entitydef cercle_politique', this.ct_cercle_politique);
+          
+        })
+
+      // paragraphe groupes_interets
+      body.variables = { type: 'paragraph', bundle: 'groupes_interets' } 
+      GQL.post('', body)
+        .then(({ data: { data: { entitydef }}}) => {
+          // console.log('loadContentTypeDefinition entitydef', entitydef);
+          entitydef.fields.forEach(field => {
+            this.p_groupes_interets[field.field_name] = field;
+          });
+          console.log('loadContentTypeDefinition entitydef p_groupes_interets', this.p_groupes_interets);
+          
+        })
+
+      // paragraphe reception_et_traitement
+      body.variables = { type: 'paragraph', bundle: 'reception_et_traitement' } 
+      GQL.post('', body)
+        .then(({ data: { data: { entitydef }}}) => {
+          // console.log('loadContentTypeDefinition entitydef', entitydef);
+          entitydef.fields.forEach(field => {
+            this.p_reception_et_traitement[field.field_name] = field;
+          });
+          console.log('loadContentTypeDefinition entitydef p_reception_et_traitement', this.p_reception_et_traitement);
+          
+        })
+
+      // paragraphe mise_en_oeuvre_decision
+      body.variables = { type: 'paragraph', bundle: 'mise_en_oeuvre_decision' } 
+      GQL.post('', body)
+        .then(({ data: { data: { entitydef }}}) => {
+          // console.log('loadContentTypeDefinition entitydef', entitydef);
+          entitydef.fields.forEach(field => {
+            this.p_mise_en_oeuvre_decision[field.field_name] = field;
+          });
+          console.log('loadContentTypeDefinition entitydef p_mise_en_oeuvre_decision', this.p_mise_en_oeuvre_decision);
+          
+        })
+
+      // paragraphe reception_application_decision
+      body.variables = { type: 'paragraph', bundle: 'reception_application_decision' } 
+      GQL.post('', body)
+        .then(({ data: { data: { entitydef }}}) => {
+          // console.log('loadContentTypeDefinition entitydef', entitydef);
+          entitydef.fields.forEach(field => {
+            this.p_reception_application_decision[field.field_name] = field;
+          });
+          console.log('loadContentTypeDefinition entitydef p_reception_application_decision', this.p_reception_application_decision);
+          
+        })
+
     },
     hideShowConcernement (id, state) {
       console.log(`disableConcernement id: ${id}`);

src/views/Concernement.vue

@@ -27,6 +27,11 @@ export default {
     ...mapState(ConcernementsStore,['concernements_loaded']),
     ...mapState(ConcernementsStore,['ct_concernement']),
     ...mapState(ConcernementsStore,['ct_entite']),
+    ...mapState(ConcernementsStore,['ct_cercle_politique']),
+    ...mapState(ConcernementsStore,['p_groupes_interets']),
+    ...mapState(ConcernementsStore,['p_reception_et_traitement']),
+    ...mapState(ConcernementsStore,['p_mise_en_oeuvre_decision']),
+    ...mapState(ConcernementsStore,['p_reception_application_decision']),
     ...mapState(CommonStore,['hover_elmt'])
   },
   created () {
@@ -105,7 +110,7 @@ export default {
   <section v-if="opened" class="concernement">
     <header v-if="concernements_loaded">
       <label 
-        v-if="ct_concernement && !entite && map_mode !== 'puissancedagir'"
+        v-if="ct_concernement && !entite && map_mode !== 'puissancedagir'&& map_mode !== 'doleancer'"
         >
           {{ ct_concernement.title.description }}
         </label>
@@ -204,6 +209,106 @@ export default {
           </li>
         </ul>
     </section>
+    <section
+      v-if="map_mode === 'doleancer'"
+      class="content-doleances">
+        <section
+          v-for="doleance in opened.doleances"
+          class="doleance">
+            <header>
+              <label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label>
+              <h4 name="leprobleme">{{ doleance.leprobleme }}</h4>
+
+              <label for="lenquete">{{ ct_cercle_politique.field_enquete_terraindevie.label }}</label>
+              <h3 name="lenquete">{{ doleance.lenquete }}</h3>
+            </header>
+            <section class="groupesinterets">
+              <h2>{{ ct_cercle_politique.field_groupes.label }}</h2>
+              <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" />
+              <h2>{{ ct_cercle_politique.field_receptions_et_traitements.label }}</h2>
+              <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" />
+              <h2>{{ ct_cercle_politique.field_mise_en_oeuvre_decision.label }}</h2>
+              <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" />
+              <h2>{{ ct_cercle_politique.field_receptions_et_applications.label }}</h2>
+              <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>
+        </section>
+    </section>
   </section>
 </template>