From 4ff93ac3df8dbc32484428dd086d015e07f198ed Mon Sep 17 00:00:00 2001 From: Popovkov57 Date: Wed, 28 Sep 2022 12:09:19 +0200 Subject: [PATCH 1/3] Add detail and checkout component and routing --- src/app/app.component.ts | 2 +- src/app/app.module.ts | 15 +++++++++++---- src/app/store/cartDetail.component.ts | 7 +++++++ src/app/store/cartSummary.component.html | 2 +- src/app/store/checkout.component.ts | 7 +++++++ src/app/store/store.component.ts | 4 +++- src/app/store/store.module.ts | 9 ++++++--- 7 files changed, 36 insertions(+), 10 deletions(-) create mode 100644 src/app/store/cartDetail.component.ts create mode 100644 src/app/store/checkout.component.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index abd388f..759b098 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -2,6 +2,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app', - template: "" + template: "" }) export class AppComponent {} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index dd4bf60..27e9d9a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,16 +1,23 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { StoreModule } from './store/store.module'; - import { AppComponent } from './app.component'; +import { StoreComponent } from './store/store.component'; +import { CheckoutComponent } from './store/checkout.component'; +import { CartDetailComponent } from './store/cartDetail.component'; +import { RouterModule } from '@angular/router'; @NgModule({ + imports: [BrowserModule, StoreModule, + RouterModule.forRoot([ + { path: "store", component: StoreComponent }, + { path: "cart", component: CartDetailComponent }, + { path: "checkout", component: CheckoutComponent }, + { path: "**", redirectTo: "/store" } + ])], declarations: [ AppComponent ], - imports: [ - BrowserModule, StoreModule - ], providers: [], bootstrap: [AppComponent] }) diff --git a/src/app/store/cartDetail.component.ts b/src/app/store/cartDetail.component.ts new file mode 100644 index 0000000..83f7622 --- /dev/null +++ b/src/app/store/cartDetail.component.ts @@ -0,0 +1,7 @@ +import { Component } from "@angular/core"; + +@Component({ + template:`

Cart Detail Component

` +}) + +export class CartDetailComponent {} \ No newline at end of file diff --git a/src/app/store/cartSummary.component.html b/src/app/store/cartSummary.component.html index a14e927..7df62ee 100644 --- a/src/app/store/cartSummary.component.html +++ b/src/app/store/cartSummary.component.html @@ -9,7 +9,7 @@ (empty) - \ No newline at end of file diff --git a/src/app/store/checkout.component.ts b/src/app/store/checkout.component.ts new file mode 100644 index 0000000..89fc555 --- /dev/null +++ b/src/app/store/checkout.component.ts @@ -0,0 +1,7 @@ +import { Component } from "@angular/core"; + +@Component({ + template:`

Checkout Component

` +}) + +export class CheckoutComponent {} \ No newline at end of file diff --git a/src/app/store/store.component.ts b/src/app/store/store.component.ts index 4e8532b..0f0e055 100644 --- a/src/app/store/store.component.ts +++ b/src/app/store/store.component.ts @@ -2,6 +2,7 @@ import { Component } from "@angular/core"; import { Product } from "../model/product.model"; import { ProductRepository } from "../model/product.repository"; import { Cart } from "../model/cart.model"; +import { Router } from "@angular/router"; @Component({ selector: "store", @@ -14,7 +15,7 @@ export class StoreComponent { public productsPerPage = 4; public selectedPage = 1; - constructor(private repository: ProductRepository, private cart: Cart) {} + constructor(private repository: ProductRepository, private cart: Cart, private router: Router) {} get products(): Product[] { let pageIndex = (this.selectedPage - 1) * this.productsPerPage; @@ -44,6 +45,7 @@ export class StoreComponent { addProductToCart(product: Product) { this.cart.addLine(product, 1); + this.router.navigateByUrl("/cart"); } } \ No newline at end of file diff --git a/src/app/store/store.module.ts b/src/app/store/store.module.ts index 40fa0ee..59f96e9 100644 --- a/src/app/store/store.module.ts +++ b/src/app/store/store.module.ts @@ -4,11 +4,14 @@ import { FormsModule } from "@angular/forms"; import { ModelModule } from "../model/model.module"; import { StoreComponent } from "./store.component"; import { CartSummaryComponent } from "./cartSummary.component"; +import { CartDetailComponent } from "./cartDetail.component"; +import { CheckoutComponent } from "./checkout.component"; +import { RouterModule } from "@angular/router"; @NgModule({ - imports: [ModelModule, BrowserModule, FormsModule], - declarations: [StoreComponent, CartSummaryComponent], - exports: [StoreComponent, CartSummaryComponent] + imports: [ModelModule, BrowserModule, FormsModule, RouterModule], + declarations: [StoreComponent, CartSummaryComponent, CartDetailComponent, CheckoutComponent], + exports: [StoreComponent, CartSummaryComponent, CartDetailComponent, CheckoutComponent] }) export class StoreModule {} \ No newline at end of file From 501f9c96aec3b7e5128e4624d9d15127c2cf6906 Mon Sep 17 00:00:00 2001 From: Popovkov57 Date: Wed, 28 Sep 2022 12:21:45 +0200 Subject: [PATCH 2/3] Guarding the routes --- src/app/app.module.ts | 18 ++++++++++++++---- src/app/storeFirst.guard.ts | 22 ++++++++++++++++++++++ 2 files changed, 36 insertions(+), 4 deletions(-) create mode 100644 src/app/storeFirst.guard.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 27e9d9a..e76f56b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,19 +6,29 @@ import { StoreComponent } from './store/store.component'; import { CheckoutComponent } from './store/checkout.component'; import { CartDetailComponent } from './store/cartDetail.component'; import { RouterModule } from '@angular/router'; +import { StoreFirstGuard } from './storeFirst.guard'; @NgModule({ imports: [BrowserModule, StoreModule, RouterModule.forRoot([ - { path: "store", component: StoreComponent }, - { path: "cart", component: CartDetailComponent }, - { path: "checkout", component: CheckoutComponent }, + { + path: "store", component: StoreComponent, + canActivate: [StoreFirstGuard] + }, + { + path: "cart", component: CartDetailComponent, + canActivate: [StoreFirstGuard] + }, + { + path: "checkout", component: CheckoutComponent, + canActivate: [StoreFirstGuard] + }, { path: "**", redirectTo: "/store" } ])], + providers: [StoreFirstGuard], declarations: [ AppComponent ], - providers: [], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/src/app/storeFirst.guard.ts b/src/app/storeFirst.guard.ts new file mode 100644 index 0000000..9222065 --- /dev/null +++ b/src/app/storeFirst.guard.ts @@ -0,0 +1,22 @@ +import { Injectable } from "@angular/core"; +import { ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router"; +import { StoreComponent } from "./store/store.component"; + +@Injectable() +export class StoreFirstGuard { + private firstNavigation = true; + + constructor(private router: Router) {} + + canActivate(route: ActivatedRouteSnapshot, + state: RouterStateSnapshot): boolean { + if (this.firstNavigation) { + this.firstNavigation = false; + if (route.component != StoreComponent) { + this.router.navigateByUrl("/"); + return false; + } + } + return true; + } +} \ No newline at end of file From 5e7f758ac37b37679eaadd17c62c243041ae7b51 Mon Sep 17 00:00:00 2001 From: Popovkov57 Date: Wed, 28 Sep 2022 13:14:10 +0200 Subject: [PATCH 3/3] Update card detail feature --- src/app/app.module.ts | 2 +- src/app/model/cart.model.ts | 7 ++- src/app/store/cartDetail.component.html | 70 +++++++++++++++++++++++++ src/app/store/cartDetail.component.ts | 9 +++- src/app/store/store.module.ts | 2 +- 5 files changed, 85 insertions(+), 5 deletions(-) create mode 100644 src/app/store/cartDetail.component.html diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e76f56b..1c97179 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,7 +1,7 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; -import { StoreModule } from './store/store.module'; import { AppComponent } from './app.component'; +import { StoreModule } from './store/store.module'; import { StoreComponent } from './store/store.component'; import { CheckoutComponent } from './store/checkout.component'; import { CartDetailComponent } from './store/cartDetail.component'; diff --git a/src/app/model/cart.model.ts b/src/app/model/cart.model.ts index 868f303..020add4 100644 --- a/src/app/model/cart.model.ts +++ b/src/app/model/cart.model.ts @@ -27,8 +27,13 @@ export class Cart { } removeLine(id: number) { + console.log("removeLine"); + console.log("id: " + id); let index = this.lines.findIndex(line => line.product.id == id); - this.lines.slice(index, 1); + console.log("index: " + index) + console.log(this.lines); + this.lines.splice(index, 1); + console.log(this.lines); this.recalculate(); } diff --git a/src/app/store/cartDetail.component.html b/src/app/store/cartDetail.component.html new file mode 100644 index 0000000..9334a6a --- /dev/null +++ b/src/app/store/cartDetail.component.html @@ -0,0 +1,70 @@ +
+
+
+ SPORTS STORE +
+
+
+
+

Your Cart

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
QuantityProductPriceSubtotal
+ Your cart is empty +
+ + {{ line.product.name }} + {{ line.product.price | currency:"USD":true:"2.2-2" }} + + {{ line.lineTotal | currency:"USD":true:"2.2-2" }} + + +
Total: + {{ cart.cartPrice | currency:"USD":true:"2.2-2" }} +
+
+
+
+
+
+ + +
+
+
+
\ No newline at end of file diff --git a/src/app/store/cartDetail.component.ts b/src/app/store/cartDetail.component.ts index 83f7622..f9274bd 100644 --- a/src/app/store/cartDetail.component.ts +++ b/src/app/store/cartDetail.component.ts @@ -1,7 +1,12 @@ import { Component } from "@angular/core"; +import { Cart } from "../model/cart.model"; @Component({ - template:`

Cart Detail Component

` + templateUrl: "cartDetail.component.html" }) -export class CartDetailComponent {} \ No newline at end of file +export class CartDetailComponent { + + constructor(public cart: Cart) {} + +} \ No newline at end of file diff --git a/src/app/store/store.module.ts b/src/app/store/store.module.ts index 59f96e9..9f3dd0e 100644 --- a/src/app/store/store.module.ts +++ b/src/app/store/store.module.ts @@ -11,7 +11,7 @@ import { RouterModule } from "@angular/router"; @NgModule({ imports: [ModelModule, BrowserModule, FormsModule, RouterModule], declarations: [StoreComponent, CartSummaryComponent, CartDetailComponent, CheckoutComponent], - exports: [StoreComponent, CartSummaryComponent, CartDetailComponent, CheckoutComponent] + exports: [StoreComponent, CartDetailComponent, CheckoutComponent] }) export class StoreModule {} \ No newline at end of file