pagination with search is fixed

client/src/modules/products/index.vue

@@ -6,7 +6,6 @@ export default {
   data() {
     return {
       selected: [],
-      column: "all",
     };
   },
   computed: {
@@ -24,12 +23,12 @@ export default {
       "getOptions",
       "totalProducts",
       "getSearch",
-      "filterColumn",
+      "getColumn",
     ]),
 
     indexofColumn() {
       return this.dialogHeaders.findIndex(
-        (header) => this.column == header.value
+        (header) => this.getColumn == header.value
       );
     },
 
@@ -68,6 +67,15 @@ export default {
         this.setSearch(data);
       },
     },
+
+    column: {
+      get() {
+        return this.getColumn;
+      },
+      set(data) {
+        this.setColumn(data);
+      },
+    },
   },
   methods: {
     ...mapActions("products", [
@@ -81,10 +89,14 @@ export default {
       "setSingleExpand",
       "setOptions",
       "setSearch",
+      "setColumn",
     ]),
   },
   created() {
-    this.fetchProductData({ searchInput: "", filterColumn: "id" });
+    this.fetchProductData({
+      searchInput: this.getSearch,
+      filterColumn: this.getColumn,
+    });
   },
 };
 </script>
@@ -136,7 +148,10 @@ export default {
               color="blue"
               class="white--text"
               @click="
-                fetchProductData({ searchInput: search, filterColumn: column })
+                fetchProductData({
+                  searchInput: getSearch,
+                  filterColumn: getColumn,
+                })
               "
             >
               <v-icon>refresh</v-icon>
@@ -184,8 +199,8 @@ export default {
                       color="blue darken-1"
                       @click="
                         saveProduct({
-                          searchInput: search,
-                          filterColumn: column,
+                          searchInput: getSearch,
+                          filterColumn: getColumn,
                         })
                       "
                     >
@@ -225,7 +240,10 @@ export default {
             ></v-text-field>
             <v-btn
               @click="
-                fetchProductData({ searchInput: search, filterColumn: column })
+                fetchProductData({
+                  searchInput: getSearch,
+                  filterColumn: getColumn,
+                })
               "
               class="ml-4"
               large

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

 import axios from "axios";
 
 export default {
-  fetchProductData({ commit, getters }, data = {}) {
+  fetchProductData({ commit, getters }) {
     let query;
 
-    if (data.filterColumn == "all") {
+    if (getters.getColumn == "all") {
       query = "q=" + getters.getSearch;
-    } else if (data.filterColumn) {
-      query = data.filterColumn + "_like=" + getters.getSearch;
+    } else if (getters.getColumn) {
+      query = getters.getColumn + "_like=" + getters.getSearch;
     }
 
     let pageLimit = `&_page=${getters.getOptions.page}&_limit=${getters.getOptions.itemsPerPage}`;
 
-    if (getters.getSearch) {
-      pageLimit = "";
-    }
-
     let sort = getters.getOptions.sortDesc[0] ? "desc" : "asc";
 
     let sortBy = `&_sort=${getters.getOptions.sortBy}&_order=${sort}`;
@@ -24,9 +20,6 @@ export default {
     axios
       .get(`http://localhost:3000/products?${query}${pageLimit}${sortBy}`)
       .then((response) => {
-        // console.log("totalProducts", getters.totalProducts);
-        // console.log("productList", getters.productList);
-        // console.log("itemsPerPage", getters.getOptions.itemsPerPage);
         commit("setTotalProducts", response.headers["x-total-count"]);
         commit("setProductList", response.data);
         commit("setLoading", false);
@@ -52,6 +45,9 @@ export default {
   setSearch({ commit }, data) {
     commit("setSearch", data);
   },
+  setColumn({ commit }, data) {
+    commit("setColumn", data);
+  },
 
   closeDialog({ commit }) {
     commit("setDialog", false);

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

@@ -68,7 +68,7 @@ export default {
   getSearch(state) {
     return state.search;
   },
-  filterColumn(state) {
-    return state.filterColumn;
+  getColumn(state) {
+    return state.column;
   },
 };

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

@@ -33,4 +33,7 @@ export default {
   setSearch(state, data) {
     state.search = data;
   },
+  setColumn(state, data) {
+    state.column = data;
+  },
 };

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

@@ -10,4 +10,5 @@ export default () => ({
   options: { sortDesc: [false] },
   totalProducts: 0,
   search: "",
+  column: "all",
 });