Orders list get API connection completed

src/app/cart/cart.page.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
-import { MallService } from '../services/mall.service';
 import { Router } from '@angular/router';
 import { OrderService } from '../services/order.service';
+import { ToastService } from '../services/toast.service';
 import * as moment from 'moment';
 
 export type ICart = {
@@ -39,9 +39,9 @@ export class CartPage implements OnInit {
 
     constructor(
         private location: Location,
-        private router: Router,
 		private orderService: OrderService,
-        private mallService: MallService
+		private toastService: ToastService,
+		private router: Router
     ) { }
 
     ngOnInit() {}
@@ -240,11 +240,13 @@ export class CartPage implements OnInit {
 		this.orderService.createOrder({
 			soft_delete: false,
 			orderedlist: this.userCart.orderedlist
-		}).then((resp) => {
-			console.log(resp);
-		}, (err) => {
-			console.log(err);
-		})
+		}).then(() => {
+			localStorage.removeItem('userCart');
+			this.toastService.presentToast("Order has been created", "success");
+			this.router.navigate(['/profile']);
+		}, () => {
+			this.toastService.presentToast("Failed to create order!", "danger");
+		});
 	}
 
 }

src/app/orders/orders.component.html

@@ -1,45 +1,40 @@
-<!-- <div class="heading-holder">
+<div class="heading-holder">
 	<div class="name"> MY ORDERS </div>
 	<ion-button fill="clear"> SORT / FILTER </ion-button>
 </div>
 
 <ul class="orders">
-	<li *ngFor="let order of orders" class="order" (click)="selected_order = order">
-		<div class="heading"> Order ID: {{ order.id }} </div>
-		<div class="time-details"> Ordered on {{ getFormattedDate(order.creation_time, 'DD MMMM YYYY @ hh:mm A') }} </div>
+	<li *ngFor="let userOrder of userOrders" class="order" (click)="selected_order = order">
+		<div *ngFor="let order of userOrder.orderedlist">
+			<div class="heading"> Order ID: {{ order.orderedlist_id }} </div>
+			<div class="time-details">
+				Pickup on {{ getFormattedDate(order.pickup_time, 'DD MMMM YYYY @ hh:mm A') }}
+			</div>
 
-		<ul class="ordered-items">
-			<li *ngFor="let item of order.order_items">
-				<div class="order-item-details">
-					<label class="name"> {{ item.menu_details.name }} x {{ item.quantity }} </label>
-					<label class="time">
-						Pickup on {{ getFormattedDate(item.pickup_time, 'hh:mm A') }}
-					</label>
-				</div>
-			</li>
-		</ul>
-		<ul class="ordered-items">
-			<li *ngIf="order.promocode">
-				<div class="order-item-details">
-					<label class="name"> <strong> PROMOCODE </strong> </label>
-					<label class="time"> <strong> {{ order.promocode }} </strong> </label>
-				</div>
-			</li>
-			<li>
-				<div class="order-item-details">
-					<label class="name"> <strong> TOTAL </strong> </label>
-					<label class="time"> <strong> &#8377; {{ order.calculated_total }} </strong> </label>
-				</div>
-			</li>
-		</ul>
+			<ul class="ordered-items">
+				<li *ngFor="let item of order.menuitems">
+					<div class="order-item-details">
+						<label class="name"> {{ item.menu_item_name }} </label>
+					</div>
+				</li>
+			</ul>
+			<ul class="ordered-items">
+				<li>
+					<div class="order-item-details">
+						<label class="name"> <strong> TOTAL </strong> </label>
+						<label class="time"> <strong> &#8377;  </strong> </label>
+					</div>
+				</li>
+			</ul>
 
-		<p class="note">
-			We will notify you each time a order is ready for pickup
-		</p>
+			<p class="note">
+				We will notify you each time a order is ready for pickup
+			</p>
 
-		<div class="action-buttons-holder">
-			<ion-button shape="round"> Reorder </ion-button>
-			<ion-button shape="round" fill="outline" (click)="show_rate_modal = true"> Rate &amp; Review </ion-button>
+			<div class="action-buttons-holder">
+				<ion-button shape="round"> Reorder </ion-button>
+				<ion-button shape="round" fill="outline" (click)="show_rate_modal = true"> Rate &amp; Review </ion-button>
+			</div>
 		</div>
 	</li>
 </ul>
@@ -49,7 +44,7 @@
 	<div class="rating">
 		<div class="semi-heading"> Rating </div>
 		<p> Rating the food will help us give you personalised recommendation </p>
-		<div class="star-holder" (click)="setRating()">
+		<div class="star-holder">
 			<ion-icon name="star" (click)="selected_rating = 1"></ion-icon>
 			<ion-icon name="star" (click)="selected_rating = 2"></ion-icon>
 			<ion-icon name="star" (click)="selected_rating = 3"></ion-icon>
@@ -62,4 +57,4 @@
 		<textarea placeholder="Please tell something about the food..."></textarea>
 	</div>
 	<ion-button size="block" shape="round"> Submit Feedback </ion-button>
-</section> -->
+</section>

src/app/orders/orders.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { MallService } from '../services/mall.service';
+import { OrderService } from '../services/order.service';
+import * as moment from 'moment';
 
 @Component({
     selector: 'app-orders',
@@ -7,14 +8,25 @@ import { MallService } from '../services/mall.service';
     styleUrls: ['./orders.component.scss'],
 })
 export class OrdersComponent implements OnInit {
-	orders: any = [];
+	userOrders: any = [];
+	selected_order: any;
+	selected_rating: number = 0;
 
     constructor(
-		private mallService: MallService,
+		private orderService: OrderService,
     ) { }
 
     ngOnInit() {
+		this.orderService.getOrders().then((resp)=> {
+			this.userOrders = resp;
+			console.log(this.userOrders)
+		}, (err) => {
+			console.log(err);
+		});
+	}
 
+	getFormattedDate(date, format) {
+		return moment(date).format(format);
 	}
 
 }

src/app/services/order.service.ts

@@ -12,7 +12,6 @@ export class OrderService {
 	) { }
 
 	async createOrder(userCart) {
-		console.log(userCart);
 		const httpOptions = {
 			headers: new HttpHeaders({
 				'Access-Control-Allow-Origin': '*',
@@ -23,4 +22,16 @@ export class OrderService {
 
 		return await this.http.post(URL + '/api/maioraservice/orders/v1/create/', userCart, httpOptions).toPromise();
 	}
+
+	async getOrders() {
+		const httpOptions = {
+			headers: new HttpHeaders({
+				'Access-Control-Allow-Origin': '*',
+				'Content-Type': 'application/json',
+				'Authorization': 'Token ' + TOKEN
+			})
+		};
+
+		return await this.http.get(URL + '/api/maioraservice/mall/getallOrders', httpOptions).toPromise();
+	}
 }