feat(user list) fix table pagination

common/api/src/fetchUsers.js

@@ -15,7 +15,9 @@ export default function (searchOptions) {
   return fetch(url, options)
     .then(function (response) {
       if (response.ok) {
-        return Promise.resolve(response.json())
+          return response.json().then(value => {
+              return {data: value, headers: response.headers};
+          })
       }
       return Promise.reject(response.error())
     })

user-list-vue-webpack/src/components/Filters.vue

@@ -10,7 +10,7 @@ export default {
   name: 'Filters',
   data () {
     return {
-      search: 'test message'
+      search: ''
     }
   },
   methods: {

user-list-vue-webpack/src/components/UserList/script.js

@@ -9,11 +9,9 @@ export default {
   },
   watch: {
     // whenever search changes, this function will run
-    search: function (newSearch, oldSearch) {
-      this.fetchUsers({search: newSearch});
-    },
-    currentPage: function () {
-      this.fetchUsers({search: this.search});
+    search: function () {
+      this.currentPage = 1;
+      this.$refs.usersTable.refresh();
     }
   },
   data () {
@@ -21,18 +19,27 @@ export default {
       users: [],
       currentPage: 1,
       perPage: 10,
-      totalRows: 20
+      totalRows: 200
     }
   },
-  created () {
-    // fetch the data when the view is created and the data is already being observed
-    this.fetchUsers({search: this.search});
-  },
   methods: {
-    fetchUsers (searchOptions){
+    tableProvider () {
+      let searchOptions = {};
+      searchOptions.search = this.search;
       searchOptions.page = this.currentPage -1;
       searchOptions.elementsByPage = this.perPage;
-      fetchUsers(searchOptions).then((users) => { this.users = users });
+      return fetchUsers(searchOptions).then((response) => {
+        let items = response.data;
+        let contentRange = response.headers.get('Content-Range');
+        if (contentRange.lastIndexOf('/') >= 0) {
+          let nbElements = contentRange.substring(contentRange.lastIndexOf('/') + 1);
+          if (nbElements) {
+            this.totalRows = Number.parseInt(nbElements);
+          }
+        }
+        // Must return an array of items or an empty array if an error occurred
+        return(items || [])
+      })
     }
   }
 

user-list-vue-webpack/src/components/UserList/template.html

 <div class="user-list">
   <h1>{{ search }}</h1>
-  <b-table striped hover :items="users" :current-page="currentPage" :per-page="perPage"></b-table>
+  <b-table ref="usersTable" striped hover :items="tableProvider" :current-page="currentPage" :per-page="perPage"></b-table>
   <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" />
 </div>