import { Component } from '@angular/core'; import { DataService } from './data.service'; @Component({ selector: 'app-root', template: ` <h2>Dialog Editing</h2> <eui-linkbutton (click)="onAddRow()" iconCls="icon-add" style="margin-bottom:10px">Add New</eui-linkbutton> <eui-datagrid [data]="data" style="height1:250px"> <eui-grid-column field="itemid" title="Item ID"></eui-grid-column> <eui-grid-column field="name" title="Name"></eui-grid-column> <eui-grid-column field="listprice" title="List Price" align="right"></eui-grid-column> <eui-grid-column field="unitcost" title="Unit Cost" align="right"></eui-grid-column> <eui-grid-column field="attr" title="Attribute" width="30%"></eui-grid-column> <eui-grid-column title="Commands" align="center" width="100"> <ng-template euiCellTemplate let-row> <eui-linkbutton btnCls="c5" (click)="onEditRow(row)">Edit</eui-linkbutton> <eui-linkbutton btnCls="c1" (click)="onDeleteRow(row)">Delete</eui-linkbutton> </ng-template> </eui-grid-column> </eui-datagrid> <eui-edit-form [closed]="closed" [isNewRow]="isNewRow" [row]="editingRow" (save)="onSaveRow($event)" (cancel)="closed=true"> </eui-edit-form> `, providers: [DataService] }) export class AppComponent { data = null; isNewRow = false; editingRow = null; closed = true; constructor(public dataService: DataService){} ngOnInit() { this.data = this.dataService.getData(); this.initRow(); } initRow() { this.editingRow = { itemid: null, name: null, listprice: null, unitcost: null, addr: null, }; } onAddRow(){ this.initRow(); this.isNewRow = true; this.closed = false; } onEditRow(row){ this.isNewRow = false; this.editingRow = row; this.closed = false; } onSaveRow(row){ if (this.isNewRow){ this.dataService.add(row); } else { this.dataService.update(row); } this.data = this.dataService.getData(); this.closed = true; this.isNewRow = false; } onDeleteRow(row){ this.dataService.delete(row); this.data = this.dataService.getData(); } }
import { Component, Input, Output, EventEmitter } from '@angular/core'; import { Validators, FormGroup, FormBuilder, FormControl } from '@angular/forms'; @Component({ selector: 'eui-edit-form', template: ` <eui-dialog [closed]="closed" [draggable]="true" [modal]="true" [title]="isNewRow ? 'Add' : 'Edit'"> <form novalidate [formGroup]="formGroup" style="padding:20px 40px"> <div style="margin-bottom:20px"> <label [for]="name">Item ID:</label> <eui-textbox #itemid formControlName="itemid" [invalid]="formGroup.get('itemid').invalid" style="width:200px"></eui-textbox> <div class="error" *ngIf="formGroup.get('itemid').hasError('required')">This field is required.</div> </div> <div style="margin-bottom:20px"> <label [for]="name">Name:</label> <eui-textbox #name formControlName="name" [invalid]="formGroup.get('name').invalid" style="width:200px"></eui-textbox> <div class="error" *ngIf="formGroup.get('name').hasError('required')">This field is required.</div> </div> <div style="margin-bottom:20px"> <label [for]="listprice">List Price:</label> <eui-numberbox #listprice formControlName="listprice" precision="1" style="width:200px"></eui-numberbox> </div> <div style="margin-bottom:20px"> <label [for]="unitcost">Unit Price:</label> <eui-numberbox #unitcost formControlName="unitcost" style="width:200px"></eui-numberbox> </div> <div style="margin-bottom:20px"> <label [for]="attr">Attribute:</label> <eui-textbox #attr formControlName="attr" style="width:200px"></eui-textbox> </div> </form> <div class="dialog-button"> <eui-linkbutton (click)="onSave()" style="width:80px">Save</eui-linkbutton> <eui-linkbutton (click)="onCancel()" style="width:80px">Cancel</eui-linkbutton> </div> </eui-dialog> `, styles: [` .error{ color: red; font-size: 12px; margin: 4px 0 4px 80px; } `] }) export class EditFormComponent{ @Input() closed = true; _row: any; @Input() get row(){ return this._row; } set row(value: any){ this._row = value; this.formGroup.reset(this._row); } @Input() isNewRow = false; @Output() save = new EventEmitter(); @Output() cancel = new EventEmitter(); formGroup: FormGroup; constructor(fb: FormBuilder){ this.formGroup = fb.group({ 'itemid': [null, Validators.required], 'name': [null, Validators.required], 'listprice': null, 'unitcost': null, 'attr': null }); } onSave(){ if (this.formGroup.valid){ Object.assign(this.row, this.formGroup.value); this.save.emit(this.row); } } onCancel(){ this.cancel.emit(); } }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule,ReactiveFormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { EasyUIModule } from 'easyui/easyui/easyui.module'; import { EditFormComponent } from './edit-form.component'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, EditFormComponent ], imports: [ BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, EasyUIModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
import { Injectable } from '@angular/core'; @Injectable() export class DataService { data = [ {"code":"FI-SW-01","name":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr":"Large","itemid":"EST-1"}, {"code":"K9-DL-01","name":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr":"Spotted Adult Female","itemid":"EST-10"}, {"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr":"Venomless","itemid":"EST-11"}, {"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr":"Rattleless","itemid":"EST-12"}, {"code":"RP-LI-02","name":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr":"Green Adult","itemid":"EST-13"}, {"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr":"Tailless","itemid":"EST-14"}, {"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr":"With tail","itemid":"EST-15"}, {"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr":"Adult Female","itemid":"EST-16"}, {"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr":"Adult Male","itemid":"EST-17"}, {"code":"AV-CB-01","name":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr":"Adult Male","itemid":"EST-18"} ]; getData() { return this.data; } delete(item: any){ this.data = this.data.filter(row => row != item); } add(row: any){ this.data = this.data.concat([row]); } update(row: any){ this.data = this.data.map(r => { if (r == row){ return row; } else { return r; } }); } }
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; enableProdMode(); platformBrowserDynamic().bootstrapModule(AppModule);