상품 수정 기능 추가

admin/pages/products/_id.vue

@@ -0,0 +1,134 @@
+<template>
+  <main>
+    <div class="container-fluid">
+
+        <div class="col-sm3"></div>
+        <div class="col-sm6">
+          <div class="a-spacing-top-medium"></div>
+          <h2 style="text-align: center">Update product</h2>
+          <form action="">
+            <!-- Category DropDown -->
+            <div class="a-spacing-top-medium">
+              <label for="">Category</label>
+              <select  v-model="categoryID" class="a-select-option">
+                <option v-for="category in categories" :key="category._id" :value="category._id">{{ category.type }}</option>
+              </select>
+            </div>
+
+            <!-- Owner DropDown -->
+            <div class="a-spacing-top-medium">
+              <label for="">Owner</label>
+              <select v-model="ownerID" class="a-select-option" >
+                <option v-for="owner in owners" :key="owner._id" :value="owner._id">{{ owner.name }}</option>
+              </select>
+            </div>
+
+            <!-- Title input-->
+            <div class="a-spacing-top-medium">
+              <label for="" style="margin-bottom: 0px;">Title</label>
+              <input v-model="title" :placeholder="product.title" type="text" class="a-input-text" style="width: 100%"/>
+            </div>
+
+            <!-- stockQuantity input-->
+            <div class="a-spacing-top-medium">
+              <label for="" style="margin-bottom: 0px;">stockQuantity</label>
+              <input v-model="stockQuantity" :placeholder="product.stockQuantity" type="number" class="a-input-text" style="width: 100%"/>
+            </div>
+
+
+            <!-- Price input-->
+            <div class="a-spacing-top-medium">
+              <label for="" style="margin-bottom: 0px;">Price</label>
+              <input v-model="price" :placeholder="product.price" type="number" class="a-input-text" style="width: 100%"/>
+            </div>
+
+            <!-- Description input-->
+            <div class="a-spacing-top-medium">
+              <label for="" style="margin-bottom: 0px;">Description</label>
+              <textarea v-model="description" :placeholder="product.description" style="width: 100%"></textarea>
+            </div>
+
+            <!-- Photo input-->
+            <div class="a-spacing-top-medium">
+              <label for="" style="margin-bottom: 0px;">Photo</label>
+              <div class="a-row a-spacing-top-medium">
+                <label class="choosefile-button">
+                  <i class="fa fa-plus"></i>
+                  <input @change="onFileSelected" type="file" />
+                  <p style="margin-top: -70px">{{ fileName }}</p>
+                </label>
+              </div>
+            </div>
+            <hr/>
+
+            <!--Button-->
+            <div class="a-spacing-top-large">
+              <span class="a-button-register">
+                <span @click="onUpdateProduct" class="a-button-text">Update Product</span>
+              </span>
+            </div>
+          </form>
+        </div>
+        <div class="col-sm3"></div>
+
+    </div>
+  </main>
+</template>
+
+<script>
+export default {
+  async asyncData( { $axios, params }) {
+    try {
+      let categories = $axios.$get('http://localhost:3000/api/categories')
+      let owners = $axios.$get('http://localhost:3000/api/owners')
+      let product = $axios.$get(`http://localhost:3000/api/products/${params.id}`)
+
+      const [catResponse, ownerResponse, productResponse] = await Promise.all([categories, owners, product])
+
+      return {
+        categories: catResponse.categories,
+        owners: ownerResponse.owners,
+        product: productResponse.product
+      }
+    } catch (err) {
+      console.log(err)
+    }
+  },
+
+  data () {
+    return {
+      categoryID: null,
+      ownerID: null,
+      title: '',
+      price: null,
+      description: '',
+      selectedFile: null,
+      fileName: '',
+      stockQuantity: null
+    }
+  },
+
+  methods: {
+    onFileSelected (event) {
+      this.selectedFile = event.target.files[0]
+      console.log(this.selectedFile)
+      this.fileName = event.target.files[0].name
+    },
+
+    async onUpdateProduct () {
+      let data = new FormData()
+      data.append('title', this.title)
+      data.append('price', this.price)
+      data.append('stockQuantity', this.stockQuantity)
+      data.append('description', this.description)
+      data.append('ownerID', this.ownerID)
+      data.append('categoryID', this.categoryID)
+      data.append('photo', this.selectedFile, this.selectedFile.name)
+
+      let result = await this.$axios.$put(`http://localhost:3000/api/products/${this.$route.params.id}`, data)
+
+      this.$router.push('/')
+    }
+  }
+}
+</script>