implemented infinite loading

probleme with beforeItemUuid and afterItemUuid

package-lock.json

@@ -11902,6 +11902,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-infinite-loading": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/vue-infinite-loading/-/vue-infinite-loading-2.4.5.tgz",
+      "integrity": "sha512-xhq95Mxun060bRnsOoLE2Be6BR7jYwuC89kDe18+GmCLVrRA/dU0jrGb12Xu6NjmKs+iTW0AA6saSEmEW4cR7g=="
+    },
     "vue-jest": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-3.0.5.tgz",

package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "axios": "^0.18.1",
     "vue": "^2.6.10",
+    "vue-infinite-loading": "^2.4.5",
     "vue-meta": "^1.6.0",
     "vue-router": "^3.1.3",
     "vuex": "^3.1.1",

src/index.js

@@ -3,6 +3,8 @@ import router from './router'
 import store from './store'
 // import { sync } from 'vuex-router-sync'
 import Meta from 'vue-meta'
+import InfiniteLoading from 'vue-infinite-loading'
+
 import App from './App'
 
 import 'assets/css/mdi/css/materialdesignicons.css'
@@ -11,6 +13,23 @@ import 'assets/css/app.scss'
 
 Vue.use(Meta)
 
+Vue.use(InfiniteLoading, {
+  props: {
+    spinner: 'spiral'
+  },
+  slots: {
+    noMore: '',
+    noResult: ''
+  },
+  system: {
+    throttleLimit: 5000
+  }
+  // system: {
+  //   throttleLimit: 50,
+  //   /* other settings need to configure */
+  // }
+})
+
 // sync(store, router) // done. Returns an unsync callback fn
 
 new Vue({

src/pages/Edition.vue

@@ -31,12 +31,18 @@
 
     <!-- default slot -->
     <div id="text">
-      <EdText
-        v-if="textdata"
-        :tei="textdata.content.tei"
-        @onHoverLink="onHoverLink"
-        @onLeaveLink="onLeaveLink"
-      />
+      <template v-if="texts.length">
+        <infinite-loading direction="top" @infinite="prevText" />
+        <EdText
+          v-for="text in texts"
+          :key="text.content.uuid"
+          :tei="text.content.tei"
+          :uuid="text.content.uuid"
+          @onHoverLink="onHoverLink"
+          @onLeaveLink="onLeaveLink"
+        />
+        <infinite-loading @infinite="nextText" />
+      </template>
     </div>
 
     <template #nav>
@@ -72,7 +78,7 @@ export default {
     meta: null,
     editionid: null,
     textid: null,
-    textdata: null,
+    texts: [],
     metainfotitle: undefined,
     title: undefined,
     author: undefined,
@@ -90,7 +96,8 @@ export default {
   watch: {
     textid: function (newid, oldid) {
       console.log('textid watcher', this, oldid, newid)
-      this.getTextContent()
+      this.texts = []
+      this.getTextContent(newid)
     },
     textdata: function (newtxtdata, oldtxtdata) {
       console.log('textdata watcher', oldtxtdata, newtxtdata)
@@ -167,18 +174,39 @@ export default {
     ...mapActions({
       getCorpuses: 'Corpus/getCorpuses'
     }),
-    getTextContent () {
-      console.log('getTextContent', this.textid)
-      if (this.textid) {
-        REST.get(`/items/` + this.textid, {})
-          .then(({ data }) => {
-            console.log('text REST: data', data)
-            this.textdata = data
-          })
-          .catch((error) => {
-            console.warn('Issue with getTextContent', error)
-            Promise.reject(error)
-          })
+    getTextContent (textid, $state = null, direction = 'next') {
+      console.log('getTextContent', textid)
+      REST.get(`/items/${textid}`, {})
+        .then(({ data }) => {
+          console.log('text REST: data', data)
+          if (direction === 'next') {
+            this.texts.push(data)
+          } else {
+            this.texts.unshift(data)
+          }
+          if ($state) {
+            $state.loaded()
+          }
+        })
+        .catch((error) => {
+          console.warn('Issue with getTextContent', error)
+          Promise.reject(error)
+        })
+    },
+    nextText ($state) {
+      console.log('infinite loading nextText()', this.texts[this.texts.length - 1].content.itemAfterUuid, $state)
+      if (this.texts[this.texts.length - 1].content.itemAfterUuid) {
+        this.getTextContent(this.texts[this.texts.length - 1].content.itemAfterUuid, $state, 'next')
+      } else {
+        $state.complete()
+      }
+    },
+    prevText ($state) {
+      console.log('infinite loading prevText()', this.texts[0].content.itemBeforeUuid, $state)
+      if (this.texts[0].content.itemBeforeUuid) {
+        this.getTextContent(this.texts[0].content.itemBeforeUuid, $state, 'prev')
+      } else {
+        $state.complete()
       }
     },
     onHoverLink (elmt) {