splitted concernement content cartouche into components for each mapmode, completed terrain de vie concernement display

src/components/contents/PuissanceAgir.vue

@@ -0,0 +1,90 @@
+<script>
+
+import { mapActions, mapState } from 'pinia'
+import { ConcernementsStore } from '@stores/concernements'
+import { UserStore } from '@/stores/user'
+import { CommonStore } from '@/stores/common'
+
+export default {
+  props: ['id'],
+  data(){
+    return {
+
+    }
+  },
+  computed: {
+    ...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);
+  }
+}
+
+</script>
+
+<template>
+  <section
+    class="content-besoins">
+      <ul class="besoins">
+        <li
+          v-for="besoin in opened_concernement.besoins"
+          :key="besoin.id"
+          class="besoin"
+          :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 } "
+            @click="onClickBesoin(besoin.id)"
+            />
+          <header>
+            <label 
+              class="mdi mdi-rhombus"
+              :class="{ hover: hover_elmt && hover_elmt.type === 'besoin' && (hover_elmt.id === besoin.id || hover_elmt.bid === besoin.id) }"
+              @click="onClickBesoin(besoin.id)"
+              >
+                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
+              v-for="reponse in besoin.reponses"
+              :key="reponse.id"
+              class="reponse"
+              :id="reponse.id"
+            >
+              <label class="mdi mdi-rhombus-outline">Ressource</label>
+              <section v-if="reponse.qui">
+                <label for="reponse-qui">Qui</label>
+                <p name="reponse-qui" v-html="reponse.qui" />
+              </section>
+              <section v-if="reponse.quoi">
+                <label for="reponse-quoi">Quoi</label>
+                <p name="reponse-quoi" v-html="reponse.quoi" />
+              </section>    
+              <section v-if="reponse.ou">
+                <label for="reponse-ou">Où</label>
+                <p name="reponse-ou" v-html="reponse.ou" />
+              </section>    
+              <section v-if="reponse.avec">
+                <label for="reponse-avec">Avec</label>
+                <p name="reponse-avec" v-html="reponse.avec" />
+              </section>    
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </section>
+</template>