managed routing home->concernement->entite->concernement->home AND direct url loading

src/App.vue

@@ -13,8 +13,8 @@ import ConcernementMapItem from '@components/ConcernementMapItem.vue'
 
 export default {
   created () {
-    this.loadConcernements()
     this.loadContentTypeDefinition();
+    this.loadConcernements()
   },
   mounted () {
     console.log('APP onMounted')

src/components/ConcernementMapItem.vue

@@ -32,8 +32,9 @@ export default {
   inject: ['canvasMap', 'matterEngine'],
   data() {
     return {
+      id: null,
       entities: null,
-      // concernement: null,
+      opened_entite_id: null,
       canvas: null,
       ctx: null,
       pos : {
@@ -45,9 +46,7 @@ export default {
       salientPoints: [],
       scale: 1,
       opacity: 0,
-      // anim: null,
       tween: null,
-      // matter
       body: null,
       constraint: null
     }
@@ -57,18 +56,30 @@ export default {
     ...mapState(ConcernementsStore,['concernementsByID'])
   },
   created () {
-    // console.log("ConcernementsMapItem concernement", this.canvasMap, this.matterEngine);
+    // console.log(`ConcernementsMapItem ${this.concernement.id} created`, this.canvasMap, this.matterEngine);
+    this.id = this.concernement.id
     this.entites = this.concernement.entites
     this.entites_byid = this.concernement.entites_byid
+
+    console.log(`ConcernementsMapItem ${this.concernement.id} $route`, this.id, this.$route);
+    if (this.$route.name === 'concernement'
+      && parseInt(this.$route.params.id) === this.id
+      && typeof this.$route.params.eid !== "undefined") {
+        console.log("we have an entity");
+        this.opened_entite_id = parseInt(this.$route.params.eid);
+    }
+    
     this.parsePoints()
     this.getSalientPoints()
-  },
-  mounted() {
-    console.log('concernementItem mounted', typeof this.canvasMap.canvas);
     if (this.canvasMap) {
       this.initCanvasMap()
     }
+
   },
+  // mounted() {
+  //   console.log(`ConcernementsMapItem ${this.concernement.id} mounted`, this.canvasMap.canvas);
+    
+  // },
   watch: {
     // canvasMap (n, o) {
     //   console.log("concernementItem watch canvasMap", o, n);
@@ -84,6 +95,7 @@ export default {
     },
     opened: {
       handler (n, o) {
+
         if(n){ // opened
           this.openClose(true);
         }else{ // closed
@@ -95,7 +107,7 @@ export default {
   },
   methods: {
     initCanvasMap (){
-      // console.log('initCanvasMap');
+      // console.log(`ConcernementsMapItem ${this.concernement.id} initCanvasMap`);
       // record canvas and ctx for rendering (drawing)
       this.canvas = this.canvasMap.canvas
       this.ctx = this.canvasMap.ctx
@@ -258,6 +270,7 @@ export default {
     //   }
     // },
     openClose(open) {
+      // console.log(`ConcernementsMapItem ${this.concernement.id} openClose: ${open}`);
       if (this.tween) {
         this.tween.stop();
       }
@@ -427,8 +440,13 @@ export default {
           if (this.body.parts[i].item_type === 'entite') {
             let part = this.body.parts[i];
             this.ctx.beginPath();
-            this.ctx.arc(this.body.parts[i].position.x, this.body.parts[i].position.y, 0.3*this.scale, 0, 2 * Math.PI, false);
-            this.ctx.fillStyle = "#000";
+            this.ctx.arc(part.position.x, part.position.y, 0.3*this.scale, 0, 2 * Math.PI, false);
+            // console.log(part.id, this.opened_entite_id);
+            if (part.id === this.opened_entite_id) {
+              this.ctx.fillStyle = "#F00";
+            } else {
+              this.ctx.fillStyle = "#000";
+            }
             this.ctx.fill();
           }
         }

src/components/MapConcernements.vue

@@ -107,7 +107,6 @@ 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)
@@ -179,33 +178,36 @@ export default {
       
       // no concernement is yet opened, we deal concernements
       if (!this.opened) {
-        let clickedIDs = [];
-        query.forEach(body => {
-          // console.log('body id:', body.id);
-          clickedIDs.push(body.id);
-        });
-        // open/close all concernements
-        this.openCloseConcernements(clickedIDs)
-  
-        // if no concernement opened retrun to home (closing concernement contents opened)
-        // and reset the opened state in concernement store
-        if (!clickedIDs.length) {
-          this.resetConcernementOpened();
-          this.$router.push({name: 'home'});
+        if (query.length) {
+          // open/close all concernements
+          this.openCloseConcernements(query[0].id)
+          // push route
+          this.$router.push({name: 'concernement', params: {id: query[0].id}});
         }
       }
 
       // 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 (query.length) {
+          let clickedEntityBodies = [];
+          query.forEach(body => {
+            // console.log('body id:', body.id);
+            if (body.item_type === "entite") {
+              clickedEntityBodies.push(body);
+            }
+          });
+          if (clickedEntityBodies.length) {
+            // we have clicked on an entite
+            this.$router.push({name: 'concernement', params: {id: this.opened.id, eid: clickedEntityBodies[0].id}});
+          } else {
+            // otherwise we close the entite and come back to the concernement
+            this.$router.push({name: 'concernement', params: {id: this.opened.id}});
           }
-        });
-        if (clickedBodies.length) {
-          this.openEntite(clickedBodies[0].cid, clickedBodies[0].id)
+        } else {
+          // if no concernement opened retrun to home (closing concernement contents opened)
+          // and reset the opened state in concernement store
+          this.resetConcernementOpened();
+          this.$router.push({name: 'home'});
         }
       }
     }

src/stores/concernements.js

@@ -20,7 +20,8 @@ export const ConcernementsStore = defineStore({
     concernementsByID: {},
     allEntitesById: {},
     opened: false,
-    ct_concernement: {}
+    ct_concernement: {},
+    concernements_loaded: false
   }),
   getters: {
     
@@ -52,6 +53,7 @@ export const ConcernementsStore = defineStore({
               this.concernements.push(concernement);
               this.concernementsByID[concernement.id] = concernement;
             });
+            this.concernements_loaded = true;
           })
           .catch(error => {
             console.warn('Issue with loadConcernements', error)
@@ -76,29 +78,29 @@ export const ConcernementsStore = defineStore({
       } 
       GQL.post('', body)
         .then(({ data: { data: { entitydef }}}) => {
-          console.log('loadContentTypeDefinition entitydef', entitydef);
+          // console.log('loadContentTypeDefinition entitydef', entitydef);
           entitydef.fields.forEach(field => {
             this.ct_concernement[field.field_name] = field;
           });
+          console.log('loadContentTypeDefinition entitydef', this.ct_concernement);
+          
         })
 
     },
-    openCloseConcernements (ids) {
+    openCloseConcernements (id) {
+      console.log(`openCloseConcernements id: ${id}`);
       var state;
       this.concernements.forEach((c, i) => {
-        state = ids.indexOf(c.id) !== -1;
+        state = id == c.id;
         this.concernements[i].opened = this.concernementsByID[c.id].opened = state;
         if (state) {
           this.opened = c;
-          this.router.push({name: 'concernement', params: {id: c.id}});
         }
       });
     },
     resetConcernementOpened () {
       this.opened = null;
-    },
-    openEntite (cid, id) {
-      this.router.push({name: 'concernement', params: {id: cid, eid: id}});
+      this.openCloseConcernements();
     }
   }
 })

src/views/Concernement.vue

@@ -12,27 +12,47 @@ export default {
   props: ['id', 'eid'],
   data(){
     return {
-      entite: null
+      entite: null,
     }
   },
   computed: {
     ...mapState(ConcernementsStore,['opened']),
+    ...mapState(ConcernementsStore,['concernements_loaded']),
     ...mapState(ConcernementsStore,['ct_concernement'])
   },
   created () {
-    // console.log("Concernement view created, id", this.opened.id);
-    // this.loadStatics()
+    console.log(`Concernement view created, id: ${this.id}, eid: ${this.eid}, opened:${this.opened}`);
+    
+    // when we arrived directly to the entite, load the entite
+    if (!this.entity && this.eid) {
+      this.loadEntite();
+    }
   },
   watch: {
+    concernements_loaded: {
+      handler (n, o){
+        console.log(`watch concernements_loaded n: ${n}, opened:${this.opened}, id:${this.id}`);
+        // when we arrived directly to the url then all concernement are loaded: do open the concernement
+        if (!this.opened) {
+          this.openCloseConcernements(this.id)
+        }
+   
+      },
+      deep: true
+    },
     eid: {
       handler (n, o){
-        this.loadEntite()   
+        if(n){
+          this.loadEntite()
+        }else{
+          this.entite = false;
+        }
       },
       deep: true
     },
   },
   methods: {
-    // ...mapActions(StaticsStore,['loadStatics'])
+    ...mapActions(ConcernementsStore,['openCloseConcernements']),
     loadEntite(){
       const ast = gql`{
         entite (id: ${this.eid}) {
@@ -59,18 +79,18 @@ export default {
 </script>
 
 <template>
-  <section class="concernement">
-    <div v-if="this.entite">{{ entite.title }}</div>
-    <header>
-      <label>{{ this.ct_concernement.title.description }}</label>
+  <section v-if="opened" class="concernement">
+    <div v-if="entite">{{ entite.title }}</div>
+    <header v-if="concernements_loaded">
+      <label v-if="ct_concernement">{{ ct_concernement.title.description }}</label>
       <h2>{{ opened.title }}</h2>
     </header>
-    <section class="description">
-      <label>{{ this.ct_concernement.field_description.description }}</label>
+    <section  v-if="concernements_loaded" class="description">
+      <label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
       <div v-html="opened.description"/>
     </section>
-    <section class="caillou">
-      <label>{{ this.ct_concernement.field_caillou.description }}</label>
+    <section  v-if="concernements_loaded" class="caillou">
+      <label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
       <div v-html="opened.caillou "/>
     </section>
   </section>