adding to cart is working fine and flushing details to db is not implemented yet

4 years ago · f07e354031
7 changed files with 192 additions and 62 deletions
--- a/Angular-UrbanBazaar/src/app/components/cart/cart.component.css
+++ b/Angular-UrbanBazaar/src/app/components/cart/cart.component.css
@ -0,0 +1,39 @@
+.card
+{
+    height: 60vh;
+    margin: 25px;
+    padding: 25px;
+}
+
+.center{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    text-align: center;
+}
+h4,h6{
+    font-weight: 400;
+}
+.shopNow{
+    padding: 5%;
+    background-color: rgb(79 79 243);
+    color: aliceblue;
+    border-radius: 15px;
+    border-color: white;
+}
+.card-table{
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    
+}
+/* .center .btn{
+    font-size: 14px !important;
+    margin-top: 20px !important;
+    font-weight: 400;
+    padding: 12px 72px;
+    border-radius: 3px !important;
+
+} */
--- a/Angular-UrbanBazaar/src/app/components/cart/cart.component.html
+++ b/Angular-UrbanBazaar/src/app/components/cart/cart.component.html
@ -1,32 +1,52 @@
-<!-- <p>cart works!</p> -->
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    
-    <table border="2px">
-    <tr >
-        <td>productid</td>
-        <td>productname</td>
-        <td>productprice</td>
-        <td>productweight</td>
-    </tr>  
-    
-    <tr *ngFor="let c of cartdetails | async">
-        <td>{{c.productname}}</td>
-        <td>{{c.productprice}}</td>
-        <td>{{c.productweight}}</td>
-    </tr> 
+<ng-container *ngIf="cartdetails.length !=0">
+    <div class="container">
+        <div class="card-table">
+            <div class="card-product">
+                <div class="table tabe-responsive">
+                    <thead>
+                        <tr>
+                            <th>S.No</th>
+                            <th>ProductName</th>
+                            <th>ProductPrice</th>
+                            
+                            <th>Action</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let c of cartdetails; let i = index">
+                            <td>{{i+1}}</td>
+                            <td>{{c.productname}}</td>
+                            <td>{{c.productprice}}</td>
+                            <td>
+                                <button class="deleteButton" (click)="removeItem(c)">Delete</button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="4"></td>
+                            <td><button (click)=emptyCart()>Empty Cart</button></td>
+                            <td><button routerLink='/'>Shop More</button></td>
+                            <td><button>Checkout</button></td>
+                            <td><strong>Grand Total : Rs.{{grandTotal}}</strong></td>
+                        </tr>
+                    </tbody>
+                </div>
+            </div>
+        </div>
+    </div>
+</ng-container>

+<ng-container *ngIf="cartdetails.length==0">
+    <div class="container">
+        <div class="card">
+            <h5 class="card-title">My Cart</h5>
+        </div>

-
-
-    </table>
-
-</body>
-</html>
+        <div class="center">
+            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT9q9U7YaUc27iaqP1bbyD3g6GSLqlRmAFbeQ&usqp=CAU"
+                alt="">
+            <h4>Your cart is empty!</h4>
+            <h6>Add item to it now</h6>
+            <button class="shopNow" routerLink='/'>Shop Now</button>
+        </div>
+    </div>
+</ng-container>
--- a/Angular-UrbanBazaar/src/app/components/cart/cart.component.ts
+++ b/Angular-UrbanBazaar/src/app/components/cart/cart.component.ts
@ -10,13 +10,27 @@ import { CartService } from 'src/app/services/cart.service';
 })
 export class CartComponent implements OnInit {

-  cartdetails:Observable<Cart[]>
+  public cartdetails:any =[];
+  public grandTotal!: number;
  
  constructor(private cartservice:CartService) { 
-    this.cartdetails = this.cartservice.showAllOrder();
+    // this.cartdetails = this.cartservice.showAllOrder();
  }

  ngOnInit(): void {
+    this.cartservice.getProducts()
+    .subscribe(res=>{
+        this.cartdetails = res;
+        this.grandTotal = this.cartservice.getTotalPrice();
+    })
+  }
+  removeItem(item:any){
+    this.cartservice.removeCartItem(item);
+  }
+
+  emptyCart()
+  {
+    this.cartservice.removeAllCart();
  }

 }
--- a/Angular-UrbanBazaar/src/app/components/home/home.component.html
+++ b/Angular-UrbanBazaar/src/app/components/home/home.component.html
@ -1,32 +1,16 @@
-<!-- <p>home works!</p> -->
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>

 <body>
    <div>
        <button class="showButton" (click)="showButton()">ShowCart</button>
        
    </div>
-
+    
    <div class="cardParent">
-        <div class="card" *ngFor="let i of products|async">
+        <div class="card" *ngFor="let i of products">
            <img src="{{i.productimage}}" style="width:100%">
            <h6>{{i.productname}}</h6>
            <p class="price">Rs.{{i.productprice}}</p>
            <p class="price">Weight {{i.productweight}}</p>
-            <p><button class="Addbutton" (click)="addCart()">Add to Cart</button></p>
+            <p><button class="Addbutton" (click)=addCart(i)>Add to Cart</button></p>
        </div>
-    </div>
-
-
-
-</body>
-
-</html>
+    </div>
--- a/Angular-UrbanBazaar/src/app/components/home/home.component.ts
+++ b/Angular-UrbanBazaar/src/app/components/home/home.component.ts
@ -12,22 +12,33 @@ import { Cart } from 'src/app/models/cart';
  styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {
+
+  
  
  showButton(){
    // this.router.navigate(['/showCart']);
    this.router.navigateByUrl('/showCart');
  }

-  addCart(){
-    alert("added to cart")
+  addCart(item:any){
+    this.cartservice.addtoCart(item);
  }

-  products:Observable<Product[]>
-  constructor(private productservice: ProductService,private router: Router ) {
-    this.products = this.productservice.showAllProduct();
+  public products:any
+  constructor(private productservice: ProductService,private router: Router , private cartservice:CartService ) {
+    
   }

  ngOnInit(): void {
+    this.productservice.showAllProduct().subscribe(res=>{
+      this.products=res;
+
+      this.products.forEach((a:any) => {
+        Object.assign(a,{quantity:1,total:a.productprice})
+      });
+
+
+    })
  }

 }
--- a/Angular-UrbanBazaar/src/app/services/cart.service.ts
+++ b/Angular-UrbanBazaar/src/app/services/cart.service.ts
@ -1,6 +1,7 @@
 import { HttpClient } from '@angular/common/http';
+import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { Cart } from '../models/cart';

@Injectable({
@ -11,10 +12,67 @@ export class CartService {
  private _url : String = "http://localhost:9000";
  constructor(private _http : HttpClient) { }

-  public showAllOrder():Observable<Cart[]>
+  // public showAllOrder():Observable<Cart[]>
+  // {
+  //     return this._http.get<Cart[]>(this._url+"/showCart");
+  // }
+
+  public cartListItem: any=[]
+  public productList = new BehaviorSubject<any>([])
+  // public addOrder(cart:Cart)
+  // {
+  //     this._http.post(this._url+"/addCart",cart)
+  // }
+
+  getProducts()
+  {
+    return this.productList.asObservable();
+  }
+
+  setProduct(product:any)
+  {
+    this.cartListItem.push(...product);
+    this.productList.next(product);
+  }
+
+  addtoCart(product:any)
+  {
+      this.cartListItem.push(product);
+      this.productList.next(this.cartListItem)
+      this.getTotalPrice();
+      // console.log(this.cartListItem);
+  }
+
+  getTotalPrice():number{
+    let grandTotal=0;
+    this.cartListItem.map((a:any)=>{
+      grandTotal+=a.productprice;
+    })
+    return grandTotal;
+  }
+
+  removeCartItem(product:any)
+  {
+    this.cartListItem.map((a:any,index:any)=>{
+      if(product.productid === a.productid)
+      {
+        this.cartListItem.splice(index,1);
+      }
+    })
+     this.productList.next(this.cartListItem);
+  }
+
+  removeAllCart()
  {
-      return this._http.get<Cart[]>(this._url+"/showCart");
+    this.cartListItem=[]
+    this.productList.next(this.cartListItem);
  }


+
+
+
 }
+
+
+
--- a/Angular-UrbanBazaar/src/app/services/product.service.ts
+++ b/Angular-UrbanBazaar/src/app/services/product.service.ts
@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Product } from '../models/product';
+import {map} from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
@ -11,8 +12,11 @@ export class ProductService {
  
  constructor(private _http : HttpClient) { }

-  public showAllProduct() : Observable<Product[]> {
-    return this._http.get<Product[]>(this._url+"/showAllProducts");
+  public showAllProduct(){
+    return this._http.get<any>(this._url+"/showAllProducts")
+    .pipe(map((res:any)=>{
+      return res;
+    }))
  }

  public searchProduct(name : string) : Observable<Product[]> {