Order list and order status API integrated

src/app/app.component.ts

@@ -10,8 +10,6 @@ export class AppComponent {
 	constructor(
 		public router: Router
 	) {
-		if (localStorage.vendor_token) {
-			this.router.navigate(['shop-details']);
-		}
+		
 	}
 }

src/app/dashboard/dashboard.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { IFilterOption } from '../models/filter-option';
-import { OrderService } from '../services/order.service';
 
 @Component({
 	selector: 'app-dashboard',
@@ -10,9 +9,7 @@ import { OrderService } from '../services/order.service';
 export class DashboardComponent implements OnInit {
 	filterOptions: Array<IFilterOption>;
 
-	constructor(
-        private orderService: OrderService
-    ) { }
+	constructor() { }
 
 	ngOnInit() {
 		this.filterOptions = [{
@@ -22,8 +19,6 @@ export class DashboardComponent implements OnInit {
 			name: 'Today',
 			id: 'today'
 		}];
-
-        this.orderService.getOrders();
 	}
 
 }

src/app/data/url.ts

@@ -1 +1 @@
-export const URL = 'http://159.65.153.233:8989/mall-aggregator';
+export const URL = 'https://mallapi.maiora.co/mall-aggregator';

src/app/login/login.component.ts

@@ -9,8 +9,9 @@ import { AuthService } from '../services/auth.service';
 })
 export class LoginComponent implements OnInit {
     credentials = {
-        username: '',
-        password: ''
+        username: 'ramsesrh',
+        password: '123456789',
+        login_type: "vendor"
     };
 
     errorMessage: string = '';
@@ -24,16 +25,16 @@ export class LoginComponent implements OnInit {
 	}
 
 	requestAuthentication() {
-        // this.authService.authenticateUser(this.credentials).then((data: any) => {
-        //     localStorage.vendor_token = data.accessToken;
-        //     this.router.navigate(['shop-details']);
-        // }, (err: any) => {
-        //     this.errorMessage = err.error.message;
-        //     setTimeout(() => {
-        //         this.errorMessage = '';
-        //     }, 3000);
-        // });
-        this.router.navigate(['shop-details']);
+        this.authService.authenticateUser(this.credentials).then((data: any) => {
+            localStorage.vendor_token = data.access_Token;
+            localStorage.vendor_info = JSON.stringify(data);
+            this.router.navigate(['shop-details']);
+        }, (err: any) => {
+            this.errorMessage = 'Please check your credentials';
+            setTimeout(() => {
+                this.errorMessage = '';
+            }, 3000);
+        });
 	}
 
 }

src/app/orders/orders.component.html

@@ -15,95 +15,53 @@
 </div>
 
 <table class="order-table">
-	<tr class="heading-row">
-		<th> Order ID </th>
-		<th> Order Time </th>
-		<th> Items </th>
-		<th> Quantity </th>
-		<th> Amount </th>
-		<th> Payment Status </th>
-	</tr>
+	<tbody>
+        <tr class="heading-row">
+    		<th> Order ID </th>
+    		<th> Items </th>
+            <th> Pickup Time </th>
+    		<th> Quantity </th>
+    		<th> Amount </th>
+            <th> Action </th>
+    	</tr>
 
-	<tr>
-		<td> 545455 </td>
-		<td> 2 Min Ago </td>
-		<td>
-			<div> 8PC Hot &amp; Crispy </div>
-			<div> KFC 4 + 4 </div>
-		</td>
-		<td>
-			<div> 1 </div>
-			<div> 4 </div>
-		</td>
-		<td>
-			<div> &#x20B9; 750 </div>
-			<div> &#x20B9; 250 </div>
-		</td>
-		<td> Paid Online </td>
-		<td>
-			<div class="action-buttons">
-				<button class="round-button"> Confirm </button>
-				<button class="round-button" (click)="showRejectionPopup = true"> Reject </button>
-			</div>
-		</td>
-	</tr>
-
-	<tr>
-		<td> 545455 </td>
-		<td> 10 Min Ago </td>
-		<td>
-			<div> KFC 4 + 4 </div>
-		</td>
-		<td>
-			<div> 1 </div>
-		</td>
-		<td>
-			<div> &#x20B9; 750 </div>
-		</td>
-		<td> Paid Online </td>
-		<td>
-			<div class="status success"> Completed </div>
-		</td>
-	</tr>
-
-	<tr class="cancelled">
-		<td> 545455 </td>
-		<td> 0 Min Ago </td>
-		<td>
-			<div> KFC 4 + 4 </div>
-		</td>
-		<td>
-			<div> 1 </div>
-		</td>
-		<td>
-			<div> &#x20B9; 750 </div>
-		</td>
-		<td> Paid Online </td>
-		<td>
-			<div class="status failed"> Cancelled </div>
-		</td>
-	</tr>
-
-	<tr>
-		<td> 545455 </td>
-		<td> 1 Min Ago </td>
-		<td>
-			<div> KFC Bucket </div>
-		</td>
-		<td>
-			<div> 1 </div>
-		</td>
-		<td>
-			<div> &#x20B9; 250 </div>
-		</td>
-		<td> COD </td>
-		<td>
-			<div class="action-buttons">
-				<button class="round-button"> Confirm </button>
-				<button class="round-button" (click)="showRejectionPopup = true"> Reject </button>
-			</div>
-		</td>
-	</tr>
+    	<tr *ngFor="let order of orderList">
+    		<td> {{ order.orders_id }} </td>
+            <td>
+    			<div>
+                    <span *ngFor="let item of order.orderedlist" class="item">
+                        {{ item.menu_item_name }}
+                    </span>
+                </div>
+    		</td>
+    		<td>
+                <div *ngFor="let item of order.orderedlist">
+                    {{ getFormattedDate(item.pickup_time, 'DD MMM @ hh:mm a') }}
+                </div>
+            </td>
+    		<td>
+                <div *ngFor="let item of order.orderedlist">
+                    {{ item.quantity }}
+                </div>
+    		</td>
+    		<td>
+                <div *ngFor="let item of order.orderedlist">
+                    &#x20B9; {{ getFixedDecimalPoints(item.total_price) }}
+                </div>
+    		</td>
+    		<td>
+                <div class="action-buttons" *ngIf="order.orderstatus.orderstatus_id === 6">
+                    <button class="round-button"> Confirm </button>
+                    <button class="round-button" (click)="showRejectionPopup = true"> Reject </button>
+                </div>
+                <div class="status" [ngClass]="{'success': order.orderstatus.orderstatus_id === 1,
+                'failed' : order.orderstatus.orderstatus_id === 2 || order.orderstatus.orderstatus_id === 4 || order.orderstatus.orderstatus_id === 5 }"
+                *ngIf="order.orderstatus.orderstatus_id !== 6">
+                    {{ getOrderStatus(order.orderstatus.orderstatus_id).orderStatus }}
+                </div>
+    		</td>
+    	</tr>
+    </tbody>
 </table>
 
 <ul class="order-list">

src/app/orders/orders.component.scss

@@ -78,9 +78,11 @@
 
 
 .order-table {
-	width: 90%;
+	width: 100%;
 	margin: 30px auto;
 	text-align: left;
+    table-layout: fixed;
+    overflow: auto;
 
 	@media screen and (max-width: 1023px) {
 		display: none;
@@ -91,7 +93,10 @@
 		font-size: 14px;
 		font-weight: 500;
 		padding: 10px 0;
-		letter-spacing: 0.5px;
+		letter-spacing: 1px;
+		line-height: 2;
+		vertical-align: top;
+		text-align: center;
 	}
 
 	td {
@@ -103,13 +108,19 @@
 		letter-spacing: 1px;
 		line-height: 2;
 		vertical-align: top;
-		width: calc(100% / 6);
-
-		&:nth-child(4) {
-			padding-left: 20px;
-		}
+		text-align: center;
 	}
 
+    .item {
+        background-color: rgba(#cecece, 0.5);
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        margin-bottom: 10px;
+        padding: 0 10px;
+    }
+
 	tr {
 		&.cancelled {
 			td {
@@ -135,13 +146,13 @@
 	}
 
 	.action-buttons {
-		display: flex;
-		width: 100%;
-
 		button {
+            display: inline-block;
+            margin-left: 10px;
+            margin-top: 10px;
+
 			&:first-child {
 				background-color: var(--brand-blue);
-				margin-right: 10px;
 			}
 		}
 	}

src/app/orders/orders.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { IFilterOption } from '../models/filter-option';
+import { OrderService } from '../services/order.service';
+import * as moment from 'moment';
 
 @Component({
 	selector: 'app-orders',
@@ -11,7 +13,13 @@ export class OrdersComponent implements OnInit {
 	dateOptions: Array<IFilterOption>;
 	showRejectionPopup: boolean = false;
 
-	constructor() { }
+    orderList: any;
+
+    orderStatus: any = [];
+
+	constructor(
+        private orderService: OrderService
+    ) { }
 
 	ngOnInit() {
 		this.statusOptions = [{
@@ -23,6 +31,40 @@ export class OrdersComponent implements OnInit {
 			name: 'Today',
 			id: 'today'
 		}];
+
+        console.log(JSON.parse(localStorage.vendor_info))
+
+        this.orderService.getOrders().then((data) => {
+            console.log(data);
+            this.orderList = data;
+
+            this.orderList = this.orderList.filter((order) => {
+                return order.orderstatus;
+            });
+        }, () => {
+            alert("Error getting the orders");
+        });
+
+        this.orderService.getallOrderStatus().then((data) => {
+            console.log(data);
+            this.orderStatus = data;
+        }, () => {
+            alert("Error getting the order statuses");
+        })
 	}
 
+    getFormattedDate(date: any, format: string) {
+        return moment(date).format(format);
+    }
+
+    getFixedDecimalPoints(price: string | number) {
+        return Number(price).toFixed(2);
+    }
+
+    getOrderStatus(id: string | number) {
+        return this.orderStatus.find((status: any) => {
+            return id === status.orderstatus_id
+        });
+    }
+
 }

src/app/services/order.service.ts

@@ -18,6 +18,17 @@ export class OrderService {
 				'Authorization': 'Bearer ' + localStorage.vendor_token
 			})
 		};
-        this.http.get(URL + '/api/maioraservice/orders/getallOrders/', httpOptions).toPromise();
+        return this.http.get(URL + '/api/maioraservice/orders/getallOrders/', httpOptions).toPromise();
+    }
+
+    getallOrderStatus() {
+        const httpOptions = {
+			headers: new HttpHeaders({
+				'Access-Control-Allow-Origin': '*',
+				'Content-Type': 'application/json',
+				'Authorization': 'Bearer ' + localStorage.vendor_token
+			})
+		};
+        return this.http.get(URL + '/api/maioraservice/orders/getallOrderStatus', httpOptions).toPromise();
     }
 }

src/app/widgets-holder/widgets-holder.component.ts

@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./widgets-holder.component.scss']
 })
 export class WidgetsHolderComponent implements OnInit {
-	selected_nav: string = 'dashboard';
+	selected_nav: string = 'orders';
 
 	constructor() { }