#2064 fixed index loading

assets/css/app.scss

@@ -207,6 +207,12 @@ section[role="main-content"]{
         @include titleSansRed;
         margin: 0;
       }
+      &>span{
+        display: block;
+        margin: 0.5em 0 0;
+        @include title2black;
+        font-weight: 600;
+      }
 
     }
     &#list-corpus{

src/pages/IndexLocorum.vue

@@ -3,6 +3,7 @@
     <template v-slot:header>
       <h1>Lieux</h1>
       <span v-if="!items.length" class="loading">Chargement ...</span>
+      <span v-else>{{ meta.quantity.quantity }} {{ meta.quantity.unit }}</span>
     </template>
 
     <ul v-if="items.length" class="item-list">
@@ -47,6 +48,7 @@
 <script>
 
 import { REST } from 'api/rest-axios'
+import qs from 'querystring'
 import MainContentLayout from '../components/Layouts/MainContentLayout'
 import LocorumItem from '../components/Content/LocorumItem'
 
@@ -62,14 +64,42 @@ export default {
   data: () => ({
     items: [],
     letters: {},
-    activeLetter: null
+    activeLetter: null,
+    meta: null,
+    content: []
   }),
-  beforeCreate () {
+  created () {
-    REST.get(`${window.apipath}/indexLocorum`, {})
+    this.loadIndex(1, 200)
+  },
+  methods: {
+    loadIndex (start, count) {
+      console.log('loadIndex', start, count)
+      // construct params
+      let params = {
+        start: start,
+        count: count
+      }
+      let q = qs.stringify(params)
+      REST.get(`${window.apipath}/indexLocorum?` + q, {})
         .then(({ data }) => {
           console.log('index locorum REST: data', data)
-        if (data.content.length) {
+          this.meta = data.meta
-          this.items = data.content.sort((a, b) => {
+          this.content = this.content.concat(data.content)
+          if (this.content.length < data.meta.quantity.quantity) {
+            this.loadIndex(start + count, count)
+          } else {
+            this.parseIndex()
+          }
+        })
+        .catch((error) => {
+          console.warn('Issue with index locorum', error)
+          Promise.reject(error)
+        })
+    },
+    parseIndex () {
+      console.log('parseIndex', this.content)
+      if (this.content.length) {
+        this.items = this.content.sort((a, b) => {
           let Aletter = a.letter.toLowerCase()
           let Bletter = b.letter.toLowerCase()
           if (Aletter < Bletter) {
@@ -96,23 +126,17 @@ export default {
           }
         }
       }
-        console.log(this.letters)
+      // console.log(this.letters)
-        this.letters = this.letters.sort((a, b) => {
+      // this.letters = this.letters.sort((a, b) => {
-          if (a.l < b.l) {
+      //   if (a.l < b.l) {
-            return -1
+      //     return -1
-          } else if (a.l > b.l) {
+      //   } else if (a.l > b.l) {
-            return 1
+      //     return 1
-          } else {
+      //   } else {
-            return 0
+      //     return 0
-          }
+      //   }
-        })
+      // })
-      })
-      .catch((error) => {
-        console.warn('Issue with index locorum', error)
-        Promise.reject(error)
-      })
     },
-  methods: {
     onClickLetter (l) {
       this.activeLetter = l
       // console.log('activeLetter', this.activeLetter)

src/pages/IndexNominum.vue

@@ -3,6 +3,7 @@
     <template v-slot:header>
       <h1>Personnes</h1>
       <span v-if="!items.length" class="loading">Chargement ...</span>
+      <span v-else>{{ meta.quantity.quantity }} {{ meta.quantity.unit }}</span>
     </template>
 
     <ul v-if="items.length" class="item-list">
@@ -47,6 +48,7 @@
 <script>
 
 import { REST } from 'api/rest-axios'
+import qs from 'querystring'
 import MainContentLayout from '../components/Layouts/MainContentLayout'
 import NominumItem from '../components/Content/NominumItem'
 
@@ -62,16 +64,43 @@ export default {
   data: () => ({
     items: [],
     letters: {},
-    activeLetter: null
+    activeLetter: null,
+    meta: null,
+    content: []
   }),
-  beforeCreate () {
+  created () {
     // items/gdpLeMaire1685T01BodyFr01.003.016
     // texts/gdpSauval1724
-    REST.get(`${window.apipath}/indexNominum`, {})
+    this.loadIndex(0, 200)
+  },
+  methods: {
+    loadIndex (start, count) {
+      console.log('loadIndex', start, count)// construct params
+      let params = {
+        start: start,
+        count: count
+      }
+      let q = qs.stringify(params)
+      REST.get(`${window.apipath}/indexNominum?` + q, { start: start, count: count })
         .then(({ data }) => {
           console.log('index nominum REST: data', data)
-        if (data.content.length) {
+          this.meta = data.meta
-          this.items = data.content.sort((a, b) => {
+          this.content = this.content.concat(data.content)
+          if (this.content.length < data.meta.quantity.quantity) {
+            this.loadIndex(start + count, count)
+          } else {
+            this.parseIndex()
+          }
+        })
+        .catch((error) => {
+          console.warn('Issue with index nominum', error)
+          Promise.reject(error)
+        })
+    },
+    parseIndex () {
+      console.log('parseIndex', this.content)
+      if (this.content.length) {
+        this.items = this.content.sort((a, b) => {
           let Aletter = a.letter.toLowerCase()
           let Bletter = b.letter.toLowerCase()
           if (Aletter < Bletter) {
@@ -98,23 +127,17 @@ export default {
           }
         }
       }
-        console.log(this.letters)
+      // console.log('this.letters', this.letters)
-        this.letters = this.letters.sort((a, b) => {
+      // this.letters = this.letters.sort((a, b) => {
-          if (a.l < b.l) {
+      //   if (a.l < b.l) {
-            return -1
+      //     return -1
-          } else if (a.l > b.l) {
+      //   } else if (a.l > b.l) {
-            return 1
+      //     return 1
-          } else {
+      //   } else {
-            return 0
+      //     return 0
-          }
+      //   }
-        })
+      // })
-      })
-      .catch((error) => {
-        console.warn('Issue with index nominum', error)
-        Promise.reject(error)
-      })
     },
-  methods: {
     onClickLetter (l) {
       this.activeLetter = l
       // console.log('activeLetter', this.activeLetter)

src/pages/IndexOperum.vue

@@ -3,6 +3,7 @@
     <template v-slot:header>
       <h1>Œuvres</h1>
       <span v-if="!items.length" class="loading">Chargement ...</span>
+      <span v-else>{{ meta.quantity.quantity }} {{ meta.quantity.unit }}</span>
     </template>
 
     <ul v-if="items.length" class="item-list">
@@ -49,6 +50,7 @@
 <script>
 
 import { REST } from 'api/rest-axios'
+import qs from 'querystring'
 import MainContentLayout from '../components/Layouts/MainContentLayout'
 import OperumItem from '../components/Content/OperumItem'
 
@@ -64,14 +66,41 @@ export default {
   data: () => ({
     items: [],
     letters: {},
-    activeLetter: null
+    activeLetter: null,
+    meta: null,
+    content: []
   }),
-  beforeCreate () {
+  created () {
-    REST.get(`${window.apipath}/indexOperum`, {})
+    this.loadIndex(1, 200)
+  },
+  methods: {
+    loadIndex (start, count) {
+      console.log('loadIndex', start, count)
+      // construct params
+      let params = {
+        start: start,
+        count: count
+      }
+      let q = qs.stringify(params)
+      REST.get(`${window.apipath}/indexOperum?` + q, {})
         .then(({ data }) => {
           console.log('index operum REST: data', data)
-        if (data.content.length) {
+          this.meta = data.meta
-          this.items = data.content.sort((a, b) => {
+          this.content = this.content.concat(data.content)
+          if (this.content.length < data.meta.quantity.quantity) {
+            this.loadIndex(start + count, count)
+          } else {
+            this.parseIndex()
+          }
+        })
+        .catch((error) => {
+          console.warn('Issue with index operum', error)
+          Promise.reject(error)
+        })
+    },
+    parseIndex () {
+      if (this.content.length) {
+        this.items = this.content.sort((a, b) => {
           let Aletter = a.letter.toLowerCase()
           let Bletter = b.letter.toLowerCase()
           if (Aletter < Bletter) {
@@ -98,23 +127,17 @@ export default {
           }
         }
       }
-        console.log(this.letters)
+      // console.log(this.letters)
-        this.letters = this.letters.sort((a, b) => {
+      // this.letters = this.letters.sort((a, b) => {
-          if (a.l < b.l) {
+      //   if (a.l < b.l) {
-            return -1
+      //     return -1
-          } else if (a.l > b.l) {
+      //   } else if (a.l > b.l) {
-            return 1
+      //     return 1
-          } else {
+      //   } else {
-            return 0
+      //     return 0
-          }
+      //   }
-        })
+      // })
-      })
-      .catch((error) => {
-        console.warn('Issue with index operum', error)
-        Promise.reject(error)
-      })
     },
-  methods: {
     onClickLetter (l) {
       this.activeLetter = l
       // console.log('activeLetter', this.activeLetter)