add product, whichList FE code

ShoppingCart/Frondend/ecommerce-ui/src/views/Product/Products.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="container">
+        <div class="row">
+            <div class="col-12 text-center">
+                <h4> Our Products</h4>
+                <router-link :to="{name: 'AddProduct'}" style="float: right">
+                    <button class="btn" >
+                        Add Product
+                    </button> </router-link>
+            </div>
+        </div>
+        <div class="row">
+<!--            display all the products in productbox component-->
+            <div v-for="product of products" :key="product.id"
+                 class="col-md-6 col-xl-4 col-12 pt-3 d-flex">
+                <ProductBox :product="product"/>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import ProductBox from "../../components/ProductBox";
+    export default {
+        components: {ProductBox},
+        props:["products"]
+    }
+</script>

ShoppingCart/Frondend/ecommerce-ui/src/views/Product/Wishlist.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="products-box container">
+    <h2>Your WishList</h2>
+    <div v-if="products">
+      <div v-for="product of products" :key="product.id">
+        <ProductBox :product="product"> </ProductBox>
+      </div>
+    </div>
+  </div>
+</template>
+
+  <script>
+import ProductBox from "../../components/ProductBox";
+import axios from "axios";
+export default {
+  data() {
+    return {
+      products: null,
+      token: null,
+    };
+  },
+  name: "Product",
+  components: { ProductBox },
+  props: ["baseURL"],
+  methods: {
+    fetchWishlist: function () {
+      // fetch products
+      axios
+        .get(this.baseURL + "wishlist/" + this.token)
+        .then((data) => (this.products = data.data))
+        .catch((err) => console.log(err));
+    },
+    refreshNav: function () {
+      this.key += 1;
+    },
+  },
+  mounted() {
+    //get token
+    this.token = localStorage.getItem("token");
+
+    //fetch products from the wishlist
+    this.fetchWishlist();
+  },
+};
+</script>
+
+  <style>
+.products-box h2 {
+  font-family: "Courgette", cursive;
+  font-size: 60px;
+  text-align: center;
+  margin: 70px 0;
+}
+.add-btn {
+  margin: 20px 0;
+}
+</style>

ShoppingCart/doc/progress.txt

@@ -4,4 +4,5 @@
 - https://dev.to/webtutsplus/let-s-develop-an-e-commerce-application-from-scratch-using-java-1gap
 
 # 20231127
-- https://dev.to/nilmadhabmondal/creating-an-ecommerce-frontend-with-vue-js-59o
+- https://dev.to/nilmadhabmondal/creating-an-ecommerce-frontend-with-vue-js-59o
+- https://dev.to/nilmadhabmondal/creating-an-ecommerce-frontend-with-vue-js-part-3-wishlist-feature-26in