[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.
: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;
}));
},
