centralized tocs and paginations loading in Corpus Store @ app init

src/components/nav/HeaderMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <nav id="header-menu">
-    <ul>
+    <ul v-if="corpusLoaded">
       <li><router-link to="/corpus">Corpus</router-link></li>
       <li>
         <span>Indexs</span>
@@ -23,11 +23,18 @@
 
 <script>
 
+import { mapState } from 'vuex'
+
 export default {
   name: 'HeaderMenu',
   data: () => ({
 
-  })
+  }),
+  computed: {
+    ...mapState({
+      corpusLoaded: state => state.Corpus.corpusLoaded
+    })
+  }
 }
 
 </script>

src/components/nav/Search.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="search" class="col-11">
-    <form class="search-form row">
+    <form v-if="corpusLoaded" class="search-form row">
       <fieldset class="search">
         <div>
           <label for="keys">Search</label>
@@ -100,7 +100,8 @@ export default {
       searchTypeOptions: state => state.Search.searchTypeOptions,
       searchTypeValue: state => state.Search.searchTypeValue,
       filters: state => state.Search.filters,
-      activeFilters: state => state.Search.activeFilters
+      activeFilters: state => state.Search.activeFilters,
+      corpusLoaded: state => state.Corpus.corpusLoaded
     }),
     personsOptions () {
       return this.filters.persons.filter(option => !this.activeFilters.persons.includes(option))

src/pages/Edition.vue

@@ -78,8 +78,11 @@
 
 <script>
 
+import qs from 'querystring'
+
 import { REST } from 'api/rest-axios'
 import { mapState, mapActions } from 'vuex'
+
 import MainContentLayout from '../components/Layouts/MainContentLayout'
 import EdText from '../components/Content/EdText'
 import EdToc from '../components/Content/EdToc'
@@ -100,7 +103,6 @@ export default {
     EdPagination
   },
   data: () => ({
-    toc: null,
     meta: null,
     editionid: null,
     textid: null,
@@ -119,6 +121,8 @@ export default {
     inifinite_load_distance: 10,
     reftoscrollto: null,
     //
+    toc: null,
+    //
     pagination: null
   }),
   computed: {
@@ -162,103 +166,62 @@ export default {
       this.scrollToPage(newp)
     }
   },
-  beforeCreate () {
-    console.log('texts this.$route', this.$route)
-    // http://localhost:8984/texts/gdpSauval1724/toc
-    // get the edition's toc
-    REST.get(`${window.apipath}/texts/` + this.$route.params.id + `/toc`, {})
-      .then(({ data }) => {
-        console.log('texts/toc REST: data', data)
-        this.meta = data.meta
-        this.author = data.meta.author
-        if (data.content && data.content !== 'vide') {
-          if (Array.isArray(data.content)) {
-            this.toc = data.content
-          } else {
-            this.toc = [data.content]
-          }
-          // if front page get the first item in toc
-          if (!this.$route.params.textid) {
-            // console.log('toc', this.toc)
-            this.textid = this.toc[0].children[1].uuid
-          }
-        } else {
-          console.warn('Bad edition uuid', this.$route.params.id, this.$route)
-          // this.$router.replace({
-          //   name: 'notfound',
-          //   query: { fullpath: this.$route.path }
-          // })
-        }
-      })
-      .catch((error) => {
-        console.warn('Issue with text toc', error)
-        Promise.reject(error)
-      })
-    // get the edition's pagination
-    REST.get(`${window.apipath}/texts/` + this.$route.params.id + `/pagination`, {})
-      .then(({ data }) => {
-        console.log('texts/pagination REST: data', data)
-        if (data.content && data.content !== 'vide') {
-          this.pagination = data.content
-        } else {
-          console.warn('Bad edition uuid', this.$route.params.id, this.$route)
-          // this.$router.replace({
-          //   name: 'notfound',
-          //   query: { fullpath: this.$route.path }
-          // })
-        }
-      })
-      .catch((error) => {
-        console.warn('Issue with text toc', error)
-        Promise.reject(error)
-      })
-  },
   created () {
     // console.log('Edition this.$route.params.id', this.$route.params.id)
     this.editionid = this.$route.params.id
 
-    // load editions list from Corpus Store if not exist
-    if (!this.editionslist.length) {
-      // this.getCorpuses()
-      // subsribe to store to get the editionbyuuid list
-      // https://dev.to/viniciuskneves/watch-for-vuex-state-changes-2mgj
-      this.unsubscribe = this.$store.subscribe((mutation, state) => {
-        // console.log('Edition store subscribe', mutation.type)
-        if (mutation.type === 'Corpus/setEditionsByUUID') {
-          console.log('Edition state.Coprus.editionsbyuuid', this.editionid, state.Corpus.editionsbyuuid)
-          // this.title = 'HoHoHo'
-          this.title = this.metainfotitle = state.Corpus.editionsbyuuid[this.editionid].title
-        }
-      })
-    } else {
-      this.title = this.metainfotitle = this.editionsbyuuid[this.editionid].title
-    }
-
     // get the text if textid available
     if (this.$route.params.textid) {
       this.textid = this.$route.params.textid
     }
+
+    // wait for editions list from Corpus Store if not already loaded
+    if (!this.editionslist.length) {
+      // this.getCorpuses()
+      // subsribe to store to get the editionbyuuid list
+      // https://dev.to/viniciuskneves/watch-for-vuex-state-changes-2mgj
+      this.edUuuidsUnsubscribe = this.$store.subscribe((mutation, state) => {
+        // console.log('Edition store subscribe', mutation.type)
+        if (mutation.type === 'Corpus/setEditionsByUUID') {
+          // console.log('Edition state.Coprus.editionsbyuuid', this.editionid, state.Corpus.editionsbyuuid)
+          this.title = this.metainfotitle = state.Corpus.editionsbyuuid[this.editionid].title
+        }
+        if (mutation.type === 'Corpus/setTocs') {
+          // console.log('Edition state.Coprus.editionsbyuuid', this.editionid, state.Corpus.editionsbyuuid)
+          this.toc = state.Corpus.editionsbyuuid[this.editionid].toc
+          // if no textid in new route (e.g. edition front)
+          // but we have toc
+          // get the first item
+          // will be replaced by front page of edition
+          if (!this.textid) { this.textid = this.toc[0].children[1].uuid }
+        }
+        if (mutation.type === 'Corpus/setPaginations') {
+          // console.log('Edition state.Coprus.editionsbyuuid', this.editionid, state.Corpus.editionsbyuuid)
+          this.pagination = state.Corpus.editionsbyuuid[this.editionid].pagination
+        }
+      })
+    } else {
+      this.title = this.metainfotitle = this.editionsbyuuid[this.editionid].title
+      this.toc = this.editionsbyuuid[this.editionid].toc
+      // if no textid in new route (e.g. edition front)
+      // but we have toc
+      // get the first item
+      // will be replaced by front page of edition
+      if (!this.textid) { this.textid = this.toc[0].children[1].uuid }
+      this.pagination = this.editionsbyuuid[this.editionid].pagination
+    }
   },
-  // beforeRouteUpdate (to, from, next) {
-  //   // called when the route that renders this component has changed,
-  //   // but this component is reused in the new route.
-  //   // For example, for a route with dynamic params `/foo/:id`, when we
-  //   // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
-  //   // will be reused, and this hook will be called when that happens.
-  //   // has access to `this` component instance.
-  //   // console.log('beforeRouteUpdate to', to)
-  //   if (to.params.textid) {
-  //     this.textid = to.params.textid
-  //   }
-  //   next()
-  // },
   methods: {
     ...mapActions({
       getCorpuses: 'Corpus/getCorpuses'
     }),
     getTextContent (textid, $state = null, direction = 'next') {
       console.log('getTextContent', textid)
-      REST.get(`${window.apipath}/items/${textid}`, {})
+      let params = {
+        depth: 0
+      }
+      let q = qs.stringify(params)
+      REST.get(`${window.apipath}/items/${textid}?${q}`, {})
         .then(({ data }) => {
           console.log('text REST: data', data)
           if (direction === 'next') {

src/store/modules/corpus.js

@@ -8,7 +8,9 @@ export default {
     // items: [],
     authors: [],
     editionslist: [],
-    editionsbyuuid: {}
+    editionsbyuuid: {},
+    editionsuuids: [],
+    corpusLoaded: false
   },
 
   // getters
@@ -26,9 +28,27 @@ export default {
       for (var i = 0; i < editionlist.length; i++) {
         for (var j = 0; j < editionlist[i].editions.content.length; j++) {
           state.editionsbyuuid[editionlist[i].editions.content[j].uuid] = editionlist[i].editions.content[j]
+          state.editionsuuids.push(editionlist[i].editions.content[j].uuid)
         }
       }
       console.log('corpus editionsbyuuid', state.editionsbyuuid)
+    },
+    setTocs (state, tocslist) {
+      console.log('setTocs', tocslist)
+      tocslist.forEach((toc, i) => {
+        state.editionsbyuuid[toc.uuid].toc = toc.toc
+      })
+      // console.log('corpus editionsbyuuid', state.editionsbyuuid)
+    },
+    setPaginations (state, paginationslist) {
+      console.log('setPaginations', paginationslist)
+      paginationslist.forEach((pagination, i) => {
+        state.editionsbyuuid[pagination.uuid].pagination = pagination.pagination
+      })
+      // console.log('corpus editionsbyuuid', state.editionsbyuuid)
+    },
+    setCorpusLoaded (state) {
+      state.corpusLoaded = true
     }
   },
 
@@ -51,6 +71,19 @@ export default {
                 console.log('all texts returned: editionslist', editionslist)
                 commit('setEditionslist', editionslist)
                 commit('setEditionsByUUID', editionslist)
+
+                dispatch('getEditionsTocs')
+                  .then((tocslist) => {
+                    console.log('all tocs returned: tocslist', tocslist)
+                    commit('setTocs', tocslist)
+
+                    dispatch('getEditionsPaginations')
+                      .then((paginationslist) => {
+                        console.log('all paginations returned: paginationslist', paginationslist)
+                        commit('setPaginations', paginationslist)
+                        commit('setCorpusLoaded')
+                      })
+                  })
               })
           })
       })
@@ -87,6 +120,48 @@ export default {
             Promise.reject(error)
           })
       }))
+    },
+    // get tocslist
+    getEditionsTocs ({ dispatch, commit, state }) {
+      return Promise.all(state.editionsuuids.map(function (uuid) {
+        return REST.get(`${window.apipath}/texts/${uuid}/toc`, {})
+          .then(({ data }) => {
+            console.log('corpus getEditionsTocs REST: uuid, data', uuid, data)
+            // work arround
+            // if (!Array.isArray(data.content)) {
+            //   data.content = [data.content]
+            // }
+            return {
+              uuid: uuid,
+              toc: data.content
+            }
+          })
+          .catch((error) => {
+            console.warn('Issue with getEditionsTocs', error)
+            Promise.reject(error)
+          })
+      }))
+    },
+    // get tocslist
+    getEditionsPaginations ({ dispatch, commit, state }) {
+      return Promise.all(state.editionsuuids.map(function (uuid) {
+        return REST.get(`${window.apipath}/texts/${uuid}/pagination`, {})
+          .then(({ data }) => {
+            console.log('corpus getEditionsPaginations REST: uuid, data', uuid, data)
+            // work arround
+            // if (!Array.isArray(data.content)) {
+            //   data.content = [data.content]
+            // }
+            return {
+              uuid: uuid,
+              pagination: data.content
+            }
+          })
+          .catch((error) => {
+            console.warn('Issue with getEditionsPaginations', error)
+            Promise.reject(error)
+          })
+      }))
     }
   }
 }