Internal: Fix table sorting and pagination

Show only 5 rows (to test pagination )

assets/vue/components/DataFilter.vue

@@ -5,7 +5,7 @@
       variant="primary"
     >
       <font-awesome-icon icon="search" />
-      {{ $t('Filters') }}
+      {{ $t('Search') }}
     </b-button>
     <b-collapse
       id="collapse-1"

assets/vue/mixins/ListMixin.js

@@ -1,4 +1,6 @@
 import isEmpty from 'lodash/isEmpty';
+import isString from 'lodash/isString';
+import isBoolean from 'lodash/isBoolean';
 import { formatDateTime } from '../utils/dates';
 import NotificationMixin from './NotificationMixin';
 
@@ -7,9 +9,10 @@ export default {
   data() {
     return {
       options: {
-        sortBy: [],
+        //sortBy: [], vuetify
+        //sortDesc: [], , vuetify
         page: 1,
-        itemsPerPage: 10
+        itemsPerPage: 5
       },
       filters: {}
     };
@@ -52,11 +55,13 @@ export default {
         params[`resourceNode.parent`] = this.$route.params.node;
       }
 
-      if (!isEmpty(sortBy) && !isEmpty(sortDesc)) {
-        params[`order[${sortBy[0]}]`] = sortDesc[0] ? 'desc' : 'asc'
+      if (isString(sortBy) && isBoolean(sortDesc)) {
+        //params[`order[${sortBy[0]}]`] = sortDesc[0] ? 'desc' : 'asc'
+        params[`order[${sortBy}]`] = sortDesc ? 'desc' : 'asc'
       }
 
       this.resetList = true;
+    console.log(params);
 
       this.getPage(params).then(() => {
         this.options.sortBy = sortBy;

assets/vue/views/documents/List.vue

@@ -44,15 +44,29 @@
           id="documents"
           striped
           hover
+          small
+          no-local-sorting
+
+          :per-page="0"
           :fields="fields"
           :items="items"
-          :per-page="0"
-          :current-page="options.page"
+          :current-page.sync="options.page"
+
+          :sort-by.sync="options.sortBy"
           :sort-desc.sync="options.sortDesc"
+
           :busy.sync="isLoading"
           :filters="filters"
           primary-key="iid"
+          @sort-changed="sortingChanged"
         >
+          <template v-slot:table-busy>
+            <div class="text-center my-2">
+              <b-spinner class="align-middle" />
+              <strong>Loading...</strong>
+            </div>
+          </template>
+
           <template
             v-slot:cell(resourceNode.title)="row"
           >
@@ -110,13 +124,13 @@ export default {
     servicePrefix: 'Documents',
     components: {
         Toolbar,
-        ActionCell,
-        DocumentsFilterForm,
-        DataFilter
+        ActionCell
     },
     mixins: [ListMixin],
     data() {
         return {
+          sortBy: 'title',
+          sortDesc: false,
           fields: [
                 {label: 'Title', key: 'resourceNode.title', sortable: true},
                 {label: 'Modified', key: 'resourceNode.updatedAt', sortable: true},
@@ -151,6 +165,14 @@ export default {
         }),
     },
     methods: {
+        sortingChanged(ctx) {
+          console.log(ctx);
+          this.options.sortDesc = ctx.sortDesc;
+          this.options.sortBy = ctx.sortBy;
+          this.onUpdateOptions(this.options);
+          // ctx.sortBy   ==> Field key for sorting by (or null for no sorting)
+          // ctx.sortDesc ==> true if sorting descending, false otherwise
+        },
         // From ListMixin
         ...mapActions('documents', {
             getPage: 'fetchAll',