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

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>