[gui] Client side pagination

Rendering too many components in the product list page in a single row
can really slow down the rendering. For this reason with this patch
we will introduce a client side pagination, so we will not show all the
product in one round.

web/server/vue-cli/src/views/Products.vue

@@ -4,8 +4,8 @@
       :headers="headers"
       :items="products"
       :options.sync="pagination"
-      :server-items-length.sync="products.length"
-      :hide-default-footer="true"
+      :footer-props="footerProps"
+      :page.sync="page"
       :must-sort="true"
       :loading="loading"
       :mobile-breakpoint="1000"
@@ -154,8 +154,10 @@ export default {
   },
 
   data() {
+    const itemsPerPageOptions = [ 25 ];
     const sortBy = this.$router.currentRoute.query["sort-by"];
     const sortDesc = this.$router.currentRoute.query["sort-desc"];
+    const page = parseInt(this.$router.currentRoute.query["page"]) || 1;
 
     return {
       DBStatus,
@@ -165,6 +167,10 @@ export default {
         sortBy: sortBy ? [ sortBy ] : [],
         sortDesc: sortDesc !== undefined ? [ !!sortDesc ] : []
       },
+      footerProps: {
+        itemsPerPageOptions: itemsPerPageOptions
+      },
+      page,
       headers: [
         {
           text: "Name",
@@ -220,6 +226,16 @@ export default {
       deep: true
     },
 
+    page() {
+      const page = this.page === 1 ? undefined : this.page;
+      this.$router.replace({
+        query: {
+          ...this.$route.query,
+          "page": page
+        }
+      }).catch(() => {});
+    },
+
     productNameSearch: _.debounce(function () {
       this.$router.replace({
         query: {
@@ -282,6 +298,8 @@ export default {
             };
           }).sort(this.sortProducts);
 
+          this.pagination.page = this.page;
+
           this.loading = false;
         }));
     },