cercle politique nav is done #2156

package-lock.json

@@ -25,6 +25,7 @@
         "vue-easy-lightbox": "^1.16.0",
         "vue-plyr": "^7.0.0",
         "vue-router": "^4.1.5",
+        "vue-select": "^4.0.0-beta.6",
         "vue-slider-component": "^4.1.0-beta.7"
       },
       "devDependencies": {
@@ -3801,6 +3802,14 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-select": {
+      "version": "4.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/vue-select/-/vue-select-4.0.0-beta.6.tgz",
+      "integrity": "sha512-K+zrNBSpwMPhAxYLTCl56gaMrWZGgayoWCLqe5rWwkB8aUbAUh7u6sXjIR7v4ckp2WKC7zEEUY27g6h1MRsIHw==",
+      "peerDependencies": {
+        "vue": "3.x"
+      }
+    },
     "node_modules/vue-slider-component": {
       "version": "4.1.0-beta.7",
       "resolved": "https://registry.npmjs.org/vue-slider-component/-/vue-slider-component-4.1.0-beta.7.tgz",
@@ -6589,6 +6598,12 @@
         "@vue/devtools-api": "^6.5.0"
       }
     },
+    "vue-select": {
+      "version": "4.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/vue-select/-/vue-select-4.0.0-beta.6.tgz",
+      "integrity": "sha512-K+zrNBSpwMPhAxYLTCl56gaMrWZGgayoWCLqe5rWwkB8aUbAUh7u6sXjIR7v4ckp2WKC7zEEUY27g6h1MRsIHw==",
+      "requires": {}
+    },
     "vue-slider-component": {
       "version": "4.1.0-beta.7",
       "resolved": "https://registry.npmjs.org/vue-slider-component/-/vue-slider-component-4.1.0-beta.7.tgz",

package.json

@@ -25,6 +25,7 @@
     "vue-easy-lightbox": "^1.16.0",
     "vue-plyr": "^7.0.0",
     "vue-router": "^4.1.5",
+    "vue-select": "^4.0.0-beta.6",
     "vue-slider-component": "^4.1.0-beta.7"
   },
   "devDependencies": {

src/assets/main.scss

@@ -299,15 +299,11 @@ body{
 
         // CERCLE POLITIQUE
         section.content-doleances{
-          >section.doleance{
-            >header{
-              
-            }
           >main{
-              overflow-y: hidden;
+            padding: 1em 0;
-              height:0.1px;
+            h5{
+              margin: 0 0 1em 0;
             }
-
           }
           label{
             margin:0;
@@ -321,6 +317,43 @@ body{
             // padding:0 0 0 1em;
           }
           
+          .v-select{
+            input.vs__search{
+              display: none;
+            }
+            div.vs__dropdown-toggle{
+              border-radius: 0;
+              border: none;
+            }
+            div.vs__selected-options{
+              padding: 0;
+              span.vs__selected{
+                padding: 0;
+                margin: 0;
+                font-weight: 400;
+                font-size: 1.323em;
+                color:inherit;
+                line-height: 1.15;
+              }
+            }
+            ul.vs__dropdown-menu{
+              border-radius: 0;
+              border: none;
+              li.vs__dropdown-option{
+                white-space:normal;
+                padding:1em 1em 0 1em;
+                &:last-of-type{
+                  padding:1em;
+                }
+                color: #aaa;
+                transition: color 0.2s ease-in-out;
+                &.vs__dropdown-option--highlight{
+                  color:#000;
+                  background-color: #fff;
+                }
+              }
+            }
+          }
         }
 
       }

src/components/ConcernementMapItem.vue

@@ -727,37 +727,6 @@ export default {
 
       // let fontsize = 4;
       
-      // TODO POINTS CARDINAUX
-      // //
-      // // le problème
-      // //
-      // g.addChild(new paper.Path.Circle({
-      //   center: [this.pos.x, this.pos.y + r],
-      //   radius: 0.5,
-      //   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],
-      //     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: 2.3,
-      //   fillColor: '#fff',
-      //   justification: 'center'
-      // }));
-      
       //
       // CAMENBERT STATIQUES
       //
@@ -889,6 +858,70 @@ export default {
         }
       });
 
+
+      // POINTS CARDINAUX
+      //
+      // // leprobleme
+      // g.addChild(new paper.Path.Circle({
+      //   center: [this.pos.x, this.pos.y + r],
+      //   radius: 3,
+      //   style: {
+      //     strokeColor: '#fff',
+      //     strokeWidth: 2,
+      //     fillColor: "rgba(255, 255, 255, 0.4)",
+      //   },
+      //   item_type: 'doleance_step',
+      //   item_id: `leprobleme`,
+      //   did: doleance.id,
+      //   field: 'leprobleme'
+      // }));
+
+      // adresse de la doleance
+      g.addChild(new paper.Path.Circle({
+        center: [this.pos.x - r, this.pos.y],
+        radius: 3,
+        style: {
+          strokeColor: '#fff',
+          strokeWidth: 2,
+          fillColor: "rgba(255, 255, 255, 0.9)",
+        },
+        item_type: 'doleance_step',
+        item_id: `adresse_de_la_doleance`,
+        did: doleance.id,
+        field: 'adresse_de_la_doleance'
+      }));
+      
+      // decision
+      g.addChild(new paper.Path.Circle({
+        center: [this.pos.x, this.pos.y - r],
+        radius: 3,
+        style: {
+          strokeColor: '#fff',
+          strokeWidth: 2,
+          fillColor: "rgba(255, 255, 255, 0.9)",
+        },
+        item_type: 'doleance_step',
+        item_id: `decision`,
+        did: doleance.id,
+        field: 'decision'
+      }));
+
+      // adresse_de_la_decision
+      g.addChild(new paper.Path.Circle({
+        center: [this.pos.x + r, this.pos.y],
+        radius: 3,
+        style: {
+          strokeColor: '#fff',
+          strokeWidth: 2,
+          fillColor: "rgba(255, 255, 255, 0.9)",
+        },
+        item_type: 'doleance_step',
+        item_id: `adresse_de_la_decision`,
+        did: doleance.id,
+        field: 'adresse_de_la_decision'
+      }));
+      
+
       return g;
     },
     // PAPER VISIBILITY
@@ -1001,7 +1034,7 @@ export default {
             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;
+                this.paper_main_object.children.doleances.children[`doleance_${d.id}`].visible = d.id === this.concernement.opened_doleance.id;
             })
           }
         } else {
@@ -1049,7 +1082,7 @@ export default {
               paper_group_tohit = this.paper_main_object.children['puissanceagir_besoins'];
               break;
             case "doleancer":
-              paper_group_tohit = this.paper_main_object.children['doleances'].children[`doleance_${this.concernement.opened_doleance}`];
+              paper_group_tohit = this.paper_main_object.children['doleances'].children[`doleance_${this.concernement.opened_doleance.id}`];
               break;
           }
 
@@ -1112,7 +1145,7 @@ export default {
               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}`];
+              group_to_hit = this.paper_main_object.children['doleances'].children[`doleance_${this.concernement.opened_doleance.id}`];
               break;
           }
           if (group_to_hit) {

src/components/MapConcernements.vue

@@ -444,7 +444,7 @@ export default {
       let pos = {x:0,y:0};
       var r = ray * 0.8;  // ray
       var dr = r/2;                         // demi ray
-      var pcr = 2;               // petits cercle rayon
+      var pcr = 3;               // petits cercle rayon
 
       // 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
@@ -530,7 +530,7 @@ export default {
         new paper.Path.Circle({
           center: [0, r],
           radius: pcr,
-          style: style
+          style: {...style, ...{fillColor: 'rgba(255,255,255,0.9)'}},
         }),
         new paper.Path.Circle({
           center: [r, 0],
@@ -586,36 +586,36 @@ export default {
         // haut
         new paper.Path({
           segments: [
-            [-2, -dr*1.5 - 2],
+            [-4, -dr*1.5 - 4],
             [0, -dr*1.5],
-            [-2, -dr*1.5 + 2]
+            [-4, -dr*1.5 + 4]
           ],
           style: felchesstyle
         }),
         // bas
         new paper.Path({
           segments: [
-            [2, dr*1.5 - 2],
+            [4, dr*1.5 - 4],
             [0, dr*1.5],
-            [2, dr*1.5 + 2]
+            [4, dr*1.5 + 4]
           ],
           style: felchesstyle
         }),
         // gauche
         new paper.Path({
           segments: [
-            [-dr*1.5 - 2, 2],
+            [-dr*1.5 - 4, 4],
             [-dr*1.5, 0],
-            [-dr*1.5 + 2, 2]
+            [-dr*1.5 + 4, 4]
           ],
           style: felchesstyle
         }),
         // droite
         new paper.Path({
           segments: [
-            [dr*1.5 - 2, -2],
+            [dr*1.5 - 4, -4],
             [dr*1.5, 0],
-            [dr*1.5 + 2, -2]
+            [dr*1.5 + 4, -4]
           ],
           style: felchesstyle
         }),

src/components/contents/Doleancer.vue

@@ -7,11 +7,15 @@ import { CommonStore } from '@/stores/common'
 
 import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
 
+import vSelect from 'vue-select';
+import 'vue-select/dist/vue-select.css';
+
 export default {
   props: ['id'],
   data(){
     return {
-
+      doleance: null,
+      doleance_selected: null
     }
   },
   computed: {
@@ -25,21 +29,58 @@ export default {
                                     'p_mise_en_oeuvre_decision',
                                     'p_reception_application_decision'
                                   ]),
-    ...mapState(CommonStore,['hover_elmt'])
+    ...mapState(CommonStore,['hover_elmt']),
-
+    doleances_select_options () {
+      let os = [];
+      this.opened_concernement.doleances.forEach((doleance, index) => {
+        let o = {
+          label: doleance.leprobleme,
+          id: doleance.id
+        }
+        if (doleance.id === this.opened_concernement.opened_doleance.id) {
+          this.doleance_selected = o;
+        }
+        os.push(o);
+      })
+      return  os;
+    },
+    // doleances_select_value () {
+    //   let value;
+    //   this.opened_concernement.doleances.forEach((doleance, index) => {
+    //     if (doleance.id === this.opened_concernement.opened_doleance.id) {
+    //       value = {
+    //         label: doleance.leprobleme,
+    //         id: doleance.id
+    //       }
+    //     }
+    //   });
+    //   return value;
+    // }
   },
   created () {
     console.log(`Doleancer content created, id: ${this.id}, opened_concernement:`,this.opened_concernement);
+    this.opened_concernement.doleances.forEach((doleance, index) => {
+      if (doleance.id === this.opened_concernement.opened_doleance.id) {
+        this.doleance = doleance;
+      }
+    });
   },
   methods: {
     ...mapActions(ConcernementsStore,['setOpenedDoleance']),
-    openDoleance(did){
+    onDoleanceSelected(option){
-      console.log('openDoleance', did);
+      console.log('openDoleance', option);
-      this.setOpenedDoleance(parseInt(this.id), did)
+      this.setOpenedDoleance(parseInt(this.id), option.id)
+      
+      this.opened_concernement.doleances.forEach((doleance, index) => {
+      if (option.id === this.opened_concernement.opened_doleance.id) {
+        this.doleance = doleance;
+      }
+    });
     }
   },
   components: {
-    CartoucheLayout
+    CartoucheLayout,
+    vSelect
   }
 }
 
@@ -56,109 +97,180 @@ export default {
     <template v-slot:main>
       <section
         class="content-doleances">
-          <section
+          
-            v-for="doleance in opened_concernement.doleances"
-            class="doleance">
-              <header
-                @click="openDoleance(doleance.id)">
           <label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label>
-                <h3 name="leprobleme">{{ doleance.leprobleme }}</h3>
+          <v-select 
-              </header>
+            :options="doleances_select_options"
-              <main>
+            item-value="id"
-                <section class="lenquete">
+            v-model="doleance_selected"
+            :clearable="false"
+            :searchable="false"
+            @option:selected="onDoleanceSelected"
+            >
+          </v-select>
+
+          <main v-if="opened_concernement.opened_doleance.id === doleance.id && opened_concernement.opened_doleance.field">
+            <section
+              v-if="opened_concernement.opened_doleance.field === 'lenquete'"
+              class="lenquete">
+              <h5>Enquête menée sur le terrain de vie</h5>
               <label for="lenquete">{{ ct_cercle_politique.field_enquete_terraindevie.label }}</label>
               <h4 name="lenquete">{{ doleance.lenquete }}</h4>
             </section>
 
-                <section class="groupesinterets">
+            <section 
-                  <h5>{{ ct_cercle_politique.field_groupes.label }}</h5>
+              v-if="opened_concernement.opened_doleance.field === 'groupesinterets'"
-                  <ul>
+              class="groupesinterets">
-                    <li
+              <h5>Construction de groupes d'intérets avec qui composer la doléance</h5>
-                      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" />
+                <p 
+                  name="groupe"
+                  v-html="doleance.groupesinterets[opened_concernement.opened_doleance.field_index].groupe_interets" />
+                
                 <label for="accorder">{{ p_groupes_interets.field_accorder_interets.label }}</label>
-                        <p name="accorder" v-html="groupe.accorder_interets" />
+                <p 
+                  name="accorder"
+                  v-html="doleance.groupesinterets[opened_concernement.opened_doleance.field_index].accorder_interets" />
+                
                 <label for="formuler">{{ p_groupes_interets.field_formuler.label }}</label>
-                        <p name="formuler" v-html="groupe.formuler" />
+                <p 
-                    </li>
+                  name="formuler"
-                  </ul>
+                  v-html="doleance.groupesinterets[opened_concernement.opened_doleance.field_index].formuler" />
+              </section>
             </section>
 
-                <section class="adresse">
+            <section
+              v-if="opened_concernement.opened_doleance.field === 'adresse_de_la_doleance'"
+              class="adresse">
+
+              <h5>Adresse de la doléance</h5>
+
               <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" />
+              <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" />
+              <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" />
+              <p
-                  <h5>{{ ct_cercle_politique.field_receptions_et_traitements.label }}</h5>
+                name="aqui_addresse_doleance"
-                  <ul class="reception_traitement">
+                v-html="doleance.aqui_addresse_doleance" />               
-                    <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">
+            <section
+              v-if="opened_concernement.opened_doleance.field === 'reception_traitement'"
+              class="reception_traitement">
+              <h5>Reception et traitement de la doléance</h5>
+              <label for="entite_adressee">{{ p_reception_et_traitement.field_entite_adressee.label }}</label>
+              <p 
+                name="entite_adressee"
+                v-html="doleance.reception_traitement[opened_concernement.opened_doleance.field_index].entite_adressee" />
+              <label for="doleance_formulee">{{ p_reception_et_traitement.field_doleance_formulee.label }}</label>
+              <p 
+                name="doleance_formulee"
+                v-html="doleance.reception_traitement[opened_concernement.opened_doleance.field_index].doleance_formulee" />
+              <label for="traite_doleance">{{ p_reception_et_traitement.field_traite_doleance.label }}</label>
+              <p 
+                name="traite_doleance"
+                v-html="doleance.reception_traitement[opened_concernement.opened_doleance.field_index].traite_doleance" />
+              <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_concernement.opened_doleance.field_index].entite_recoit_doleance" />
+            </section>
+
+            <section
+              v-if="opened_concernement.opened_doleance.field === 'decision'"
+              class="decision">
+              <h5>Décision</h5>
               <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">
+            <section
+              v-if="opened_concernement.opened_doleance.field === 'mise_en_oeuvre_decision'"
+              class="mise_en_oeuvre_decision">
+              <h5>{{ ct_cercle_politique.field_mise_en_oeuvre_decision.label }}</h5>
+              <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_concernement.opened_doleance.field_index].entite_adresse_decision" />
+              <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_concernement.opened_doleance.field_index].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="doleance.mise_en_oeuvre_decision[opened_concernement.opened_doleance.field_index].entite_metenoeuvre_decisio" />
+            </section>
+
+
+            <section 
+              v-if="opened_concernement.opened_doleance.field === 'adresse_de_la_decision'"
+              class="adresse_de_la_decision">
+              <h5>Adresse de la decision à appliquer</h5>
+            
               <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" />
+            </section>
+
+            <section
+              v-if="opened_concernement.opened_doleance.field === 'receptions_et_applications'"
+              class="receptions_et_applications">
+            
               <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" />
+              <p
+                name="applique_decision"
+                v-html="doleance.receptions_et_applications[opened_concernement.opened_doleance.field_index].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" />
+              <p
+                name="formule_decision_applic"
+                v-html="doleance.receptions_et_applications[opened_concernement.opened_doleance.field_index].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" />
+              <p
-                    </li>
+                name="entite_recoit_decision"
-                  </ul>
+                v-html="doleance.receptions_et_applications[opened_concernement.opened_doleance.field_index].entite_recoit_decision" />
+            </section>
+            
+            <section
+              v-if="opened_concernement.opened_doleance.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" />
+              <p
-                  <label for="oui_nouvelle_situation">{{ ct_cercle_politique.field_oui_nouvelle_situation.label }}</label>
+                name="probleme_initial_resolu"
-                  <p name="oui_nouvelle_situation" v-html="doleance.oui_nouvelle_situation" />
+                v-html="doleance.probleme_initial_resolu" />
-                  <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" />
 
+              <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>
 
     <template v-slot:footer>

src/stores/concernements.js

@@ -88,7 +88,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;
+                concernement.opened_doleance = {
+                  id: concernement.doleances[0].id
+                };
               }
               
               // recit
@@ -268,16 +270,16 @@ export const ConcernementsStore = defineStore({
     },
     setOpenedDoleance(cid, did){
       console.log(`setOpenedDoleance(${cid}, ${did})`, cid, did);
-      this.concernementsByID[cid].opened_doleance = did;
+      this.concernementsByID[cid].opened_doleance = {id: 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);
+      console.log(`setOpenedDoleanceField cid, did, field, index`, cid, did, field, index);
-      this.concernementsByID[cid].opened_doleance_field = {
+      this.concernementsByID[cid].opened_doleance = {
         cid: cid,
-        did: did,
+        id: did,
         field: field,
-        index: index
+        field_index: index
       };
     }
   }