#3527 feature - Added more features to angular2 version

rsanchez

2017-03-10 2762277c60db7df5ad3214b10a0dd93d4f2f1128

 securis/src/main/webapp/src/app/pack.list.component.ts
..
..
@@ -1,83 +1,119 @@
1
-import { Hero } from './hero';
1
+import { TdDataTableService, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumn } from '@covalent/core';
2
+import { IPageChangeEvent } from '@covalent/core';
2
3
 import { Component, AfterViewInit } from '@angular/core';
3
4
 import { TdMediaService } from '@covalent/core';
5
+import { PacksService } from './resources/packs';
4
6
 
5
-
6
-const HEROES: Hero[] = [
7
-  { id: 11, name: 'Mr. Nice' },
8
-  { id: 12, name: 'Narco' },
9
-  { id: 13, name: 'Bombasto' },
10
-  { id: 14, name: 'Celeritas' },
11
-  { id: 15, name: 'Magneta' },
12
-  { id: 16, name: 'RubberMan' },
13
-  { id: 17, name: 'Dynama' },
14
-  { id: 18, name: 'Dr IQ' },
15
-  { id: 19, name: 'Magma' },
16
-  { id: 20, name: 'Tornado' }
17
-];
7
+var pack_example = { 
8
+  id: 7,
9
+  code: 'DX250000',
10
+  status: 'AC',
11
+  application_name: 'Doxr',
12
+  created_by_id: 'admin',
13
+  created_by_name: 'Administrator  (admin)',
14
+  creation_timestamp: 1440597540000,
15
+  end_valid_date: 2051222400000,
16
+  init_valid_date: 1440547200000,
17
+  license_preactivation: true,
18
+  license_type_id: 5,
19
+  licensetype_code: 'DXL3',
20
+  metadata: 
21
+   [ { key: 'max_docs',
22
+       value: '250000',
23
+       readonly: true,
24
+       mandatory: true,
25
+       pack_id: 7 } ],
26
+  num_activations: 7,
27
+  num_available: -2,
28
+  num_creations: 7,
29
+  num_licenses: 5,
30
+  organization_id: 2,
31
+  organization_name: 'CurisTec',
32
+  preactivation_valid_period: 70,
33
+  renew_valid_period: 0,
34
+}
18
35
 
19
36
 @Component({
20
37
   selector: 'pack-list',
21
38
   templateUrl: 'src/app/pack.list.component.html'
22
39
 })
23
-
24
-  /*`
25
-   <h2>My Heroes</h2>
26
-    <ul class="heroes">
27
-    <li *ngFor="let hero of heroes"
28
-      [class.selected]="hero === selectedHero"
29
-      (click)="onSelect(hero)">
30
-      <span class="badge">{{hero.id}}</span> {{hero.name}}
31
-    </li>
32
-    </ul>
33
-<div *ngIf="selectedHero">
34
-  <my-hero-detail [hero]="selectedHero"></my-hero-detail>
35
-</div>
36
-
37
-    `*/
38
-
39
40
 export class PackListComponent implements AfterViewInit {
40
-  routes: Object[] = [
41
-      {
42
-        title: 'Dashboard',
43
-        route: '/',
44
-        icon: 'dashboard',
45
-      }, {
46
-        title: 'Product Dashboard',
47
-        route: '/',
48
-        icon: 'view_quilt',
49
-      }, {
50
-        title: 'Product Logs',
51
-        route: '/',
52
-        icon: 'receipt',
53
-      }, {
54
-        title: 'Manage Users',
55
-        route: '/',
56
-        icon: 'people',
57
-      }, {
58
-        title: 'Covalent Templates',
59
-        route: '/',
60
-        icon: 'view_module',
61
-      },
62
-    ];
41
+  data: any[] = [];
42
+  columns: ITdDataTableColumn[] = [
43
+    { name: 'code', label: 'Code', tooltip: 'License pack code' },
44
+    { name: 'application_name', label: 'App name' },
45
+    { name: 'licensetype_code', label: 'License type' },
46
+    { name: 'organization_name', label: 'Organization' },
47
+    { name: 'num_licenses', label: 'Lic', numeric: true, tooltip: 'Initial pack licenses' },
48
+    { name: 'num_available', label: 'Ava', numeric: true, tooltip: 'Available licenses' },
49
+  ];
63
50
 
64
-  title = 'Tour of Heroes';
65
-  heroes = HEROES;
66
-  selectedHero: Hero;
67
-  hero: Hero = {
68
-    id: 1,
69
-    name: 'Windstorm'
70
-  };
51
+  filteredData: any[] = this.data;
52
+  filteredTotal: number = this.data.length;
71
53
 
72
-  constructor(public media: TdMediaService) {
73
-                
54
+  searchTerm: string = '';
55
+  fromRow: number = 1;
56
+  currentPage: number = 1;
57
+  pageSize: number = 10;
58
+  sortBy: string = 'application_name';
59
+  sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending;
60
+  filteredItems = this.data.length;
61
+
62
+  constructor(private _dataTableService: TdDataTableService,
63
+    private media: TdMediaService,
64
+    private packs: PacksService) {
65
+      this.packs.get().subscribe(
66
+        list => {
67
+          this.data = list;
68
+          this.filter();
69
+        },
70
+        err => console.error(err)
71
+      );
74
72
   }
75
73
 
76
-  onSelect(hero: Hero): void {
77
-    this.selectedHero = hero;
74
+  ngOnInit(): void {
75
+    this.filter();
76
+  }
77
+
78
+  createPack() : void {
79
+    
80
+  }
81
+
82
+  sort(sortEvent: ITdDataTableSortChangeEvent): void {
83
+    this.sortBy = sortEvent.name;
84
+    this.sortOrder = sortEvent.order;
85
+    this.filter();
86
+  }
87
+
88
+  search(searchTerm: string): void {
89
+    this.searchTerm = searchTerm;
90
+    this.filter();
91
+  }
92
+
93
+  page(pagingEvent: IPageChangeEvent): void {
94
+    this.fromRow = pagingEvent.fromRow;
95
+    this.currentPage = pagingEvent.page;
96
+    this.pageSize = pagingEvent.pageSize;
97
+    this.filter();
98
+  }
99
+
100
+  loadData() {
101
+
102
+  }
103
+
104
+  filter(): void {
105
+    let newData: any[] = this.data;
106
+    newData = this._dataTableService.filterData(newData, this.searchTerm, true);
107
+    this.filteredTotal = newData.length;
108
+    this.filteredItems = newData.length;
109
+    newData = this._dataTableService.sortData(newData, this.sortBy, this.sortOrder);
110
+    newData = this._dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize);
111
+    this.filteredData = newData;
78
112
   }
79
113
 
80
114
   ngAfterViewInit(): void {
81
-      this.media.broadcast();
115
+    this.media.broadcast();
116
+
82
117
   }
83
118
 }
119
+