pagination server side

client/src/modules/products/index.vue

@@ -17,17 +17,37 @@ export default {
       "productList",
       "filteredProductList",
       "singleExpand",
-      "expanded",
+      "getExpanded",
       "dialog",
       "loading",
       "editedItem",
       "editedIndex",
+      "getOptions",
+      "totalProducts",
     ]),
+
     indexofColumn() {
       return this.dialogHeaders.findIndex(
         (header) => this.column == header.value
       );
     },
+
+    options: {
+      get() {
+        return this.getOptions;
+      },
+      set(data) {
+        this.setOptions(data);
+      },
+    },
+    expanded: {
+      get() {
+        return this.getExpanded;
+      },
+      set(data) {
+        this.setExpanded(data);
+      },
+    },
   },
   methods: {
     ...mapActions("products", [
@@ -38,7 +58,8 @@ export default {
       "deleteMultiProduct",
       "saveProduct",
       "editProduct",
-      "filterProduct",
+      "setExpanded",
+      "setOptions",
     ]),
   },
   created() {
@@ -57,6 +78,8 @@ export default {
         :headers="headers"
         :items="productList"
         :loading="loading"
+        :options.sync="options"
+        :server-items-length="Number(totalProducts)"
         :single-expand="singleExpand"
         :expanded.sync="expanded"
         show-select

client/src/modules/products/store/actions.js

 import axios from "axios";
 
 export default {
-  fetchProductData({ dispatch, commit }, data = {}) {
+  fetchProductData({ commit, getters }, data = {}) {
     let query;
     if (data.filterColumn == "all") {
       query = "q=" + data.searchInput;
     } else if (data.filterColumn) {
       query = data.filterColumn + "_like=" + data.searchInput;
     }
+
+    let pageLimit = `&_page=${getters.getOptions.page}&_limit=${getters.getOptions.itemsPerPage}`;
+    let sort = `&_sort=${getters.getOptions.sortBy}&_order=${getters.getOptions.sortDesc}`;
+
     commit("setLoading", true);
     axios
-      .get(`http://localhost:3000/products?${query}`)
+      .get(`http://localhost:3000/products?${query}${pageLimit}${sort}`)
       .then((response) => {
+        commit("setTotalProducts", response.headers["x-total-count"]);
         commit("setProductList", response.data);
-        dispatch("filterProduct", { searchInput: "" });
         commit("setLoading", false);
       })
       .catch((e) => {
@@ -25,6 +29,14 @@ export default {
     commit("setSingleExpand");
   },
 
+  setOptions({ commit, dispatch }, data) {
+    commit("setOptions", data);
+    dispatch("fetchProductData");
+  },
+  setExpanded({ commit }, data) {
+    commit("setExpanded", data);
+  },
+
   closeDialog({ commit }) {
     commit("setDialog", false);
   },
@@ -81,20 +93,4 @@ export default {
     commit("setEditedItem", Object.assign({}, item));
     commit("setDialog", true);
   },
-
-  filterProduct({ getters, commit }, data) {
-    let x;
-    if (!data.searchInput) {
-      x = getters.productList;
-    } else {
-      x = getters.productList.filter((product) => {
-        if (product[data.filterColumn]) {
-          return product[data.filterColumn]
-            .toLowerCase()
-            .includes(data.searchInput.toLowerCase());
-        }
-      });
-    }
-    commit("setfilteredProductList", x);
-  },
 };

client/src/modules/products/store/getters.js

 export default {
   headers() {
     return [
-      { text: "Description", value: "data-table-expand" },
       {
         text: "Product Name",
         align: "left",
@@ -14,6 +13,7 @@ export default {
       { text: "Color", value: "color", type: "text" },
       { text: "Price", value: "price", type: "text" },
       { text: "Image", value: "image", type: "text" },
+      { text: "Description", value: "data-table-expand" },
       { text: "Actions", value: "actions", sortable: false },
     ];
   },
@@ -41,7 +41,7 @@ export default {
   singleExpand(state) {
     return state.singleExpand;
   },
-  expanded(state) {
+  getExpanded(state) {
     return state.expanded;
   },
   editedIndex(state) {
@@ -59,4 +59,10 @@ export default {
   filteredProductList(state) {
     return state.filteredProductList;
   },
+  getOptions(state) {
+    return state.options;
+  },
+  totalProducts(state) {
+    return state.totalProducts;
+  },
 };

client/src/modules/products/store/mutations.js

@@ -5,12 +5,14 @@ export default {
   setSingleExpand(state) {
     state.singleExpand = !state.singleExpand;
   },
+  setExpanded(state) {
+    return state.expanded;
+  },
   setDialog(state, value) {
     state.dialog = value;
   },
   setLoading(state, value) {
     state.loading = value;
-    console.log(value);
   },
   setEditedIndex(state, index) {
     state.editedIndex = index;
@@ -21,4 +23,10 @@ export default {
   setfilteredProductList(state, data) {
     state.filteredProductList = data;
   },
+  setOptions(state, data) {
+    state.options = data;
+  },
+  setTotalProducts(state, data) {
+    state.totalProducts = data;
+  },
 };

client/src/modules/products/store/state.js

@@ -7,4 +7,6 @@ export default () => ({
   editedItem: {},
   dialog: false,
   loading: false,
+  options: {},
+  totalProducts: 0,
 });