blame | history | patch | commit | commitdiff
rsanchez
2017-03-15 68bfeadaca5c3af78a9884614dfec7a188454a2f 
 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>
586       </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>
6260           </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>