From 99242c0cae403a6746830ded4b31d3a5c23bab7c Mon Sep 17 00:00:00 2001
From: yennanliu <f339339@gmail.com>
Date: Mon, 27 Nov 2023 16:31:24 +0800
Subject: [PATCH] add wishlist to router, add ProductBox.vue

---
 .../Frondend/ecommerce-ui/src/App.vue         |  3 +-
 .../src/components/ProductBox.vue             | 40 +++++++++++++++++++
 .../Frondend/ecommerce-ui/src/router/index.js |  7 ++++
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 ShoppingCart/Frondend/ecommerce-ui/src/components/ProductBox.vue

diff --git a/ShoppingCart/Frondend/ecommerce-ui/src/App.vue b/ShoppingCart/Frondend/ecommerce-ui/src/App.vue
index 9e925d3c7..7db4f02ef 100644
--- a/ShoppingCart/Frondend/ecommerce-ui/src/App.vue
+++ b/ShoppingCart/Frondend/ecommerce-ui/src/App.vue
@@ -4,7 +4,8 @@
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link> |
       <router-link to="/admin/category">Category</router-link>  |
-      <router-link to="/admin/category/add">Add</router-link>
+      <router-link to="/admin/category/add">Add</router-link> |
+      <router-link to="/admin/wishlist">Wishlist</router-link>
     </nav>
     <router-view/>
   </div>
diff --git a/ShoppingCart/Frondend/ecommerce-ui/src/components/ProductBox.vue b/ShoppingCart/Frondend/ecommerce-ui/src/components/ProductBox.vue
new file mode 100644
index 000000000..f686bb89a
--- /dev/null
+++ b/ShoppingCart/Frondend/ecommerce-ui/src/components/ProductBox.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="card h-100 w-100">
+    <div class="embed-responsive embed-responsive-16by9">
+      <img
+        class="card-img-top embed-responsive-item"
+        :src="product.imageURL"
+        alt="Card image cap"
+      />
+    </div>
+    <div class="card-body">
+      <router-link :to="{ name: 'ShowDetails', params: { id: product.id } }">
+        <h5 class="card-title">{{ product.name }}</h5>
+      </router-link>
+      <p class="card-text">{{ product.description.substring(0, 65) }}...</p>
+      <router-link
+        :to="{ name: 'EditProduct', params: { id: product.id } }"
+        v-show="$route.name == 'AdminProduct'"
+      >
+        <button class="btn btn-primary">Edit</button>
+      </router-link>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "ProductBox",
+  props: ["product"],
+};
+</script>
+<style scoped>
+.card-img-top {
+  object-fit: cover;
+}
+a {
+  text-decoration: none;
+}
+.card-title {
+  color: #484848;
+}
+</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 440916b6e..82c102e73 100644
--- a/ShoppingCart/Frondend/ecommerce-ui/src/router/index.js
+++ b/ShoppingCart/Frondend/ecommerce-ui/src/router/index.js
@@ -5,6 +5,7 @@ import HomeView from "../views/HomeView.vue";
 import AddCategory from "../views/Category/AddCategory";
 import EditCategory from "../views/Category/EditCategory";
 import Category from "../views/Category/Category";
+import Wishlist from "../views/Product/Wishlist.vue";
 
 Vue.use(VueRouter);
 
@@ -40,6 +41,12 @@ const routes = [
     name: "EditCategory",
     component: EditCategory,
   },
+
+  {
+    path: "/wishlist",
+    name: "Wishlist",
+    component: Wishlist,
+  },
 ];
 
 const router = new VueRouter({