filter propertied added

client/src/modules/customers/index.vue

@@ -6,16 +6,25 @@ export default {
   data() {
     return {
       selected: [],
+      column: "all",
+      search: "",
     };
   },
   computed: {
     ...mapGetters("customers", [
       "headers",
       "customerList",
+      "filteredCustomerList",
       "dialog",
+      "dialogHeaders",
       "editedItem",
       "editedIndex",
     ]),
+    indexofColumn() {
+      return this.dialogHeaders.findIndex(
+        (header) => this.column == header.value
+      );
+    },
   },
   methods: {
     ...mapActions("customers", [
@@ -24,10 +33,13 @@ export default {
       "closeDialog",
       "deleteCustomer",
       "deleteMultiCustomer",
+      "saveCustomer",
+      "editCustomer",
+      "filterCustomer",
     ]),
   },
   created() {
-    this.fetchCustomerData();
+    this.fetchCustomerData({ searchInput: "", filterColumn: "id" });
   },
 };
 </script>
@@ -49,18 +61,112 @@ export default {
             <v-toolbar-title>Customers</v-toolbar-title>
             <v-divider class="mx-4" inset vertical></v-divider>
 
+            <v-btn
+              large
+              icon
+              color="success"
+              class="white--text"
+              @click="editCustomer()"
+            >
+              <v-icon>add</v-icon>
+            </v-btn>
             <v-btn
               large
               icon
               color="red"
-              class="white--text ml-2"
+              class="white--text"
               @click="deleteMultiCustomer(selected)"
             >
               <v-icon>delete</v-icon>
             </v-btn>
+            <v-btn
+              icon
+              large
+              color="blue-grey"
+              class="white--text"
+              @click="fetchCustomerData"
+            >
+              <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="saveCustomer()">
+                      Save</v-btn
+                    >
+                  </template>
+                </v-card-actions>
+              </v-card>
+            </v-dialog>
 
             <v-spacer></v-spacer>
           </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="
+                fetchCustomerData({
+                  searchInput: search,
+                  filterColumn: column,
+                })
+              "
+              class="ml-4"
+              large
+              >Search
+            </v-btn>
+          </v-toolbar>
         </template>
 
         <template v-slot:[`item.image`]="{ item }">

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

 import axios from "axios";
 
 export default {
-  fetchCustomerData({ commit }) {
+  fetchCustomerData({ 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/customers")
+      .get(`http://localhost:3000/customers?${query}`)
       .then((response) => {
         commit("setCustomerList", response.data);
+        console.log("searchInput", data.searchInput);
+        console.log("filterColumn", data.filterColumn);
+        dispatch("filterCustomer", { searchInput: "" });
       })
       .catch((e) => {
         console.log(e);
       });
   },
+
   toggleSingleExpand({ commit }) {
     commit("setSingleExpand");
   },
@@ -39,4 +50,48 @@ export default {
     console.log(itemList);
     dispatch("deleteCustomer", itemList);
   },
+
+  saveCustomer({ getters, dispatch }) {
+    const postConfig = {
+      method: "post",
+      url: `http://localhost:3000/customers/`,
+      data: getters.editedItem,
+    };
+
+    const putConfig = {
+      method: "put",
+      url: `http://localhost:3000/customers/${getters.editedItem.id}`,
+      data: getters.editedItem,
+    };
+
+    axios(!getters.editedItem.id ? postConfig : putConfig).then(() => {
+      dispatch("fetchCustomerData");
+    });
+    dispatch("closeDialog");
+  },
+
+  editCustomer({ commit, getters }, item) {
+    commit("setEditedIndex", getters.customerList.indexOf(item));
+    commit("setEditedItem", Object.assign({}, item));
+    commit("setDialog", true);
+  },
+
+  filterCustomer({ getters, commit }, data) {
+    let x;
+    if (!data.searchInput) {
+      x = getters.customerList;
+      console.log(getters.customerList);
+    } else {
+      console.log("searchInput", data.searchInput);
+      console.log("filterColumn", data.filterColumn);
+      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

@@ -11,10 +11,26 @@ export default {
       { text: "Email", value: "email", type: "text" },
       { text: "Country", value: "country", type: "text" },
       { text: "City", value: "city", type: "text" },
-      { text: "Image", value: "image", type: "text" },
+      { text: "Image", value: "image", type: "text", sortable: false },
       { text: "Actions", value: "actions", sortable: false },
     ];
   },
+  dialogHeaders() {
+    return [
+      { text: "All Data", value: "all", type: "text" },
+      {
+        text: "First Name",
+        align: "left",
+        value: "firstName",
+        type: "text",
+      },
+      { text: "Last Name", value: "lastName", type: "text" },
+      { text: "Email", value: "email", type: "text" },
+      { text: "Country", value: "country", type: "text" },
+      { text: "City", value: "city", type: "text" },
+      { text: "Image", value: "image", type: "text", sortable: false },
+    ];
+  },
   customerList(state) {
     return state.customerList;
   },
@@ -27,4 +43,7 @@ export default {
   dialog(state) {
     return state.dialog;
   },
+  filteredCustomerList(state) {
+    return state.filteredCustomerList;
+  },
 };

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

@@ -2,10 +2,16 @@ export default {
   setCustomerList(state, data) {
     state.customerList = data;
   },
-  setSingleExpand(state) {
-    state.singleExpand = !state.singleExpand;
+  setEditedIndex(state, index) {
+    state.editedIndex = index;
+  },
+  setEditedItem(state, item) {
+    state.editedItem = item;
   },
   setDialog(state, value) {
     state.dialog = value;
   },
+  setfilteredCustomerList(state, data) {
+    state.filteredCustomerList = data;
+  },
 };

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

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

server/db.json

@@ -1227,6 +1227,15 @@
       "country": "Antarctica (the territory South of 60 deg S)",
       "city": "New Braunfels",
       "image": "https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/680.jpg"
+    },
+    {
+      "firstName": "Esat",
+      "lastName": "Akpunar",
+      "email": "akpunar@reybex.com",
+      "country": "Turkey",
+      "city": "Sakarya",
+      "image": "https://media-exp2.licdn.com/dms/image/C4D03AQH4AA-B_TDbyQ/profile-displayphoto-shrink_200_200/0/1654085687745?e=2147483647&v=beta&t=1RAWuKlHHWPWpCnhxK8h6nhNyhqlNR56BHprJscOqKM",
+      "id": "DlDXazG"
     }
   ],
   "vendors": [