Close #51: Pagination for UpdateItems table

web/src/components/CMS/fetchUpdateItems.vue

@@ -38,7 +38,7 @@ export default {
       const query = qs.stringify({
         sort: ['id:asc'],
         pagination: {
-          pageSize: 1000,
+          pageSize: 10,
           page: 1,
         },
       }, {

web/src/components/UpdateItemTable.vue

@@ -6,6 +6,8 @@
 
 <script>
 const _ = require('lodash');
+let host = require('./js/const').apiHost
+
 const $ = window.jQuery = require('jquery');
 require('@/components/js/datatable');
 
@@ -13,23 +15,28 @@ let table;
 
 export default {
   name: 'update-item-table',
-  props: ['id', 'data'],
+  props: ['id', 'data', 'meta'],
   data() {
     return {
+      rows: [],
+      header: [],
+      total: 0,
+      isDev: process.env.NODE_ENV === 'development',
     };
   },
+  computed: {
+    jwt: function () {
+      return this.$store.getters['User/jwt']
+    },
+  },
   methods: {
     editUpdateItem(id) {
       // eslint-disable-next-line
       this.$router.push('/updateitem/' + id)
     },
-    createTable(id, data) {
+    createTable(id) {
       const vm = this;
 
-      _.forEach(data, (d) => {
-        d.DT_RowID = `${d.id}`;
-      });
-
       const columns = [
         {
           title: 'ID',
@@ -92,19 +99,25 @@ export default {
           },
         }];
 
+      vm.headers = columns
+
       const nTableOptions = {
         columns,
         // aaSorting: [[ 0, 'asc' ]],
-        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
         paging: true,
         searching: true,
-        info: false,
-        data,
+        info: true,
+        bProcessing: true,
+        bServerSide: true,
         order: [], // order: [[0, 'asc']],
         bDestroy: true, // Add this property to new setting,
         oLanguage: {
           sSearch: "Filter",
         },
+        fnServerData: function (sSource, aoData, fnCallback, oSettings) {
+          oSettings.jqXHR = vm.fetchCallback(vm.rows, aoData, fnCallback)
+        },
         dom: '<"row"<"col-sm-2"l><"col-sm-2"f><"col-sm-8"p>><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>'
       };
 
@@ -125,13 +138,123 @@ export default {
         vm.editUpdateItem(row.data().id);
       });
     },
+    async fetchCallback (data, aoData, fnCallback) {
+      let vm = this
+
+      // console.log(aoData)
+      let orderItem = aoData.find(x => x.name === 'order')
+      let startItem = aoData.find(x => x.name === 'start')
+      let lengthItem = aoData.find(x => x.name === 'length')
+      let searchItem = aoData.find(x => x.name === 'search')
+      // console.log(`length = ${lengthItem.value}, offset = ${startItem.value}`)
+      // console.log(`orderItem = ${orderItem.value}, searchItem = ${searchItem.value.value}`)
+
+      const page = startItem.value / lengthItem.value + 1
+
+      let search = searchItem.value.value
+
+      if(vm.isDev) {
+        host = require('./js/const').devApiHost;
+      }
+
+      const qs = require('qs');
+      const query = {
+        pagination: {
+          pageSize: lengthItem.value,
+          page: page,
+        },
+      };
+
+      const columns = ['id', 'Entity', 'EntityId', 'Attribute', 'Value', 'ChangeOperation', 'Status', 'SubmittedAt', 'submittedBy.username', 'reviewedBy.username']
+
+      let order = ['id:asc']
+      if (orderItem.value.length > 0) {
+        orderItem.value.forEach(function (data) {
+          // console.log(data)
+          order = `${columns[data.column]}:${data.dir}`
+        })
+        // console.log(order)
+      }
+
+      query['sort'] = order
+
+      if (searchItem.value.value) {
+        query['filters'] = {
+          $or: [
+            {
+              Entity: {
+                $containsi: search,
+              }
+            },
+            {
+              EntityId: {
+                $containsi: search,
+              },
+            },
+            {
+              ChangeOperation: {
+                $containsi: search,
+              },
+            },
+            {
+              Attribute: {
+                $containsi: search,
+              },
+            },
+            {
+              Value: {
+                $containsi: search,
+              }
+            }]
+        }
+      }
+
+      const queryString = qs.stringify(query, {
+        encodeValuesOnly: true,
+      });
+
+      let url = `${host}/api/update-items?${queryString}`;
+
+      const jwt = vm.jwt;
+      if(jwt === null) {
+        return
+      }
+
+      try {
+        const res = await this.axios.get(url, {
+          headers: {
+            Authorization: `Bearer ${jwt}`
+          }
+        });
+
+        // console.log(res);
+
+        if(res.data) {
+          // vm.meta = res.meta;
+          // vm.data = res.data;
+          let dat = {
+            draw: aoData.draw,
+            recordsTotal: query['filters'] ? vm.total: vm.total = res.data.meta.pagination.total,
+            recordsFiltered: res.data.meta.pagination.total,
+            data: res.data.data
+          }
+
+          fnCallback(dat)
+        }
+      } catch(error) {
+        // console.error(error)
+        this.error = true
+        this.errorMsg = "You are not authorized to access this item."
+        // setTimeout(() => vm.$router.go(-1), 2000);
+      }
+    },
     exportTsv() {
       // const vm = this;
     },
   },
   mounted() {
     const vm = this;
-    vm.createTable(vm.id, vm.data);
+    vm.createTable(vm.id);
   },
 };
 </script>

web/src/views/Profile.vue

@@ -67,18 +67,11 @@
       </template>
     </fetch-profile>
 
-    <fetch-update-items v-if="userData !== null && (getRole === 'Contributor' || getRole === 'Maintainer')">
+    <div v-if="userData !== null && (getRole === 'Contributor' || getRole === 'Maintainer')">
       <h4 class="round">Update Items</h4>
-      <template slot-scope="{response, loading}">
-        <slot :response="response" :loading="loading">
-          <div v-if="loading || response === null"></div>
-          <div v-else>
-            <update-item-table id="update-item-table" :data="response.data">
-            </update-item-table>
-          </div>
-        </slot>
-      </template>
-    </fetch-update-items>
+      <update-item-table id="update-item-table">
+      </update-item-table>
+    </div>
     <fetch-users v-if="getRole === 'Administrator'">
       <template slot-scope="{response, loading}">
         <slot :response="response" :loading="loading">
@@ -105,8 +98,7 @@ const _ = require('lodash')
 export default {
   name: 'ProfilePage',
   components: {
-    FetchProfile, FetchUpdateItems, UpdateItemTable,
-    UserTable, FetchUsers
+    FetchProfile, UpdateItemTable, UserTable, FetchUsers
   },
   props: {
     msg: String