From 82ae72d82a2265f4e11c93a0f355d0d6013c04fd Mon Sep 17 00:00:00 2001 From: Sanjith Sivapuram <59279@hexaware.com> Date: Fri, 17 Sep 2021 03:35:09 +0530 Subject: [PATCH] cart Front End UI and Connection --- .../cart/controller/ProductController.java | 5 ++ .../java/com/shopify/cart/model/Product.java | 12 +++- .../cart/repository/ProductRepository.java | 4 ++ .../src/main/resources/application.properties | 2 +- ShopifyUI/proxy.conf.json | 2 +- .../app/components/cart/cart.component.css | 51 +++++++++++++++++ .../app/components/cart/cart.component.html | 55 +++++++++++++++++++ .../src/app/components/cart/cart.component.ts | 54 +++++++++++++++++- .../app/components/home/home.component.css | 36 ++++++++++++ .../app/components/home/home.component.html | 39 +++++++++++++ .../src/app/components/home/home.component.ts | 10 +++- .../components/products/products.component.ts | 2 +- ShopifyUI/src/app/model/cart.model.ts | 2 +- ShopifyUI/src/app/service/cart.service.ts | 9 ++- ShopifyUI/src/app/service/product.service.ts | 5 ++ 15 files changed, 278 insertions(+), 10 deletions(-) diff --git a/Shopify-Cart/src/main/java/com/shopify/cart/controller/ProductController.java b/Shopify-Cart/src/main/java/com/shopify/cart/controller/ProductController.java index 05375fd..6410c1d 100644 --- a/Shopify-Cart/src/main/java/com/shopify/cart/controller/ProductController.java +++ b/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 getAllTrendingProducts() { + return productRepository.findAllByTrending(); + } + @GetMapping("/product/{pid}") public Product getProductById(@PathVariable("pid") Long pid) { return productRepository.getById(pid); diff --git a/Shopify-Cart/src/main/java/com/shopify/cart/model/Product.java b/Shopify-Cart/src/main/java/com/shopify/cart/model/Product.java index d76a52e..12c3358 100644 --- a/Shopify-Cart/src/main/java/com/shopify/cart/model/Product.java +++ b/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; + } + + } diff --git a/Shopify-Cart/src/main/java/com/shopify/cart/repository/ProductRepository.java b/Shopify-Cart/src/main/java/com/shopify/cart/repository/ProductRepository.java index 752662c..2d89414 100644 --- a/Shopify-Cart/src/main/java/com/shopify/cart/repository/ProductRepository.java +++ b/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 { List findAllByName(String name); + @Query("select p from Product p where p.trending=true") + List findAllByTrending(); + } diff --git a/Shopify-Cart/src/main/resources/application.properties b/Shopify-Cart/src/main/resources/application.properties index debf174..32e3992 100644 --- a/Shopify-Cart/src/main/resources/application.properties +++ b/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 diff --git a/ShopifyUI/proxy.conf.json b/ShopifyUI/proxy.conf.json index cd8ee1b..ea8630f 100644 --- a/ShopifyUI/proxy.conf.json +++ b/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 } } \ No newline at end of file diff --git a/ShopifyUI/src/app/components/cart/cart.component.css b/ShopifyUI/src/app/components/cart/cart.component.css index e69de29..43e3639 100644 --- a/ShopifyUI/src/app/components/cart/cart.component.css +++ b/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; +} \ No newline at end of file diff --git a/ShopifyUI/src/app/components/cart/cart.component.html b/ShopifyUI/src/app/components/cart/cart.component.html index 1f1876c..fb05117 100644 --- a/ShopifyUI/src/app/components/cart/cart.component.html +++ b/ShopifyUI/src/app/components/cart/cart.component.html @@ -14,4 +14,59 @@
Login
+ +

+
+
+

  Your Items In Cart

+
+
+
+
+
+
+
+
+ {{c.product.name}} +
+
+
+
+
+

{{c.product.name}}

+
+
+
+
+

Rs {{c.price}}

+
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+

Total : Rs {{totalPrice}}

+
+
+ +
\ No newline at end of file diff --git a/ShopifyUI/src/app/components/cart/cart.component.ts b/ShopifyUI/src/app/components/cart/cart.component.ts index d70a5d4..b4d928e 100644 --- a/ShopifyUI/src/app/components/cart/cart.component.ts +++ b/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; }) } diff --git a/ShopifyUI/src/app/components/home/home.component.css b/ShopifyUI/src/app/components/home/home.component.css index 0ea94dc..5e9a55b 100644 --- a/ShopifyUI/src/app/components/home/home.component.css +++ b/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; +} \ No newline at end of file diff --git a/ShopifyUI/src/app/components/home/home.component.html b/ShopifyUI/src/app/components/home/home.component.html index bcc1f6a..2ce5d44 100644 --- a/ShopifyUI/src/app/components/home/home.component.html +++ b/ShopifyUI/src/app/components/home/home.component.html @@ -22,8 +22,47 @@

{{searchValue}}

+
+
+

Welcome To Shopify

+

Find the products you like.....

+
+
+
+
+
+
+ +
+
+
+
+ {{p.name}} +
+
+
+
+

{{p.name}}

+
+
+

Price : Rs {{p.marketRetailPrice}}

+
+
+
+
+

Discount Price : Rs {{p.discountedPrice}}

+
+
+
+
+ +
+
+
+
+

\ No newline at end of file diff --git a/ShopifyUI/src/app/components/home/home.component.ts b/ShopifyUI/src/app/components/home/home.component.ts index 093ba13..988c0c6 100644 --- a/ShopifyUI/src/app/components/home/home.component.ts +++ b/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) { diff --git a/ShopifyUI/src/app/components/products/products.component.ts b/ShopifyUI/src/app/components/products/products.component.ts index 3f21429..11d1c5a 100644 --- a/ShopifyUI/src/app/components/products/products.component.ts +++ b/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('') diff --git a/ShopifyUI/src/app/model/cart.model.ts b/ShopifyUI/src/app/model/cart.model.ts index 70cc9aa..dee6fe6 100644 --- a/ShopifyUI/src/app/model/cart.model.ts +++ b/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; diff --git a/ShopifyUI/src/app/service/cart.service.ts b/ShopifyUI/src/app/service/cart.service.ts index 17c6e9d..11d3f72 100644 --- a/ShopifyUI/src/app/service/cart.service.ts +++ b/ShopifyUI/src/app/service/cart.service.ts @@ -18,7 +18,12 @@ export class CartService { } public getCartByUser(uid:string): Observable { - let cart_post_api = this.path + "/cart/" + uid; - return this.httpClent.get(cart_post_api); + let cart_get_api = this.path + "/cart/" + uid; + return this.httpClent.get(cart_get_api); + } + + public editCartItem(cart:Cart,cid:number): Observable { + let cart_get_api = this.path + "/cart/" + cid; + return this.httpClent.put(cart_get_api,cart); } } diff --git a/ShopifyUI/src/app/service/product.service.ts b/ShopifyUI/src/app/service/product.service.ts index badfaa3..e63cdfa 100644 --- a/ShopifyUI/src/app/service/product.service.ts +++ b/ShopifyUI/src/app/service/product.service.ts @@ -22,6 +22,11 @@ export class ProductService { return this.httpClient.get(product_get_api); } + public getProductByTrending(): Observable { + let product_get_api = this.path + '/product/trending'; + return this.httpClient.get(product_get_api); + } + public getByProductName(pname:string): Observable { let product_get_api = this.path + '/product/name/' + pname; return this.httpClient.get(product_get_api);