From 41d39bb088152735d61ec022da6a8ac58bee7252 Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Tue, 20 Jun 2023 12:17:01 +0200
Subject: [PATCH] #2064 fixed index loading

---
 assets/css/app.scss        |   6 ++
 src/pages/IndexLocorum.vue | 110 ++++++++++++++++++++++---------------
 src/pages/IndexNominum.vue | 109 +++++++++++++++++++++---------------
 src/pages/IndexOperum.vue  | 109 +++++++++++++++++++++---------------
 4 files changed, 205 insertions(+), 129 deletions(-)

diff --git a/assets/css/app.scss b/assets/css/app.scss
index 7812be9..c7a30e1 100644
--- a/assets/css/app.scss
+++ b/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{
diff --git a/src/pages/IndexLocorum.vue b/src/pages/IndexLocorum.vue
index 2554e2b..639d975 100644
--- a/src/pages/IndexLocorum.vue
+++ b/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,57 +64,79 @@ export default {
   data: () => ({
     items: [],
     letters: {},
-    activeLetter: null
+    activeLetter: null,
+    meta: null,
+    content: []
   }),
-  beforeCreate () {
-    REST.get(`${window.apipath}/indexLocorum`, {})
-      .then(({ data }) => {
-        console.log('index locorum REST: data', data)
-        if (data.content.length) {
-          this.items = data.content.sort((a, b) => {
-            let Aletter = a.letter.toLowerCase()
-            let Bletter = b.letter.toLowerCase()
-            if (Aletter < Bletter) {
-              return -1
-            } else if (Aletter > Bletter) {
-              return 1
-            } else {
-              return 0
-            }
-          })
-        }
-        for (let i = 0; i < this.items.length; i++) {
-          // console.log(typeof this.items[i].letter)
-          if (this.items[i].letter !== '') {
-            let letter = this.items[i].letter.toLowerCase()
-            console.log(letter)
-            if (Object.keys(this.letters).indexOf(letter) === -1) {
-              this.letters[letter] = {
-                l: letter,
-                q: 1
-              }
-            } else {
-              this.letters[letter].q += 1
-            }
+  created () {
+    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)
+          this.meta = data.meta
+          this.content = this.content.concat(data.content)
+          if (this.content.length < data.meta.quantity.quantity) {
+            this.loadIndex(start + count, count)
+          } else {
+            this.parseIndex()
           }
-        }
-        console.log(this.letters)
-        this.letters = this.letters.sort((a, b) => {
-          if (a.l < b.l) {
+        })
+        .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) {
             return -1
-          } else if (a.l > b.l) {
+          } else if (Aletter > Bletter) {
             return 1
           } else {
             return 0
           }
         })
-      })
-      .catch((error) => {
-        console.warn('Issue with index locorum', error)
-        Promise.reject(error)
-      })
-  },
-  methods: {
+      }
+      for (let i = 0; i < this.items.length; i++) {
+        // console.log(typeof this.items[i].letter)
+        if (this.items[i].letter !== '') {
+          let letter = this.items[i].letter.toLowerCase()
+          console.log(letter)
+          if (Object.keys(this.letters).indexOf(letter) === -1) {
+            this.letters[letter] = {
+              l: letter,
+              q: 1
+            }
+          } else {
+            this.letters[letter].q += 1
+          }
+        }
+      }
+      // console.log(this.letters)
+      // this.letters = this.letters.sort((a, b) => {
+      //   if (a.l < b.l) {
+      //     return -1
+      //   } else if (a.l > b.l) {
+      //     return 1
+      //   } else {
+      //     return 0
+      //   }
+      // })
+    },
     onClickLetter (l) {
       this.activeLetter = l
       // console.log('activeLetter', this.activeLetter)
diff --git a/src/pages/IndexNominum.vue b/src/pages/IndexNominum.vue
index 7cae7cf..aa5418c 100644
--- a/src/pages/IndexNominum.vue
+++ b/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,59 +64,80 @@ 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`, {})
-      .then(({ data }) => {
-        console.log('index nominum REST: data', data)
-        if (data.content.length) {
-          this.items = data.content.sort((a, b) => {
-            let Aletter = a.letter.toLowerCase()
-            let Bletter = b.letter.toLowerCase()
-            if (Aletter < Bletter) {
-              return -1
-            } else if (Aletter > Bletter) {
-              return 1
-            } else {
-              return 0
-            }
-          })
-        }
-        for (let i = 0; i < this.items.length; i++) {
-          // console.log(typeof this.items[i].letter)
-          if (this.items[i].letter !== '') {
-            let letter = this.items[i].letter.toLowerCase()
-            console.log(letter)
-            if (Object.keys(this.letters).indexOf(letter) === -1) {
-              this.letters[letter] = {
-                l: letter,
-                q: 1
-              }
-            } else {
-              this.letters[letter].q += 1
-            }
+    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)
+          this.meta = data.meta
+          this.content = this.content.concat(data.content)
+          if (this.content.length < data.meta.quantity.quantity) {
+            this.loadIndex(start + count, count)
+          } else {
+            this.parseIndex()
           }
-        }
-        console.log(this.letters)
-        this.letters = this.letters.sort((a, b) => {
-          if (a.l < b.l) {
+        })
+        .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) {
             return -1
-          } else if (a.l > b.l) {
+          } else if (Aletter > Bletter) {
             return 1
           } else {
             return 0
           }
         })
-      })
-      .catch((error) => {
-        console.warn('Issue with index nominum', error)
-        Promise.reject(error)
-      })
-  },
-  methods: {
+      }
+      for (let i = 0; i < this.items.length; i++) {
+        // console.log(typeof this.items[i].letter)
+        if (this.items[i].letter !== '') {
+          let letter = this.items[i].letter.toLowerCase()
+          console.log(letter)
+          if (Object.keys(this.letters).indexOf(letter) === -1) {
+            this.letters[letter] = {
+              l: letter,
+              q: 1
+            }
+          } else {
+            this.letters[letter].q += 1
+          }
+        }
+      }
+      // console.log('this.letters', this.letters)
+      // this.letters = this.letters.sort((a, b) => {
+      //   if (a.l < b.l) {
+      //     return -1
+      //   } else if (a.l > b.l) {
+      //     return 1
+      //   } else {
+      //     return 0
+      //   }
+      // })
+    },
     onClickLetter (l) {
       this.activeLetter = l
       // console.log('activeLetter', this.activeLetter)
diff --git a/src/pages/IndexOperum.vue b/src/pages/IndexOperum.vue
index 6115fd5..afd6739 100644
--- a/src/pages/IndexOperum.vue
+++ b/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,57 +66,78 @@ export default {
   data: () => ({
     items: [],
     letters: {},
-    activeLetter: null
+    activeLetter: null,
+    meta: null,
+    content: []
   }),
-  beforeCreate () {
-    REST.get(`${window.apipath}/indexOperum`, {})
-      .then(({ data }) => {
-        console.log('index operum REST: data', data)
-        if (data.content.length) {
-          this.items = data.content.sort((a, b) => {
-            let Aletter = a.letter.toLowerCase()
-            let Bletter = b.letter.toLowerCase()
-            if (Aletter < Bletter) {
-              return -1
-            } else if (Aletter > Bletter) {
-              return 1
-            } else {
-              return 0
-            }
-          })
-        }
-        for (let i = 0; i < this.items.length; i++) {
-          // console.log(typeof this.items[i].letter)
-          if (this.items[i].letter !== '') {
-            let letter = this.items[i].letter.toLowerCase()
-            console.log(letter)
-            if (Object.keys(this.letters).indexOf(letter) === -1) {
-              this.letters[letter] = {
-                l: letter,
-                q: 1
-              }
-            } else {
-              this.letters[letter].q += 1
-            }
+  created () {
+    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)
+          this.meta = data.meta
+          this.content = this.content.concat(data.content)
+          if (this.content.length < data.meta.quantity.quantity) {
+            this.loadIndex(start + count, count)
+          } else {
+            this.parseIndex()
           }
-        }
-        console.log(this.letters)
-        this.letters = this.letters.sort((a, b) => {
-          if (a.l < b.l) {
+        })
+        .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) {
             return -1
-          } else if (a.l > b.l) {
+          } else if (Aletter > Bletter) {
             return 1
           } else {
             return 0
           }
         })
-      })
-      .catch((error) => {
-        console.warn('Issue with index operum', error)
-        Promise.reject(error)
-      })
-  },
-  methods: {
+      }
+      for (let i = 0; i < this.items.length; i++) {
+        // console.log(typeof this.items[i].letter)
+        if (this.items[i].letter !== '') {
+          let letter = this.items[i].letter.toLowerCase()
+          console.log(letter)
+          if (Object.keys(this.letters).indexOf(letter) === -1) {
+            this.letters[letter] = {
+              l: letter,
+              q: 1
+            }
+          } else {
+            this.letters[letter].q += 1
+          }
+        }
+      }
+      // console.log(this.letters)
+      // this.letters = this.letters.sort((a, b) => {
+      //   if (a.l < b.l) {
+      //     return -1
+      //   } else if (a.l > b.l) {
+      //     return 1
+      //   } else {
+      //     return 0
+      //   }
+      // })
+    },
     onClickLetter (l) {
       this.activeLetter = l
       // console.log('activeLetter', this.activeLetter)