#3527 fix - Changes on lsting layout

rsanchez

2017-03-15 68bfeadaca5c3af78a9884614dfec7a188454a2f

#3527 fix - Changes on lsting layout

 securis/src/main/webapp/assets/securis.css
..
..
@@ -25,11 +25,6 @@
25
25
 	font-size: 0.8em;
26
26
 }
27
27
 
28
-.td-data-table-row > .td-data-table-cell:first-child,
29
-.td-data-table-row > .td-data-table-column:first-child {
30
-	max-width: 30px !important;
31
-}
32
-
33
28
 md-dialog-actions > .mat-button {
34
29
 	margin-left: 5px !important;
35
30
 	margin-right: 5px !important;
..
..
@@ -41,4 +36,12 @@
41
36
 
42
37
 input:read-only {
43
38
     color: rgba(0, 0, 0, 0.50) !important;
39
+}
40
+
41
+.expired {
42
+	color: darkred;
43
+}
44
+
45
+td-paging-bar[hidden] {
46
+	display: none !important;
44
47
 }
 securis/src/main/webapp/src/app/license.list.component.html
..
..
@@ -1,71 +1,73 @@
1
-<md-toolbar role="toolbar" class="mat-secondary">
2
-  <span class="push-left-sm">
3
-    <button md-icon-button (click)="goBack" color="accent">
4
-        <md-icon class="md-36">arrow_back</md-icon>
5
-    </button>
6
-      <span class="md-title" i18n>Licenses for pack</span>: {{pack?.code}}
7
-  </span>
8
-  <span class="push-left-sm" *ngIf="filteredItems < data.length">
9
-      <span class="md-body-1">{{filteredItems}} of {{data.length}} packs filtered</span>
10
-  </span>
11
-  <td-search-box #searchBox class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex>
12
-  </td-search-box>
13
-  <button md-mini-fab color="accent" (click)="createLicense()">
14
-      <md-icon>add</md-icon>
15
-    </button>
16
-  <md-toolbar-row *ngIf="!!pack">
17
-    <md-chip-list flex="80" style="margin-left: 70px;">
18
-      <md-chip selected [mdTooltip]="$L.get('field.application_name')" color="primary">{{pack.application_name}} </md-chip>
19
-      <md-chip selected [mdTooltip]="$L.get('field.organization_id')" color="accent">{{pack.organization_name}} </md-chip>
20
-      <md-chip selected [mdTooltip]="$L.get('field.license_type_id')" color="accent">{{pack.licensetype_code}} </md-chip>
21
-      <md-chip selected [mdTooltip]="$L.get('field.num_available')" color="accent">{{pack.num_available}} </md-chip>
22
-    </md-chip-list>
23
-  </md-toolbar-row>
24
-</md-toolbar>
25
-<md-divider></md-divider>
26
-<div layout="row" layout-align="center center">
27
-  <div flex="80" layout="column" layout-align="end center" >
28
-<td-data-table 
29
-  [data]="filteredData" 
30
-  [columns]="columns" 
31
-  [sortable]="true"
32
-  [sortBy]="sortBy"
33
-  (sortChange)="sort($event)"
34
-  style="width: 100%">
35
-  <template tdDataTableTemplate="status" let-row="row">
36
-    <div layout="row">
37
-      <md-chip-list>
38
-        <md-icon [style]="'color: ' + licenses.getStatusColor(row.status)">brightness_1</md-icon>&nbsp;<span>{{licenses.getStatusName(row.status)}}</span>
39
-      </md-chip-list>
40
-    </div>
41
-  </template>
42
-  <template tdDataTableTemplate="email" let-row="row">
43
-    <div layout="row">
44
-      <a [href]="'mailto:' + row.email + '?subject=SeCuris'">{{row.email}}</a>
45
-    </div>
46
-  </template>
47
-  <template tdDataTableTemplate="expiration_date" let-row="row">
48
-    <div layout="row">
49
-      <span [class]="isLicenseExpired(row) ? 'warn' : ''" >{{row.expiration_date | date: 'short'}}</span>
50
-    </div>
51
-  </template>
52
-  
53
-  <template tdDataTableTemplate="menu" let-row="row" let-index="index">
54
-    <div layout="row" layout-align="end center">
55
-      <button md-icon-button (click)="editLicense(row)" color="primary"><md-icon>edit</md-icon></button>
56
-      <button md-icon-button [mdMenuTriggerFor]="licenseMenu" aria-label="License menu">
57
-        <md-icon>more_vert</md-icon>
1
+<td-layout-card-over cardWidth="80">
2
+  <md-toolbar role="toolbar" class="mat-secondary">
3
+    <span class="push-left-sm">
4
+      <button md-icon-button (click)="goBack()" color="accent">
5
+          <md-icon>arrow_back</md-icon>
58
6
       </button>
59
-      <md-menu #licenseMenu="mdMenu">
60
-          <button md-menu-item *ngFor="let action of license_menu_options" (click)="licenseAction(action.command, row)" [disabled]="!isActionAvailable(row)">
61
-            <md-icon *ngIf="!!action.icon">{{ action.icon }}</md-icon> {{ action.name }}
7
+        <span class="md-title" i18n>Licenses for pack</span>: {{pack?.code}}
8
+    </span>
9
+    <span class="push-left-sm" *ngIf="filteredItems < data.length">
10
+        <span class="md-body-1">{{filteredItems}} of {{data.length}} packs filtered</span>
11
+    </span>
12
+    <td-search-box #searchBox class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex>
13
+    </td-search-box>
14
+    <button md-mini-fab color="accent" (click)="createLicense()">
15
+        <md-icon>add</md-icon>
16
+      </button>
17
+    <md-toolbar-row *ngIf="!!pack">
18
+      <md-chip-list flex="80" style="margin-left: 70px;">
19
+        <md-chip selected [mdTooltip]="$L.get('field.application_name')" color="primary">{{pack.application_name}} </md-chip>
20
+        <md-chip selected [mdTooltip]="$L.get('field.organization_id')" color="accent">{{pack.organization_name}} </md-chip>
21
+        <md-chip selected [mdTooltip]="$L.get('field.license_type_id')" color="accent">{{pack.licensetype_code}} </md-chip>
22
+        <md-chip selected [mdTooltip]="$L.get('field.num_available')" color="accent">{{pack.num_available}} </md-chip>
23
+      </md-chip-list>
24
+    </md-toolbar-row>
25
+  </md-toolbar>
26
+  <div flex layout="column" layout-align="center end" >
27
+    <td-data-table 
28
+      [data]="filteredData" 
29
+      [columns]="columns" 
30
+      [sortable]="true"
31
+      [sortBy]="sortBy"
32
+      (sortChange)="sort($event)"
33
+      style="width: 100%">
34
+      <template tdDataTableTemplate="code" let-row="row" let-value="value">
35
+        <div layout="row" layout-align="start center">
36
+          <span style="white-space: nowrap">{{value}}</span>
37
+        </div>
38
+      </template>
39
+      <template tdDataTableTemplate="status" let-row="row">
40
+        <div layout="row" layout-align="start center">
41
+            <md-icon [style.color]="licenses.getStatusColor(row.status)">brightness_1</md-icon>&nbsp;<span>{{licenses.getStatusName(row.status)}}</span>
42
+        </div>
43
+      </template>
44
+      <template tdDataTableTemplate="email" let-row="row">
45
+        <div layout="row">
46
+          <a md-button color="primary" [href]="'mailto:' + row.email + '?subject=SeCuris'">{{row.email}}</a>
47
+        </div>
48
+      </template>
49
+      <template tdDataTableTemplate="expiration_date" let-row="row">
50
+        <div layout="row">
51
+          <span [class.expired]="isLicenseExpired(row)" >{{row.expiration_date | date: 'mediumDate'}}</span>
52
+        </div>
53
+      </template>
54
+      
55
+      <template tdDataTableTemplate="menu" let-row="row" let-index="index">
56
+        <div layout="row" layout-align="end center">
57
+          <button md-icon-button (click)="editLicense(row)" color="primary"><md-icon>edit</md-icon></button>
58
+          <button md-icon-button [mdMenuTriggerFor]="licenseMenu" aria-label="License menu">
59
+            <md-icon>more_vert</md-icon>
62
60
           </button>
63
-      </md-menu>
64
-    </div>
65
-  </template>
66
-</td-data-table>
67
-<td-paging-bar #pagingBar [pageSizes]="[10, 20, 40]" [total]="filteredTotal" (change)="page($event)" align="end">
68
-  <span td-paging-bar-label hide-xs>Rows per page:</span> {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
69
-</td-paging-bar>
70
-</div>
71
-</div>
61
+          <md-menu #licenseMenu="mdMenu">
62
+              <button md-menu-item *ngFor="let action of license_menu_options" (click)="licenseAction(action.command, row)" [disabled]="!isActionAvailable(row)">
63
+                <md-icon *ngIf="!!action.icon">{{ action.icon }}</md-icon> {{ action.name }}
64
+              </button>
65
+          </md-menu>
66
+        </div>
67
+      </template>
68
+    </td-data-table>
69
+    <td-paging-bar #pagingBar [pageSizes]="[10, 20, 40]" [total]="filteredTotal" (change)="page($event)" [hidden]="pagingBar.total <= pagingBar.pageSize" >
70
+      <span i18n td-paging-bar-label hide-xs>Rows per page:</span> {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
71
+    </td-paging-bar>
72
+  </div>
73
+</td-layout-card-over>
 securis/src/main/webapp/src/app/license.list.component.ts
..
..
@@ -1,12 +1,13 @@
1
1
 import { LocaleService } from './common/i18n';
2
2
 import { ActivatedRoute, Router } from '@angular/router';
3
3
 import { MdDialog, MdDialogConfig } from '@angular/material';
4
-import { TdDataTableService, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumn } from '@covalent/core';
4
+import { TdDataTableService, TdPagingBarComponent, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumn } from '@covalent/core';
5
5
 import { IPageChangeEvent } from '@covalent/core';
6
-import { Component, AfterViewInit } from '@angular/core';
6
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
7
7
 import { TdMediaService } from '@covalent/core';
8
8
 import { LicensesService } from './resources/licenses';
9
9
 import { PacksService } from './resources/packs';
10
+import { Location } from '@angular/common';
10
11
 
11
12
 import { LicenseFormComponent } from './forms/license.form.component';
12
13
 
..
..
@@ -37,6 +38,8 @@
37
38
 })
38
39
 export class LicenseListComponent implements AfterViewInit {
39
40
   data: any[] = [];
41
+  @ViewChild('pagingBar') pagingBar : TdPagingBarComponent ;
42
+
40
43
   pack: any = null;
41
44
   columns: ITdDataTableColumn[] = [
42
45
     { name: 'code', label: 'Code', tooltip: 'License code' },
..
..
@@ -79,6 +82,7 @@
79
82
     private media: TdMediaService,
80
83
     private $L: LocaleService,
81
84
     private router: Router,
85
+    private location: Location,
82
86
     private route: ActivatedRoute,
83
87
     private dialog: MdDialog,
84
88
     private licenseForm: LicenseFormComponent,
..
..
@@ -105,6 +109,10 @@
105
109
       });
106
110
   }
107
111
 
112
+  goBack() : void {
113
+    this.location.back();
114
+  }
115
+
108
116
   isLicenseExpired(lic: any): boolean {
109
117
     return lic.expiration_date < (new Date().getTime());
110
118
   }
 securis/src/main/webapp/src/app/pack.list.component.html
..
..
@@ -1,57 +1,56 @@
1
-<md-toolbar role="toolbar" class="mat-secondary">
2
-  <span class="push-left-sm">
3
-      <span class="md-title" i18n>License Packs</span>
4
-  </span>
5
-  <span class="push-left-sm" *ngIf="filteredItems < data.length">
6
-      <span class="md-body-1">{{filteredItems}} of {{data.length}} packs filtered</span>
7
-  </span>
8
-  <td-search-box #searchBox class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex>
9
-  </td-search-box>
10
-  <button md-mini-fab color="accent" (click)="createPack()">
11
-      <md-icon>add</md-icon>
12
-    </button>
13
-</md-toolbar>
14
-<md-divider></md-divider>
15
-<div layout="row" layout-align="center center">
16
-  <div flex="80" layout="column" layout-align="end center" >
17
-<td-data-table 
18
-  [data]="filteredData" 
19
-  [columns]="columns" 
20
-  [sortable]="true"
21
-  [sortBy]="sortBy"
22
-  (sortChange)="sort($event)"
23
-  style="width: 100%">
24
-  <template tdDataTableTemplate="used_licenses" let-row="row">
25
-    <div layout="row">
26
-      <md-chip-list flex>
27
-        <md-chip selected [mdTooltip]="$L.get('field.num_licenses')" color="secondary" >{{row['num_licenses']}}</md-chip>
28
-        <md-chip selected [mdTooltip]="$L.get('field.num_available')" [color]="row['num_available'] > 0 ? 'primary': 'warn'">{{row['num_available']}}</md-chip>
29
-      </md-chip-list>
30
-    </div>
31
-  </template>
32
-  <template tdDataTableTemplate="code" let-row="row" let-value="value">
33
-    <div layout="row" layout-align="start center">
34
-      <span style="white-space: nowrap">{{value}}</span>
35
-    </div>
36
-  </template>
37
-  <template tdDataTableTemplate="menu" let-row="row" let-index="index">
38
-    <div layout="row" layout-align="end center">
39
-      <button md-icon-button (click)="editPack(row)" color="primary"><md-icon>edit</md-icon></button>
40
-      <button md-icon-button [mdMenuTriggerFor]="packMenu" aria-label="Pack menu">
41
-        <md-icon>more_vert</md-icon>
1
+<td-layout-card-over cardWidth="90">
2
+  <md-toolbar role="toolbar" class="mat-secondary">
3
+    <span class="push-left-sm">
4
+        <span class="md-title" i18n>Packs</span>
5
+    </span>
6
+    <span class="push-left-sm" *ngIf="filteredItems < data.length">
7
+        <span class="md-body-1">{{filteredItems}} of {{data.length}} packs filtered</span>
8
+    </span>
9
+    <td-search-box #searchBox class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex>
10
+    </td-search-box>
11
+    <button md-mini-fab color="accent" (click)="createPack()">
12
+        <md-icon>add</md-icon>
42
13
       </button>
43
-       
44
-      <md-menu #packMenu="mdMenu">
45
-          <button md-menu-item *ngFor="let action of pack_menu_options" (click)="packAction(action.command, row)" [disabled]="!isActionAvailable(row)">
46
-            <md-icon *ngIf="!!action.icon">{{ action.icon }}</md-icon> {{ action.name }}
14
+  </md-toolbar>
15
+ 	<div flex="84" layout-align="center end" layout="column">
16
+    <td-data-table 
17
+      [data]="filteredData" 
18
+      [columns]="columns" 
19
+      [sortable]="true"
20
+      [sortBy]="sortBy"
21
+      (sortChange)="sort($event)"
22
+      style="width: 100%">
23
+      <template tdDataTableTemplate="used_licenses" let-row="row">
24
+        <div layout="row">
25
+          <md-chip-list flex>
26
+            <md-chip selected [mdTooltip]="$L.get('field.num_licenses')" color="secondary" >{{row['num_licenses']}}</md-chip>
27
+            <md-chip selected [mdTooltip]="$L.get('field.num_available')" [color]="row['num_available'] > 0 ? 'primary': 'warn'">{{row['num_available']}}</md-chip>
28
+          </md-chip-list>
29
+        </div>
30
+      </template>
31
+      <template tdDataTableTemplate="code" let-row="row" let-value="value">
32
+        <div layout="row" layout-align="start center">
33
+          <span style="white-space: nowrap">{{value}}</span>
34
+        </div>
35
+      </template>
36
+      <template tdDataTableTemplate="menu" let-row="row" let-index="index">
37
+        <div layout="row" layout-align="end center">
38
+          <button md-icon-button (click)="editPack(row)" color="primary"><md-icon>edit</md-icon></button>
39
+          <button md-icon-button [mdMenuTriggerFor]="packMenu" aria-label="Pack menu">
40
+            <md-icon>more_vert</md-icon>
47
41
           </button>
48
-      </md-menu>
49
-      <button md-icon-button (click)="showLicenses(row)" color="accent"><md-icon>arrow_forward</md-icon></button>
50
-    </div>
51
-  </template>
52
-</td-data-table>
53
-<td-paging-bar #pagingBar [pageSizes]="[10, 20, 40]" [total]="filteredTotal" (change)="page($event)" align="end">
54
-  <span td-paging-bar-label hide-xs>Rows per page:</span> {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
55
-</td-paging-bar>
56
-</div>
57
-</div>
42
+          
43
+          <md-menu #packMenu="mdMenu">
44
+              <button md-menu-item *ngFor="let action of pack_menu_options" (click)="packAction(action.command, row)" [disabled]="!isActionAvailable(row)">
45
+                <md-icon *ngIf="!!action.icon">{{ action.icon }}</md-icon> {{ action.name }}
46
+              </button>
47
+          </md-menu>
48
+          <button md-icon-button (click)="showLicenses(row)" color="accent"><md-icon>arrow_forward</md-icon></button>
49
+        </div>
50
+      </template>
51
+    </td-data-table>
52
+    <td-paging-bar #pagingBar [pageSizes]="[10, 20, 40]" [total]="filteredTotal" (change)="page($event)" [hidden]="pagingBar.total <= pagingBar.pageSize">
53
+      <span td-paging-bar-label hide-xs>Rows per page:</span> {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
54
+    </td-paging-bar>
55
+  </div>
56
+</td-layout-card-over>
 securis/src/main/webapp/src/app/pack.list.component.ts
..
..
@@ -1,8 +1,14 @@
1
1
 import { Router, ActivatedRoute } from '@angular/router';
2
2
 import { MdDialog, MdDialogConfig } from '@angular/material';
3
-import { TdDataTableService, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumn } from '@covalent/core';
3
+import {
4
+    ITdDataTableColumn,
5
+    ITdDataTableSortChangeEvent,
6
+    TdDataTableService,
7
+    TdDataTableSortingOrder,
8
+    TdPagingBarComponent
9
+} from '@covalent/core';
4
10
 import { IPageChangeEvent } from '@covalent/core';
5
-import { Component, AfterViewInit } from '@angular/core';
11
+import { Component, ViewChild, AfterViewInit } from '@angular/core';
6
12
 import { TdMediaService } from '@covalent/core';
7
13
 import { PacksService } from './resources/packs';
8
14
 import { PackFormComponent } from './forms/pack.form.component';
..
..
@@ -49,6 +55,9 @@
49
55
 })
50
56
 export class PackListComponent implements AfterViewInit {
51
57
   data: any[] = [];
58
+  
59
+  @ViewChild('pagingBar') pagingBar : TdPagingBarComponent ;
60
+
52
61
   columns: ITdDataTableColumn[] = [
53
62
     { name: 'code', label: 'Code', tooltip: 'License pack code' },
54
63
     { name: 'application_name', label: 'App name' },
..
..
@@ -133,6 +142,7 @@
133
142
     this.sortBy = sortEvent.name === 'used_licenses' ? 'num_available' : sortEvent.name;
134
143
     this.sortOrder = sortEvent.order;
135
144
     this.filter();
145
+    console.log(this.pagingBar);
136
146
   }
137
147
 
138
148
   search(searchTerm: string): void {