fix pagination

src/components/DictionaryView.vue

@@ -11,9 +11,9 @@
                     :results_nn="search_results.nn || []"
                     :lang="lang"
                     :key="lang"
-                    :meta="this.article_info.meta"
                     @article-click="article_link_click"
                     @details-click="details_click"
+                    @update-page="update_page"
                     v-if="total_results() && ! article" />
     <div id="spinner" v-if="waiting">
       <v-progress-circular indeterminate color="secondary" size="120"></v-progress-circular>
@@ -114,15 +114,16 @@ function navigate_to_article(self, source) {
 }
 
 function load_articles(self, query, offset, n, dict) {
-
   let article_IDs = self.article_info.articles[dict]
   if (article_IDs)
   {
   if (offset > article_IDs.length) {
+  
     n = 0
   }
   else if (offset + n > article_IDs.length) {
-    n = n + (article_IDs.length - n)
+    n = article_IDs.length % n
+    
   }
 
   if (n > 0 && (self.lang == dict || self.lang == "bm,nn")) {
@@ -159,17 +160,20 @@ function load_articles(self, query, offset, n, dict) {
       else {
         self.error = null
       }
-      if (offset == 0) {
-        self.search_results[dict] = results
-      }
-      else {
-        self.search_results[dict] = self.search_results[dict].concat(results)
-      }
+
+      self.search_results[dict] = results
+      console.log("DICT", dict, "OFFSET", offset,"N", n, "RESULTS", results)
+      
+
     })
     .catch(error => {
       self.waiting_for_articles = false
       self.connection_error(error)
     })
+  }
+    else {
+    self.search_results[dict] = []
+    console.log("NO")
   }
   }
     return Promise.resolve()
@@ -184,13 +188,18 @@ function navigate_to_query(self, word) {
   
   // Get article IDs
   let params = {w: query.match || query.q, dict: self.lang, scope: self.scope, meta: 'y'}
+  let offset = 0
+  if (self.page) {
+    offset = 10 * (self.page -1)
+    console.log("PAGE", self.page)
+  }
   if (self.pos_selected != "ALL") params.wc = self.pos_selected
   api.get('articles?', {params}).then((response) => {
             self.article_info = response.data
             self.search_results = {}
             Promise.all([
-              load_articles(self, query, 0, 10, "bm"),
-              load_articles(self, query, 0, 10, "nn")
+              load_articles(self, query, offset, 10, "bm"),
+              load_articles(self, query, offset, 10, "nn")
             ])
             .then(() => {
               self.waiting_for_articles = false
@@ -253,11 +262,11 @@ export default {
     total_results: function() {
       if (this.article_info) {
         let total = 0
-        if (this.article_info.meta.bm) {
-          total += this.article_info.meta.bm.total
+        if (this.article_info.articles.bm) {
+          total += this.article_info.articles.bm.length
         }
-        if (this.article_info.meta.nn) {
-          total += this.article_info.meta.nn.total
+        if (this.article_info.articles.nn) {
+          total += this.article_info.articles.nn.length
         }
 
         return total
@@ -302,9 +311,7 @@ export default {
         if (this.pos_selected) return this.pos_selected.toLowerCase()
         return ""
       },
-      goto_page: function() {
-        let largest = max(this.article_info.bm.length, this.article_info.nn.length)
-        //if (this.page * 20 )
+      update_page: function() {
         let q = (this.$route.query || this.$route.params).q
         let path = `/${this.lang}/search`
         let pos = this.pos_param()
@@ -312,6 +319,33 @@ export default {
         if (pos != 'all') query.pos = pos
         if (this.scope) query.scope = this.scope
         this.$router.push({path, query})
+        let offset = 0
+        if (this.page) {
+          offset = 10 * (this.page -1)
+          console.log("PAGE", this.page)
+        }
+        console.log(query.q)
+
+      console.log(this)
+      let self = this
+      Promise.all([
+      load_articles(this, query, offset, 10, "bm"),
+      load_articles(this, query, offset, 10, "nn")]).then(() => {
+        history.replaceState({article: self.article, 
+                      search_results: self.search_results, 
+                      lang: self.lang, 
+                      error: self.error, 
+                      pos_selected: self.pos_selected, 
+                      scope: self.scope, 
+                      article_info: self.article_info, 
+                      page: self.page,
+                      perPage: self.perPage}, ''),
+         self.$forceUpdate()
+
+      }
+        
+      )
+      
 
 
       },

src/components/SearchResults.vue

 <template>
   <section id="search_results">
           <span flat color="tertiary" class = "pagination" v-if="!$parent.article && $parent.article_info && $parent.total_results() > 20">
-            <v-pagination :v-model="$parent.page" :value="$parent.page" :class="$vuetify.breakpoint.name" :total-visible="$vuetify.breakpoint.smAndDown ? 5 : 8" circle :length="Math.ceil($parent.total_results()/20)"></v-pagination>
+            <v-pagination @input="$emit('update-page')" v-model="$parent.page" :class="$vuetify.breakpoint.name" :total-visible="$vuetify.breakpoint.smAndDown ? 5 : 8" circle :length="Math.ceil($parent.total_results()/20)"></v-pagination>
                 <span class="result-counts">
                   <span class="total-results">{{$parent.total_results()}} treff </span>
                   <span v-if="$parent.lang=='bm,nn'" class="dict-counts"> | {{$vuetify.breakpoint.mdAndDown? 'bokmål': 'Bokmålsordboka'}}: {{count_bm}} | {{$vuetify.breakpoint.mdAndDown? 'nynorsk': 'Nynorskordboka'}}: {{count_nn}}</span>
@@ -82,13 +82,13 @@ export default {
       return this.results_nn.reduce((hash, hit) => (hash + hit.article_id) % 10000, 0)
     },
     count_bm: function(){
-      if (this.meta.bm ){
-        return this.meta.bm.total
+      if (this.$parent.article_info.articles.bm ){
+        return this.$parent.article_info.articles.bm.length
       }
     },
     count_nn: function(){
-      if (this.meta.nn) {
-        return this.meta.nn.total
+      if (this.$parent.article_info.articles.nn ){
+        return this.$parent.article_info.articles.nn.length
       }
     }
   },