created layout component for concernement content cartouche, continued to integrate entites

src/components/layout/CartoucheLayout.vue

@@ -0,0 +1,67 @@
+<script>
+
+import { mapActions, mapState } from 'pinia'
+import { ConcernementsStore } from '@stores/concernements'
+
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiHeadphones } from '@mdi/js';
+
+export default {
+  props: ['id', 'eid', 'entite'],
+  data(){
+    return {
+      headphones_path: mdiHeadphones
+    }
+  },
+  computed: {
+    ...mapState(ConcernementsStore,['opened_concernement']),
+  },
+  methods: {
+    ...mapActions(ConcernementsStore,['setMapMode'])
+  },
+  components: {
+    SvgIcon
+  }
+}
+</script>
+
+<template>
+  <header>
+    <slot name="header"></slot>
+    <div class="concernement-cartouche-icons">
+        <h2>{{ opened_concernement.title }}</h2>
+        <nav class="icons">
+          <ul>
+            <li v-if="opened_concernement.has_recit" >
+              <svg-icon type="mdi" :path="headphones_path"></svg-icon>
+            </li>
+            <li>
+              <a href="#terraindevie" @click="setMapMode('terraindevie')"><span class="icon terraindevie"></span></a>
+            </li>
+            <li v-if="opened_concernement.has_puissancedagir" >
+              <a href="#puissanceagir" @click="setMapMode('puissanceagit')"><span class="icon puissancedagir"></span></a>
+            </li>
+            <li v-if="opened_concernement.has_proximite" >
+              <a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span></a>
+            </li>
+            <li v-if="opened_concernement.has_superposition" >
+              <a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span></a>
+            </li>
+            <li v-if="opened_concernement.has_agissantes" >
+              <a href="#action" @click="setMapMode('action')"><span class="icon action"></span></a>
+            </li>
+            <li v-if="opened_concernement.has_doleance" >
+              <a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span></a>
+            </li>
+          </ul>
+        </nav>
+
+      </div>
+  </header>
+  <main>
+    <slot name="main"></slot>
+  </main>
+  <footer>
+    <slot name="footer"></slot>
+  </footer>
+</template>