product add specific and general filter properties

client/src/modules/products/index.vue

@@ -6,6 +6,10 @@ export default {
   data() {
     return {
       selected: [],
+      column: "all",
+      search: "",
+      expanded: [],
+      singleExpand: true,
     };
   },
   computed: {
@@ -13,12 +17,17 @@ export default {
       "headers",
       "dialogHeaders",
       "productList",
-      "singleExpand",
-      "expanded",
+      "filteredProductList",
+
       "dialog",
       "editedItem",
       "editedIndex",
     ]),
+    indexofColumn() {
+      return this.dialogHeaders.findIndex(
+        (header) => this.column == header.value
+      );
+    },
   },
   methods: {
     ...mapActions("products", [
@@ -29,10 +38,11 @@ export default {
       "deleteMultiProduct",
       "saveProduct",
       "editProduct",
+      "filterProduct",
     ]),
   },
   created() {
-    this.fetchProductData();
+    this.fetchProductData({ searchInput: "", filterColumn: "id" });
   },
 };
 </script>
@@ -73,49 +83,63 @@ export default {
               class="white--text"
               @click="deleteMultiProduct(selected)"
             >
-              <v-dialog v-model="dialog" max-width="500px">
-                <template v-slot:activator="{}"> </template>
-                <v-card>
-                  <v-card-title>
-                    <span class="headline"></span>
-                  </v-card-title>
-                  <v-card-text>
-                    <v-container grid-list-md>
-                      <v-layout wrap>
-                        <template v-for="header in dialogHeaders">
-                          <v-flex
-                            xs12
-                            sm6
-                            md4
-                            :key="header.value"
-                            v-if="!(header.value === 'actions')"
-                          >
-                            <v-text-field
-                              v-model="editedItem[header.value]"
-                              :label="header.text"
-                            ></v-text-field>
-                          </v-flex>
-                        </template>
-                      </v-layout>
-                    </v-container>
-                  </v-card-text>
-
-                  <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <template>
-                      <v-btn color="blue darken-1" @click="closeDialog()"
-                        >Cancel</v-btn
-                      >
-                      <v-btn color="blue darken-1" @click="saveProduct()">
-                        Save</v-btn
-                      >
-                    </template>
-                  </v-card-actions>
-                </v-card>
-              </v-dialog>
-
               <v-icon>delete</v-icon>
             </v-btn>
+            <v-btn
+              icon
+              large
+              color="blue-grey"
+              class="white--text"
+              @click="fetchProductData"
+            >
+              <v-icon>refresh</v-icon>
+            </v-btn>
+
+            <v-dialog v-model="dialog" max-width="500px">
+              <template v-slot:activator="{}"> </template>
+              <v-card>
+                <v-card-title>
+                  <span class="headline"></span>
+                </v-card-title>
+                <v-card-text>
+                  <v-container grid-list-md>
+                    <v-layout wrap>
+                      <template v-for="header in dialogHeaders">
+                        <v-flex
+                          xs12
+                          sm6
+                          md4
+                          :key="header.value"
+                          v-if="
+                            !(
+                              header.value === 'actions' ||
+                              header.value === 'all'
+                            )
+                          "
+                        >
+                          <v-text-field
+                            v-model="editedItem[header.value]"
+                            :label="header.text"
+                          ></v-text-field>
+                        </v-flex>
+                      </template>
+                    </v-layout>
+                  </v-container>
+                </v-card-text>
+
+                <v-card-actions>
+                  <v-spacer></v-spacer>
+                  <template>
+                    <v-btn color="blue darken-1" @click="closeDialog()"
+                      >Cancel</v-btn
+                    >
+                    <v-btn color="blue darken-1" @click="saveProduct()">
+                      Save</v-btn
+                    >
+                  </template>
+                </v-card-actions>
+              </v-card>
+            </v-dialog>
 
             <v-spacer></v-spacer>
 
@@ -126,10 +150,38 @@ export default {
               @change="toggleSingleExpand"
             ></v-switch>
           </v-toolbar>
+
+          <v-toolbar flat>
+            <v-select
+              label="Header Name"
+              v-model="column"
+              :items="dialogHeaders"
+              item-text="text"
+              item-value="value"
+              class="mt-5"
+            ></v-select>
+            <v-text-field
+              :type="headers[indexofColumn].type"
+              label="Search"
+              v-model="search"
+              single-line
+              outline
+              hide-details
+              class="ml-4"
+            ></v-text-field>
+            <v-btn
+              @click="
+                fetchProductData({ searchInput: search, filterColumn: column })
+              "
+              class="ml-4"
+              large
+              >Search
+            </v-btn>
+          </v-toolbar>
         </template>
 
         <template v-slot:[`item.image`]="{ item }">
-          <img width="75" :src="`${item.image}`" />
+          <img width="75" :src="`${item.image}`" v-if="item.image" />
         </template>
 
         <template v-slot:[`item.actions`]="{ item }">

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

 import axios from "axios";
 
 export default {
-  fetchProductData({ commit }) {
+  fetchProductData({ dispatch, commit }, data = {}) {
+    let query;
+    if (data.filterColumn == "all") {
+      query = "q=" + data.searchInput;
+    } else if (data.filterColumn) {
+      query = data.filterColumn + "_like=" + data.searchInput;
+    }
+
     axios
-      .get("http://localhost:3000/products")
+      .get(`http://localhost:3000/products?${query}`)
       .then((response) => {
         commit("setProductList", response.data);
+        console.log("searchInput", data.searchInput);
+        console.log("filterColumn", data.filterColumn);
+        dispatch("filterProduct", { searchInput: "" });
       })
       .catch((e) => {
         console.log(e);
       });
   },
+
   toggleSingleExpand({ commit }) {
     commit("setSingleExpand");
   },
@@ -25,7 +36,7 @@ export default {
         axios
           .delete(`http://localhost:3000/products/${id}`)
           .then(() => {
-            dispatch("fetchProductData");
+            dispatch("fetchProductData", {});
           })
           .catch((e) => {
             console.log(e);
@@ -33,6 +44,7 @@ export default {
       });
     this.itemList = [];
   },
+
   deleteMultiProduct({ dispatch }, items) {
     const itemList = [];
     items.forEach((item) => {
@@ -43,20 +55,18 @@ export default {
   },
 
   saveProduct({ getters, dispatch }) {
-    if (!getters.editedItem.image) {
-      getters.editedItem.image =
-        "https://upload.wikimedia.org/wikipedia/commons/7/70/Solid_white.svg";
-    }
     const postConfig = {
       method: "post",
       url: `http://localhost:3000/products/`,
       data: getters.editedItem,
     };
+
     const putConfig = {
       method: "put",
       url: `http://localhost:3000/products/${getters.editedItem.id}`,
       data: getters.editedItem,
     };
+
     axios(!getters.editedItem.id ? postConfig : putConfig).then(() => {
       dispatch("fetchProductData");
     });
@@ -68,4 +78,23 @@ export default {
     commit("setEditedItem", Object.assign({}, item));
     commit("setDialog", true);
   },
+
+  filterProduct({ getters, commit }, data) {
+    let x;
+    if (!data.searchInput) {
+      x = getters.productList;
+      console.log(getters.productList);
+    } else {
+      console.log("searchInput", data.searchInput);
+      console.log("filterColumn", data.filterColumn);
+      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

@@ -18,6 +18,7 @@ export default {
   },
   dialogHeaders() {
     return [
+      { text: "All Data", value: "all", type: "text" },
       {
         text: "Product Name",
         align: "left",
@@ -36,12 +37,6 @@ export default {
   productList(state) {
     return state.productList;
   },
-  singleExpand(state) {
-    return state.singleExpand;
-  },
-  expanded(state) {
-    return state.expanded;
-  },
   editedIndex(state) {
     return state.editedIndex;
   },
@@ -51,4 +46,7 @@ export default {
   dialog(state) {
     return state.dialog;
   },
+  filteredProductList(state) {
+    return state.filteredInventoryList;
+  },
 };

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

@@ -2,9 +2,6 @@ export default {
   setProductList(state, data) {
     state.productList = data;
   },
-  setSingleExpand(state) {
-    state.singleExpand = !state.singleExpand;
-  },
   setDialog(state, value) {
     state.dialog = value;
   },
@@ -14,4 +11,7 @@ export default {
   setEditedItem(state, item) {
     state.editedItem = item;
   },
+  setfilteredProductList(state, data) {
+    state.filteredProductList = data;
+  },
 };

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

 export default () => ({
   productList: [],
-  expanded: [],
-  singleExpand: true,
+  filteredProductList: [],
   editedIndex: -1,
   editedItem: {},
   dialog: false,

server/package.json

@@ -8,7 +8,7 @@
     "generate:products": "json-server products.js",
     "generate:users": "json-server users.js",
     "generate:customers": "json-server customers.js",
-    "start": "json-server --watch db.json"
+    "start": "json-server -H 0.0.0.0 --watch db.json"
   },
   "dependencies": {
     "fs-extra": "^10.0.1",