Enable pagination in server side

frontend/components/containers/DocumentList.vue

@@ -4,8 +4,10 @@
     :docs="items"
     :selected="selected"
     :loading="loading"
+    :total="total"
     @update-selected="updateSelected"
     @update-doc="handleUpdateDoc"
+    @change-option="handleChangeOption"
   />
 </template>
 
@@ -19,12 +21,14 @@ export default {
   },
 
   computed: {
-    ...mapState('documents', ['items', 'selected', 'loading']),
+    ...mapState('documents', ['items', 'selected', 'loading', 'total']),
     ...mapGetters('documents', ['headers'])
   },
 
   created() {
-    this.getDocumentList()
+    this.getDocumentList({
+      projectId: this.$route.params.id
+    })
   },
 
   methods: {
@@ -37,6 +41,14 @@ export default {
         ...payload
       }
       this.updateDocument(data)
+    },
+
+    handleChangeOption(option) {
+      this.getDocumentList({
+        projectId: this.$route.params.id,
+        limit: option.itemsPerPage,
+        offset: (option.page - 1) * option.itemsPerPage
+      })
     }
   }
 }

frontend/components/organisms/DocumentList.vue

@@ -4,8 +4,13 @@
     :headers="headers"
     :items="docs"
     item-key="id"
+    :options.sync="options"
+    :server-items-length="total"
     :search="search"
     :loading="loading"
+    :footer-props="{
+      'items-per-page-options': [10, 50, 100]
+    }"
     loading-text="Loading... Please wait"
     show-select
     @input="update"
@@ -59,11 +64,25 @@ export default {
       type: Boolean,
       default: false,
       required: true
+    },
+    total: {
+      type: Number,
+      default: 0,
+      required: true
     }
   },
   data() {
     return {
-      search: ''
+      search: '',
+      options: {}
+    }
+  },
+  watch: {
+    options: {
+      handler() {
+        this.$emit('change-option', this.options)
+      },
+      deep: true
     }
   },
   methods: {

frontend/services/document.service.js

@@ -5,8 +5,8 @@ class DocumentService {
     this.request = new ApiService()
   }
 
-  getDocumentList(projectId) {
-    return this.request.get(`/projects/${projectId}/docs`)
+  getDocumentList({ projectId, limit, offset }) {
+    return this.request.get(`/projects/${projectId}/docs?limit=${limit}&offset=${offset}`)
   }
 
   addDocument(projectId, payload) {

frontend/store/documents.js

@@ -8,7 +8,8 @@ export const state = () => ({
   loading: false,
   selectedFormat: null,
   parsed: {},
-  current: 0
+  current: 0,
+  total: 0
 })
 
 export const getters = {
@@ -39,12 +40,14 @@ export const getters = {
       {
         text: 'Text',
         align: 'left',
-        value: 'text'
+        value: 'text',
+        sortable: false
       },
       {
         text: 'Metadata',
         align: 'left',
-        value: 'meta'
+        value: 'meta',
+        sortable: false
       }
     ]
   },
@@ -83,6 +86,9 @@ export const mutations = {
   setLoading(state, payload) {
     state.loading = payload
   },
+  setTotalItems(state, payload) {
+    state.total = payload
+  },
   parseFile(state, text) {
     const parser = new CSVParser()
     state.parsed = parser.parse(text)
@@ -100,11 +106,12 @@ export const mutations = {
 }
 
 export const actions = {
-  getDocumentList({ commit }, config) {
+  getDocumentList({ commit }, payload) {
     commit('setLoading', true)
-    return DocumentService.getDocumentList()
+    return DocumentService.getDocumentList(payload)
       .then((response) => {
         commit('setDocumentList', response.results)
+        commit('setTotalItems', response.count)
       })
       .catch((error) => {
         alert(error)