Update dataset page to use query parameters

frontend/components/containers/documents/DocumentList.vue

@@ -10,10 +10,10 @@
     :footer-props="{
       'items-per-page-options': [10, 50, 100]
     }"
-    @input="updateSelected"
     item-key="id"
     loading-text="Loading... Please wait"
     show-select
+    @input="updateSelected"
   >
     <template v-slot:top>
       <v-text-field
@@ -32,18 +32,18 @@
         <template v-slot:input>
           <v-textarea
             :value="item.text"
-            @change="handleUpdateDocument({ id: item.id, text: $event })"
             label="Edit"
             autofocus
+            @change="handleUpdateDocument({ id: item.id, text: $event })"
           />
         </template>
       </v-edit-dialog>
     </template>
     <template v-slot:item.action="{ item }">
       <v-btn
-        @click="goToAnnotationPage(item)"
         small
         color="primary text-capitalize"
+        @click="toLabeling(item)"
       >
         Annotate
       </v-btn>
@@ -55,6 +55,13 @@
 import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
 
 export default {
+  async fetch() {
+    await this.getDocumentList({
+      projectId: this.$route.params.id,
+      ...this.$route.query
+    })
+  },
+
   data() {
     return {
       search: '',
@@ -88,38 +95,34 @@ export default {
   },
 
   watch: {
+    '$route.query': '$fetch',
     options: {
-      handler() {
-        this.updateSearchOptions({
-          limit: this.options.itemsPerPage,
-          offset: (this.options.page - 1) * this.options.itemsPerPage
-        })
-        this.getDocumentList({
-          projectId: this.$route.params.id
+      handler(newvalue, oldvalue) {
+        this.$router.push({
+          query: {
+            limit: this.options.itemsPerPage,
+            offset: (this.options.page - 1) * this.options.itemsPerPage,
+            q: this.search
+          }
         })
       },
       deep: true
     },
     search() {
-      this.updateSearchOptions({
-        q: this.search
-      })
-      this.getDocumentList({
-        projectId: this.$route.params.id
+      this.$router.push({
+        query: {
+          limit: this.options.itemsPerPage,
+          offset: 0,
+          q: this.search
+        }
       })
+      this.options.page = 1
     }
   },
 
-  created() {
-    this.initSearchOptions()
-    this.getDocumentList({
-      projectId: this.$route.params.id
-    })
-  },
-
   methods: {
     ...mapActions('documents', ['getDocumentList', 'updateDocument']),
-    ...mapMutations('documents', ['updateSelected', 'updateSearchOptions', 'setCurrent', 'initSearchOptions']),
+    ...mapMutations('documents', ['updateSelected']),
 
     handleUpdateDocument(payload) {
       const data = {
@@ -129,17 +132,17 @@ export default {
       this.updateDocument(data)
     },
 
-    goToAnnotationPage(doc) {
+    toLabeling(doc) {
       const index = this.items.findIndex(item => item.id === doc.id)
-      const limit = this.options.itemsPerPage
-      const offset = (this.options.page - 1) * limit
-      const q = this.search
-      this.updateSearchOptions({ limit, offset, q })
-      this.$router.push('/projects/' + this.$route.params.id + '/' + this.getLink)
-      this.setCurrent(index)
-      const checkpoint = {}
-      checkpoint[this.$route.params.id] = index + 1
-      localStorage.setItem('checkpoint', JSON.stringify(checkpoint))
+      const offset = (this.options.page - 1) * this.options.itemsPerPage
+      const page = offset + index + 1
+      this.$router.push({
+        path: `/projects/${this.$route.params.id}/${this.getLink}`,
+        query: {
+          page,
+          q: this.search
+        }
+      })
     }
   }
 }

frontend/pages/projects/_id/dataset/index.vue

@@ -22,8 +22,9 @@ export default {
     DocumentDeletionButton
   },
 
-  validate({ params }) {
-    return /^\d+$/.test(params.id)
+  validate({ params, query }) {
+    console.log(query)
+    return /^\d+$/.test(params.id) && /^\d+|$/.test(query.limit) && /^\d+|$/.test(query.offset)
   }
 }
 </script>

frontend/services/document.service.js

@@ -5,7 +5,7 @@ class DocumentService {
     this.request = ApiService
   }
 
-  getDocumentList({ projectId, limit, offset, q = '', isChecked = '', filterName = '' }) {
+  getDocumentList({ projectId, limit = 10, offset = 0, q = '', isChecked = '', filterName = '' }) {
     return this.request.get(`/projects/${projectId}/docs?limit=${limit}&offset=${offset}&q=${q}&${filterName}=${isChecked}`)
   }
 

frontend/store/documents.js

@@ -88,7 +88,7 @@ export const mutations = {
 export const actions = {
   getDocumentList({ commit, state }, payload) {
     commit('setLoading', true)
-    payload = Object.assign(payload, state.searchOptions)
+    // payload = Object.assign(payload, state.searchOptions)
     return DocumentService.getDocumentList(payload)
       .then((response) => {
         commit('setDocumentList', response.data.results)