Skip to content

Commit 170b856

Browse files
author
mariuszfoltak
committed
Refactor MfTable and add Paginator and DefaultPaginator
1 parent 227a1a9 commit 170b856

File tree

13 files changed

+324
-74
lines changed

13 files changed

+324
-74
lines changed

‎examples/systemjs/package.json‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,23 @@
66
"scripts": {
77
"watch": "rm -rf build && mkdir build && tsc -w",
88
"build": "rm -rf build && mkdir build && tsc || true",
9-
"start": "http-server -c-1 ."
9+
"start": "lite-server"
1010
},
1111
"author": "",
1212
"license": "ISC",
1313
"devDependencies": {
14+
"lite-server": "^2.1.0",
1415
"typescript": "1.8.7"
1516
},
1617
"dependencies": {
17-
"angular2": "2.0.0-beta.8",
18+
"angular2": "2.0.0-beta.11",
1819
"bootstrap": "^3.3.6",
19-
"es6-shim": "^0.33.3",
20-
"http-server": "^0.8.5",
20+
"es6-shim": "^0.35.0",
2121
"lodash": "^4.6.1",
2222
"mf-angular2-table": "0.0.1",
2323
"reflect-metadata": "0.1.2",
2424
"rxjs": "5.0.0-beta.2",
25-
"systemjs": "^0.19.9"
25+
"systemjs": "^0.19.9",
26+
"zone.js": "^0.6.4"
2627
}
2728
}

‎examples/systemjs/src/app.html‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
<div class="container">
22
<div class="col-xs-8 col-md-offset-2">
33

4+
<input [ngModel]="activePage" (ngModelChange)="activePage = toInt($event)"/>
5+
<input [ngModel]="rowsOnPage" (ngModelChange)="rowsOnPage = toInt($event)"/>
6+
47
<table class="table table-striped" [mfTable]="data" #mf="mfTable">
58
<thead>
69
<tr>
7-
<th><mfSort by="name">Name</mfSort></th>
8-
<th><mfSort by="email">Email</mfSort></th>
9-
<th><mfSort by="age">Age</mfSort></th>
10-
<th><mfSort by="city">City</mfSort></th>
10+
<th style="width: 20%"><mfDefaultSorter by="name">Name</mfDefaultSorter></th>
11+
<th style="width: 50%"><mfDefaultSorter by="email">Email</mfDefaultSorter></th>
12+
<th style="width: 10%"><mfDefaultSorter by="age">Age</mfDefaultSorter></th>
13+
<th style="width: 20%"><mfDefaultSorter by="city">City</mfDefaultSorter></th>
1114
</tr>
1215
</thead>
1316
<tbody>
@@ -18,7 +21,16 @@
1821
<td>{{item.city}}</td>
1922
</tr>
2023
</tbody>
24+
<tfoot>
25+
<tr>
26+
<td colspan="4">
27+
<mfDefaultPaginator [rowsOnPageSet]="[1,2,3,5,8,13,21,34]" [(rowsOnPage)]="rowsOnPage"
28+
[(activePage)]="activePage" #mbp></mfDefaultPaginator>
29+
</td>
30+
</tr>
31+
</tfoot>
2132
</table>
33+
<mfDefaultPaginator [rowsOnPageSet]="[1,2,3,5,8,13,21,34]" [mfTable]="mf"></mfDefaultPaginator>
2234

2335
</div>
2436
<div class="col-xs-6 col-md-offset-3">

‎examples/systemjs/src/app.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,21 @@ import {Component} from 'angular2/core';
22
import {bootstrap} from 'angular2/platform/browser';
33
import {DatePipe} from "angular2/common";
44
import {HTTP_PROVIDERS, Http} from "angular2/http";
5-
import {MfTable, MfSort} from 'mf-angular2-table/components';
5+
import {MfTable, MfDefaultSorter, MfDefaultPaginator} from 'mf-angular2-table/components';
66

77

88
@Component({
99
selector: 'app',
1010
templateUrl: 'src/app.html',
1111
providers: [HTTP_PROVIDERS],
12-
directives: [MfTable,MfSort],
12+
directives: [MfTable, MfDefaultSorter, MfDefaultPaginator],
1313
pipes: [DatePipe]
1414
})
1515
export class App {
1616

1717
private data = [];
18+
private activePage = 1;
19+
private rowsOnPage = 8;
1820

1921
constructor(private http: Http) {
2022
http.get("/src/data.json")
@@ -23,6 +25,10 @@ export class App {
2325
});
2426
}
2527

28+
private toInt(num:string) {
29+
return +num;
30+
}
31+
2632
}
2733

2834
bootstrap(App);

‎mf-angular2-table/components.d.ts‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎mf-angular2-table/components.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎mf-angular2-table/datatable.d.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export {DataTable, DataEvent, PageEvent, SortEvent} from './lib/DataTable';
2+
export {DefaultSorter} from './lib/DefaultSorter';
3+
export {Paginator} from './lib/Paginator';
4+
export {BootstrapPaginator} from './lib/BootstrapPaginator';
5+
6+
export const DataTableDirectives;

‎mf-angular2-table/datatable.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
var dataTable_directive = require('./lib/DataTable');
2+
var defaultSorter_directive = require('./lib/DefaultSorter');
3+
var paginator_component = require('./lib/Paginator');
4+
var bootstrapPaginator_component = require('./lib/BootstrapPaginator');
5+
6+
exports.DataTable = dataTable_directive.DataTable;
7+
exports.DataEvent = dataTable_directive.DataEvent;
8+
exports.PageEvent = dataTable_directive.PageEvent;
9+
exports.SortEvent = dataTable_directive.SortEvent;
10+
exports.DefaultSorter = defaultSorter_directive.DefaultSorter;
11+
exports.Paginator = paginator_component.Paginator;
12+
exports.BootstrapPaginator = bootstrapPaginator_component.BootstrapPaginator;
13+
14+
exports.DataTableDirectives = [
15+
dataTable_directive.DataTable,
16+
defaultSorter_directive.DefaultSorter,
17+
paginator_component.Paginator,
18+
bootstrapPaginator_component.BootstrapPaginator
19+
];

‎mf-angular2-table/src/BootstrapPaginator.ts‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import {Component, OnInit, Input, Output, EventEmitter} from "angular2/core";
2+
import {DataTable} from "./DataTable";
3+
import {Paginator} from "./Paginator";
4+
5+
@Component({
6+
selector: "mfBootstrapPaginator",
7+
template: `
8+
<mfPaginator #p [rowsOnPage]="rowsOnPage" (rowsOnPageChange)="changeRowsOnPage($event)" [mfTable]="mfTable"
9+
[activePage]="activePage" (activePageChange)="changeActivePage($event)">
10+
<nav class="pagination" *ngIf="p.lastPage>1">
11+
<li [class.disabled]="activePage <= 1" (click)="activePage = 1">
12+
<a href="#">&laquo;</a>
13+
</li>
14+
<li *ngIf="activePage > 4 && activePage + 1 > p.lastPage" (click)="activePage = activePage - 4">
15+
<a href="#">{{activePage-4}}</a>
16+
</li>
17+
<li *ngIf="activePage > 3 && activePage + 2 > p.lastPage" (click)="activePage = activePage - 3">
18+
<a href="#">{{activePage-3}}</a>
19+
</li>
20+
<li *ngIf="activePage > 2" (click)="activePage = activePage - 2">
21+
<a href="#">{{activePage-2}}</a>
22+
</li>
23+
<li *ngIf="activePage > 1" (click)="activePage = activePage - 1">
24+
<a href="#">{{activePage-1}}</a>
25+
</li>
26+
<li class="active">
27+
<a href="#">{{activePage}}</a>
28+
</li>
29+
<li *ngIf="activePage + 1 <= p.lastPage" (click)="activePage = activePage + 1">
30+
<a href="#">{{activePage+1}}</a>
31+
</li>
32+
<li *ngIf="activePage + 2 <= p.lastPage" (click)="activePage = activePage + 2">
33+
<a href="#">{{activePage+2}}</a>
34+
</li>
35+
<li *ngIf="activePage + 3 <= p.lastPage && activePage < 3" (click)="activePage = activePage + 3">
36+
<a href="#">{{activePage+3}}</a>
37+
</li>
38+
<li *ngIf="activePage + 4 <= p.lastPage && activePage < 2" (click)="activePage = activePage + 4">
39+
<a href="#">{{activePage+4}}</a>
40+
</li>
41+
<li [class.disabled]="activePage >= p.lastPage" (click)="activePage = p.lastPage">
42+
<a href="#">&raquo;</a>
43+
</li>
44+
</nav>
45+
<nav class="pagination pull-right">
46+
<li *ngFor="#rows of rowsOnPageSet" [class.active]="rowsOnPage===rows" (click)="changeRowsOnPage(rows)">
47+
<a href="#">{{rows}}</a>
48+
</li>
49+
</nav>
50+
</mfPaginator>
51+
`,
52+
directives: [[Paginator]]
53+
})
54+
export class BootstrapPaginator {
55+
@Input("rowsOnPageSet") private rowsOnPageSet = [];
56+
@Input("rowsOnPage") private rowsOnPage;
57+
@Input("activePage") private activePage = 1;
58+
@Input("mfTable") private mfTable: DataTable;
59+
60+
@Output("rowsOnPageChange") private onRowsPageChange = new EventEmitter<number>();
61+
@Output("activePageChange") private onActivePageChange = new EventEmitter<number>();
62+
63+
private addToActivePage(num:number):void {
64+
this.changeActivePage(this.activePage+num);
65+
}
66+
67+
private changeActivePage(num:number):void {
68+
this.activePage = num;
69+
this.onActivePageChange.emit(num);
70+
}
71+
72+
private changeRowsOnPage(num:number):void {
73+
this.rowsOnPage = num;
74+
this.onRowsPageChange.emit(num);
75+
}
76+
}

‎mf-angular2-table/src/DataTable.ts‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import {Directive, Input, EventEmitter, SimpleChange, OnChanges, DoCheck} from "angular2/core";
2+
3+
export interface SortEvent {
4+
sortBy: string;
5+
sortOrder: string
6+
}
7+
8+
export interface PageEvent {
9+
activePage: number;
10+
rowsOnPage: number;
11+
dataLength: number;
12+
}
13+
14+
export interface DataEvent {
15+
length: number;
16+
}
17+
18+
@Directive({
19+
selector: 'table[mfData]',
20+
exportAs: 'mfDataTable'
21+
})
22+
export class DataTable implements OnChanges, DoCheck {
23+
24+
@Input("mfData") private inputData:any[] = [];
25+
26+
private sortBy = "";
27+
private sortOrder = "asc";
28+
29+
private rowsOnPage = 1000;
30+
private activePage = 1;
31+
32+
private mustRecalculateData = false;
33+
34+
public data: any[];
35+
36+
public onDataChange = new EventEmitter<DataEvent>();
37+
public onSortChange = new EventEmitter<SortEvent>();
38+
public onPageChange = new EventEmitter<PageEvent>();
39+
40+
public getSort():SortEvent {
41+
return {sortBy: this.sortBy, sortOrder: this.sortOrder};
42+
}
43+
44+
public setSort(sortBy:string, sortOrder:string):void {
45+
if (this.sortBy !== sortBy || this.sortOrder !== sortOrder) {
46+
this.sortBy = sortBy;
47+
this.sortOrder = sortOrder;
48+
this.mustRecalculateData = true;
49+
this.onSortChange.emit({sortBy: sortBy, sortOrder: sortOrder});
50+
}
51+
}
52+
53+
public getPage():PageEvent {
54+
return {activePage: this.activePage, rowsOnPage: this.rowsOnPage, dataLength: this.inputData.length};
55+
}
56+
57+
public setPage(activePage:number, rowsOnPage:number):void {
58+
if (this.rowsOnPage !== rowsOnPage || this.activePage !== activePage) {
59+
this.rowsOnPage = rowsOnPage;
60+
this.activePage = activePage;
61+
this.mustRecalculateData = true;
62+
this.onPageChange.emit({activePage: this.activePage, rowsOnPage: this.rowsOnPage, dataLength: this.inputData.length});
63+
}
64+
}
65+
66+
public ngOnChanges(changes:{[key:string]:SimpleChange}):any {
67+
if (changes["inputData"]) {
68+
this.onDataChange.emit({length: changes["inputData"].currentValue.length});
69+
this.mustRecalculateData = true;
70+
}
71+
}
72+
73+
public ngDoCheck():any {
74+
if (this.mustRecalculateData) {
75+
this.fillData();
76+
this.mustRecalculateData = false;
77+
}
78+
}
79+
80+
private fillData():void {
81+
this.activePage = this.activePage || 1;
82+
this.rowsOnPage = this.rowsOnPage || 1000;
83+
84+
let offset = (this.activePage - 1) * this.rowsOnPage;
85+
let data = this.inputData;
86+
data = _.orderBy(data, [this.sortBy], [this.sortOrder]);
87+
data = _.slice(data, offset, offset + this.rowsOnPage);
88+
this.data = data;
89+
}
90+
}

‎mf-angular2-table/src/DefaultSorter.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import {Component, Input} from "angular2/core";
2+
import {DataTable, SortEvent} from "./DataTable";
3+
4+
@Component({
5+
selector: "mfDefaultSorter",
6+
template: `
7+
<a href="#" (click)="sort()" class="text-nowrap">
8+
<ng-content></ng-content>
9+
<span *ngIf="isSortedByMeAsc" class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span>
10+
<span *ngIf="isSortedByMeDesc" class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
11+
</a>`
12+
})
13+
export class DefaultSorter {
14+
@Input("by") private sortBy: string;
15+
16+
private isSortedByMeAsc: boolean = false;
17+
private isSortedByMeDesc: boolean = false;
18+
19+
public constructor(private mfTable: DataTable) {
20+
mfTable.onSortChange.subscribe((event:SortEvent) => {
21+
this.isSortedByMeAsc = (event.sortBy === this.sortBy && event.sortOrder === "asc");
22+
this.isSortedByMeDesc = (event.sortBy === this.sortBy && event.sortOrder === "desc");
23+
})
24+
}
25+
26+
private sort() {
27+
if(this.isSortedByMeAsc) {
28+
this.mfTable.setSort(this.sortBy, "desc");
29+
} else {
30+
this.mfTable.setSort(this.sortBy, "asc");
31+
}
32+
}
33+
}

0 commit comments

Comments
 (0)