#115 order cart now working, now need a check out page

NerdCats · Aug 21, 2016 · a174c79 · a174c79
1 parent 14bd49b
commit a174c79
Show file tree

Hide file tree

Showing 10 changed files with 165 additions and 43 deletions.
diff --git a/app/cart/cart-icon/cart-icon.component.css b/app/cart/cart-icon/cart-icon.component.css
@@ -10,4 +10,15 @@ i {
     margin-left: 5px;
     width: 20px;
     text-align: center;
+}
+
+
+textarea {
+    width: 100%;
+    padding: 10px;
+}
+
+
+#item-quanity {
+    width: 15%;
 }
diff --git a/app/cart/cart-icon/cart-icon.component.html b/app/cart/cart-icon/cart-icon.component.html
@@ -1,6 +1,71 @@
-<div (click)="update()">
+<div (click)="openShoppingCartModal()">
     <i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>
     <div class="quantity-background">
         <strong>{{numberOfItems}}</strong>
     </div>
-</div>
+</div>
+
+
+<modal #shoppingCart class="modal_vcenter">
+    <modal-header [show-close]="true">
+        <h1>SHOPPING CART</h1>
+    </modal-header>
+    <modal-body>
+        <table class="table table-sm table-hover">
+            <thead>
+                <tr>
+                    <th>#</th>
+                    <th>Item</th>
+                    <th>Qty</th>
+                    <th>Unit Price</th>
+                    <th>Weight</th>
+                    <th>Total</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let item of orderCart.OrderCart.PackageList; let i = index">
+                    <th scope="row">{{i+1}}</th>
+                    <td>
+                        {{ item.Item }}
+                        <ul class="list-inline">
+                            <li><a class="pointer" (click)="removeItem(i)">Remove</a></li>
+                        </ul>
+                    </td>
+                    <td id="item-quanity">
+                        <input type="number" class="form-control" [(ngModel)]="item.Quantity" (ngModelChange)="itemChanged($event)">
+                    </td>
+                    <td>{{ item.Price }}</td>
+                    <td>{{ item.Weight }}</td>
+                    <td>{{ item.Total | number:'1.2-2' }}</td>
+                </tr>
+                <tr>
+                    <td colspan="2" class="text-right">Total Weight</td>
+                    <td>{{ orderCart.OrderCart.TotalWeight }}</td>
+                    <td colspan="2" class="text-right">Subtotal</td>
+                    <td>{{ orderCart.OrderCart.SubTotal | number:'1.2-2' }}</td>
+                </tr>
+                <tr>
+                    <td colspan="5" class="text-right">Delivery Charge</td>
+                    <td>{{ orderCart.OrderCart.ServiceCharge }}</td>
+                </tr>
+                <tr>
+                    <td colspan="5" class="text-right">Total</td>
+                    <td>{{ orderCart.OrderCart.TotalToPay | number:'1.2-2' }}</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <div *ngIf="orderCart.Description">
+            <h3>CUSTOM ORDER</h3>
+            <textarea [(ngModel)]="orderCart.Description"></textarea>
+        </div>
+
+    </modal-body>
+    <modal-footer>
+        <form>
+            <div class="form-group">
+                <button class="btn btn-primary pull-right" (click)="checkOut()">CHECKOUT</button>
+            </div>
+        </form>
+    </modal-footer>
+</modal>
diff --git a/app/cart/cart-icon/cart-icon.component.ts b/app/cart/cart-icon/cart-icon.component.ts
@@ -1,34 +1,55 @@
-import { Component, OnInit } from '@angular/core';
-import { OrderCart } from '../../shared/model/order-cart'
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MODAL_DIRECTIVES, ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
 
+import { OrderModel, PackageListModel } from '../../shared/model/order-model'
+import { OrderCart } from '../../shared/model/order-cart'
 import { Observable } from 'rxjs';
 
 
 @Component({
     selector: 'cart-icon',
     templateUrl: 'app/cart/cart-icon/cart-icon.component.html',
-    styleUrls: ['app/cart/cart-icon/cart-icon.component.css']
+    styleUrls: ['app/cart/cart-icon/cart-icon.component.css'],
+    directives: [MODAL_DIRECTIVES, ModalComponent]
 })
 
-
 export class CartIconComponent implements OnInit{
     numberOfItems: number = 0;
-
+    orderCart: OrderModel;
     ngOnInit(){
+        this.orderCart = OrderCart.getOrderCart();
         this.update();
     }
 
    public update(){
-        if(OrderCart.getOrderCart().OrderCart.PackageList){
-            this.numberOfItems = 0;
-            OrderCart.getOrderCart().OrderCart.PackageList.forEach(item => {
-                this.numberOfItems += item.Quantity;
-            });
-
-            if(OrderCart.getOrderCart().Description){
-                this.numberOfItems += 1;
-            }
-        }
+        OrderCart.update();
+        this.numberOfItems = OrderCart.totalQuantity();
+    }
+
+    itemChanged(value){
+        this.update();
+    }
+
+    removeItem(index: number) {
+        this.orderCart.OrderCart.PackageList.splice(index);
+        this.update();
+    }
+
+
+    checkOut(){
+        console.log(this.orderCart);
+
+    }
+
+    @ViewChild('shoppingCart')
+    shoppingCart: ModalComponent;
+    openShoppingCartModal(){
+        this.update();
+        this.shoppingCart.open();
+    }
+
+    closeShoppingCartModal(){
+        this.shoppingCart.close();
     }
 
 

diff --git a/app/dashboard/order/order.component.html b/app/dashboard/order/order.component.html
@@ -18,7 +18,6 @@ <h1 class="control-label">{{formTitle}}</h1>
             </div>
           </div>
         </div>
-
       </div>
 
       <div class="form-group">

diff --git a/app/navbar/navbar.component.html b/app/navbar/navbar.component.html
@@ -11,14 +11,14 @@
     </div>
     <div class="navbar-collapse collapse" [collapse]="isCollapsed">
       <ul class="nav navbar-nav navbar-right">
-        <li *ngFor="let elm of navBarElementDict[State]">
-          <a class="pointer" (click)="elm.Event()">{{elm.Title}}</a>
-        </li>
         <li>
           <a class="pointer">
             <cart-icon></cart-icon>
           </a>
         </li>
+        <li *ngFor="let elm of navBarElementDict[State]">
+          <a class="pointer" (click)="elm.Event()">{{elm.Title}}</a>
+        </li>
       </ul>
     </div>
     <!--/.nav-collapse -->

diff --git a/app/shared/model/order-cart.ts b/app/shared/model/order-cart.ts
@@ -3,12 +3,42 @@ import { OrderModel } from './order-model'
 
 export class OrderCart {
     private static orderCart : OrderModel = new OrderModel();
-
+    private static numberOfItems: number = 0;
     public static getOrderCart(){
         return OrderCart.orderCart;
     }
 
     public static resetOrderCart(){
         OrderCart.orderCart = new OrderModel();
     }
+
+    public static update(){
+        if(this.orderCart.OrderCart.PackageList){
+
+            this.orderCart.OrderCart.SubTotal = 0;
+            this.orderCart.OrderCart.TotalToPay = 0;
+            this.orderCart.OrderCart.ServiceCharge = 150;
+
+            this.orderCart.OrderCart.PackageList.forEach(item => {
+                this.orderCart.OrderCart.SubTotal += (item.Price * item.Quantity);
+                this.orderCart.OrderCart.TotalToPay += this.orderCart.OrderCart.SubTotal +
+                                                    this.orderCart.OrderCart.ServiceCharge;
+                item.Total = 0;
+                item.Total = (item.Price * item.Quantity);
+            })
+        }
+    }
+
+    public static totalQuantity(){
+        this.numberOfItems = 0;
+        if(this.orderCart.OrderCart.PackageList){
+            this.orderCart.OrderCart.PackageList.forEach(item => {
+                this.numberOfItems += item.Quantity;
+            });
+        }
+        if(this.orderCart.Description){
+            this.numberOfItems += 1;
+        }
+        return this.numberOfItems;
+    }
 }
diff --git a/app/shared/model/order-model.ts b/app/shared/model/order-model.ts
@@ -26,11 +26,11 @@ export class OrderModel {
 
 export class OrderCartModel {
     public PackageList: PackageListModel[];
-    public TotalVATAmount: number;
-    public SubTotal: number;
-    public ServiceCharge: number;
-    public TotalWeight: number;
-    public TotalToPay: number;
+    public TotalVATAmount: number = 0;
+    public SubTotal: number = 0;
+    public ServiceCharge: number = 0;
+    public TotalWeight: number = 0;
+    public TotalToPay: number = 0;
     constructor() {
 
     }
@@ -39,13 +39,13 @@ export class OrderCartModel {
 export class PackageListModel {
     public Item: string;
     public PicUrl: string;
-    public Quantity: number;
-    public Price: number;
-    public VAT: number;
-    public Total: number;
-    public VATAmount: number;
-    public TotalPlusVAT: number;
-    public Weight: number;
+    public Quantity: number = 0;
+    public Price: number = 0;
+    public VAT: number = 0;
+    public Total: number = 0;
+    public VATAmount: number = 0;
+    public TotalPlusVAT: number = 0;
+    public Weight: number = 0;
     constructor() {
 
     }

diff --git a/app/vendor-menu/vendor-menu.component.css b/app/vendor-menu/vendor-menu.component.css
@@ -104,4 +104,5 @@ li a {
 
 textarea {
     width: 100%;
+    padding: 10px;
 }
diff --git a/app/vendor-menu/vendor-menu.component.html b/app/vendor-menu/vendor-menu.component.html
@@ -45,7 +45,7 @@ <h3>ADD YOUR CUSTOM ORDER</h3>
 <modal #cartModal class="modal_vcenter">
     <modal-header [show-close]="true">
         <h1> {{selectedItem.Item}} </h1>
-        <h3> {{selectedItem.Price}} </h3>
+        <h3> {{selectedItem.Total}} </h3>
     </modal-header>
     <modal-body>
         <img class="selected-item-img" src="/assets/img/pop-up-pizza.jpg" alt="{{selectedItem.Item}}">

diff --git a/app/vendor-menu/vendor-menu.component.ts b/app/vendor-menu/vendor-menu.component.ts
@@ -61,27 +61,22 @@ export class VendorMenuComponent implements OnInit {
     addItem(item) {
         this.selectedItem.Item = item.item;
         this.selectedItem.Price = item.price;
+        this.selectedItem.Total = item.price;
         this.selectedItem.Quantity = 1;
 
         console.log(OrderCart.getOrderCart().OrderCart.PackageList);
 
     }
 
     addMore(){
-        if(this.selectedItem.Quantity === 1)
-        {
-            this.selectedItem.Price += this.selectedItem.Price;
-        }
-        else {
-            this.selectedItem.Price += (this.selectedItem.Price/this.selectedItem.Quantity);
-        }
+        this.selectedItem.Total += this.selectedItem.Price;
         this.selectedItem.Quantity += 1;
     }
 
     addLess(){
         if(this.selectedItem.Quantity != 1)
         {
-            this.selectedItem.Price -= (this.selectedItem.Price/this.selectedItem.Quantity);
+            this.selectedItem.Total -= this.selectedItem.Price;
             this.selectedItem.Quantity -= 1;
         }