fixed puissance d'agir cartouch display

src/components/ConcernementMapItem.vue

@@ -1198,6 +1198,14 @@ export default {
     },
     // ENGINE UPDATE
     onBeforeEngineUpdate (event) {
+
+      // TODO stop item on mouse hover 
+      if (this.hover_elmt && this.hover_elmt.id === this.id) {
+        // Matter.Body.setStatic(this.body, true);
+      } else {
+        // Matter.Body.setStatic(this.body, false);
+      }
+
       // update the opening/closing tweening
       if (this.tween) {
         this.tween.update();
@@ -1526,7 +1534,6 @@ export default {
 
       this.paper_main_object.position = this.pos = this.body.position;
 
-      // this.draw()
       this.handlePaperVisibility()
     },
   },

src/components/contents/PuissanceAgir.vue

@@ -5,28 +5,62 @@ import { ConcernementsStore } from '@stores/concernements'
 import { UserStore } from '@/stores/user'
 import { CommonStore } from '@/stores/common'
 
+import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
+
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiChevronRight } from '@mdi/js';
+import { mdiChevronDown } from '@mdi/js';
+import { mdiPencilPlus } from '@mdi/js';
+import { mdiPencilPlusOutline } from '@mdi/js';
+
+
 export default {
   props: ['id'],
   data(){
     return {
-
+      opened_besoin_id: null,
+      chevronright_path: mdiChevronRight,
+      chevrondown_path: mdiChevronDown,
+      pencilplus_path: mdiPencilPlus,
+      pencilplusoutline_path: mdiPencilPlusOutline
     }
   },
   computed: {
+    ...mapState(UserStore,['isloggedin']),
     ...mapState(ConcernementsStore,['opened_concernement']),
     ...mapState(ConcernementsStore,['ct_concernement']),
     ...mapState(ConcernementsStore,['ct_entite']),
   },
   created () {
     console.log(`puissance d'agir content created, id: ${this.id}, opened_concernement:`,this.opened_concernement);
+  },
+  methods: {
+    onClickBesoin(id){
+      console.log("onClickBesoin", id);
+      this.opened_besoin_id = id === this.opened_besoin_id ? null : id;
+    },
+    besoinClass(id){
+      return this.opened_besoin_id === id ? "opened" : "";
+    }
+  },
+  components: {
+    CartoucheLayout,
+    SvgIcon
   }
 }
 
 </script>
 
 <template>
-  <section
-    class="content-besoins">
+  <CartoucheLayout>
+    <template v-slot:header>
+      <div class="pre-header">
+        <!-- concernement -->
+        <label>{{ ct_concernement.title.description }}</label>
+      </div>
+    </template>
+
+    <template v-slot:main>
       <ul class="besoins">
         <li
           v-for="besoin in opened_concernement.besoins"
@@ -35,11 +69,12 @@ export default {
           :id="besoin.id"
           :class="besoinClass(besoin.id)"
         >
-          <span 
-            class="open-btn mdi"
-            :class="{ 'mdi-chevron-right': besoin.id !== opened_besoin_id, 'mdi-chevron-down': besoin.id === opened_besoin_id } "
+          <svg-icon
+            type="mdi" 
+            :path="besoin.id !== opened_besoin_id ? chevronright_path : chevrondown_path"
+            class="open-btn"
             @click="onClickBesoin(besoin.id)"
-            />
+            ></svg-icon>
           <header>
             <label 
               class="mdi mdi-rhombus"
@@ -49,14 +84,6 @@ export default {
                 Besoin de l'enqueteur
             </label>
             <h4 class="besoin-description" v-html="besoin.description"/>
-            <a 
-              v-if="isloggedin"
-              :href="'/api/node/add/reponse?besoin_id='+besoin.id" 
-              target="_blank" 
-              rel="noopener noreferrer"
-              class="contribute-link mdi mdi-pencil-plus">
-                contribuer à ce besoin
-            </a>
           </header>
           <ul class="reponses">
             <li
@@ -84,7 +111,22 @@ export default {
               </section>    
             </li>
           </ul>
+          <a 
+              v-if="isloggedin"
+              :href="'/api/node/add/reponse?besoin_id='+besoin.id" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              class="contribute-link mdi mdi-pencil-plus">
+                <svg-icon type="mdi" :path="pencilplusoutline_path" /> contribuer à ce besoin
+            </a>
         </li>
       </ul>
-    </section>
+    </template>
+
+    <template v-slot:footer>
+    
+    </template>
+
+  </CartoucheLayout>
+  
 </template>