diff --git a/client/src/app/basket/basket.component.html b/client/src/app/basket/basket.component.html index 8e96b69..ce3c1ae 100644 --- a/client/src/app/basket/basket.component.html +++ b/client/src/app/basket/basket.component.html @@ -11,12 +11,19 @@ (decrement)="decrementItemQuantity($event)" (increment)="incrementItemQuantity($event)" (remove)="removeBasketItem($event)" + [items]="(basket$ | async).items" >
- + + Checkout
@@ -24,4 +31,3 @@ - diff --git a/client/src/app/basket/basket.component.ts b/client/src/app/basket/basket.component.ts index b47ea86..40723cf 100644 --- a/client/src/app/basket/basket.component.ts +++ b/client/src/app/basket/basket.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { Observable } from 'rxjs'; -import { IBasket, IBasketItem } from '../shared/models/baskset'; +import { IBasket, IBasketItem, IBasketTotals } from '../shared/models/baskset'; import { BasketService } from './basket.service'; @Component({ @@ -10,11 +10,13 @@ import { BasketService } from './basket.service'; }) export class BasketComponent implements OnInit { basket$: Observable; + basketTotals$: Observable; constructor(private basketService: BasketService) { } ngOnInit(): void { this.basket$ = this.basketService.basket$; + this.basketTotals$ = this.basketService.basketTotal$; } removeBasketItem(item: IBasketItem){ diff --git a/client/src/app/checkout/checkout-review/checkout-review.component.html b/client/src/app/checkout/checkout-review/checkout-review.component.html index 5cf45f4..df17587 100644 --- a/client/src/app/checkout/checkout-review/checkout-review.component.html +++ b/client/src/app/checkout/checkout-review/checkout-review.component.html @@ -1,5 +1,8 @@
- +
- +
diff --git a/client/src/app/checkout/checkout.component.ts b/client/src/app/checkout/checkout.component.ts index 7caad51..4898fde 100644 --- a/client/src/app/checkout/checkout.component.ts +++ b/client/src/app/checkout/checkout.component.ts @@ -1,7 +1,10 @@ import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Observable } from 'rxjs'; import { AccountService } from '../account/account.service'; +import { BasketService } from '../basket/basket.service'; import { IAddress } from '../shared/models/address'; +import { IBasketTotals } from '../shared/models/baskset'; @Component({ selector: 'app-checkout', @@ -9,13 +12,15 @@ import { IAddress } from '../shared/models/address'; styleUrls: ['./checkout.component.scss'] }) export class CheckoutComponent implements OnInit { + basketTotals$: Observable; checkoutForm: FormGroup; - constructor(private fb: FormBuilder, private accountService: AccountService) { } + constructor(private fb: FormBuilder, private accountService: AccountService, private basketService: BasketService) { } ngOnInit(): void { this.createCheckoutForm(); this.getAddressFormValues(); + this.basketTotals$ = this.basketService.basketTotal$; } createCheckoutForm(){ diff --git a/client/src/app/orders/order-details/order-details.component.html b/client/src/app/orders/order-details/order-details.component.html index c797faa..99b770c 100644 --- a/client/src/app/orders/order-details/order-details.component.html +++ b/client/src/app/orders/order-details/order-details.component.html @@ -1,66 +1,18 @@
-
-
- - - - - - - - - - - - - - - - - -
-
Product
- 		-
Price
- 		-
quantity
- 		-
Total
-
-
- {{item.productName}} -
-
- {{item.productName}} -
-
-
- 		{{item.price | currency}}{{item.quantity}}{{item.price * item.quantity | currency}}
-
-
-
-
-
- Order Summary -
-
-
    -
  • - Subtotal - {{order.subtotal | currency}} -
    • -
  • - Shipping and Handling - {{order.shippingPrice | currency}} -
    • -
  • - Total - {{order.total | currency}} -
    • -
-
-
+
+
+ +
+
diff --git a/client/src/app/orders/orders.module.ts b/client/src/app/orders/orders.module.ts index 5b4927a..f0544bd 100644 --- a/client/src/app/orders/orders.module.ts +++ b/client/src/app/orders/orders.module.ts @@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common'; import { OrderDetailsComponent } from './order-details/order-details.component'; import { OrdersComponent } from './orders.component'; import { OrdersRoutingModule } from './orders-routing.module'; +import { SharedModule } from '../shared/shared.module'; @@ -13,7 +14,8 @@ import { OrdersRoutingModule } from './orders-routing.module'; ], imports: [ CommonModule, - OrdersRoutingModule + OrdersRoutingModule, + SharedModule ] }) export class OrdersModule { } diff --git a/client/src/app/shared/basket-summary/basket-summary.component.html b/client/src/app/shared/basket-summary/basket-summary.component.html deleted file mode 100644 index f6ec044..0000000 --- a/client/src/app/shared/basket-summary/basket-summary.component.html +++ /dev/null @@ -1,55 +0,0 @@ - -
- - - - - - - - - - - - - - - - - - - -
-
Product
- 		-
Price
- 		-
quantity
- 		-
Total
- 		-
Remove
-
-
- {{item.productName}} -
-
- {{item.productName}} -
- Type: {{item.type}} -
-
- 		{{item.price | currency}} -
- - {{item.quantity}} - -
- 		{{item.price * item.quantity | currency}} - - - -
-
- - diff --git a/client/src/app/shared/basket-summary/basket-summary.component.scss b/client/src/app/shared/components/basket-summary/basket-summary.component.scss similarity index 100% rename from client/src/app/shared/basket-summary/basket-summary.component.scss rename to client/src/app/shared/components/basket-summary/basket-summary.component.scss diff --git a/client/src/app/shared/basket-summary/basket-summary.component.ts b/client/src/app/shared/components/basket-summary/basket-summary.component.ts similarity index 82% rename from client/src/app/shared/basket-summary/basket-summary.component.ts rename to client/src/app/shared/components/basket-summary/basket-summary.component.ts index 2cc9f6e..a90d25c 100644 --- a/client/src/app/shared/basket-summary/basket-summary.component.ts +++ b/client/src/app/shared/components/basket-summary/basket-summary.component.ts @@ -1,7 +1,8 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { Observable } from 'rxjs'; import { BasketService } from 'src/app/basket/basket.service'; -import { IBasket, IBasketItem } from '../models/baskset'; +import { IBasket, IBasketItem } from '../../models/baskset'; +import { IOrderItem } from '../../models/order'; @Component({ selector: 'app-basket-summary', @@ -9,16 +10,16 @@ import { IBasket, IBasketItem } from '../models/baskset'; styleUrls: ['./basket-summary.component.scss'] }) export class BasketSummaryComponent implements OnInit { - basket$: Observable; @Output() decrement: EventEmitter = new EventEmitter(); @Output() increment: EventEmitter = new EventEmitter(); @Output() remove: EventEmitter = new EventEmitter(); @Input() isBasket = true; + @Input() items: any = []; + @Input() isOrder = false; - constructor(private basketService: BasketService) { } + constructor() { } ngOnInit(): void { - this.basket$ = this.basketService.basket$; } decrementItemQuantity(item: IBasketItem){ diff --git a/client/src/app/shared/components/order-totals/order-totals.component.html b/client/src/app/shared/components/order-totals/order-totals.component.html index 27fcf53..88ce79b 100644 --- a/client/src/app/shared/components/order-totals/order-totals.component.html +++ b/client/src/app/shared/components/order-totals/order-totals.component.html @@ -3,18 +3,18 @@

Shipping costs will be added during checkout

-
    +
    • Subtotal - {{totals.subtotal | currency}} + {{subtotal | currency}}
    • Shipping and Handling - {{totals.shipping | currency}} + {{shippingPrice | currency}}
    • Total - {{totals.total | currency}} + {{total | currency}}
diff --git a/client/src/app/shared/components/order-totals/order-totals.component.ts b/client/src/app/shared/components/order-totals/order-totals.component.ts index 4f75c7c..cc761a5 100644 --- a/client/src/app/shared/components/order-totals/order-totals.component.ts +++ b/client/src/app/shared/components/order-totals/order-totals.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { Observable } from 'rxjs'; import { BasketService } from 'src/app/basket/basket.service'; import { IBasketTotals } from '../../models/baskset'; @@ -9,12 +9,13 @@ import { IBasketTotals } from '../../models/baskset'; styleUrls: ['./order-totals.component.scss'] }) export class OrderTotalsComponent implements OnInit { - basketTotal$: Observable; + @Input() shippingPrice: number; + @Input() subtotal: number; + @Input() total: number; - constructor(private basketService: BasketService) { } + constructor() { } ngOnInit(): void { - this.basketTotal$ = this.basketService.basketTotal$; } } diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index be9fda1..9114b4d 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { ReactiveFormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { PaginationModule } from 'ngx-bootstrap/pagination'; import { CarouselModule } from 'ngx-bootstrap/carousel'; import { PagingHeaderComponent } from './components/paging-header/paging-header.component'; @@ -10,7 +10,7 @@ import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; import { TextInputsComponent } from './components/text-inputs/text-inputs.component'; import { CdkStepperModule } from '@angular/cdk/stepper'; import { StepperComponent } from './components/stepper/stepper.component'; -import { BasketSummaryComponent } from './basket-summary/basket-summary.component' +import { BasketSummaryComponent } from './components/basket-summary/basket-summary.component' import { RouterModule } from '@angular/router'; @@ -38,6 +38,7 @@ import { RouterModule } from '@angular/router'; PagerComponent, CarouselModule, OrderTotalsComponent, + FormsModule, ReactiveFormsModule, BsDropdownModule, TextInputsComponent,