Skip to content

Commit d1e9a4a

Browse files
mariuszfoltakmariuszfoltak
committed
Input and Output in DataTable for sorting. Fixes #14 
1 parent ee276fc commit d1e9a4a

File tree

7 files changed

+218
-62
lines changed

7 files changed

+218
-62
lines changed

‎examples/systemjs/app/app.component.html

Lines changed: 66 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<div class="container">
2-
<div class="col-xs-8 col-md-offset-2">
1+
<div class="container-fluid">
2+
<div class="col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
33

44
<div class="page-header">
55
<h1>
@@ -10,58 +10,85 @@ <h1>
1010

1111

1212
<div class="row">
13-
<h2 class="col-xs-8">Simple data table</h2>
14-
<label class="label-control col-xs-2">Rows on page</label>
13+
<h2 class="col-xs-6">Simple data table</h2>
1514
<div class="col-xs-2">
16-
<select class="form-control" [(ngModel)]="rowsOnPage">
15+
<label class="label-control">Rows on page</label>
16+
<select class="form-control input-sm" [(ngModel)]="rowsOnPage">
1717
<option [ngValue]="5">5</option>
1818
<option [ngValue]="10">10</option>
1919
<option [ngValue]="15">15</option>
2020
</select>
2121
</div>
22+
<div class="col-xs-4">
23+
<div class="row">
24+
<label class="col-xs-12 label-control">Sort by</label>
25+
</div>
26+
<div class="col-xs-6">
27+
<div class="row">
28+
<select class="form-control input-sm" [(ngModel)]="sortBy">
29+
<option ngValue="name">Name</option>
30+
<option ngValue="email">Email</option>
31+
<option ngValue="age">Age</option>
32+
<option [ngValue]="sortByWordLength">City</option>
33+
</select>
34+
</div>
35+
</div>
36+
<div class="col-xs-6">
37+
<div class="row">
38+
<select class="form-control input-sm" [(ngModel)]="sortOrder">
39+
<option ngValue="asc">Ascending</option>
40+
<option ngValue="desc">Descending</option>
41+
<option ngValue="badValue">Bad value</option>
42+
</select>
43+
</div>
44+
</div>
45+
</div>
2246
</div>
2347
<div class="panel panel-default">
2448
<div class="panel-heading">User information</div>
2549

26-
<table class="table table-striped" [mfData]="data | dataFilter : filterQuery" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage">
50+
<table class="table table-striped" [mfData]="data | dataFilter : filterQuery" #mf="mfDataTable"
51+
[mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
2752
<thead>
28-
<tr>
29-
<th style="width: 10%"></th>
30-
<th style="width: 20%">
31-
<mfDefaultSorter by="name">Name</mfDefaultSorter>
32-
</th>
33-
<th style="width: 40%">
34-
<mfDefaultSorter by="email">Email</mfDefaultSorter>
35-
</th>
36-
<th style="width: 10%">
37-
<mfDefaultSorter by="age">Age</mfDefaultSorter>
38-
</th>
39-
<th style="width: 20%">
40-
<mfDefaultSorter [by]="sortByWordLength">City</mfDefaultSorter>
41-
</th>
42-
</tr>
43-
<tr>
44-
<th>Filter by name:</th>
45-
<th colspan="3">
46-
<input class="form-control" [(ngModel)]="filterQuery"/>
47-
</th>
48-
</tr>
53+
<tr>
54+
<th style="width: 10%"></th>
55+
<th style="width: 20%">
56+
<mfDefaultSorter by="name">Name</mfDefaultSorter>
57+
</th>
58+
<th style="width: 40%">
59+
<mfDefaultSorter by="email">Email</mfDefaultSorter>
60+
</th>
61+
<th style="width: 10%">
62+
<mfDefaultSorter by="age">Age</mfDefaultSorter>
63+
</th>
64+
<th style="width: 20%">
65+
<mfDefaultSorter [by]="sortByWordLength">City</mfDefaultSorter>
66+
</th>
67+
</tr>
68+
<tr>
69+
<th colspan="5">
70+
Filter by name:
71+
<input class="form-control" [(ngModel)]="filterQuery"/>
72+
</th>
73+
</tr>
4974
</thead>
5075
<tbody>
51-
<tr *ngFor="let item of mf.data">
52-
<td><button (click)="remove(item)" class="btn btn-danger">x</button></td>
53-
<td>{{item.name}}</td>
54-
<td>{{item.email}}</td>
55-
<td class="text-right">{{item.age}}</td>
56-
<td>{{item.city | uppercase}}</td>
57-
</tr>
76+
<tr *ngFor="let item of mf.data">
77+
<td>
78+
<button (click)="remove(item)" class="btn btn-danger">x</button>
79+
</td>
80+
<td>{{item.name}}</td>
81+
<td>{{item.email}}</td>
82+
<td class="text-right">{{item.age}}</td>
83+
<td>{{item.city | uppercase}}</td>
84+
</tr>
5885
</tbody>
5986
<tfoot>
60-
<tr>
61-
<td colspan="5">
62-
<mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
63-
</td>
64-
</tr>
87+
<tr>
88+
<td colspan="5">
89+
<mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
90+
</td>
91+
</tr>
6592
</tfoot>
6693
</table>
6794
</div>

‎examples/systemjs/app/app.component.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ export class AppComponent implements OnInit {
1111
public data: any[];
1212
public filterQuery = "";
1313
public rowsOnPage = 10;
14+
public sortBy = "email";
15+
public sortOrder = "asc";
1416

1517
constructor(private http: Http) {
1618
}

‎examples/systemjs/app/tsconfig.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
],
1919
"baseUrl": ".",
2020
"paths": {
21-
"angular2-datatable": ["../../.."]
21+
"angular2-datatable": ["../../.."],
22+
"angular2-datatable/*": ["../../../*"]
2223
}
2324
}
2425
}

‎examples/systemjs/index.html

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,6 @@
2121
console.error(err);
2222
});
2323
</script>
24-
<style>
25-
.pagination li a {background-color:#eaa;}
26-
</style>
2724

2825
</head>
2926
<body>

‎src/DataTable.spec.ts

Lines changed: 114 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
///<reference path="../node_modules/@types/jasmine/index.d.ts"/>
22
import {SimpleChange, Component} from "@angular/core";
3-
import {DataTable, PageEvent} from "./DataTable";
3+
import {DataTable, PageEvent, SortEvent} from "./DataTable";
44
import {TestBed, ComponentFixture} from "@angular/core/testing";
55
import {By} from "@angular/platform-browser";
66
import * as _ from "lodash";
@@ -13,13 +13,13 @@ class TestComponent {
1313

1414
describe("DataTable directive tests", ()=> {
1515
let datatable: DataTable;
16-
let datatableFixture: ComponentFixture<DataTable>;
16+
let fixture: ComponentFixture<TestComponent>;
1717

1818
beforeEach(()=> {
1919
TestBed.configureTestingModule({
2020
declarations: [DataTable, TestComponent]
2121
});
22-
let fixture = TestBed.createComponent(TestComponent);
22+
fixture = TestBed.createComponent(TestComponent);
2323
datatable = fixture.debugElement.query(By.directive(DataTable)).injector.get(DataTable) as DataTable;
2424

2525
datatable.inputData = [
@@ -123,6 +123,117 @@ describe("DataTable directive tests", ()=> {
123123
expect(datatable.getSort()).toEqual({sortBy: "id", sortOrder: "desc"});
124124
});
125125

126+
it("should sort data after sorting input value changed", () => {
127+
datatable.ngDoCheck();
128+
datatable.sortBy = "id";
129+
datatable.sortOrder = "asc";
130+
datatable.ngOnChanges({
131+
sortBy: new SimpleChange(null, datatable.sortBy),
132+
sortOrder: new SimpleChange(null, datatable.sortOrder)
133+
});
134+
datatable.ngDoCheck();
135+
expect(datatable.data).toEqual([
136+
{id: 1, name: 'Duck'},
137+
{id: 2, name: 'ącki'},
138+
{id: 3, name: 'banana'},
139+
{id: 4, name: 'Ananas'},
140+
{id: 5, name: 'Ðrone'}
141+
])
142+
});
143+
144+
it("should fire onSortChange event after sorting input value changed", (done)=> {
145+
datatable.onSortChange.subscribe((event: SortEvent)=> {
146+
expect(event.sortBy).toEqual("id");
147+
expect(event.sortOrder).toEqual("desc");
148+
done();
149+
});
150+
datatable.ngDoCheck();
151+
datatable.sortBy = "id";
152+
datatable.sortOrder = "desc";
153+
datatable.ngOnChanges({
154+
sortBy: new SimpleChange(null, datatable.sortBy),
155+
sortOrder: new SimpleChange(null, datatable.sortOrder)
156+
});
157+
datatable.ngDoCheck();
158+
159+
});
160+
161+
it("should set sortOrder to 'asc' if not provided", (done)=> {
162+
datatable.onSortChange.subscribe((event: SortEvent)=> {
163+
expect(event.sortBy).toEqual("id");
164+
expect(event.sortOrder).toEqual("asc");
165+
done();
166+
});
167+
datatable.ngDoCheck();
168+
datatable.sortBy = "id";
169+
datatable.ngOnChanges({
170+
sortBy: new SimpleChange(null, datatable.sortBy)
171+
});
172+
datatable.ngDoCheck();
173+
expect(datatable.sortOrder).toEqual("asc");
174+
});
175+
176+
it("should set sortOrder to 'asc' if provided something else than 'asc' or 'desc'", (done)=> {
177+
datatable.onSortChange.subscribe((event: SortEvent)=> {
178+
expect(event.sortBy).toEqual("id");
179+
expect(event.sortOrder).toEqual("asc");
180+
done();
181+
});
182+
datatable.ngDoCheck();
183+
datatable.sortBy = "id";
184+
datatable.sortOrder = "bulb";
185+
datatable.ngOnChanges({
186+
sortBy: new SimpleChange(null, datatable.sortBy),
187+
sortOrder: new SimpleChange(null, datatable.sortOrder)
188+
});
189+
datatable.ngDoCheck();
190+
expect(datatable.sortOrder).toEqual("asc");
191+
expect(datatable.data).toEqual([
192+
{id: 1, name: 'Duck'},
193+
{id: 2, name: 'ącki'},
194+
{id: 3, name: 'banana'},
195+
{id: 4, name: 'Ananas'},
196+
{id: 5, name: 'Ðrone'}
197+
]);
198+
});
199+
200+
it("shouldn't change order when only order provided", (done)=> {
201+
done();
202+
datatable.onSortChange.subscribe(()=> {
203+
done.fail("OnSortChange shouldn't been fired");
204+
});
205+
datatable.ngDoCheck();
206+
datatable.sortOrder = "desc";
207+
datatable.ngOnChanges({sortOrder: new SimpleChange(null, datatable.sortOrder)});
208+
datatable.ngDoCheck();
209+
expect(datatable.data).toEqual(datatable.inputData);
210+
});
211+
212+
it("should call output event when sorting changed", (done)=> {
213+
datatable.ngDoCheck();
214+
datatable.sortByChange.switchMap((sortBy: string)=> {
215+
expect(sortBy).toEqual("id");
216+
return datatable.sortOrderChange;
217+
}).subscribe((sortOrder: string)=> {
218+
expect(sortOrder).toEqual("desc");
219+
done();
220+
});
221+
222+
datatable.setSort("id", "desc");
223+
});
224+
225+
it("shouldn't call output event when sortOrder fixed", (done)=> {
226+
datatable.ngDoCheck();
227+
datatable.sortOrderChange.subscribe(()=> {
228+
done.fail("Shouldn't call sortOrderChange");
229+
});
230+
done();
231+
datatable.sortOrder = "bulb";
232+
datatable.ngOnChanges({sortOrder: new SimpleChange(null, datatable.sortOrder)});
233+
datatable.ngDoCheck();
234+
});
235+
// Wywołanie outputa gdy zmiana z innej strony
236+
126237
it("shouldn't refresh data when set page with same settings", ()=> {
127238
datatable.setSort("name", "asc");
128239
datatable.ngDoCheck();

‎src/DataTable.ts

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import {
22
Directive, Input, EventEmitter, SimpleChange, OnChanges, DoCheck, IterableDiffers,
3-
IterableDiffer
3+
IterableDiffer, Output
44
} from "@angular/core";
55
import * as _ from "lodash";
6+
import {ReplaySubject} from "rxjs/Rx";
67

78
export interface SortEvent {
89
sortBy: string|string[];
@@ -25,11 +26,13 @@ export interface DataEvent {
2526
})
2627
export class DataTable implements OnChanges, DoCheck {
2728

29+
private diff: IterableDiffer;
2830
@Input("mfData") public inputData: any[] = [];
2931

30-
private sortBy: string|string[] = "";
31-
private sortOrder = "asc";
32-
private diff: IterableDiffer;
32+
@Input("mfSortBy") public sortBy: string|string[] = "";
33+
@Input("mfSortOrder") public sortOrder = "asc";
34+
@Output("mfSortByChange") public sortByChange = new EventEmitter<string|string[]>();
35+
@Output("mfSortOrderChange") public sortOrderChange = new EventEmitter<string>();
3336

3437
@Input("mfRowsOnPage") public rowsOnPage = 1000;
3538
@Input("mfActivePage") public activePage = 1;
@@ -38,7 +41,7 @@ export class DataTable implements OnChanges, DoCheck {
3841

3942
public data: any[];
4043

41-
public onSortChange = new EventEmitter<SortEvent>();
44+
public onSortChange = new ReplaySubject<SortEvent>(1);
4245
public onPageChange = new EventEmitter<PageEvent>();
4346

4447
public constructor(private differs: IterableDiffers) {
@@ -52,9 +55,11 @@ export class DataTable implements OnChanges, DoCheck {
5255
public setSort(sortBy: string|string[], sortOrder: string): void {
5356
if (this.sortBy !== sortBy || this.sortOrder !== sortOrder) {
5457
this.sortBy = sortBy;
55-
this.sortOrder = sortOrder;
58+
this.sortOrder = _.includes(["asc","desc"], sortOrder) ? sortOrder : "asc";
5659
this.mustRecalculateData = true;
57-
this.onSortChange.emit({sortBy: sortBy, sortOrder: sortOrder});
60+
this.onSortChange.next({sortBy: sortBy, sortOrder: sortOrder});
61+
this.sortByChange.emit(this.sortBy);
62+
this.sortOrderChange.emit(this.sortOrder);
5863
}
5964
}
6065

@@ -94,11 +99,21 @@ export class DataTable implements OnChanges, DoCheck {
9499
}
95100

96101
public ngOnChanges(changes: {[key: string]: SimpleChange}): any {
97-
if(changes["rowsOnPage"]) {
102+
if (changes["rowsOnPage"]) {
98103
this.rowsOnPage = changes["rowsOnPage"].previousValue;
99104
this.setPage(this.activePage, changes["rowsOnPage"].currentValue);
100105
this.mustRecalculateData = true;
101106
}
107+
if (changes["sortBy"] || changes["sortOrder"]) {
108+
if (!_.includes(["asc", "desc"], this.sortOrder)) {
109+
console.warn("angular2-datatable: value for input mfSortOrder must be one of ['asc', 'desc'], but is:", this.sortOrder);
110+
this.sortOrder = "asc";
111+
}
112+
if (this.sortBy) {
113+
this.onSortChange.next({sortBy: this.sortBy, sortOrder: this.sortOrder});
114+
}
115+
this.mustRecalculateData = true;
116+
}
102117
if (changes["inputData"]) {
103118
this.inputData = changes["inputData"].currentValue || [];
104119
this.recalculatePage();
@@ -108,7 +123,7 @@ export class DataTable implements OnChanges, DoCheck {
108123

109124
public ngDoCheck(): any {
110125
let changes = this.diff.diff(this.inputData);
111-
if(changes) {
126+
if (changes) {
112127
this.recalculatePage();
113128
this.mustRecalculateData = true;
114129
}
@@ -137,7 +152,7 @@ export class DataTable implements OnChanges, DoCheck {
137152
private caseInsensitiveIteratee(sortBy: string) {
138153
return (row: any): any => {
139154
var value = row;
140-
for (let sortByProperty of sortBy.split('.')){
155+
for (let sortByProperty of sortBy.split('.')) {
141156
value = value[sortByProperty];
142157
}
143158
if (value && typeof value === 'string' || value instanceof String) {

0 commit comments

Comments
 (0)