Parcourir la source

Connected orders data to dashboard

master
kj1352 il y a 5 ans
Parent
révision
1709796ba8
6 fichiers modifiés avec 89 ajouts et 126 suppressions
  1. +30
    -110
      src/app/dashboard/dashboard.component.html
  2. +48
    -1
      src/app/dashboard/dashboard.component.ts
  3. +1
    -9
      src/app/orders/orders.component.ts
  4. +2
    -2
      src/app/services/order.service.ts
  5. +4
    -3
      src/app/widgets-holder/widgets-holder.component.html
  6. +4
    -1
      src/app/widgets-holder/widgets-holder.component.ts

+ 30
- 110
src/app/dashboard/dashboard.component.html Voir le fichier

@@ -2,8 +2,8 @@
<section class="order-stats">
<div class="widget-heading-holder">
<header> Dashboard </header>
<app-custom-selector header="Date" [options]="filterOptions" width="200"
[defaultOptionId]="filterOptions[1].id"></app-custom-selector>
<!-- <app-custom-selector header="Date" [options]="filterOptions" width="200"
[defaultOptionId]="filterOptions[1].id"></app-custom-selector> -->
</div>

<ul>
@@ -15,7 +15,7 @@
</div>

<div class="column">
<div class="count"> 2 </div> Nos
<div class="count"> {{ getFilteredOrders('pending').length }} </div> Nos
</div>
</div>

@@ -32,7 +32,7 @@
</div>

<div class="column">
<div class="count"> 5 </div> Nos
<div class="count"> {{ getFilteredOrders('confirmed').length }} </div> Nos
</div>
</div>

@@ -44,12 +44,12 @@
<li>
<div class="column-holder">
<div class="column">
<header> Ready to Pick </header>
<p> Waiting for the Customer </p>
<header> Delivered </header>
<p> Waiting for the Customer / Delivered </p>
</div>

<div class="column">
<div class="count"> 10 </div> Nos
<div class="count"> {{ getFilteredOrders('delivered').length }} </div> Nos
</div>
</div>

@@ -60,121 +60,41 @@
</ul>
</section>

<ul class="pending-orders">
<ul class="pending-orders" *ngIf="getFilteredOrders('pending').length > 0">
<div class="heading">
<header> Pending Orders: </header>
<a> View All </a>
</div>
<li>
<li *ngFor="let order of getFilteredOrders('pending')">
<div class="info">
<label> Order ID: 34343 </label>
<label> Order ID: {{ order.orders_id }} </label>
</div>
<div class="name-holder">
<div class="name"> Mc Chicken Regular Meals </div>
<div class="info">
<label> Quantity </label>
<span> 2 </span>
</div>
</div>

<div class="info">
<label> Pickup Time </label>
<span> Today at 10:30 AM </span>
</div>

<div class="info">
<label> Parcel </label>
<span> No </span>
</div>

<div class="action-buttons">
<button class="round-button"> Confirm </button>
<button class="round-button"> Reject </button>
</div>
</li>

<li>
<div class="info">
<label> Order ID: 34343 </label>
</div>
<div class="name-holder">
<div class="name"> Mc Chicken Regular Meals </div>
<div class="info">
<label> Quantity </label>
<span> 2 </span>
</div>
</div>

<div class="info">
<label> Pickup Time </label>
<span> Today at 10:30 AM </span>
</div>

<div class="info">
<label> Parcel </label>
<span> No </span>
</div>

<div class="action-buttons">
<button class="round-button"> Confirm </button>
<button class="round-button"> Reject </button>
</div>
</li>

<li>
<div class="info">
<label> Order ID: 34343 </label>
</div>
<div class="name-holder">
<div class="name"> Mc Chicken Regular Meals </div>
<div class="info">
<label> Quantity </label>
<span> 2 </span>
</div>
</div>
<div *ngFor="let item of order.orderedlist">
<div class="name-holder">
<div class="name"> {{ item.menu_item_name }} </div>
<div class="info">
<label> Quantity </label>
<span> {{ item.quantity }} </span>
</div>
</div>

<div class="info">
<label> Pickup Time </label>
<span> Today at 10:30 AM </span>
</div>
<div class="info">
<label> Pickup Time </label>
<span> {{ getFormattedDate(item.pickup_time, 'DD MMM @ hh:mm a') }} </span>
</div>

<div class="info">
<label> Parcel </label>
<span> No </span>
</div>
<div class="info">
<label> Parcel </label>
<span *ngIf="!item.take_away"> No </span>
<span *ngIf="item.take_away"> Yes </span>
</div>
</div>

<div class="action-buttons">
<button class="round-button"> Confirm </button>
<button class="round-button"> Reject </button>
</div>
</li>


<li>
<div class="info">
<label> Order ID: 34343 </label>
</div>
<div class="name-holder">
<div class="name"> Mc Chicken Regular Meals </div>
<div class="info">
<label> Quantity </label>
<span> 2 </span>
</div>
</div>

<div class="info">
<label> Pickup Time </label>
<span> Today at 10:30 AM </span>
</div>

<div class="info">
<label> Parcel </label>
<span> No </span>
</div>

<div class="action-buttons">
<button class="round-button"> Confirm </button>
<button class="round-button"> Reject </button>
<button class="round-button" (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>
</li>
</ul>


+ 48
- 1
src/app/dashboard/dashboard.component.ts Voir le fichier

@@ -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-dashboard',
@@ -8,8 +10,12 @@ import { IFilterOption } from '../models/filter-option';
})
export class DashboardComponent implements OnInit {
filterOptions: Array<IFilterOption>;
orderList: any = [];
orderStatus: any = [];

constructor() { }
constructor(
private orderService: OrderService
) { }

ngOnInit() {
this.filterOptions = [{
@@ -19,6 +25,47 @@ export class DashboardComponent implements OnInit {
name: 'Today',
id: 'today'
}];

this.orderService.getOrders().then((data) => {
this.orderList = data;

this.orderList = this.orderList.filter((order) => {
return order.orderstatus;
});
}, () => {
alert("Error getting the orders");
});
}

getFormattedDate(date: any, format: string) {
return moment(date).format(format);
}

getFilteredOrders(type: 'pending' | 'delivered' | 'confirmed') {
switch(type) {
case 'pending':
return this.orderList.filter((order) => {
return order.orderstatus.orderstatus_id === 6;
});
case 'delivered':
return this.orderList.filter((order) => {
return order.orderstatus.orderstatus_id === 3;
});
case 'confirmed':
return this.orderList.filter((order) => {
return order.orderstatus.orderstatus_id === 1;
});
default: return [];
}
}

updateOrder(order) {
this.orderService.updateOrder(order).then((data) => {
console.log(data);
}, (err) => {
console.log(err)
alert("Failed to update order");
})
}

}

+ 1
- 9
src/app/orders/orders.component.ts Voir le fichier

@@ -12,9 +12,7 @@ export class OrdersComponent implements OnInit {
statusOptions: Array<IFilterOption>;
dateOptions: Array<IFilterOption>;
showRejectionPopup: boolean = false;

orderList: any;

orderList: any = [];
orderStatus: any = [];

constructor(
@@ -32,13 +30,7 @@ export class OrdersComponent implements OnInit {
id: 'today'
}];


let vendor_info = JSON.parse(localStorage.vendor_info);

console.log(vendor_info);

this.orderService.getOrders().then((data) => {
console.log(data);
this.orderList = data;

this.orderList = this.orderList.filter((order) => {


+ 2
- 2
src/app/services/order.service.ts Voir le fichier

@@ -44,7 +44,7 @@ export class OrderService {
return this.http.get(URL + '/api/maioraservice/orders/getorders/user_id/' + uid + '/', httpOptions).toPromise();
}

updateOrder(data: any) {
updateOrder(data: any) {
const httpOptions = {
headers: new HttpHeaders({
'Access-Control-Allow-Origin': '*',
@@ -52,6 +52,6 @@ export class OrderService {
'Authorization': 'Bearer ' + localStorage.vendor_token
})
};
return this.http.post(URL + '/api/maioraservice/orders/v1/update', data , httpOptions).toPromise();
return this.http.put(URL + '/api/maioraservice/orders/v1/update', data , httpOptions).toPromise();
}
}

+ 4
- 3
src/app/widgets-holder/widgets-holder.component.html Voir le fichier

@@ -14,9 +14,10 @@
<section class="side-navigation">
<section class="user-info">
<img>
<div class="name"> John Doe </div>
<div class="other-info"> Member ID: 03293 </div>
<div class="other-info"> Restaurant Rating: 4.0 <i class="icon ion-ios-star"></i> </div>
<div class="name"> {{ vendor_info.vendorName }} </div>
<div class="other-info"> Vendor ID: {{ vendor_info.vendor_Id }} </div>
<div class="other-info"> {{ vendor_info.outlet.length }} Outlets </div>
<div class="other-info"> Average Rating: 4.0 <i class="icon ion-ios-star"></i> </div>
</section>

<ul>


+ 4
- 1
src/app/widgets-holder/widgets-holder.component.ts Voir le fichier

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

constructor() { }

ngOnInit() {
let data = JSON.parse(localStorage.vendor_info);
this.vendor_info = data['Info Info'];
}

getNavPage(page: string) {


Chargement…
Annuler
Enregistrer