doleancer: click on le problème to display it #2285 #2286

src/components/ConcernementMapItem.vue

@@ -1055,21 +1055,21 @@ 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'
-      // }));
+      
+      // leprobleme
+      g.addChild(new paper.Path.Circle({
+        center: [this.pos.x, this.pos.y + r],
+        radius: 3 * this.scale,
+        style: {
+          strokeColor: '#fff',
+          strokeWidth: 2,
+          fillColor: "rgba(255, 255, 255, 0.9)",
+        },
+        item_type: 'doleance_step',
+        item_id: `leprobleme`,
+        did: doleance.id,
+        field: 'leprobleme'
+      }));
 
       // adresse de la doleance
       g.addChild(new paper.Path.Circle({

src/components/contents/Doleancer.vue

@@ -8,8 +8,8 @@ import { CommonStore } from '@/stores/common'
 import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
 
 
-import vSelect from 'vue-select';
-import 'vue-select/dist/vue-select.css';
+// import vSelect from 'vue-select';
+// import 'vue-select/dist/vue-select.css';
 
 export default {
   props: ['cid'],
@@ -31,20 +31,20 @@ export default {
                                     'p_reception_application_decision'
                                   ]),
     ...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_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) => {
@@ -81,7 +81,7 @@ export default {
   },
   components: {
     CartoucheLayout,
-    vSelect
+    // vSelect
   }
 }
 
@@ -99,7 +99,7 @@ export default {
       <section
         class="content-doleances">
           
-          <label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label>
+          <!-- <label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label>
           <v-select 
             :options="doleances_select_options"
             item-value="id"
@@ -108,9 +108,15 @@ export default {
             :searchable="false"
             @option:selected="onDoleanceSelected"
             >
-          </v-select>
+          </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 === 'leprobleme'">
+              <h5>{{ ct_cercle_politique.field_le_probleme.label }}</h5>
+              <h4 name="leprobleme">{{ doleance.leprobleme }}</h4>
+            </section>
+
             <section
               v-if="opened_concernement.opened_doleance.field === 'lenquete'"
               class="lenquete">