kj
/
vendor-app
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Filters added to orders component

master
kj1352 5 years ago
parent
1709796ba8
commit
780ff25331
11 changed files with 245 additions and 154 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      src/app/custom-selector/custom-selector.component.ts
  2. +5
    -5
      src/app/dashboard/dashboard.component.html
  3. +10
    -1
      src/app/dashboard/dashboard.component.ts
  4. +1
    -1
      src/app/models/filter-option.ts
  5. +33
    -86
      src/app/orders/orders.component.html
  6. +19
    -28
      src/app/orders/orders.component.scss
  7. +66
    -15
      src/app/orders/orders.component.ts
  8. +14
    -14
      src/app/widgets-holder/widgets-holder.component.html
  9. +2
    -0
      src/app/widgets-holder/widgets-holder.component.scss
  10. +26
    -3
      src/app/widgets-holder/widgets-holder.component.ts
  11. +68
    -0
      src/styles.scss

+ 1
- 1
src/app/custom-selector/custom-selector.component.ts View File

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



+ 5
- 5
src/app/dashboard/dashboard.component.html View File

@@ -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>


+ 10
- 1
src/app/dashboard/dashboard.component.ts View File

@@ -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
});
}

}

+ 1
- 1
src/app/models/filter-option.ts View File

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

+ 33
- 86
src/app/orders/orders.component.html View File

@@ -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>


+ 19
- 28
src/app/orders/orders.component.scss View File

@@ -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;


+ 66
- 15
src/app/orders/orders.component.ts View File

@@ -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());
});
}

}

+ 14
- 14
src/app/widgets-holder/widgets-holder.component.html View File

@@ -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>

+ 2
- 0
src/app/widgets-holder/widgets-holder.component.scss View File

@@ -244,6 +244,8 @@

.widgets {
width: 80%;
height: calc(100vh - 70px);
overflow: auto;

@media screen and (max-width: 1023px) {
width: 100%;


+ 26
- 3
src/app/widgets-holder/widgets-holder.component.ts View File

@@ -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(['/']);
}

}

+ 68
- 0
src/styles.scss View File

@@ -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;
}
}
}

Write Preview
Loading…
Cancel
Save