Merge pull request #3 from Popovkov57/development

Development

src/app/app.component.ts

@@ -2,6 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app',
-  template: "<store></store>"
+  template: "<router-outlet></router-outlet>"
 })
 export class AppComponent {}

src/app/app.module.ts

@@ -1,17 +1,34 @@
 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';
+import { RouterModule } from '@angular/router';
+import { StoreFirstGuard } from './storeFirst.guard';
 
 @NgModule({
+  imports: [BrowserModule, StoreModule,
+    RouterModule.forRoot([
+      { 
+        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
   ],
-  imports: [
-    BrowserModule, StoreModule
-  ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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();
     }
 

src/app/store/cartDetail.component.html

@@ -0,0 +1,70 @@
+<div class="container-fluid">
+    <div class="row">
+        <div class="col bg-dark text-white">
+            <a class="navbar-brand">SPORTS STORE</a>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col mt-2">
+            <h2 class="text-center">Your Cart</h2>
+            <table class="table table-bordered table-striped p-2">
+                <thead>
+                    <tr>
+                        <th>Quantity</th>
+                        <th>Product</th>
+                        <th class="text-right">Price</th>
+                        <th class="text-right">Subtotal</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngIf="cart.lines.length == 0">
+                        <td colspan="4" class="text-center">
+                            Your cart is empty
+                        </td>
+                    </tr>
+                    <tr *ngFor="let line of cart.lines">
+                        <td>
+                            <input type="number" 
+                            class="form-control-sm" 
+                            style="width: 5em;" 
+                            [value]="line.quantity" 
+                            (change)="cart.updateQuantity(line.product, $event.target.value)"/>
+                        </td>
+                        <td>{{ line.product.name }}</td>
+                        <td class="text-right">
+                            {{ line.product.price | currency:"USD":true:"2.2-2" }}
+                        </td>
+                        <td class="text-right">
+                            {{ line.lineTotal | currency:"USD":true:"2.2-2" }}
+                        </td>
+                        <td class="text-center">
+                            <button class="btn btn-sm btn-danger" (click)="cart.removeLine(line.product.id)">
+                                Remove
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+                <tfoot>
+                    <tr>
+                        <td colspan="3" class="text-right">Total:</td>
+                        <td class="text-right">
+                            {{ cart.cartPrice | currency:"USD":true:"2.2-2" }}
+                        </td>
+                    </tr>
+                </tfoot>
+            </table>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col">
+            <div class="text-center">
+                <button class="btn btn-primary m-1" routerLink="/store">
+                    Continue Shopping
+                </button>
+                <button class="btn btn-secondary m-1" routerLink="/checkout" [disabled]="cart.lines.length == 0">
+                    Checkout
+                </button>
+            </div>
+        </div>
+    </div>
+</div>

src/app/store/cartDetail.component.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+import { Cart } from "../model/cart.model";
+
+@Component({
+    templateUrl: "cartDetail.component.html"
+})
+
+export class CartDetailComponent {
+
+    constructor(public cart: Cart) {}
+
+}

src/app/store/cartSummary.component.html

@@ -9,7 +9,7 @@
             (empty)
         </span>
     </small>
-    <button class="btn btn-sm bg-dark text-white" [disabled]="cart.itemCount == 0">
+    <button class="btn btn-sm bg-dark text-white" [disabled]="cart.itemCount == 0" routerLink="/cart">
         <i class="fa fa-shopping-cart"></i>
     </button>
 </div>

src/app/store/checkout.component.ts

@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+    template:`<div><h3 class="bg-info p-1 text-white">Checkout Component</h3></div>`
+})
+
+export class CheckoutComponent {}

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");
     }
 
 }

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, CartDetailComponent, CheckoutComponent]
 })
 
 export class StoreModule {}

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;
+    }
+}