Filters added to orders component

src/app/custom-selector/custom-selector.component.ts

@@ -15,7 +15,7 @@ export class CustomSelectorComponent implements OnInit {
 	@Input() defaultOptionId: string;
 	selectedOption: {
 		name: string,
-		id: string
+		id: string | number
 	};
 	showDropdown: boolean = false;
 

src/app/dashboard/dashboard.component.html

@@ -20,15 +20,15 @@
 				</div>
 
 				<div class="column">
-					<button class="rect-button"> View </button>
+					<button class="rect-button" (click)="goToOrdersPage('pending')"> View </button>
 				</div>
 			</li>
 
 			<li>
 				<div class="column-holder">
 					<div class="column">
-						<header> Confirmed </header>
-						<p> To be Packed </p>
+						<header> Accepted </header>
+						<p> To be Cooked / Packed </p>
 					</div>
 
 					<div class="column">
@@ -37,7 +37,7 @@
 				</div>
 
 				<div class="column">
-					<button class="rect-button"> View </button>
+					<button class="rect-button" (click)="goToOrdersPage('confirmed')"> View </button>
 				</div>
 			</li>
 
@@ -54,7 +54,7 @@
 				</div>
 
 				<div class="column">
-					<button class="rect-button"> View </button>
+					<button class="rect-button" (click)="goToOrdersPage('delivered')"> View </button>
 				</div>
 			</li>
 		</ul>

src/app/dashboard/dashboard.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 import { IFilterOption } from '../models/filter-option';
 import { OrderService } from '../services/order.service';
 import * as moment from 'moment';
@@ -13,6 +13,8 @@ export class DashboardComponent implements OnInit {
     orderList: any = [];
     orderStatus: any = [];
 
+    @Output() dashboardEvents = new EventEmitter();
+
 	constructor(
         private orderService: OrderService
     ) { }
@@ -68,4 +70,11 @@ export class DashboardComponent implements OnInit {
         })
     }
 
+    goToOrdersPage(type: 'pending' | 'delivered' | 'confirmed') {
+        this.dashboardEvents.emit({
+            nav: 'orders',
+            type: type
+        });
+    }
+
 }

src/app/models/filter-option.ts

@@ -1,4 +1,4 @@
 export type IFilterOption = {
 	name: string,
-	id: string
+	id: string | number
 };

src/app/orders/orders.component.html

@@ -2,19 +2,33 @@
 	<header> Order List </header>
 	<div class="filter-container">
 		<div class="selector-container">
-			<app-custom-selector header="Status" [options]="statusOptions" width="200" [defaultOptionId]="statusOptions[0].id"></app-custom-selector>
 
-			<app-custom-selector header="Date" [options]="dateOptions" width="200" [defaultOptionId]="dateOptions[0].id"></app-custom-selector>
+            <div class="selector">
+            	<div class="container" (click)="showFilter = !showFilter">
+            		<div class="selected-value">
+            			Status : <span> {{ filterOption.orderStatus }} </span>
+            		</div>
+            		<button>
+            			<i class="icon" [ngClass]="{'ion-md-arrow-dropdown': !showFilter, 'ion-md-arrow-dropup': showFilter}"></i>
+            		</button>
+            	</div>
+            	<ul *ngIf="showFilter">
+            		<li *ngFor="let option of orderStatus" (click)="filterOption = option; showFilter = false">
+            			{{ option.orderStatus }}
+            		</li>
+            	</ul>
+            </div>
+
 		</div>
 
 		<div class="search-input">
-			<input type="text" placeholder="Quick Search">
+			<input type="text" placeholder="Quick Search: By Order ID" [(ngModel)]="searchTerm" (input)="searchOrders()">
 			<button> <i class="icon ion-md-search"></i> </button>
 		</div>
 	</div>
 </div>
 
-<table class="order-table">
+<table class="order-table" *ngIf="orderList">
 	<tbody>
         <tr class="heading-row">
     		<th> Order ID </th>
@@ -25,7 +39,7 @@
             <th> Action </th>
     	</tr>
 
-    	<tr *ngFor="let order of orderList">
+    	<tr *ngFor="let order of getFilteredOrders(filterOption.orderstatus_id)">
     		<td> {{ order.orders_id }} </td>
             <td>
     			<div>
@@ -52,7 +66,7 @@
     		<td>
                 <div class="action-buttons" *ngIf="order.orderstatus.orderstatus_id === 6">
                     <button class="round-button" (click)="order.orderstatus.orderstatus_id = 1; updateOrder(order)"> Confirm </button>
-                    <button class="round-button" (click)="showRejectionPopup = true"> Reject </button>
+                    <button class="round-button" (click)="order.orderstatus.orderstatus_id = 4; updateOrder(order)"> 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 }"
@@ -65,89 +79,22 @@
 </table>
 
 <ul class="order-list">
-	<li class="card">
-		<div class="header">
-			<span> Order ID : 29320 </span>
-			<span> Order Time: 2 Mins ago </span>
-		</div>
-		<table>
-			<tr>
-				<td>
-					<div> KFC Bucket </div>
-				</td>
-				<td>
-					<div> Qty: 1 </div>
-				</td>
-				<td>
-					<div> &#x20B9; 250 </div>
-				</td>
-			</tr>
-		</table>
-		<div class="order-status-holder">
-			<div class="status">
-				Paid online
-			</div>
-			<div class="action-buttons">
-				<button> Confirm </button>
-				<button (click)="showRejectionPopup = true"> Reject </button>
-			</div>
-		</div>
-	</li>
-
-	<li class="card">
+	<li class="card" *ngFor="let order of getFilteredOrders(filterOption.orderstatus_id)">
 		<div class="header">
-			<span> Order ID : 29320 </span>
-			<span> Order Time: 2 Mins ago </span>
+			<span> Order ID : {{ order.orders_id }} </span>
 		</div>
-		<table>
-			<tr>
-				<td>
-					<div> KFC Bucket </div>
-				</td>
-				<td>
-					<div> Qty: 1 </div>
-				</td>
-				<td>
-					<div> &#x20B9; 250 </div>
-				</td>
-			</tr>
-		</table>
+        <div class="info" *ngFor="let item of order.orderedlist">
+            <div> {{ item.menu_item_name }} x {{ item.quantity }} = &#x20B9; {{ getFixedDecimalPoints(item.total_price) }} </div>
+        </div>
 		<div class="order-status-holder">
-			<div class="status">
-				Paid online
-			</div>
-			<div class="action-buttons">
-				<button> Confirm </button>
-				<button (click)="showRejectionPopup = true"> Reject </button>
-			</div>
-		</div>
-	</li>
-
-	<li class="card">
-		<div class="header">
-			<span> Order ID : 29320 </span>
-			<span> Order Time: 2 Mins ago </span>
-		</div>
-		<table>
-			<tr>
-				<td>
-					<div> KFC Bucket </div>
-				</td>
-				<td>
-					<div> Qty: 1 </div>
-				</td>
-				<td>
-					<div> &#x20B9; 250 </div>
-				</td>
-			</tr>
-		</table>
-		<div class="order-status-holder">
-			<div class="status">
-				Paid online
-			</div>
-			<div class="action-buttons">
-				<button> Confirm </button>
-				<button (click)="showRejectionPopup = true"> Reject </button>
+            <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>
+			<div class="action-buttons" *ngIf="order.orderstatus.orderstatus_id === 6">
+				<button (click)="order.orderstatus.orderstatus_id = 1; updateOrder(order)"> Confirm </button>
+				<button (click)="order.orderstatus.orderstatus_id = 4; updateOrder(order)"> Reject </button>
 			</div>
 		</div>
 	</li>

src/app/orders/orders.component.scss

@@ -16,14 +16,12 @@
 		display: flex;
 		flex-grow: 1;
 
-		app-custom-selector {
+		.selector {
 			margin: 0 10px;
 			flex-grow: 1;
 
 			@media screen and (max-width: 1023px) {
 				margin: 0;
-				width: 45%;
-				flex-grow: 0;
 			}
 		}
 
@@ -186,31 +184,13 @@
 		letter-spacing: 1px;
 	}
 
-	table {
-		padding: 10px 15px;
-		width: 100%;
-
-		td {
-			font-size: 14px;
-			color: var(--dark-grey);
-			font-weight: 500;
-			letter-spacing: 0.5px;
-
-			&:nth-child(1) {
-				width: 50%;
-			}
-
-			&:nth-child(2) {
-				width: 25%;
-				text-align: center;
-			}
-
-			&:nth-child(3) {
-				width: 25%;
-				text-align: right;
-			}
-		}
-	}
+	.info {
+        font-size: 14px;
+        color: var(--dark-grey);
+        font-weight: 500;
+        letter-spacing: 0.5px;
+        padding: 10px 15px;
+    }
 
 	.order-status-holder {
 		background-color: #efefef;
@@ -223,6 +203,17 @@
 		justify-content: space-between;
 		align-items: center;
 
+        .status {
+
+    		&.success {
+    			color: green;
+    		}
+
+    		&.failed {
+    			color: red;
+    		}
+    	}
+
 		.action-buttons {
 			display: flex;
 			width: auto;

src/app/orders/orders.component.ts

@@ -1,5 +1,4 @@
-import { Component, OnInit } from '@angular/core';
-import { IFilterOption } from '../models/filter-option';
+import { Component, OnInit, Input } from '@angular/core';
 import { OrderService } from '../services/order.service';
 import * as moment from 'moment';
 
@@ -9,26 +8,54 @@ import * as moment from 'moment';
 	styleUrls: ['./orders.component.scss']
 })
 export class OrdersComponent implements OnInit {
-	statusOptions: Array<IFilterOption>;
-	dateOptions: Array<IFilterOption>;
 	showRejectionPopup: boolean = false;
     orderList: any = [];
+    tempOrderList: any = [];
     orderStatus: any = [];
+    searchTerm: string = '';
+    showFilter: boolean = false;
+    filterOption: {
+        orderStatus: string,
+        orderstatus_id: number
+    } = {
+        orderStatus: 'All',
+        orderstatus_id: 0
+    };
+
+    @Input() params: any;
 
 	constructor(
         private orderService: OrderService
     ) { }
 
 	ngOnInit() {
-		this.statusOptions = [{
-			name: 'All',
-			id: 'all'
-		}];
-
-		this.dateOptions = [{
-			name: 'Today',
-			id: 'today'
-		}];
+        if (this.params) {
+            try {
+                switch(this.params.filterType) {
+                    case 'pending': this.filterOption = {
+                        orderStatus: 'Pending',
+                        orderstatus_id: 6
+                    }; break;
+                    case 'delivered': this.filterOption = {
+                        orderStatus: 'Delivered',
+                        orderstatus_id: 3
+                    }; break;
+                    case 'confirmed': this.filterOption = {
+                        orderStatus: 'Accepted',
+                        orderstatus_id: 1
+                    }; break;
+                    default: this.filterOption = {
+                        orderStatus: 'All',
+                        orderstatus_id: 0
+                    }; break;
+                }
+            } catch {
+                this.filterOption = {
+                    orderStatus: 'All',
+                    orderstatus_id: 0
+                };
+            }
+        }
 
         this.orderService.getOrders().then((data) => {
             this.orderList = data;
@@ -36,13 +63,21 @@ export class OrdersComponent implements OnInit {
             this.orderList = this.orderList.filter((order) => {
                 return order.orderstatus;
             });
+
+            this.tempOrderList = this.orderList.filter((order) => {
+                return order.orderstatus;
+            });
         }, () => {
             alert("Error getting the orders");
         });
 
-        this.orderService.getallOrderStatus().then((data) => {
-            console.log(data);
+        this.orderService.getallOrderStatus().then((data: any) => {
             this.orderStatus = data;
+
+            this.orderStatus.push({
+                orderStatus: 'All',
+                orderstatus_id: 0
+            });
         }, () => {
             alert("Error getting the order statuses");
         });
@@ -71,4 +106,20 @@ export class OrdersComponent implements OnInit {
         })
     }
 
+    getFilteredOrders(id: number, orders?: any) {
+        if (id > 0) {
+            return this.tempOrderList.filter((order) => {
+                return order.orderstatus.orderstatus_id === id;
+            });
+        } else {
+            return this.tempOrderList;
+        }
+    }
+
+    searchOrders() {
+        this.tempOrderList = this.orderList.filter((order: any) => {
+            return order.orders_id.toString().toLowerCase().includes(this.searchTerm.toLowerCase());
+        });
+    }
+
 }

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

@@ -5,7 +5,7 @@
 		(click)="selected_nav = 'faq'"> FAQ's </a>
 		<a [ngClass]="{'active' : selected_nav === 'support'}"
 		(click)="selected_nav = 'support'"> Support </a>
-		<button class="rect-button"> Logout </button>
+		<button class="rect-button" (click)="logout()"> Logout </button>
 	</nav>
 </section>
 
@@ -21,37 +21,37 @@
 		</section>
 
 		<ul>
-			<li [ngClass]="{'active' : selected_nav === 'dashboard'}" (click)="selected_nav = 'dashboard'">
+			<li [ngClass]="{'active' : selected_nav.name === 'dashboard'}" (click)="selected_nav.name = 'dashboard'">
 				<i class="icon ion-ios-home"></i> <label> Dashboard </label>
 			</li>
-			<li [ngClass]="{'active' : selected_nav === 'orders'}" (click)="selected_nav = 'orders'">
+			<li [ngClass]="{'active' : selected_nav.name === 'orders'}" (click)="selected_nav.name = 'orders'">
 				<i class="icon ion-ios-cube"></i> <label> Orders </label>
 			</li>
-			<li [ngClass]="{'active' : selected_nav === 'items'}" (click)="selected_nav = 'items'">
+			<li [ngClass]="{'active' : selected_nav.name === 'items'}" (click)="selected_nav.name = 'items'">
 				<i class="icon ion-ios-clipboard"></i> <label> Menu Items & Offers </label>
 			</li>
-			<li [ngClass]="{'active' : selected_nav === 'schedule'}" (click)="selected_nav = 'schedule'">
+			<li [ngClass]="{'active' : selected_nav.name === 'schedule'}" (click)="selected_nav.name = 'schedule'">
 				<i class="icon ion-ios-calendar"></i> <label> Shop Schedules </label>
 			</li>
-			<li [ngClass]="{'active' : selected_nav === 'profile'}" (click)="selected_nav = 'profile'">
+			<li [ngClass]="{'active' : selected_nav.name === 'profile'}" (click)="selected_nav.name = 'profile'">
 				<i class="icon ion-ios-person"></i> <label> Profile </label>
 			</li>
-			<li [ngClass]="{'active' : selected_nav === 'settings'}" (click)="selected_nav = 'settings'">
+			<li [ngClass]="{'active' : selected_nav.name === 'settings'}" (click)="selected_nav.name = 'settings'">
 				<i class="icon ion-ios-cog"></i> <label> Settings </label>
 			</li>
-			<li [ngClass]="{'active' : selected_nav === 'more'}" (click)="selected_nav = 'more'">
+			<li [ngClass]="{'active' : selected_nav.name === 'more'}" (click)="selected_nav.name = 'more'">
 				<i class="icon ion-ios-more"></i> <label> More </label>
 			</li>
 		</ul>
 	</section>
 
 	<section class="widgets">
-		<app-dashboard *ngIf="selected_nav === 'dashboard'"></app-dashboard>
-		<app-orders *ngIf="selected_nav === 'orders'"></app-orders>
-		<app-menu-items *ngIf="selected_nav === 'items'"></app-menu-items>
-		<app-schedules *ngIf="selected_nav === 'schedule'"></app-schedules>
-		<app-faq *ngIf="selected_nav === 'faq'"></app-faq>
-		<app-support *ngIf="selected_nav === 'support'"></app-support>
+		<app-dashboard *ngIf="selected_nav.name === 'dashboard'" (dashboardEvents)="getWidgetsEvents($event)"></app-dashboard>
+		<app-orders [params]="selected_nav.params" *ngIf="selected_nav.name === 'orders'"></app-orders>
+		<app-menu-items *ngIf="selected_nav.name === 'items'"></app-menu-items>
+		<app-schedules *ngIf="selected_nav.name === 'schedule'"></app-schedules>
+		<app-faq *ngIf="selected_nav.name === 'faq'"></app-faq>
+		<app-support *ngIf="selected_nav.name === 'support'"></app-support>
 		<app-more (navClick)="getNavPage($event)" *ngIf="selected_nav === 'more'"></app-more>
 	</section>
 </div>

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

@@ -244,6 +244,8 @@
 
 .widgets {
 	width: 80%;
+    height: calc(100vh - 70px);
+    overflow: auto;
 
 	@media screen and (max-width: 1023px) {
 		width: 100%;

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
 	selector: 'app-widgets-holder',
@@ -6,10 +7,18 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./widgets-holder.component.scss']
 })
 export class WidgetsHolderComponent implements OnInit {
-	selected_nav: string = 'dashboard';
+	selected_nav: {
+        name: string,
+        params: any
+    } = {
+        name: 'orders',
+        params: ''
+    };
     vendor_info: any;
 
-	constructor() { }
+	constructor(
+        private router: Router
+    ) { }
 
 	ngOnInit() {
         let data = JSON.parse(localStorage.vendor_info);
@@ -17,7 +26,21 @@ export class WidgetsHolderComponent implements OnInit {
 	}
 
 	getNavPage(page: string) {
-		this.selected_nav = page;
+		this.selected_nav.name = page;
 	}
 
+    getWidgetsEvents(event: any) {
+        if (event.nav === 'orders') {
+            this.selected_nav.name = 'orders'
+            this.selected_nav.params = {
+                filterType: event.type
+            };
+        }
+    }
+
+    logout() {
+        localStorage.clear();
+        this.router.navigate(['/']);
+    }
+
 }

src/styles.scss

@@ -180,3 +180,71 @@ button {
 		transform: translateX(2px);
 	}
 }
+
+
+.selector {
+	position: relative;
+
+	.container {
+		display: flex;
+		width: 100%;
+		border-radius: 20px;
+		background-color: white;
+		color: var(--brand-blue);
+		align-items: center;
+		justify-content: space-between;
+		position: relative;
+
+		.selected-value {
+			font-weight: 500;
+			margin-left: 20px;
+			font-size: 14px;
+
+			span {
+				margin-left: 5px;
+			}
+		}
+
+		button {
+			border-radius: 50%;
+			width: 30px;
+			height: 30px;
+			color: var(--brand-blue);
+			font-size: 20px;
+			border: 1px solid var(--brand-blue);
+			background-color: white;
+			transition: background-color 0.3s, color 0.3s;
+
+			&:hover {
+				background-color: var(--brand-blue);
+				color: white;
+			}
+		}
+	}
+
+	ul {
+		list-style: none;
+		background-color: white;
+		width: 80%;
+		margin: 0 auto;
+		border-bottom-left-radius: 10px;
+		border-bottom-right-radius: 10px;
+		overflow: hidden;
+		position: absolute;
+		left: 10%;
+		top: 100%;
+	}
+
+	li {
+		padding: 10px;
+		font-size: 14px;
+		color: var(--brand-blue);
+		cursor: pointer;
+		transition: background-color 0.3s, color 0.3s;
+
+		&:hover {
+			background-color: var(--brand-blue);
+			color: white;
+		}
+	}
+}