From 824defa72482056b916f535770d61ecc43e2a1d1 Mon Sep 17 00:00:00 2001
From: yennanliu <f339339@gmail.com>
Date: Mon, 27 Nov 2023 11:02:36 +0800
Subject: [PATCH] add category view, component, update router, negelect
 multi-word-component-names checks

---
 .../Frondend/ecommerce-ui/package.json        |  2 +-
 .../src/components/Category/CategoryBox.vue   | 58 +++++++++++++++++++
 .../Frondend/ecommerce-ui/src/router/index.js |  8 +++
 .../src/views/Category/Category.vue           | 57 ++++++++++++++++++
 4 files changed, 124 insertions(+), 1 deletion(-)
 create mode 100644 ShoppingCart/Frondend/ecommerce-ui/src/components/Category/CategoryBox.vue
 create mode 100644 ShoppingCart/Frondend/ecommerce-ui/src/views/Category/Category.vue

diff --git a/ShoppingCart/Frondend/ecommerce-ui/package.json b/ShoppingCart/Frondend/ecommerce-ui/package.json
index 8e814e539..5234421ca 100644
--- a/ShoppingCart/Frondend/ecommerce-ui/package.json
+++ b/ShoppingCart/Frondend/ecommerce-ui/package.json
@@ -37,7 +37,7 @@
     "parserOptions": {
       "parser": "@babel/eslint-parser"
     },
-    "rules": {}
+    "rules": {"vue/multi-word-component-names": "off"}
   },
   "browserslist": [
     "> 1%",
diff --git a/ShoppingCart/Frondend/ecommerce-ui/src/components/Category/CategoryBox.vue b/ShoppingCart/Frondend/ecommerce-ui/src/components/Category/CategoryBox.vue
new file mode 100644
index 000000000..854e5850e
--- /dev/null
+++ b/ShoppingCart/Frondend/ecommerce-ui/src/components/Category/CategoryBox.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="card h-100 w-100">
+    <div class="embed-responsive embed-responsive-16by9">
+      <img class="card-img-top embed-responsive-item" :src="category.imageUrl" alt="Category Image">
+    </div>
+
+    <div class="card-body">
+      <h5 class="card-title">{{category.categoryName}}</h5>
+      <p class="card-text font-italic">{{category.description.substring(0,65)}}...</p>
+      <router-link id="edit-category" :to="{ name: 'EditCategory', params: { id : category.id } }" >
+        Edit
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name : "CategoryBox",
+    props : ["category"],
+    methods : {
+    }
+}
+</script>
+
+<style scoped>
+
+.card{
+  width : 20rem;
+  height : 24rem;
+}
+
+.embed-responsive .card-img-top {
+  object-fit: cover;
+}
+
+a {
+  text-decoration: none;
+}
+
+.card-title {
+  color: #484848;
+  font-size: 1.1rem;
+  font-weight: 400;
+}
+
+.card-title:hover {
+  font-weight: bold;
+}
+
+.card-text {
+  font-size: 0.9rem;
+}
+
+#edit-category {
+  float: right;
+}
+</style>
\ No newline at end of file
diff --git a/ShoppingCart/Frondend/ecommerce-ui/src/router/index.js b/ShoppingCart/Frondend/ecommerce-ui/src/router/index.js
index a23f7b0c3..a06590764 100644
--- a/ShoppingCart/Frondend/ecommerce-ui/src/router/index.js
+++ b/ShoppingCart/Frondend/ecommerce-ui/src/router/index.js
@@ -3,6 +3,7 @@ import VueRouter from "vue-router";
 import HomeView from "../views/HomeView.vue";
 
 import AddCategory from "../views/Category/AddCategory";
+import Category from "../views/Category/Category";
 
 
 Vue.use(VueRouter);
@@ -27,6 +28,13 @@ const routes = [
     name: "AddCategory",
     component: AddCategory,
   },
+
+  {
+    path: "/admin/category",
+    name: "AdminCategory",
+    component: Category,
+}
+
 ];
 
 const router = new VueRouter({
diff --git a/ShoppingCart/Frondend/ecommerce-ui/src/views/Category/Category.vue b/ShoppingCart/Frondend/ecommerce-ui/src/views/Category/Category.vue
new file mode 100644
index 000000000..35efd0cd3
--- /dev/null
+++ b/ShoppingCart/Frondend/ecommerce-ui/src/views/Category/Category.vue
@@ -0,0 +1,57 @@
+<template>
+    <div class="container">
+        <div class="row">
+            <div class="col-12 text-center">
+                <h4 class="pt-3">Our Categories</h4>
+                <router-link id="add-category" :to="{name : 'AddCategory'}" v-show="$route.name=='AdminCategory'">
+                    <button class="btn">Add a new Category</button>
+                </router-link>
+            </div>
+        </div>
+        <div class="row">
+            <div v-for="category of categories" :key="category.id" class="col-md-6 col-xl-4 col-12 pt-3  justify-content-around d-flex">
+                <CategoryBox :category="category">
+                </CategoryBox>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import CategoryBox from '../../components/Category/CategoryBox';
+    var axios =  require('axios');
+    export default {
+        name: 'Category',
+        components : {CategoryBox},
+        data() {
+            return {
+                baseURL : "https://limitless-lake-55070.herokuapp.com/",
+                categories : null,
+            }
+        },
+        methods: {
+            async getCategories() {
+                //fetch categories
+                await axios.get(this.baseURL + "category/")
+                    .then(res => this.categories = res.data)
+                    .catch(err => console.log(err))
+            }
+        },
+        mounted(){
+            this.getCategories();
+        }
+    }
+</script>
+
+<style scoped>
+    h4 {
+        font-family: 'Roboto', sans-serif;
+        color: #484848;
+        font-weight: 700;
+    }
+
+    #add-category {
+        float: right;
+        font-weight: 500;
+    }
+</style>
\ No newline at end of file