vendor-app/src/app/orders/orders.component.html

<div class="widget-heading-holder">
	<header> Order List ({{ getFilteredOrders(filterOption.orderstatus_id).length }}) </header>
	<div class="filter-container">
		<div class="selector-container">

            <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: By Order ID" [(ngModel)]="searchTerm" (input)="searchOrders()">
			<button> <i class="icon ion-md-search"></i> </button>
		</div>
	</div>
</div>

<table class="order-table" *ngIf="orderList">
	<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 *ngFor="let order of getFilteredOrders(filterOption.orderstatus_id)">
    		<td> {{ order.orders_id }} </td>
            <td>
    			<div>
                    <span *ngFor="let item of order.orderedlist" class="item">
                        {{ item.menuitems.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="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 class="round-button accept" (click)="order.orderstatus.orderstatus_id = 1; updateOrder(order)"> Confirm </button>
                    <button class="round-button" (click)="order.orderstatus.orderstatus_id = 4; updateOrder(order)"> Reject </button>
                </div>

                <div class="action-buttons" *ngIf="order.orderstatus.orderstatus_id === 1 || order.orderstatus.orderstatus_id === 7">
                    <button class="round-button accept" *ngIf="order.orderstatus.orderstatus_id !== 7" (click)="order.orderstatus.orderstatus_id = 7; updateOrder(order)"> Ready </button>
                    <button class="round-button accept" (click)="order.orderstatus.orderstatus_id = 3; updateOrder(order)"> Delivered </button>
                </div>
    		</td>
    	</tr>
    </tbody>
</table>

<ul class="order-list">
	<li class="card" *ngFor="let order of getFilteredOrders(filterOption.orderstatus_id)">
		<div class="header">
			<span> Order ID : {{ order.orders_id }} </span>
		</div>
        <div class="info" *ngFor="let item of order.orderedlist">
            <div> {{ item.menuitems.menu_item_name }} x {{ item.quantity }} = &#x20B9; {{ getFixedDecimalPoints(item.total_price) }} </div>
        </div>
		<div class="order-status-holder">
            <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>
</ul>

<section class="popup" [ngClass]="{'active' : showRejectionPopup }">
	<div class="popup-box">
		<header> Reason to Reject the Order </header>
		<select>
			<option selected> Item not available </option>
			<option> The customer was impatient </option>
			<option> Other </option>
		</select>

		<div class="action-buttons">
			<button class="rect-button" (click)="showRejectionPopup = false"> Reject </button>
			<button class="rect-button" (click)="showRejectionPopup = false"> Cancel </button>
		</div>
	</div>
</section>