From 77b2e365615ef8477d6358c601e46142e5c328c0 Mon Sep 17 00:00:00 2001
From: yennanliu <f339339@gmail.com>
Date: Mon, 27 Nov 2023 10:22:32 +0800
Subject: [PATCH] update router index, add Category/ view

---
 ShoppingCart/Frondend/README.md               |  2 +-
 .../Frondend/ecommerce-ui/src/router/index.js | 41 ++++++++------
 .../src/views/Category/AddCategory.vue        | 55 +++++++++++++++++++
 3 files changed, 81 insertions(+), 17 deletions(-)
 create mode 100644 ShoppingCart/Frondend/ecommerce-ui/src/views/Category/AddCategory.vue

diff --git a/ShoppingCart/Frondend/README.md b/ShoppingCart/Frondend/README.md
index 0042279ed..08b36de20 100644
--- a/ShoppingCart/Frondend/README.md
+++ b/ShoppingCart/Frondend/README.md
@@ -33,7 +33,7 @@ npm run serve
 
 | API | Type | Purpose | Example cmd | Comment|
 | ----- | -------- | ---- | ----- | ---- |
-| Test |  | | |
+| http://localhost:8080/admin/category/add |  add  category | | |
 
 
 
diff --git a/ShoppingCart/Frondend/ecommerce-ui/src/router/index.js b/ShoppingCart/Frondend/ecommerce-ui/src/router/index.js
index a395a1f86..a23f7b0c3 100644
--- a/ShoppingCart/Frondend/ecommerce-ui/src/router/index.js
+++ b/ShoppingCart/Frondend/ecommerce-ui/src/router/index.js
@@ -1,29 +1,38 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import Vue from "vue";
+import VueRouter from "vue-router";
+import HomeView from "../views/HomeView.vue";
 
-Vue.use(VueRouter)
+import AddCategory from "../views/Category/AddCategory";
+
+
+Vue.use(VueRouter);
 
 const routes = [
   {
-    path: '/',
-    name: 'home',
-    component: HomeView
+    path: "/",
+    name: "home",
+    component: HomeView,
   },
   {
-    path: '/about',
-    name: 'about',
+    path: "/about",
+    name: "about",
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  }
-]
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
+  },
+  {
+    path: "/admin/category/add",
+    name: "AddCategory",
+    component: AddCategory,
+  },
+];
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: "history",
   base: process.env.BASE_URL,
-  routes
-})
+  routes,
+});
 
-export default router
+export default router;
diff --git a/ShoppingCart/Frondend/ecommerce-ui/src/views/Category/AddCategory.vue b/ShoppingCart/Frondend/ecommerce-ui/src/views/Category/AddCategory.vue
new file mode 100644
index 000000000..95a8ccc93
--- /dev/null
+++ b/ShoppingCart/Frondend/ecommerce-ui/src/views/Category/AddCategory.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="container">
+      <div class="row">
+        <div class="col-12 text-center">
+          <h4 class="pt-3">Add new Category</h4>
+        </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">Submit</button>
+         </form>
+        </div>
+        <div class="col-3"></div>
+      </div>
+   </div>
+ </template>
+ 
+ <script>
+ export default {
+   data(){
+     return {
+       categoryName : null,
+       description : null,
+       imageURL : null,
+     }
+   },
+   props : [],
+   methods : {
+     
+   }
+ }
+ </script>
+ 
+ <style scoped>
+ h4 {
+   font-family: 'Roboto', sans-serif;
+   color: #484848;
+   font-weight: 700;
+ }
+ </style>
\ No newline at end of file