Cart page calculation complete

src/app/cart/cart.page.html

@@ -41,9 +41,9 @@
                 <li>
                     <label> Quantity </label>
                     <div class="quantity-scale-holder">
-                        <button (click)="decreaseCartItemCount(item)"> <ion-icon name="remove"></ion-icon> </button>
+                        <button (click)="decrementCartCount(item.outlet_id, item.item_id, item.mall_id)"> <ion-icon name="remove"></ion-icon> </button>
                         <div class="quantity"> {{ item.quantity }} </div>
-                        <button (click)="increaseCartItemCount(item)"> <ion-icon name="add"></ion-icon> </button>
+                        <button (click)="incrementCartCount(item.outlet_id, item.item_id, item.mall_id)"> <ion-icon name="add"></ion-icon> </button>
                     </div>
                 </li>
                 <li>
@@ -58,12 +58,12 @@
         </li>
     </ul>
 
-    <!-- <div class="total-price-breakup">
+    <div class="total-price-breakup">
         <ul class="breakups">
-            <li> <label> Total after discounts </label> <span> &#8377;  {{ total_cart_amount }} </span> </li>
+            <li> <label> Total after discounts </label> <span> &#8377;  {{ getTotalCartAmount() }} </span> </li>
 			<li> <label> Promocode </label> <span>
 				<ion-button fill="clear" *ngIf="!selected_promocode" (click)="show_promocodes = true"> Apply </ion-button>
-				<ion-button fill="clear" *ngIf="selected_promocode" (click)="removePromocode()">
+				<ion-button fill="clear" *ngIf="selected_promocode" (click)="selected_promocode = ''">
 					 Remove {{ selected_promocode }}
 					 <ion-icon name="close-circle"></ion-icon>
 				</ion-button>
@@ -73,21 +73,16 @@
         </ul>
 
         <div class="total-price">
-            <span> Total </span> <span> &#8377;  {{ (total_cart_amount + 20) + (total_cart_amount + 20) * (18 / 100) }} </span>
+            <span> Total </span> <span> &#8377;  {{ (getTotalCartAmount() + 20) + (getTotalCartAmount() + 20) * (18 / 100) }} </span>
         </div>
-    </div> -->
-
-    <!-- <div class="cart-utilities-holder total-savings">
-        <h5> Your Total Savings </h5>
-        <ion-button fill="clear"> &#8377;  {{ total_savings }} </ion-button>
-    </div> -->
+    </div>
 
-    <!-- <ion-button shape="round" expand="block" class="pay-button" (click)="placeOrder()"
-	[disabled]="cart_items.length === 0"> Pay Now </ion-button> -->
+    <ion-button shape="round" expand="block" class="pay-button" (click)="placeOrder()"
+	[disabled]="userCart.orderedlist.length === 0"> Pay Now </ion-button>
 
-	<!-- <div class="common-semi-modal filter-holder with-border" [ngClass]="{'active' : show_promocodes }">
+	<div class="common-semi-modal filter-holder with-border" [ngClass]="{'active' : show_promocodes }">
 		<header>
-            APPLY PROMOCODE <button (click)="show_promocodes = false; calculateTotalAfterPromo()"> Done </button>
+            APPLY PROMOCODE <button (click)="show_promocodes = false"> Done </button>
         </header>
 		<ion-list>
 			<ion-item (click)="selected_promocode = 'SAVE100'">
@@ -109,7 +104,7 @@
 				</ion-label>
 			</ion-item>
 		</ion-list>
-	</div> -->
+	</div>
 
 	<div class="common-semi-modal instant-menu" [ngClass]="{'active' : showInstantMenu }" *ngIf="temp_outlet_details">
 		<header>
@@ -139,9 +134,16 @@
 
 	                <div class="price">
 	                    <span> ₹ {{ item.item_price - item.item_discount }} </span>
-						<button class="cart-button">
+						<button class="cart-button" *ngIf="isPresentInCart(temp_outlet_details.outlet_id, item.menuitem_id, selectedTempMallId) === 0" (click)="addToCart(temp_outlet_details.outlet_id, item.menuitem_id, selectedTempMallId)">
 							<ion-icon name="cart"></ion-icon>
 						</button>
+						<div class="count-buttons-holder" *ngIf="isPresentInCart(temp_outlet_details.outlet_id, item.menuitem_id, selectedTempMallId) > 0">
+							<ion-button (click)="decrementCartCount(temp_outlet_details.outlet_id, item.menuitem_id, selectedTempMallId)"> <ion-icon name="remove"></ion-icon> </ion-button>
+							<span class="count">
+								{{ isPresentInCart(temp_outlet_details.outlet_id, item.menuitem_id, selectedTempMallId) }}
+							</span>
+							<ion-button (click)="incrementCartCount(temp_outlet_details.outlet_id, item.menuitem_id, selectedTempMallId)"> <ion-icon name="add"></ion-icon> </ion-button>
+						</div>
 	                </div>
                 </div>
             </div>

src/app/cart/cart.page.scss

@@ -108,13 +108,14 @@ ul {
         font-weight: bold;
         color: dimgrey;
 		width: 95%;
-		margin: 0 auto;
+		margin: 10px auto 0;
 
 		&.outlet {
 			background-color: #efefef;
 			color: var(--brand-grey);
 			padding: 5px 10px;
 			width: 100%;
+			margin: 0 auto;
 		}
 
         ion-button {
@@ -362,6 +363,8 @@ ul {
 	            margin: 10px 0;
 	            white-space: nowrap;
 	            text-overflow: ellipsis;
+				width: 90%;
+				overflow: hidden;
 	        }
 	    }
 
@@ -409,6 +412,7 @@ ul {
 			    .count {
 			        color: var(--brand-dark-grey);
 			        font-size: 12px;
+					text-align: center;
 			    }
 			}
 	    }

src/app/cart/cart.page.ts

@@ -35,6 +35,7 @@ export class CartPage implements OnInit {
     tempPickupTime: any;
     showInstantMenu: boolean = false;
     temp_outlet_details: any;
+	selectedTempMallId: string;
 
     constructor(
         private location: Location,
@@ -128,7 +129,7 @@ export class CartPage implements OnInit {
         }
     }
 
-    ionViewDidLeave() {
+    storeData() {
         localStorage.userCart = JSON.stringify(this.userCart);
     }
 
@@ -137,13 +138,102 @@ export class CartPage implements OnInit {
     }
 
     back() {
+		this.storeData();
         this.location.back();
     }
 
     openInstantMenu(outlet) {
+		this.selectedTempMallId = outlet.mall_id;
         this.showInstantMenu = true;
         this.temp_outlet_details = this.getOutletDetails(outlet);
-        console.log(this.temp_outlet_details);
     }
 
+	isPresentInCart(outletId: number, itemId: number, tempMallId: number) {
+		let item: any;
+
+		item = this.userCart.orderedlist.find((order) => {
+			return order.item_id === itemId && order.outlet_id === outletId && order.mall_id === tempMallId;
+		});
+
+		return item? item.quantity: 0;
+	}
+
+	incrementCartCount(outletId: number, itemId: number, tempMallId: number) {
+		let outletitem = this.getItemDetailsByIds(outletId, itemId, tempMallId);
+
+		if (outletitem) {
+			let i = this.userCart.orderedlist.findIndex((order) => {
+				return order.item_id === itemId && order.outlet_id === outletId && order.mall_id === tempMallId;
+			});
+
+			this.userCart.orderedlist[i].quantity += 1;
+			this.userCart.orderedlist[i].total_price = (outletitem.item_price - outletitem.item_discount) * this.userCart.orderedlist[i].quantity;
+		}
+	}
+
+	decrementCartCount(outletId: number, itemId: number, tempMallId: number) {
+		let outletitem = this.getItemDetailsByIds(outletId, itemId, tempMallId);
+
+		if (outletitem) {
+			let i = this.userCart.orderedlist.findIndex((order) => {
+				return order.item_id === itemId && order.outlet_id === outletId && order.mall_id === tempMallId;
+			});
+
+			if (this.userCart.orderedlist[i].quantity > 1) {
+				this.userCart.orderedlist[i].quantity -= 1;
+				this.userCart.orderedlist[i].total_price = (outletitem.item_price - outletitem.item_discount) * this.userCart.orderedlist[i].quantity;
+			} else if (this.userCart.orderedlist[i].quantity === 1) {
+				this.userCart.orderedlist.splice(i, 1);
+				this.storeData();
+				this.fetchCartItems();
+			}
+		}
+	}
+
+	getItemDetailsByIds(outletId: number, itemId: number, tempMallId: number) {
+		let mall, outlet, outletitem;
+        mall = this.allMalls.find((mall) => {
+            return mall.mall.mall_id === tempMallId;
+        });
+
+        if (mall) {
+            outlet = mall.mall.outlet.find((outlet) => {
+                return outlet.outlet_id === outletId;
+            });
+        }
+
+        if (outlet) {
+            return outletitem = outlet.menuitems.find((menu) => {
+                return menu.menuitem_id === itemId;
+            });
+        }
+	}
+
+	addToCart(outletId: number, itemId: number, tempMallId: number) {
+		let outletitem = this.getItemDetailsByIds(outletId, itemId, tempMallId);
+		if (outletitem) {
+			this.userCart.orderedlist.push({
+	            mall_id: tempMallId,
+	            outlet_id: outletId,
+	            item_id: itemId,
+	            quantity: 1,
+	            pickup_time: moment().add(moment.duration(outletitem.wait_duration).asMinutes(), 'minutes').format(),
+	            take_away: true,
+	            order_status: false,
+	            total_price: outletitem.item_price - outletitem.item_discount,
+	            soft_delete: false
+	        });
+		}
+	}
+
+	getTotalCartAmount() {
+		let total: number = 0;
+
+		this.userCart.orderedlist.forEach((order) => {
+			total = order.total_price + total;
+		});
+
+		return total;
+	}
+
 }

src/app/mocks/url.ts

@@ -1,3 +1,3 @@
-export const URL: string = 'http://13.126.110.70:8080/mall-aggregator';
+export const URL: string = 'http://13.235.48.49:8989/mall-aggregator';
 
 export const TOKEN: string = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';