From f1706af6628b3656cd3478360e2d18bb51b41978 Mon Sep 17 00:00:00 2001
From: yennanliu <f339339@gmail.com>
Date: Mon, 27 Nov 2023 11:19:53 +0800
Subject: [PATCH] add EditCategory view

---
 .../src/views/Category/EditCategory.vue       | 88 +++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 ShoppingCart/Frondend/ecommerce-ui/src/views/Category/EditCategory.vue

diff --git a/ShoppingCart/Frondend/ecommerce-ui/src/views/Category/EditCategory.vue b/ShoppingCart/Frondend/ecommerce-ui/src/views/Category/EditCategory.vue
new file mode 100644
index 000000000..a5b854b0f
--- /dev/null
+++ b/ShoppingCart/Frondend/ecommerce-ui/src/views/Category/EditCategory.vue
@@ -0,0 +1,88 @@
+<template>
+    <div class="container">
+      <div class="row">
+        <div class="col-12 text-center">
+          <h3 class="pt-3">Edit Category</h3>
+        </div>
+      </div>
+  
+      <div class="row">
+        <div class="col-3"></div>
+        <div class="col-md-6 px-5 px-md-0">
+          <form>
+            <div class="form-group">
+              <label>Category Name</label>
+              <input type="text" class="form-control" v-model="categoryName" required>
+            </div>
+            <div class="form-group">
+              <label>Description</label>
+              <input type="text" class="form-control" v-model="description" required>
+            </div>
+            <div class="form-group">
+              <label>ImageURL</label>
+              <input type="url" class="form-control" v-model="imageUrl" required>
+            </div>
+            <button type="button" class="btn btn-primary" @click="editCategory">Submit</button>
+          </form>
+        </div>
+        <div class="col-3"></div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  var axios =  require('axios')
+  import swal from 'sweetalert';
+  export default {
+    data(){
+      return {
+        id : null,
+        categoryName : null,
+        description : null,
+        imageUrl : null,
+        categoryIndex : null
+      }
+    },
+    props : ["baseURL", "category"],
+    methods : {
+      async editCategory() {
+        const updatedCategory = {
+          id : this.id,
+          categoryName : this.categoryName,
+          description : this.description,
+          imageUrl : this.imageUrl,
+        }
+        await axios({
+          method: 'post',
+          url: this.baseURL+"category/update/"+this.id,
+          data : JSON.stringify(updatedCategory),
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        })
+        .then(() => {
+          swal({
+            text: "Category Updated Successfully!",
+            icon: "success",
+            closeOnClickOutside: false,
+          });
+        })
+        .catch(err => console.log(err));
+      }
+    },
+    mounted() {
+      this.id = this.$route.params.id;
+      this.categoryName = this.category.categoryName;
+      this.description = this.category.description;
+      this.imageUrl = this.category.imageUrl;
+    }
+  }
+  </script>
+  
+  <style scoped>
+  h4 {
+    font-family: 'Roboto', sans-serif;
+    color: #484848;
+    font-weight: 700;
+  }
+  </style>
\ No newline at end of file