products add and edit properties

client/src/modules/customers/index.vue

@@ -68,9 +68,7 @@ export default {
         </template>
 
         <template v-slot:[`item.actions`]="{ item }">
-          <v-icon small class="mr-2" @click="editItem(item)">
-            mdi-pencil
-          </v-icon>
+          <v-icon small class="mr-2"> mdi-pencil </v-icon>
           <v-icon small @click="deleteCustomer([item.id])"> mdi-delete </v-icon>
         </template>
       </v-data-table>

client/src/modules/products/index.vue

@@ -11,6 +11,7 @@ export default {
   computed: {
     ...mapGetters("products", [
       "headers",
+      "dialogHeaders",
       "productList",
       "singleExpand",
       "expanded",
@@ -26,7 +27,8 @@ export default {
       "closeDialog",
       "deleteProduct",
       "deleteMultiProduct",
-      "addProduct",
+      "saveProduct",
+      "editProduct",
     ]),
   },
   created() {
@@ -55,70 +57,68 @@ export default {
             <v-toolbar-title>Products</v-toolbar-title>
             <v-divider class="mx-4" inset vertical></v-divider>
 
-            <v-dialog v-model="dialog" max-width="750px">
-              <template v-slot:activator="{ on, attrs }">
-                <v-btn
-                  large
-                  icon
-                  color="success"
-                  class="ml-4"
-                  v-bind="attrs"
-                  v-on="on"
-                >
-                  <v-icon>add</v-icon>
-                </v-btn>
-              </template>
-              <v-card>
-                <v-card-title>
-                  <span class="text-h5">Add Product</span>
-                </v-card-title>
-
-                <v-card-text>
-                  <v-container>
-                    <v-row>
-                      <template v-for="header in headers">
-                        <v-flex
-                          xs12
-                          sm6
-                          md4
-                          pa-4
-                          :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-row>
-                  </v-container>
-                </v-card-text>
-
-                <v-card-actions>
-                  <v-spacer></v-spacer>
-                  <v-btn color="blue darken-1" text> Cancel </v-btn>
-                  <v-btn color="blue darken-1" text @click="addProduct()">
-                    Save
-                  </v-btn>
-                </v-card-actions>
-              </v-card>
-            </v-dialog>
-
-            <!-- <v-btn large icon color="success" class="white--text ml-2">
+            <v-btn
+              large
+              icon
+              color="success"
+              class="white--text"
+              @click="editProduct()"
+            >
               <v-icon>add</v-icon>
-            </v-btn> -->
+            </v-btn>
             <v-btn
               large
               icon
               color="red"
-              class="white--text ml-2"
+              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-spacer></v-spacer>
+
             <v-switch
               v-model="singleExpand"
               label="Single expand"
@@ -133,7 +133,7 @@ export default {
         </template>
 
         <template v-slot:[`item.actions`]="{ item }">
-          <v-icon small class="mr-2" @click="editItem(item)">
+          <v-icon small class="mr-2" @click="editProduct(item)">
             mdi-pencil
           </v-icon>
           <v-icon small @click="deleteProduct([item.id])"> mdi-delete </v-icon>

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

@@ -31,6 +31,7 @@ export default {
             console.log(e);
           });
       });
+    this.itemList = [];
   },
   deleteMultiProduct({ dispatch }, items) {
     const itemList = [];
@@ -40,16 +41,31 @@ export default {
     console.log(itemList);
     dispatch("deleteProduct", itemList);
   },
-  addProduct({ getters, dispatch }) {
-    const config = {
+
+  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: { products: getters.editedItem },
+      data: getters.editedItem,
+    };
+    const putConfig = {
+      method: "put",
+      url: `http://localhost:3000/products/${getters.editedItem.id}`,
+      data: getters.editedItem,
     };
-    axios(config).then(() => {
-      console.log("TESET");
+    axios(!getters.editedItem.id ? postConfig : putConfig).then(() => {
       dispatch("fetchProductData");
     });
     dispatch("closeDialog");
   },
+
+  editProduct({ commit, getters }, item) {
+    commit("setEditedIndex", getters.productList.indexOf(item));
+    commit("setEditedItem", Object.assign({}, item));
+    commit("setDialog", true);
+  },
 };

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

@@ -16,6 +16,23 @@ export default {
       { text: "Actions", value: "actions", sortable: false },
     ];
   },
+  dialogHeaders() {
+    return [
+      {
+        text: "Product Name",
+        align: "left",
+        value: "productName",
+        type: "text",
+      },
+      { text: "Type", value: "type", type: "text" },
+      { text: "Product Material", value: "productMaterial", type: "text" },
+      { text: "Department", value: "department", type: "text" },
+      { text: "Color", value: "color", type: "text" },
+      { text: "Price", value: "price", type: "text" },
+      { text: "Image", value: "image", type: "text" },
+      { text: "Product Description", value: "productDescription" },
+    ];
+  },
   productList(state) {
     return state.productList;
   },

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

@@ -8,4 +8,10 @@ export default {
   setDialog(state, value) {
     state.dialog = value;
   },
+  setEditedIndex(state, index) {
+    state.editedIndex = index;
+  },
+  setEditedItem(state, item) {
+    state.editedItem = item;
+  },
 };