click on entite opened the entite in concernement cartouche

src/api/gql/entite.fragment.gql

@@ -0,0 +1,19 @@
+fragment EntiteFields on Entite {
+  id
+  texte
+  title
+  liens {
+    title
+    url
+  }
+  images {
+    url
+    alt
+  }
+  fichiers {
+    description
+    file {
+      url
+    }
+  }
+}

src/components/ConcernementMapItem.vue

@@ -131,6 +131,7 @@ export default {
           parts.push(Matter.Bodies.circle(this.entites[i].display.pos.x, this.entites[i].display.pos.y, 0.8, {
             item_type: 'entite',
             id: this.entites[i].entite.id,
+            cid: this.concernement.id, 
             isSensor: true
           }))
         }

src/components/ConcernementMapPopup.vue

@@ -65,7 +65,7 @@ export default {
       <h1>{{ concernement.title }}</h1>
     </section>
     <section v-if="infos.type === 'entite'" class="entite-map-popup">
-      <h1>alors ? {{ entite.entite.title }}</h1>
+      <h1>{{ entite.entite.title }}</h1>
     </section>
   </div>
 </template>

src/components/MapConcernements.vue

@@ -107,6 +107,7 @@ export default {
   methods: {
     ...mapActions(ConcernementsStore,['openCloseConcernements']),
     ...mapActions(ConcernementsStore,['resetConcernementOpened']),
+    ...mapActions(ConcernementsStore,['openEntite']),
     animate () {
       this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
       // this.canvasMap.canvas.dispatchEvent(this.animateEvent)
@@ -114,7 +115,7 @@ export default {
       window.requestAnimationFrame(this.animate);
     },
     onMouseMove (e) {
-      // check concernement item mouse over
+      // check item mouse over
       let query;
       if (this.opened) {
         // if a concernement is opened we query the opened concernement's parts (aka entitées bodies)
@@ -158,13 +159,30 @@ export default {
     onClick (e) {
       console.log('onClick', this, e);
       // get the clicked element from matter
-      const query = Matter.Query.point(Matter.Composite.allBodies(this.world), this.mouse.position)
+      // const query = Matter.Query.point(Matter.Composite.allBodies(this.world), this.mouse.position)
+      let query;
+      if (this.opened) {
+        // if a concernement is opened we query the opened concernement's parts (aka entitées bodies)
+        const bodies = Matter.Composite.allBodies(this.world);
+        for (let body of bodies) {
+          if (body.item_type === "concernement" && body.id === this.opened.id) {
+            query = Matter.Query.point(body.parts, this.mouse.position);
+            break;    
+          }
+        }
+      } else {
+        // if no concernement opened we query concernements
+        query = Matter.Query.point(this.world.bodies, this.mouse.position)
+      }
       // console.log(this.mouse.position);
-      // console.log(query);
+      console.log('click query', query);
+      
+      // no concernement is yet opened, we deal concernements
+      if (!this.opened) {
         let clickedIDs = [];
-      query.forEach(elmt => {
+        query.forEach(body => {
-        // console.log('body id:', elmt.id);
+          // console.log('body id:', body.id);
-        clickedIDs.push(elmt.id);
+          clickedIDs.push(body.id);
         });
         // open/close all concernements
         this.openCloseConcernements(clickedIDs)
@@ -176,6 +194,21 @@ export default {
           this.$router.push({name: 'home'});
         }
       }
+
+      // concernement is already opened, we deal with entités
+      if (this.opened) {
+        let clickedBodies = [];
+        query.forEach(body => {
+          // console.log('body id:', body.id);
+          if (body.item_type === "entite") {
+            clickedBodies.push(body);
+          }
+        });
+        if (clickedBodies.length) {
+          this.openEntite(clickedBodies[0].cid, clickedBodies[0].id)
+        }
+      }
+    }
   },
   beforeUpdate () {
   },

src/router/index.js

@@ -21,7 +21,7 @@ const router = createRouter({
       props: true
     },
     {
-      path: '/concernement/:id',
+      path: '/concernement/:id/:eid?',
       name: 'concernement',
       // component: ConcernementView,
       // route level code-splitting

src/stores/concernements.js

@@ -96,6 +96,9 @@ export const ConcernementsStore = defineStore({
     },
     resetConcernementOpened () {
       this.opened = null;
+    },
+    openEntite (cid, id) {
+      this.router.push({name: 'concernement', params: {id: cid, eid: id}});
     }
   }
 })

src/views/Concernement.vue

@@ -3,14 +3,18 @@
 import { mapActions, mapState } from 'pinia'
 import { ConcernementsStore } from '@stores/concernements'
 
+import { print } from 'graphql/language/printer'
+import gql from 'graphql-tag'
+import GQL from '@api/graphql-axios'
+import EntiteFields from '@api/gql/entite.fragment.gql'
 
 export default {
-  props: ['id'],
+  props: ['id', 'eid'],
-  // data(){
+  data(){
-  //   return {
+    return {
-  //     block: null
+      entite: null
-  //   }
+    }
-  // },
+  },
   computed: {
     ...mapState(ConcernementsStore,['opened']),
     ...mapState(ConcernementsStore,['ct_concernement'])
@@ -19,8 +23,34 @@ export default {
     // console.log("Concernement view created, id", this.opened.id);
     // this.loadStatics()
   },
+  watch: {
+    eid: {
+      handler (n, o){
+        this.loadEntite()   
+      },
+      deep: true
+    },
+  },
   methods: {
     // ...mapActions(StaticsStore,['loadStatics'])
+    loadEntite(){
+      const ast = gql`{
+        entite (id: ${this.eid}) {
+          ...EntiteFields
+        }
+      }
+      ${EntiteFields}
+      `
+      console.log('ast', ast);
+      GQL.post('', { query: print(ast) })
+        .then(({data: { data: { entite }}}) => {
+          console.log('load entite loaded', entite)
+          this.entite = entite
+        })
+        .catch(error => {
+          console.warn('Issue with load entite', error)
+        })
+    }
   },
   components: {
   }
@@ -30,6 +60,7 @@ export default {
 
 <template>
   <section class="concernement">
+    <div v-if="this.entite">{{ entite.title }}</div>
     <header>
       <label>{{ this.ct_concernement.title.description }}</label>
       <h2>{{ opened.title }}</h2>