individual pagination for nn and bm

src/components/DictionaryView.vue

@@ -4,7 +4,9 @@
       <Autocomplete v-on:submit="select_result" :api="get_search_endpoint">
       </Autocomplete>
       <SearchToolbar v-if="$store.state.showSearchToolbar" @updatePos="update_pos"  @updateScope="update_scope"/>
+      <v-container><v-row><v-col cols="6"><v-pagination circle :length="100"></v-pagination></v-col><v-col cols="6"><v-pagination circle :length="100"></v-pagination></v-col></v-row></v-container>
     </div>
+    
     <SearchResults  :results_bm="search_results.bm"
                     :results_nn="search_results.nn"
                     :lang="lang"
@@ -95,7 +97,17 @@ function navigate_to_article(self, source) {
   })
   .then(function(response){
     self.waiting_for_articles = false
-    history.replaceState({article: self.article, search_results: [], lang: self.lang, error: self.error, pos_selected: self.pos_selected, scope: self.scope, article_info: self.article_info, page: self.page}, '')
+    history.replaceState({article: self.article, 
+                          search_results: [], 
+                          lang: self.lang, 
+                          error: self.error, 
+                          pos_selected: self.pos_selected, 
+                          scope: self.scope, 
+                          article_info: self.article_info, 
+                          bm_page: self.bm_page,
+                          nn_page: self.nn_page,
+                          nn_pp: self.nn_pp,
+                          bm_pp: self.bm_pp}, '')
     if (source) {
       self.$plausible.trackEvent('internal link incoming', {props: {origin: source}})
     }
@@ -177,8 +189,8 @@ function navigate_to_query(self, word) {
             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, 0, 20, "bm"),
+              load_articles(self, query, 0, 20, "nn")
             ])
             .then(() => {
               self.waiting_for_articles = false
@@ -190,7 +202,10 @@ function navigate_to_query(self, word) {
                 scope: self.scope,
                 article_info: self.article_info,
                 search_results: self.search_results,
-                page: self.page
+                nn_page: self.nn_page,
+                bm_page: self.bm_page,
+                nn_pp: self.nn_pp,
+                bm_pp: self.bm_pp
               }, '')
             })
           
@@ -218,8 +233,8 @@ export default {
       scope: "w",
       pos_selected: "ALL",
       article_info: null,
-      page: 1,
-      max_scroll: 0
+      nn_page: null,
+      bm_page: null,
     }
   },
   computed: {
@@ -288,6 +303,19 @@ 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 )
+        let q = (this.$route.query || this.$route.params).q
+        let path = `/${this.lang}/search`
+        let pos = this.pos_param()
+        let query = {q: q, page: this.page}
+        if (pos != 'all') query.pos = pos
+        if (this.scope) query.scope = this.scope
+        this.$router.push({path, query})
+
+
+      },
 
       reload_params: function() {
         let q = (this.$route.query || this.$route.params).q
@@ -303,6 +331,7 @@ export default {
       },
 
       update_lang_form: function (lang) {
+        console.log(this.article_info)
         this.lang = lang
         this.reload_params()
       },
@@ -318,7 +347,17 @@ export default {
     article_link_click: function(item) {
       if (this.article && this.article.article_id == item.article_id){
         this.article_key++
-        history.replaceState({article: this.article, search_results: this.search_results, lang: this.lang, error: this.error, pos_selected: this.pos_selected, scope: this.scope, article_info: this.article_info, page: this.page}, '')
+        history.replaceState({article: this.article, 
+                              search_results: this.search_results, 
+                              lang: this.lang, 
+                              error: this.error, 
+                              pos_selected: this.pos_selected, 
+                              scope: this.scope, 
+                              article_info: this.article_info, 
+                              bm_page: this.bm_page,
+                              nn_page: this.nn_page,
+                              nn_pp: this.nn_pp,
+                              bm_pp: this.bm_pp}, '')
 
       }else{
         navigate_to_article(this, item.source)
@@ -327,7 +366,17 @@ export default {
     details_click: function(item) {
       item.article.source = this.previous
       this.article = item.article
-      history.replaceState({article: this.article, search_results: [], lang: this.lang, error: null, pos_selected: this.pos_selected, scope: this.scope, article_info: this.article_info, page: this.page}, '')
+      history.replaceState({article: this.article,
+                            search_results: [],
+                            lang: this.lang,
+                            error: null,
+                            pos_selected: this.pos_selected,
+                            scope: this.scope,
+                            article_info: this.article_info,
+                            bm_page: this.bm_page,
+                            nn_page: this.nn_page,
+                            nn_pp: this.nn_pp,
+                            bm_pp: this.bm_pp}, '')
     },
     return_to_results: function() {
       this.article = null
@@ -347,10 +396,10 @@ export default {
     if (self.$route.query.scope) {
       self.scope = self.$route.query.scope
     } 
-    if (self.$route.query.page) {
-      self.page = self.$route.query.page
-      console.log(self.page)
-    } 
+    if (self.$route.query.bm_page) self.bm_page = self.$route.query.bm_page
+    if (self.$route.query.nn_page) self.nn_page = self.$route.query.nn_page
+    if (self.$route.query.bm_pp) self.bm_pp = self.$route.query.bm_pp
+    if (self.$route.query.nn_pp) self.nn_pp = self.$route.query.nn_pp
 
     Promise.all([
       axios.get(ARTICLE_ENDPOINT + 'bm/concepts.json').then(function(response){
@@ -384,7 +433,10 @@ export default {
                               pos_selected: self.pos_selected,
                               scope: self.scope,
                               article_info: self.article_info,
-                              page: self.page}, '')
+                              nn_page: self.nn_page,
+                              bm_page: self.bm_page,
+                              nn_pp: self.nn_pp,
+                              bm_pp: self.bm_pp}, '')
 
 
       // words of the month
@@ -416,7 +468,10 @@ export default {
         self.pos_selected = event.pos_selected || self.pos_selected
         self.scope = event.scope || self.scope
         self.error = event.state.error
-        self.page = event.state.page
+        self.bm_page = event.state.bm_page,
+        self.nn_page = event.state.nn_page,
+        self.bm_pp = event.state.bm_pp,
+        self.nn_pp = event.state.nn_pp
       }
     }