Skip to content

Commit

Permalink
Ready for course 3 module 8
Browse files Browse the repository at this point in the history
  • Loading branch information
@samjulien
samjulien committed Dec 1, 2017
1 parent 9daf9ab commit 12bde86
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 25 deletions.
51 changes: 44 additions & 7 deletions public/src/orders/orders.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,26 @@ const template = require('./orders.html');

@Component({
selector: 'orders',
template: template
template: template,
styles: ['tr a { cursor: pointer; }']
})
export class OrdersComponent implements OnInit {
customers: Customer[];
orders: Order[];
filteredOrders: Order[];
title = 'Orders';

constructor(private orderService: OrderService, private customerService: CustomerService,
@Inject('$location') private $location){
sortType: string;
private sortReverse: boolean = false;

constructor(private orderService: OrderService, private customerService: CustomerService,
@Inject('$location') private $location) {

}

ngOnInit(): void {
let ordersData = Observable.fromPromise(this.orderService.getOrders());
Observable.forkJoin([ordersData, this.customerService.getCustomers()]).subscribe((data: Order[][]|Customer[][]) => {
Observable.forkJoin([ordersData, this.customerService.getCustomers()]).subscribe((data: Order[][] | Customer[][]) => {
this.orders = data[0] as Order[];
this.customers = data[1] as Customer[];
this.orders.forEach((order) => {
Expand All @@ -40,16 +45,48 @@ export class OrdersComponent implements OnInit {
});
order.customerName = customer.fullName;
});

this.filteredOrders = this.orders;
this.sortOrders('id');
});
}

//In the video I should not have used arrow syntax here.
//I again used arrow syntax in the videos for the below functions,
//which you shouldn't do because they transpile differently.
//Everything else is exactly the same.
goToCreateOrder() {
this.$location.path("/orders/create");
};

sortOrders(property) {
this.sortType = property;
this.sortReverse = !this.sortReverse;
this.filteredOrders.sort(this.dynamicSort(property));
}

dynamicSort(property) {
let sortOrder = -1;

if (this.sortReverse)
sortOrder = 1;

return function (a, b) {
let result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;

return result * sortOrder;
}
}

filterOrders(search: string) {
this.filteredOrders = this.orders.filter(o =>
Object.keys(o).some(k => {
if (typeof o[k] === 'string')
return o[k].toLowerCase().includes(search.toLowerCase());
}));
}
}

angular.module('app')
.directive('orders', downgradeComponent({component: OrdersComponent}) as
.directive('orders', downgradeComponent({ component: OrdersComponent }) as
angular.IDirectiveFactory
);
);
36 changes: 18 additions & 18 deletions public/src/orders/orders.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<div class="row">
<h1>{{$ctrl.title}}</h1>
<h1>{{title}}</h1>
</div>
<div class="row">
<div class="col-sm-12">
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" placeholder="Filter Orders" data-ng-model="$ctrl.filterOrders">
<input #ordersFilter type="text" class="form-control" placeholder="Filter Orders" (keyup)="filterOrders(ordersFilter.value)">
</div>
</div>
<button type="button" data-ng-click="$ctrl.goToCreateOrder()" class="btn btn-info">Create Order</button>
<button type="button" (click)="goToCreateOrder()" class="btn btn-info">Create Order</button>
</form>
</div>
</div>
Expand All @@ -20,41 +20,41 @@ <h1>{{$ctrl.title}}</h1>
<thead>
<tr>
<th>
<a href="" data-ng-click="$ctrl.sortType = 'orderId'; $ctrl.sortReverse = !$ctrl.sortReverse">
<a [href]="" (click)="sortOrders('id')">
Order Id
<span data-ng-show="$ctrl.sortType == 'orderId' && !$ctrl.sortReverse" class="fa fa-caret-down"></span>
<span data-ng-show="$ctrl.sortType == 'orderId' && $ctrl.sortReverse" class="fa fa-caret-up"></span>
<span *ngIf="sortType == 'id' && !sortReverse" class="fa fa-caret-down"></span>
<span *ngIf="sortType == 'id' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="" data-ng-click="$ctrl.sortType = 'customername'; $ctrl.sortReverse = !$ctrl.sortReverse">
<a [href]="" (click)="sortOrders('customerName')">
Customer Name
<span data-ng-show="$ctrl.sortType == 'customername' && !$ctrl.sortReverse" class="fa fa-caret-down"></span>
<span data-ng-show="$ctrl.sortType == 'customername' && $ctrl.sortReverse" class="fa fa-caret-up"></span>
<span *ngIf="sortType == 'customerName' && !sortReverse" class="fa fa-caret-down"></span>
<span *ngIf="sortType == 'customerName' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="" data-ng-click="$ctrl.sortType = 'totalItems'; $ctrl.sortReverse = !$ctrl.sortReverse">
<a [href]="" (click)="sortOrders('totalItems')">
Total Items
<span data-ng-show="$ctrl.sortType == 'totalItems' && !$ctrl.sortReverse" class="fa fa-caret-down"></span>
<span data-ng-show="$ctrl.sortType == 'totalItems' && $ctrl.sortReverse" class="fa fa-caret-up"></span>
<span *ngIf="sortType == 'totalItems' && !sortReverse" class="fa fa-caret-down"></span>
<span *ngIf="sortType == 'totalItems' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="" data-ng-click="$ctrl.sortType = 'totalSale'; $ctrl.sortReverse = !$ctrl.sortReverse">
<a [href]="" (click)="sortOrders('totalSale')">
Total Sale
<span data-ng-show="$ctrl.sortType == 'totalSale' && !$ctrl.sortReverse" class="fa fa-caret-down"></span>
<span data-ng-show="$ctrl.sortType == 'totalSale' && $ctrl.sortReverse" class="fa fa-caret-up"></span>
<span *ngIf="sortType == 'totalSale' && !sortReverse" class="fa fa-caret-down"></span>
<span *ngIf="sortType == 'totalSale' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="order in $ctrl.orders | orderBy:$ctrl.sortType:$ctrl.sortReverse | filter:$ctrl.filterOrders">
<td><a data-ng-href="#/orders/{{order.id}}">{{order.id}}</a></td>
<tr *ngFor="let order of filteredOrders">
<td><a href="#/orders/{{order.id}}">{{order.id}}</a></td>
<td>{{order.customerName}}</td>
<td>{{order.totalItems}}</td>
<td>{{order.totalSale | currency}}</td>
<td>{{order.totalSale | currency:'USD':true}}</td>
</tr>
</tbody>
</table>
Expand Down

0 comments on commit 12bde86

Please sign in to comment.