2016-06-23 09:47:54 -07:00
|
|
|
/**
|
|
|
|
* @license
|
|
|
|
* Copyright Google Inc. All Rights Reserved.
|
|
|
|
*
|
|
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
|
|
* found in the LICENSE file at https://angular.io/license
|
|
|
|
*/
|
|
|
|
|
2016-08-16 11:15:01 -07:00
|
|
|
import {Component, EventEmitter, Injectable, Input, NgModule, Output} from '@angular/core';
|
2016-05-01 22:54:19 -07:00
|
|
|
import {ListWrapper} from '@angular/core/src/facade/collection';
|
2016-08-16 11:15:01 -07:00
|
|
|
import {FormsModule} from '@angular/forms';
|
|
|
|
import {BrowserModule} from '@angular/platform-browser';
|
|
|
|
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
|
2015-07-01 10:51:36 -07:00
|
|
|
|
|
|
|
/**
|
|
|
|
* You can find the Angular 1 implementation of this example here:
|
|
|
|
* https://github.com/wardbell/ng1DataBinding
|
|
|
|
*/
|
|
|
|
|
|
|
|
// ---- model
|
|
|
|
|
|
|
|
class OrderItem {
|
2016-08-05 09:56:53 -07:00
|
|
|
constructor(
|
|
|
|
public orderItemId: number, public orderId: number, public productName: string,
|
|
|
|
public qty: number, public unitPrice: number) {}
|
2015-07-01 10:51:36 -07:00
|
|
|
|
|
|
|
get total(): number { return this.qty * this.unitPrice; }
|
|
|
|
}
|
|
|
|
|
|
|
|
class Order {
|
2016-08-05 09:56:53 -07:00
|
|
|
constructor(
|
|
|
|
public orderId: number, public customerName: string, public limit: number,
|
|
|
|
private _dataService: DataService) {}
|
2015-07-01 10:51:36 -07:00
|
|
|
|
2015-09-04 15:09:02 -07:00
|
|
|
get items(): OrderItem[] { return this._dataService.itemsFor(this); }
|
2015-11-06 17:34:07 -08:00
|
|
|
get total(): number { return this.items.map(i => i.total).reduce((a, b) => a + b, 0); }
|
2015-07-01 10:51:36 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// ---- services
|
|
|
|
|
|
|
|
var _nextId = 1000;
|
2015-07-17 13:21:37 -07:00
|
|
|
@Injectable()
|
2015-07-01 10:51:36 -07:00
|
|
|
class DataService {
|
|
|
|
orderItems: OrderItem[];
|
|
|
|
orders: Order[];
|
|
|
|
currentOrder: Order = null;
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
this.orders = [
|
2016-08-05 09:56:53 -07:00
|
|
|
new Order(_nextId++, 'J. Coltrane', 100, this), new Order(_nextId++, 'B. Evans', 200, this)
|
2015-07-01 10:51:36 -07:00
|
|
|
];
|
|
|
|
|
|
|
|
this.orderItems = [
|
2016-08-05 09:56:53 -07:00
|
|
|
new OrderItem(_nextId++, this.orders[0].orderId, 'Bread', 5, 1),
|
|
|
|
new OrderItem(_nextId++, this.orders[0].orderId, 'Brie', 5, 2),
|
|
|
|
new OrderItem(_nextId++, this.orders[0].orderId, 'IPA', 5, 3),
|
2015-07-01 10:51:36 -07:00
|
|
|
|
2016-08-05 09:56:53 -07:00
|
|
|
new OrderItem(_nextId++, this.orders[1].orderId, 'Mozzarella', 5, 2),
|
|
|
|
new OrderItem(_nextId++, this.orders[1].orderId, 'Wine', 5, 3)
|
2015-07-01 10:51:36 -07:00
|
|
|
];
|
|
|
|
}
|
|
|
|
|
|
|
|
itemsFor(order: Order): OrderItem[] {
|
2015-10-09 09:07:58 -07:00
|
|
|
return this.orderItems.filter(i => i.orderId === order.orderId);
|
2015-07-01 10:51:36 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
addItemForOrder(order: Order): void {
|
2016-08-05 09:56:53 -07:00
|
|
|
this.orderItems.push(new OrderItem(_nextId++, order.orderId, '', 0, 0));
|
2015-07-01 10:51:36 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
deleteItem(item: OrderItem): void { ListWrapper.remove(this.orderItems, item); }
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// ---- components
|
|
|
|
|
2015-11-02 12:49:22 -08:00
|
|
|
@Component({
|
|
|
|
selector: 'order-list-cmp',
|
2015-07-01 10:51:36 -07:00
|
|
|
template: `
|
2015-07-22 10:18:04 -07:00
|
|
|
<h1>Orders</h1>
|
2016-04-25 19:52:24 -07:00
|
|
|
<div *ngFor="let order of orders" [class.warning]="order.total > order.limit">
|
2015-07-01 10:51:36 -07:00
|
|
|
<div>
|
2015-07-22 10:18:04 -07:00
|
|
|
<label>Customer name:</label>
|
2015-07-01 10:51:36 -07:00
|
|
|
{{order.customerName}}
|
|
|
|
</div>
|
2015-07-22 10:18:04 -07:00
|
|
|
|
2015-07-01 10:51:36 -07:00
|
|
|
<div>
|
2015-11-23 16:02:19 -08:00
|
|
|
<label>Limit: <input [(ngModel)]="order.limit" type="number" placeholder="Limit"></label>
|
2015-07-01 10:51:36 -07:00
|
|
|
</div>
|
2015-07-22 10:18:04 -07:00
|
|
|
|
2015-07-01 10:51:36 -07:00
|
|
|
<div>
|
2015-07-22 10:18:04 -07:00
|
|
|
<label>Number of items:</label>
|
2015-07-01 10:51:36 -07:00
|
|
|
{{order.items.length}}
|
|
|
|
</div>
|
2015-07-22 10:18:04 -07:00
|
|
|
|
2015-07-01 10:51:36 -07:00
|
|
|
<div>
|
2015-07-22 10:18:04 -07:00
|
|
|
<label>Order total:</label>
|
2015-07-01 10:51:36 -07:00
|
|
|
{{order.total}}
|
|
|
|
</div>
|
2015-07-22 10:18:04 -07:00
|
|
|
|
2015-07-01 10:51:36 -07:00
|
|
|
<button (click)="select(order)">Select</button>
|
2015-07-22 10:18:04 -07:00
|
|
|
</div>
|
2016-08-16 11:15:01 -07:00
|
|
|
`
|
2015-07-01 10:51:36 -07:00
|
|
|
})
|
|
|
|
class OrderListComponent {
|
|
|
|
orders: Order[];
|
|
|
|
|
2015-09-04 15:09:02 -07:00
|
|
|
constructor(private _service: DataService) { this.orders = _service.orders; }
|
|
|
|
select(order: Order): void { this._service.currentOrder = order; }
|
2015-07-01 10:51:36 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2015-11-02 12:49:22 -08:00
|
|
|
@Component({
|
|
|
|
selector: 'order-item-cmp',
|
2015-07-01 10:51:36 -07:00
|
|
|
template: `
|
2015-07-22 10:18:04 -07:00
|
|
|
<div>
|
2015-07-01 10:51:36 -07:00
|
|
|
<div>
|
2015-11-23 16:02:19 -08:00
|
|
|
<label>Product name: <input [(ngModel)]="item.productName" type="text" placeholder="Product name"></label>
|
2015-07-01 10:51:36 -07:00
|
|
|
</div>
|
2015-07-22 10:18:04 -07:00
|
|
|
|
2015-07-01 10:51:36 -07:00
|
|
|
<div>
|
2015-11-23 16:02:19 -08:00
|
|
|
<label>Quantity: <input [(ngModel)]="item.qty" type="number" placeholder="Quantity"></label>
|
2015-07-01 10:51:36 -07:00
|
|
|
</div>
|
2015-07-22 10:18:04 -07:00
|
|
|
|
2015-07-01 10:51:36 -07:00
|
|
|
<div>
|
2015-11-23 16:02:19 -08:00
|
|
|
<label>Unit Price: <input [(ngModel)]="item.unitPrice" type="number" placeholder="Unit price"></label>
|
2015-07-01 10:51:36 -07:00
|
|
|
</div>
|
2015-07-22 10:18:04 -07:00
|
|
|
|
2015-07-01 10:51:36 -07:00
|
|
|
<div>
|
2015-07-22 10:18:04 -07:00
|
|
|
<label>Total:</label>
|
2015-07-01 10:51:36 -07:00
|
|
|
{{item.total}}
|
|
|
|
</div>
|
2015-07-22 10:18:04 -07:00
|
|
|
|
2015-07-01 10:51:36 -07:00
|
|
|
<button (click)="onDelete()">Delete</button>
|
|
|
|
</div>
|
2016-08-16 11:15:01 -07:00
|
|
|
`
|
2015-07-01 10:51:36 -07:00
|
|
|
})
|
|
|
|
class OrderItemComponent {
|
2015-11-02 12:49:22 -08:00
|
|
|
@Input() item: OrderItem;
|
|
|
|
@Output() delete = new EventEmitter();
|
2015-07-01 10:51:36 -07:00
|
|
|
|
2015-11-15 23:58:59 -08:00
|
|
|
onDelete(): void { this.delete.emit(this.item); }
|
2015-07-01 10:51:36 -07:00
|
|
|
}
|
|
|
|
|
2015-11-02 12:49:22 -08:00
|
|
|
@Component({
|
|
|
|
selector: 'order-details-cmp',
|
2015-07-01 10:51:36 -07:00
|
|
|
template: `
|
2015-11-23 16:02:19 -08:00
|
|
|
<div *ngIf="order !== null">
|
2015-07-22 10:18:04 -07:00
|
|
|
<h1>Selected Order</h1>
|
2015-07-01 10:51:36 -07:00
|
|
|
<div>
|
2015-11-23 16:02:19 -08:00
|
|
|
<label>Customer name: <input [(ngModel)]="order.customerName" type="text" placeholder="Customer name"></label>
|
2015-07-01 10:51:36 -07:00
|
|
|
</div>
|
2015-07-22 10:18:04 -07:00
|
|
|
|
2015-07-01 10:51:36 -07:00
|
|
|
<div>
|
2015-11-23 16:02:19 -08:00
|
|
|
<label>Limit: <input [(ngModel)]="order.limit" type="number" placeholder="Limit"></label>
|
2015-07-01 10:51:36 -07:00
|
|
|
</div>
|
2015-07-22 10:18:04 -07:00
|
|
|
|
2015-07-01 10:51:36 -07:00
|
|
|
<div>
|
2015-07-22 10:18:04 -07:00
|
|
|
<label>Number of items:</label>
|
2015-07-01 10:51:36 -07:00
|
|
|
{{order.items.length}}
|
|
|
|
</div>
|
2015-07-22 10:18:04 -07:00
|
|
|
|
2015-07-01 10:51:36 -07:00
|
|
|
<div>
|
2015-07-22 10:18:04 -07:00
|
|
|
<label>Order total:</label>
|
2015-07-01 10:51:36 -07:00
|
|
|
{{order.total}}
|
|
|
|
</div>
|
2015-07-22 10:18:04 -07:00
|
|
|
|
2015-07-01 10:51:36 -07:00
|
|
|
<h2>Items</h2>
|
|
|
|
<button (click)="addItem()">Add Item</button>
|
2016-04-25 19:52:24 -07:00
|
|
|
<order-item-cmp *ngFor="let item of order.items" [item]="item" (delete)="deleteItem(item)"></order-item-cmp>
|
2015-07-01 10:51:36 -07:00
|
|
|
</div>
|
2016-08-16 11:15:01 -07:00
|
|
|
`
|
2015-07-01 10:51:36 -07:00
|
|
|
})
|
|
|
|
class OrderDetailsComponent {
|
2015-09-04 15:09:02 -07:00
|
|
|
constructor(private _service: DataService) {}
|
2015-07-01 10:51:36 -07:00
|
|
|
|
2015-09-04 15:09:02 -07:00
|
|
|
get order(): Order { return this._service.currentOrder; }
|
2015-07-01 10:51:36 -07:00
|
|
|
|
2015-09-04 15:09:02 -07:00
|
|
|
deleteItem(item: OrderItem): void { this._service.deleteItem(item); }
|
2015-07-01 10:51:36 -07:00
|
|
|
|
2015-09-04 15:09:02 -07:00
|
|
|
addItem(): void { this._service.addItemForOrder(this.order); }
|
2015-07-01 10:51:36 -07:00
|
|
|
}
|
|
|
|
|
2015-11-02 12:49:22 -08:00
|
|
|
@Component({
|
|
|
|
selector: 'order-management-app',
|
|
|
|
providers: [DataService],
|
2015-07-01 10:51:36 -07:00
|
|
|
template: `
|
|
|
|
<order-list-cmp></order-list-cmp>
|
|
|
|
<order-details-cmp></order-details-cmp>
|
2016-08-16 11:15:01 -07:00
|
|
|
`
|
2015-07-01 10:51:36 -07:00
|
|
|
})
|
|
|
|
class OrderManagementApplication {
|
|
|
|
}
|
|
|
|
|
2016-08-16 11:15:01 -07:00
|
|
|
@NgModule({
|
|
|
|
bootstrap: [OrderManagementApplication],
|
2016-08-19 15:59:50 -07:00
|
|
|
declarations:
|
|
|
|
[OrderManagementApplication, OrderListComponent, OrderDetailsComponent, OrderItemComponent],
|
2016-08-16 11:15:01 -07:00
|
|
|
imports: [BrowserModule, FormsModule]
|
|
|
|
})
|
|
|
|
class ExampleModule {
|
|
|
|
}
|
|
|
|
|
2015-07-01 10:51:36 -07:00
|
|
|
export function main() {
|
2016-08-16 11:15:01 -07:00
|
|
|
platformBrowserDynamic().bootstrapModule(ExampleModule);
|
2015-07-01 10:51:36 -07:00
|
|
|
}
|