add wishlist to router, add ProductBox.vue

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>

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>

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({