cart Front End UI and Connection

Shopify-Cart/src/main/java/com/shopify/cart/controller/ProductController.java

@@ -30,6 +30,11 @@ public class ProductController {
 		return productRepository.findAll();
 	}
 	
+	@GetMapping("/product/trending")
+	public List<Product> getAllTrendingProducts() {
+		return productRepository.findAllByTrending();
+	}
+	
 	@GetMapping("/product/{pid}")
 	public Product getProductById(@PathVariable("pid") Long pid) {
 		return productRepository.getById(pid);

Shopify-Cart/src/main/java/com/shopify/cart/model/Product.java

@@ -18,7 +18,8 @@ public class Product {
 	private Double marketRetailPrice;
 	private Integer discount;
 	private Double discountedPrice;
-
+	private Boolean	trending;
+	
 	public Long getId() {
 		return id;
 	}
@@ -83,4 +84,13 @@ public class Product {
 		this.discountedPrice = discountedPrice;
 	}
 
+	public Boolean getTrending() {
+		return trending;
+	}
+
+	public void setTrending(Boolean trending) {
+		this.trending = trending;
+	}
+	
+
 }

Shopify-Cart/src/main/java/com/shopify/cart/repository/ProductRepository.java

@@ -3,6 +3,7 @@ package com.shopify.cart.repository;
 import java.util.List;
 
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
 
 import com.shopify.cart.model.Product;
 
@@ -10,4 +11,7 @@ public interface ProductRepository extends JpaRepository<Product, Long> {
 
 	List<Product> findAllByName(String name);
 
+	@Query("select p from Product p where p.trending=true")
+	List<Product> findAllByTrending();
+
 }

Shopify-Cart/src/main/resources/application.properties

@@ -1,6 +1,6 @@
 server.port=8002
 
-spring.datasource.url=jdbc:mysql://10.3.117.21:3306/Shopify_DB?createDatabaseIfNotExist=true
+spring.datasource.url=jdbc:mysql://10.3.117.22:3306/Shopify_DB?createDatabaseIfNotExist=true
 spring.datasource.username=testuser
 spring.datasource.password=PASSWORD123
 

ShopifyUI/proxy.conf.json

@@ -1,6 +1,6 @@
 {
     "/api": {
-        "target": "http://10.3.117.21:8002",
+        "target": "http://10.3.117.22:8002",
         "secure": false
     }
 }

ShopifyUI/src/app/components/cart/cart.component.css

@@ -0,0 +1,51 @@
+.cart-heading {
+    color: #1B4F72;
+}
+
+.cartList {
+    padding-left: 4em;
+    padding-right: 6em;
+}
+
+.cartList>div {
+    border-bottom: 1px solid lightgray;
+}
+.cart-content h1,p{
+    color: #1B4F72;
+    float: right;
+}
+
+.QuantityBtn button {
+    border: 1px solid transparent;
+    padding: 12px 14px;
+    border-radius: 20px;
+    color: white;
+    float: right;
+    background-color: #1B4F72
+}
+
+.oneBtn {
+    opacity: 0.5;
+}
+
+.QuantityInput {
+    transform: translate(10px,0);
+}
+.QuantityInput input {
+    height: 45px;
+    text-align: center;
+}
+
+.payBtn button {
+    border: 1px solid transparent;
+    padding: 12px 14px;
+    border-radius: 20px;
+    color: white;
+    background-color: #2E86C1;
+    width: 95%;
+}
+
+.cart-content h3 {
+    color: #1B4F72;
+    padding-left: 50px;
+}

ShopifyUI/src/app/components/cart/cart.component.html

@@ -14,4 +14,59 @@
     <div class="col-1 loginbtn">
       <a routerLink="/login">Login</a>
     </div>
+</div>
+<br><br>
+<div class="row">
+  <div class="col-12 cart-heading text-center">
+    <h2><i class="bi bi-cart3"></i>&nbsp;&nbsp;Your Items In Cart</h2>
+  </div>
+</div>
+<div class="row">
+  <div class="col-12 cartList">
+    <div *ngFor='let c of cartItems'>
+      <div class="row">
+        <div class="col-6">
+          <br>
+          <img src={{c.product.imageUrl}} alt={{c.product.name}} width="30%">
+        </div>
+        <div class="col-6 text-right cart-content">
+          <div class="row">
+            <div class="col-12">
+              <br>
+              <h1>{{c.product.name}}</h1>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-12">
+              <p>Rs {{c.price}}</p>
+            </div>
+          </div>
+          <br>
+          <br>
+          <div class="row align-items-center">
+            <div class="col-7">
+            </div>
+            <div class="col-1 QuantityBtn">
+              <button style="float: right;" (click)="decreaseQty(c.cart_id,c.quantity,c.price)"><i class="bi bi-dash"></i></button>
+            </div>
+            <div class="col-3 QuantityInput">
+              <input type="number" value={{c.quantity}}>
+            </div>
+            <div class="col-1 QuantityBtn">
+              <button style="float: left;" (click)="increaseQty(c.cart_id,c.quantity,c.price)"><i class="bi bi-plus"></i></button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<br>
+<div class="row">
+  <div class="col-6 cart-content">
+    <h3>Total : Rs {{totalPrice}}</h3> 
+  </div>
+  <div class="col-6 text-center payBtn">
+    <button routerLink="/products">Proceed To Pay</button>
+  </div>
 </div>

ShopifyUI/src/app/components/cart/cart.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Cart } from 'src/app/model/cart.model';
 import { CartService } from 'src/app/service/cart.service';
 
 @Component({
@@ -9,12 +10,63 @@ import { CartService } from 'src/app/service/cart.service';
 export class CartComponent implements OnInit {
 
   cartNo:number = 0;
-  uid:string = "10";
+  cartItems:Cart[];
+  uid:string = "1";
+  totalPrice:number = 0;
   constructor(private cartService:CartService) { }
 
   ngOnInit(): void {
     this.cartService.getCartByUser(this.uid).subscribe(data1 => {
       this.cartNo = data1.length;
+      this.cartItems=data1;
+      console.log(this.cartItems)
+      this.cartItems.forEach((i,index) => {
+        this.totalPrice = this.totalPrice + i.price;
+      })
+    })    
+  }
+
+  increaseQty(cid:number,quantity:number,price:number) {
+    console.log("Increase Quantity")
+    let qty:number = quantity + 1;
+    let amount:number = price*qty;
+    let cart:Cart = {
+      quantity : qty,
+      price : amount
+    }
+    console.log(qty,amount);
+    this.cartItems.forEach((i,index) => {
+      if (i.cart_id == cid) {
+        this.cartItems[index].quantity = qty;
+        this.cartItems[index].price = amount;
+      }
+    })
+    this.cartService.editCartItem(cart,cid).subscribe(data => {
+    })
+    this.cartItems.forEach((i,index) => {
+      this.totalPrice = this.totalPrice + i.price;
+    })
+  }
+
+  decreaseQty(cid:number,quantity:number,price:number) {
+    console.log("Decrease Quantity")
+    let amount:number = price/quantity;
+    let qty:number = quantity - 1;
+    let cart:Cart = {
+      quantity : qty,
+      price : amount
+    }
+    console.log(quantity,qty,price,amount);
+    this.cartItems.forEach((i,index) => {
+      if (i.cart_id == cid) {
+        this.cartItems[index].quantity = qty;
+        this.cartItems[index].price = amount;
+      }
+    })
+    this.cartService.editCartItem(cart,cid).subscribe(data => {
+    })
+    this.cartItems.forEach((i,index) => {
+      this.totalPrice = this.totalPrice + i.price;
     })
   }
 

ShopifyUI/src/app/components/home/home.component.css

@@ -6,3 +6,39 @@
   background-color: #2E86C1;
   width: 95%;
 }
+
+.home-heading {
+  font-size: 13em;
+  font-weight: 500;
+}
+
+.product {
+  margin: 0px auto;
+  border-right: 1px solid lightgray;
+  padding: 14px 16px;
+  color: #1B4F72;
+}
+
+.ProductBtn button {
+  border: 1px solid transparent;
+  padding: 12px 14px;
+  border-radius: 20px;
+  color: white;
+  background-color: transparent
+}
+
+.ProductBtn i {
+  color: #1B4F72;
+  font-size: 30px;
+}
+
+
+.discountBtn {
+  background-color: #E74C3C;
+  color: white;
+  font-weight: 900;
+  border: 1px transparent;
+  border-radius: 50%;
+  padding: 16px 12px;
+  float: right;
+}

ShopifyUI/src/app/components/home/home.component.html

@@ -22,8 +22,47 @@
   </div>
 </div>
 <p>{{searchValue}}</p>
+<div class="row">
+  <div class="col-12 text-center">
+    <p class="home-heading" style="color: #1B4F72;">Welcome To Shopify</p>
+    <p style="color: #1B4F72;">Find the products you like.....</p>
+  </div>
+</div>
+<div class="row p-5">
+      <div class="col-4 product pDetails" *ngFor='let p of products'>
+        <div class="row">
+          <div class="col-12">
+            <button disabled class="discountBtn mt-3">{{p.discount}}%</button>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-12 text-center">
+            <img src={{p.imageUrl}} alt={{p.name}} width="30%">
+          </div>
+        </div>
+        <div class="row align-items-center">
+          <div class="col-6">
+            <h4>{{p.name}}</h4>
+          </div>
+          <div class="col-6">
+            <p style="float: right;">Price : Rs {{p.marketRetailPrice}}</p>
+          </div>
+        </div>
+        <div class="row pDetails">
+          <div class="col-12">
+            <p style="float: right;">Discount Price : Rs {{p.discountedPrice}}</p>
+          </div>
+        </div>
+        <div class="row align-items-center text-right">
+          <div class="col-12 ProductBtn">
+            <button style="float: right;" routerLink="/products/{{p.id}}"><i class="bi bi-arrow-right-square-fill"></i></button>
+          </div>
+        </div>
+    </div>
+</div>
 <div class="row">
   <div class="col-12 text-center allProductsBtn">
     <button routerLink="/products">Browse For All Products</button>
   </div>
 </div>
+<br><br>

ShopifyUI/src/app/components/home/home.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { Product } from 'src/app/model/product.model';
 import { CartService } from 'src/app/service/cart.service';
+import { ProductService } from 'src/app/service/product.service';
 
 @Component({
   selector: 'app-home',
@@ -9,14 +11,18 @@ import { CartService } from 'src/app/service/cart.service';
 export class HomeComponent implements OnInit {
 
   cartNo:number = 0;
-  uid:string = "10";
+  uid:string = "1";
   searchValue: string = '';
-  constructor(private cartService: CartService) { }
+  products:Product[];
+  constructor(private cartService: CartService,private productService: ProductService) { }
 
   ngOnInit(): void {
     this.cartService.getCartByUser(this.uid).subscribe(data1 => {
       this.cartNo = data1.length;
     })
+    this.productService.getProductByTrending().subscribe(data => {
+      this.products=data;
+    })
   }
 
   onSearchEnter(value: string) {

ShopifyUI/src/app/components/products/products.component.ts

@@ -17,7 +17,7 @@ export class ProductsComponent implements OnInit {
   products: Product[] = [];
   searchForm: FormGroup;
   prodName:string;
-  uid:string = "10";
+  uid:string = "1";
   constructor(private productService: ProductService,private cartService: CartService) { 
     this.searchForm = new FormGroup({
       prodName: new FormControl('')

ShopifyUI/src/app/model/cart.model.ts

@@ -2,7 +2,7 @@ import { Product } from "./product.model";
 import { User } from "./user.model";
 
 export class Cart {
-    id?:Number;
+    cart_id?:number;
     user?: User;
     product?: Product;
     quantity: number;

ShopifyUI/src/app/service/cart.service.ts

@@ -18,7 +18,12 @@ export class CartService {
   }
 
   public getCartByUser(uid:string): Observable<Cart[]> {
-    let cart_post_api = this.path + "/cart/" + uid;
-    return this.httpClent.get<Cart[]>(cart_post_api);
+    let cart_get_api = this.path + "/cart/" + uid;
+    return this.httpClent.get<Cart[]>(cart_get_api);
+  }
+
+  public editCartItem(cart:Cart,cid:number): Observable<any> {
+    let cart_get_api = this.path + "/cart/" + cid;
+    return this.httpClent.put<any>(cart_get_api,cart);
   }
 }

ShopifyUI/src/app/service/product.service.ts

@@ -22,6 +22,11 @@ export class ProductService {
     return this.httpClient.get<Product>(product_get_api);
   }
 
+  public getProductByTrending(): Observable<Product[]> {
+    let product_get_api = this.path + '/product/trending';
+    return this.httpClient.get<Product[]>(product_get_api);
+  }
+
   public getByProductName(pname:string): Observable<Product[]> {
     let product_get_api = this.path + '/product/name/' + pname;
     return this.httpClient.get<Product[]>(product_get_api);