add pagination server side

client/src/modules/customers/index.vue

@@ -14,29 +14,38 @@ export default {
     ...mapGetters("customers", [
       "headers",
       "customerList",
-      "filteredCustomerList",
       "dialog",
       "loading",
       "dialogHeaders",
       "editedItem",
       "editedIndex",
+      "getOptions",
+      "totalCustomers",
     ]),
     indexofColumn() {
       return this.dialogHeaders.findIndex(
         (header) => this.column == header.value
       );
     },
+
+    options: {
+      get() {
+        return this.getOptions;
+      },
+      set(data) {
+        this.setOptions(data);
+      },
+    },
   },
   methods: {
     ...mapActions("customers", [
       "fetchCustomerData",
-      "toggleSingleExpand",
       "closeDialog",
       "deleteCustomer",
       "deleteMultiCustomer",
       "saveCustomer",
       "editCustomer",
-      "filterCustomer",
+      "setOptions",
     ]),
   },
   created() {
@@ -55,6 +64,8 @@ export default {
         :headers="headers"
         :items="customerList"
         :loading="loading"
+        :options.sync="options"
+        :server-items-length="Number(totalCustomers)"
         show-select
         class="evation-1"
       >
@@ -62,7 +73,6 @@ export default {
           <v-toolbar flat>
             <v-toolbar-title>Customers</v-toolbar-title>
             <v-divider class="mx-4" inset vertical></v-divider>
-
             <v-btn
               large
               icon

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

 import axios from "axios";
 
 export default {
-  fetchCustomerData({ dispatch, commit }, data = {}) {
+  fetchCustomerData({ 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/customers?${query}`)
+      .get(`http://localhost:3000/customers?${query}${pageLimit}${sort}`)
       .then((response) => {
+        commit("setTotalCustomers", response.headers["x-total-count"]);
         commit("setCustomerList", response.data);
-
-        dispatch("filterCustomer", { searchInput: "" });
         commit("setLoading", false);
       })
       .catch((e) => {
         console.log(e);
       });
   },
+
+  setOptions({ commit, dispatch }, data) {
+    commit("setOptions", data);
+    dispatch("fetchCustomerData");
+  },
+
   closeDialog({ commit }) {
     commit("setDialog", false);
   },
+
   deleteCustomer({ dispatch, commit }, idList) {
     confirm("Are you sure you want to delete this item?") &&
       idList.forEach((id) => {
@@ -72,20 +82,4 @@ export default {
     commit("setEditedItem", Object.assign({}, item));
     commit("setDialog", true);
   },
-
-  filterCustomer({ getters, commit }, data) {
-    let x;
-    if (!data.searchInput) {
-      x = getters.customerList;
-    } else {
-      x = getters.customerList.filter((customer) => {
-        if (customer[data.filterColumn]) {
-          return customer[data.filterColumn]
-            .toLowerCase()
-            .includes(data.searchInput.toLowerCase());
-        }
-      });
-    }
-    commit("setfilteredCustomerList", x);
-  },
 };

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

@@ -46,7 +46,10 @@ export default {
   loading(state) {
     return state.loading;
   },
-  filteredCustomerList(state) {
-    return state.filteredCustomerList;
+  getOptions(state) {
+    return state.options;
+  },
+  totalCustomers(state) {
+    return state.totalCustomers;
   },
 };

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

 export default {
   setCustomerList(state, data) {
     state.customerList = data;
+    console.log("data", state.customerList);
   },
   setEditedIndex(state, index) {
     state.editedIndex = index;
@@ -13,9 +14,12 @@ export default {
   },
   setLoading(state, value) {
     state.loading = value;
-    console.log(value);
   },
-  setfilteredCustomerList(state, data) {
-    state.filteredCustomerList = data;
+  setOptions(state, data) {
+    state.options = data;
+  },
+  setTotalCustomers(state, data) {
+    state.totalCustomers = data;
+    console.log(state.totalCustomers);
   },
 };

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

 export default () => ({
   customerList: [],
-  filteredCustomerList: [],
   editedIndex: -1,
   editedItem: {},
   dialog: false,
   loading: false,
+  options: {},
+  totalCustomers: 0,
 });

client/src/modules/products/index.vue

@@ -62,7 +62,6 @@ export default {
   methods: {
     ...mapActions("products", [
       "fetchProductData",
-      "toggleSingleExpand",
       "closeDialog",
       "deleteProduct",
       "deleteMultiProduct",

server/db.json

@@ -345,28 +345,6 @@
     }
   ],
   "products": [
-    {
-      "id": "018ac742-5c12-4cf1-998c-28ea47a4169d",
-      "color": "maroon",
-      "department": "Health",
-      "price": "78.00",
-      "productName": "Gorgeous Frozen Sausages",
-      "type": "Unbranded",
-      "productDescription": "Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support",
-      "productMaterial": "Steel",
-      "image": "http://loremflickr.com/640/480/food"
-    },
-    {
-      "id": "507f36d9-3f8d-4b51-954a-20ec632fb972",
-      "color": "ivory",
-      "department": "Beauty",
-      "price": "176.00",
-      "productName": "Tasty Granite Shoes",
-      "type": "Gorgeous",
-      "productDescription": "Carbonite web goalkeeper gloves are ergonomically designed to give easy fit",
-      "productMaterial": "Steel",
-      "image": "http://loremflickr.com/640/480/food"
-    },
     {
       "id": "fb4d2408-751f-4e07-856e-322dbed6f728",
       "color": "azure",