concernement close btn arrow up #2196

src/views/Concernement.vue

@@ -9,8 +9,8 @@ import gql from 'graphql-tag'
 import GQL from '@api/graphql-axios'
 import EntiteFields from '@api/gql/entite.fragment.gql'
 
-// import SvgIcon from '@jamescoyle/vue-icon';
-// import { mdiHeadphones } from '@mdi/js';
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiArrowUp } from '@mdi/js';
 
 import TerrainDeVie from '@components/contents/TerrainDeVie.vue';
 import PuissanceAgir from '@components/contents/PuissanceAgir.vue';
@@ -21,7 +21,8 @@ export default {
   data(){
     return {
       entite: null,
-      opened_besoin_id: null
+      opened_besoin_id: null,
+      arrowup_path: mdiArrowUp
     }
   },
   computed: {
@@ -63,9 +64,10 @@ export default {
     },
   },
   methods: {
-    ...mapActions(ConcernementsStore,['openCloseConcernements']),
-    ...mapActions(ConcernementsStore,['setOpenedEntityId']),
-    ...mapActions(ConcernementsStore,['setMapMode']),
+    ...mapActions(ConcernementsStore,['openCloseConcernements',
+                                      'setOpenedEntityId',
+                                      'setMapMode',
+                                      'resetConcernementOpened']),
     openEntity(){
       this.setOpenedEntityId(parseInt(this.eid))
       this.loadEntite()
@@ -87,12 +89,16 @@ export default {
         .catch(error => {
           console.warn('Issue with load entite', error)
         })
+    },
+    closeConcernement(){
+      this.resetConcernementOpened();
     }
   },
   components: {
     TerrainDeVie,
     PuissanceAgir,
-    Doleancer
+    Doleancer,
+    SvgIcon
   }
 }
 
@@ -102,10 +108,24 @@ export default {
   <section v-if="opened_concernement" class="concernement">
     <TerrainDeVie v-if="map_mode === 'terraindevie' || map_mode === 'action'" :id="id" :eid="eid" :entite="entite"/>
     <PuissanceAgir v-if="map_mode === 'puissancedagir'" :id="id"/>
-    <Doleancer v-if="map_mode === 'doleancer'" :id="id"/>    
+    <Doleancer v-if="map_mode === 'doleancer'" :id="id"/>  
+    <nav class="close-concernement" @click="closeConcernement">
+      <svg class="close-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
+        <mask id="arrowMask">
+          <rect x="0" y="0" width="24" height="24" fill="white"/>
+          <path :d="arrowup_path" fill="black"/>
+        </mask>
+        <circle cx="12" cy="12" r="12" mask="url(#arrowMask)" fill="white" />
+      </svg> 
+    </nav>  
   </section>
 </template>
 
 <style lang="scss" scoped>
-
+  nav.close-concernement{
+    position: absolute;
+    top:65px;
+    left: -30px;
+    cursor: pointer;
+  }
 </style>