From c31310e3cc144477582df9e1edaeb97ef35ffda1 Mon Sep 17 00:00:00 2001
From: Popovkov57 <kevin.patrzek@live.fr>
Date: Wed, 28 Sep 2022 18:16:33 +0200
Subject: [PATCH] Add order process

---
 src/app/model/model.module.ts         |  4 +-
 src/app/model/order.model.ts          | 26 +++++++++++
 src/app/model/order.repository.ts     | 20 +++++++++
 src/app/model/static.datasource.ts    |  6 +++
 src/app/store/checkout.component.css  |  2 +
 src/app/store/checkout.component.html | 63 +++++++++++++++++++++++++++
 src/app/store/checkout.component.ts   | 26 ++++++++++-
 7 files changed, 144 insertions(+), 3 deletions(-)
 create mode 100644 src/app/model/order.model.ts
 create mode 100644 src/app/model/order.repository.ts
 create mode 100644 src/app/store/checkout.component.css
 create mode 100644 src/app/store/checkout.component.html

diff --git a/src/app/model/model.module.ts b/src/app/model/model.module.ts
index f4e8690..bcb2d8c 100644
--- a/src/app/model/model.module.ts
+++ b/src/app/model/model.module.ts
@@ -2,9 +2,11 @@ import { NgModule } from "@angular/core";
 import { ProductRepository } from "./product.repository";
 import { StaticDataSource } from "./static.datasource";
 import { Cart } from "./cart.model";
+import { Order } from "./order.model";
+import { OrderRepository } from "./order.repository";
 
 @NgModule({
-    providers: [ProductRepository, StaticDataSource, Cart]
+    providers: [ProductRepository, StaticDataSource, Cart, Order, OrderRepository]
 })
 
 export class ModelModule {}
\ No newline at end of file
diff --git a/src/app/model/order.model.ts b/src/app/model/order.model.ts
new file mode 100644
index 0000000..9815139
--- /dev/null
+++ b/src/app/model/order.model.ts
@@ -0,0 +1,26 @@
+import { Injectable } from "@angular/core";
+import { Cart } from "./cart.model";
+
+@Injectable()
+export class Order {
+
+    public id: number;
+    public name: string;
+    public address: string;
+    public city: string;
+    public state: string;
+    public zip: string;
+    public country: string;
+    public shipped: boolean = false;
+
+    constructor(public cart: Cart) {}
+
+    clear() {
+        this.id = null;
+        this.name = this.address = this.city = null;
+        this.state = this.zip = this.country = null;
+        this.shipped = false;
+        this.cart.clear();
+    }
+
+}
\ No newline at end of file
diff --git a/src/app/model/order.repository.ts b/src/app/model/order.repository.ts
new file mode 100644
index 0000000..aebcab4
--- /dev/null
+++ b/src/app/model/order.repository.ts
@@ -0,0 +1,20 @@
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { Order } from "./order.model";
+import { StaticDataSource } from "./static.datasource";
+
+@Injectable()
+export class OrderRepository {
+    
+    private orders: Order[] = [];
+
+    constructor(private dataSource: StaticDataSource) {}
+
+    getOrders(): Order[] {
+        return this.orders;
+    }
+
+    saveOrder(order: Order): Observable<Order> {
+        return this.dataSource.saveOrder(order);
+    }
+}
\ No newline at end of file
diff --git a/src/app/model/static.datasource.ts b/src/app/model/static.datasource.ts
index 58f11d8..f73b9e4 100644
--- a/src/app/model/static.datasource.ts
+++ b/src/app/model/static.datasource.ts
@@ -1,6 +1,7 @@
 import { Injectable } from "@angular/core";
 import { Product } from "./product.model";
 import { Observable, from } from "rxjs";
+import { Order } from "./order.model";
 
 @Injectable()
 export class StaticDataSource {
@@ -25,4 +26,9 @@ export class StaticDataSource {
     getProducts(): Observable<Product[]> {
         return from([this.products]);
     }
+
+    saveOrder(order: Order): Observable<Order> {
+        console.log(JSON.stringify(order));
+        return from([order]);
+    }
 }
\ No newline at end of file
diff --git a/src/app/store/checkout.component.css b/src/app/store/checkout.component.css
new file mode 100644
index 0000000..d750abd
--- /dev/null
+++ b/src/app/store/checkout.component.css
@@ -0,0 +1,2 @@
+input.ng-dirty.ng-invalid { border: 2px solid #ff0000 }
+input.ng-dirty.ng-valid { border:2px solid #6bc502 }
\ No newline at end of file
diff --git a/src/app/store/checkout.component.html b/src/app/store/checkout.component.html
new file mode 100644
index 0000000..ea6038f
--- /dev/null
+++ b/src/app/store/checkout.component.html
@@ -0,0 +1,63 @@
+<div class="container-fluid">
+    <div class="row">
+        <div class="col bg-dark text-white">
+            <a class="navbar-brand">SPORTS STORE</a>
+        </div>
+    </div>
+</div>
+
+<div *ngIf="orderSent" class="m-2 text-center">
+    <h2>Thanks!</h2>
+    <p>Thanks for placing your order.</p>
+    <p>We'll ship your goods as soon as possible.</p>
+    <button class="btn btn-primary" routerLink="/store">Return to Store</button>
+</div>
+
+<form *ngIf="!orderSent" #form="ngForm" novalidate (ngSubmit)="submitOrder(form)" class="m-2">
+    <div class="form-group">
+        <label>Name</label>
+        <input class="form-control" #name="ngModel" name="name" [(ngModel)]="order.name" required/>
+        <span *ngIf="submitted && name.invalid" class="text-danger">
+            Please enter your name
+        </span>
+    </div>
+    <div class="form-group">
+        <label>Address</label>
+        <input class="form-control" #address="ngModel" name="address" [(ngModel)]="order.address" required/>
+        <span *ngIf="submitted && address.invalid" class="text-danger">
+            Please enter your address
+        </span>
+    </div>
+    <div class="form-group">
+        <label>City</label>
+        <input class="form-control" #city="ngModel" name="city" [(ngModel)]="order.city" required/>
+        <span *ngIf="submitted && city.invalid" class="text-danger">
+            Please enter your city
+        </span>
+    </div>
+    <div class="form-group">
+        <label>State</label>
+        <input class="form-control" #state="ngModel" name="state" [(ngModel)]="order.state" required/>
+        <span *ngIf="submitted && state.invalid" class="text-danger">
+            Please enter your state
+        </span>
+    </div>
+    <div class="form-group">
+        <label>Zip/Postal</label>
+        <input class="form-control" #zip="ngModel" name="zip" [(ngModel)]="order.zip" required/>
+        <span *ngIf="submitted && zip.invalid" class="text-danger">
+            Please enter your zip/postal code
+        </span>
+    </div>
+    <div class="form-group">
+        <label>Country</label>
+        <input class="form-control" #country="ngModel" name="country" [(ngModel)]="order.country" required/>
+        <span *ngIf="submitted && country.invalid" class="text-danger">
+            Please enter your country
+        </span>
+    </div>
+    <div class="text-center">
+        <button class="btn btn-secondary m-1" routerLink="/cart">Back</button>
+        <button class="btn btn-primary m-1" type="submit">Complete Order</button>
+    </div>
+</form>
\ No newline at end of file
diff --git a/src/app/store/checkout.component.ts b/src/app/store/checkout.component.ts
index 89fc555..d915351 100644
--- a/src/app/store/checkout.component.ts
+++ b/src/app/store/checkout.component.ts
@@ -1,7 +1,29 @@
 import { Component } from "@angular/core";
+import { NgForm } from "@angular/forms";
+import { OrderRepository } from "../model/order.repository";
+import { Order } from "../model/order.model";
 
 @Component({
-    template:`<div><h3 class="bg-info p-1 text-white">Checkout Component</h3></div>`
+    templateUrl:"checkout.component.html",
+    styleUrls: ["checkout.component.css"]
 })
 
-export class CheckoutComponent {}
\ No newline at end of file
+export class CheckoutComponent {
+
+    orderSent: boolean = false;
+    submitted: boolean = false;
+
+    constructor(public repository: OrderRepository, public order: Order) {}
+
+    submitOrder(form: NgForm) {
+        this.submitted = true;
+        if (form.valid) {
+            this.repository.saveOrder(this.order).subscribe(order => {
+                this.order.clear();
+                this.orderSent = true;
+                this.submitted = false;
+            });
+        }
+    }
+
+}
\ No newline at end of file