Skip to content

Commit 7da0254

Browse files
ggmodggmod
committed
demo components
1 parent 02b2eca commit 7da0254

17 files changed

+427
-5
lines changed

‎app/app.component.css

Whitespace-only changes.

‎app/app.component.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div style="padding: 25px">
2+
<data-table-demo-1></data-table-demo-1>
3+
<!--<data-table-demo-1-remote></data-table-demo-1-remote>-->
4+
<data-table-demo-2></data-table-demo-2>
5+
<data-table-demo-3></data-table-demo-3>
6+
</div>

‎app/app.component.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import { Component } from '@angular/core';
22

3+
34
@Component({
4-
selector: 'my-app',
5-
template: '<h1>My First Angular 2 App</h1>'
5+
selector: 'my-app',
6+
templateUrl: 'app/app.component.html',
7+
styleUrls: ['app/app.component.css']
68
})
7-
export class AppComponent { }
9+
export class AppComponent {
10+
11+
}

‎app/app.module.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
3+
import { CommonModule } from '@angular/common';
4+
import { FormsModule } from '@angular/forms';
35

46
import { AppComponent } from './app.component';
7+
import { DataTableModule } from 'ng2-data-table';
8+
9+
import { DataTableDemo1 } from './demo1/data-table-demo1';
10+
import { DataTableDemo2 } from './demo2/data-table-demo2';
11+
import { DataTableDemo3 } from './demo3/data-table-demo3';
12+
import { DataTableDemo1Remote } from './demo1/data-table-demo1-remote';
513

614
@NgModule({
7-
imports: [ BrowserModule ],
8-
declarations: [ AppComponent ],
15+
imports: [ BrowserModule, CommonModule, FormsModule, DataTableModule ],
16+
declarations: [ AppComponent, DataTableDemo1, DataTableDemo2, DataTableDemo3, DataTableDemo1Remote ],
917
bootstrap: [ AppComponent ]
1018
})
1119
export class AppModule { }

‎app/demo1/data-table-demo1-data.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
export default [
2+
{ "name": "Aaron 2Moore", "email": "Heath44@hotmail.com", "jobTitle": "Regional Configuration Producer", "active": true, "phoneNumber": "611-898-6201", "date": "2015-11-06T07:21:25.510Z" },
3+
{ "name": "Yvonne Conroy Mrs.", "email": "Gideon9@yahoo.com", "jobTitle": "Global Mobility Orchestrator", "active": false, "phoneNumber": "115-850-0969", "date": "2014-12-20T00:48:40.276Z" },
4+
{ "name": "Laron Padberg", "email": "Laney_Huels@hotmail.com", "jobTitle": "Senior Directives Supervisor", "active": false, "phoneNumber": "632-654-3034", "date": "2015-09-29T04:33:38.544Z" },
5+
{ "name": "Dr. Maryam Spinka", "email": "Aletha.Labadie@hotmail.com", "jobTitle": "Dynamic Mobility Associate", "active": true, "phoneNumber": "547-345-0067", "date": "2015-09-23T01:13:39.320Z" },
6+
{ "name": "Kiley Baumbach", "email": "Rogelio24@hotmail.com", "jobTitle": "Principal Metrics Orchestrator", "active": true, "phoneNumber": "958-524-5164", "date": "2014-12-05T23:39:27.340Z" },
7+
{ "name": "Hollis MacGyver", "email": "Yazmin.Heidenreich97@gmail.com", "jobTitle": "Direct Markets Assistant", "active": true, "phoneNumber": "603-607-3241", "date": "2015-02-12T10:40:52.977Z" },
8+
{ "name": "Axel McLaughlin", "email": "Deon_Heaney@gmail.com", "jobTitle": "Forward Mobility Architect", "active": false, "phoneNumber": "983-639-0705", "date": "2015-03-01T02:28:26.030Z" },
9+
{ "name": "Ricardo Botsford", "email": "Melisa73@yahoo.com", "jobTitle": "Direct Quality Consultant", "active": true, "phoneNumber": "408-082-9480", "date": "2015-01-31T03:41:54.611Z" },
10+
{ "name": "Corbin Funk Mrs.", "email": "Marjory.Morissette51@gmail.com", "jobTitle": "Human Configuration Manager", "active": true, "phoneNumber": "386-937-8683", "date": "2014-12-05T15:07:36.843Z" },
11+
{ "name": "Rosalind Paucek", "email": "Ivy_Stanton@gmail.com", "jobTitle": "Future Creative Supervisor", "active": true, "phoneNumber": "977-661-7403", "date": "2015-06-10T17:42:38.644Z" },
12+
{ "name": "Henderson Moore", "email": "Randi_Corkery@hotmail.com", "jobTitle": "Internal Accountability Director", "active": true, "phoneNumber": "078-101-6377", "date": "2015-09-26T05:14:34.913Z" },
13+
{ "name": "Kelli Schoen", "email": "Reva.Kiehn54@yahoo.com", "jobTitle": "National Accountability Architect", "active": false, "phoneNumber": "654-591-6561", "date": "2015-05-04T06:50:37.482Z" },
14+
{ "name": "Kenna Fritsch", "email": "Wilburn2@gmail.com", "jobTitle": "Legacy Response Administrator", "active": true, "phoneNumber": "790-480-2859", "date": "2015-10-10T23:37:05.867Z" },
15+
{ "name": "Judge Marquardt", "email": "Letha_Champlin69@hotmail.com", "jobTitle": "Human Program Specialist", "active": true, "phoneNumber": "100-494-1787", "date": "2015-04-04T23:29:48.588Z" },
16+
{ "name": "Kurtis Hane", "email": "Mona.Gaylord47@yahoo.com", "jobTitle": "International Optimization Director", "active": false, "phoneNumber": "008-800-2959", "date": "2014-12-04T21:09:50.722Z" },
17+
{ "name": "Nicolette Lind", "email": "Thurman30@yahoo.com", "jobTitle": "Legacy Marketing Facilitator", "active": true, "phoneNumber": "007-908-2460", "date": "2015-06-22T08:11:57.381Z" },
18+
{ "name": "Idella Green", "email": "Fernando_Ward@yahoo.com", "jobTitle": "Dynamic Division Orchestrator", "active": false, "phoneNumber": "147-865-1578", "date": "2015-02-12T23:00:31.283Z" },
19+
{ "name": "Mackenzie Bartell", "email": "Price25@yahoo.com", "jobTitle": "National Directives Associate", "active": false, "phoneNumber": "235-649-0980", "date": "2015-06-24T20:21:51.356Z" },
20+
{ "name": "Mose Kohler", "email": "Malika56@hotmail.com", "jobTitle": "Lead Implementation Executive", "active": true, "phoneNumber": "614-886-4868", "date": "2015-03-04T13:05:23.698Z" },
21+
{ "name": "Cielo Kuphal", "email": "Jude_Terry24@gmail.com", "jobTitle": "Dynamic Division Analyst", "active": false, "phoneNumber": "590-976-7492", "date": "2015-06-02T20:52:32.664Z" },
22+
{ "name": "Haleigh Stokes", "email": "Belle_Herman64@yahoo.com", "jobTitle": "Global Intranet Executive", "active": false, "phoneNumber": "418-255-9365", "date": "2015-04-10T00:32:10.283Z" },
23+
{ "name": "Tyrese Walter", "email": "Garland.Veum52@hotmail.com", "jobTitle": "Senior Web Liason", "active": false, "phoneNumber": "041-555-9831", "date": "2015-08-18T20:05:08.839Z" },
24+
{ "name": "Barney Shields", "email": "Anika27@gmail.com", "jobTitle": "District Web Administrator", "active": true, "phoneNumber": "379-438-0217", "date": "2015-06-01T09:28:46.778Z" },
25+
{ "name": "Favian Abbott Miss", "email": "Palma_Little@hotmail.com", "jobTitle": "Lead Implementation Facilitator", "active": false, "phoneNumber": "642-808-5400", "date": "2015-08-09T07:38:06.588Z" },
26+
{ "name": "Carissa Kunze", "email": "Merl_Frami@yahoo.com", "jobTitle": "Regional Division Technician", "active": true, "phoneNumber": "949-983-0342", "date": "2015-11-05T08:09:09.463Z" }
27+
]

‎app/demo1/data-table-demo1-remote-service.ts

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Injectable } from '@angular/core';
2+
import { Http, Response } from '@angular/http';
3+
import { DataTableParams } from 'ng2-data-table';
4+
import 'rxjs/add/operator/toPromise';
5+
6+
7+
const BASE_URL = 'http://localhost:3000';
8+
9+
function paramsToQueryString(params: DataTableParams) {
10+
let result = [];
11+
12+
if (params.offset != null) {
13+
result.push(['_start', params.offset]);
14+
}
15+
if (params.limit != null) {
16+
result.push(['_limit', params.limit]);
17+
}
18+
if (params.sortBy != null) {
19+
result.push(['_sort', params.sortBy]);
20+
}
21+
if (params.sortAsc != null) {
22+
result.push(['_order', params.sortAsc ? 'ASC' : 'DESC']);
23+
}
24+
25+
return result.map(param => param.join('=')).join('&');
26+
}
27+
28+
29+
@Injectable()
30+
export class RemoteService {
31+
32+
constructor (private http: Http) {}
33+
34+
query(params: DataTableParams) {
35+
return this.http.get(BASE_URL + '/people?' + paramsToQueryString(params)).toPromise()
36+
.then((resp: Response) => ({
37+
items: resp.json(),
38+
count: Number(resp.headers.get('X-Total-Count'))
39+
}));
40+
}
41+
}

‎app/demo1/data-table-demo1-remote.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Component } from '@angular/core';
2+
import { RemoteService } from './data-table-demo1-remote-service';
3+
4+
5+
@Component({
6+
selector: 'data-table-demo-1-remote',
7+
providers: [RemoteService],
8+
templateUrl: 'app/demo1/data-table-demo1.html',
9+
styleUrls: ['app/demo1/data-table-demo1.css']
10+
})
11+
export class DataTableDemo1Remote {
12+
13+
items = [];
14+
itemCount = 0;
15+
16+
constructor(private remoteService: RemoteService) {}
17+
18+
reloadItems(params) {
19+
this.remoteService.query(params).then(result => {
20+
this.items = result.items;
21+
this.itemCount = result.count;
22+
});
23+
}
24+
}

‎app/demo1/data-table-demo1.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
:host /deep/ .data-table-row {
3+
cursor: pointer;
4+
-webkit-user-select: none;
5+
-moz-user-select: none;
6+
-ms-user-select: none;
7+
user-select: none;
8+
}

‎app/demo1/data-table-demo1.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<div style="margin: auto; max-width: 1000px; margin-bottom: 50px;">
2+
<data-table id="persons-grid"
3+
headerTitle="Employees"
4+
[items]="items"
5+
[itemCount]="itemCount"
6+
(reload)="reloadItems($event)"
7+
8+
(rowClick)="rowClick($event)"
9+
(rowDoubleClick)="rowDoubleClick($event)"
10+
[rowTooltip]="rowTooltip"
11+
>
12+
<data-table-column
13+
[property]="'name'"
14+
[header]="'Name'"
15+
[sortable]="true"
16+
[resizable]="true">
17+
</data-table-column>
18+
<data-table-column
19+
[property]="'date'"
20+
[header]="'Date'"
21+
[sortable]="true">
22+
<template #dataTableCell let-item="item">
23+
<span>{{item.date | date:'yyyy-MM-dd'}}</span>
24+
</template>
25+
</data-table-column>
26+
<data-table-column
27+
property="phoneNumber"
28+
header="Phone number"
29+
width="150px">
30+
</data-table-column>
31+
<data-table-column
32+
[property]="'jobTitle'"
33+
[header]="'Job title'"
34+
[visible]="false">
35+
</data-table-column>
36+
<data-table-column
37+
[property]="'active'"
38+
[header]="'Active'"
39+
[width]="100"
40+
[resizable]="true">
41+
<template #dataTableHeader let-item="item">
42+
<span style="color: rgb(232, 0, 0)">Active</span>
43+
</template>
44+
<template #dataTableCell let-item="item">
45+
<span style="color: grey">
46+
<span class="glyphicon glyphicon-ok" *ngIf="item.active"></span>
47+
<span class="glyphicon glyphicon-remove" *ngIf="!item.active"></span>
48+
</span>
49+
</template>
50+
</data-table-column>
51+
</data-table>
52+
</div>

‎app/demo1/data-table-demo1.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Component } from '@angular/core';
2+
import { DataTableResource } from 'ng2-data-table';
3+
import persons from './data-table-demo1-data';
4+
5+
6+
@Component({
7+
selector: 'data-table-demo-1',
8+
providers: [],
9+
templateUrl: 'app/demo1/data-table-demo1.html',
10+
styleUrls: ['app/demo1/data-table-demo1.css']
11+
})
12+
export class DataTableDemo1 {
13+
14+
itemResource = new DataTableResource(persons);
15+
items = [];
16+
itemCount = 0;
17+
18+
constructor() {
19+
this.itemResource.count().then(count => this.itemCount = count);
20+
}
21+
22+
reloadItems(params) {
23+
this.itemResource.query(params).then(items => this.items = items);
24+
}
25+
26+
// special properties:
27+
28+
rowClick(rowEvent) {
29+
console.log('Clicked: ' + rowEvent.row.item.name);
30+
}
31+
32+
rowDoubleClick(rowEvent) {
33+
alert('Double clicked: ' + rowEvent.row.item.name);
34+
}
35+
36+
rowTooltip(item) { return item.jobTitle; }
37+
}

0 commit comments

Comments
 (0)