From 68bfeadaca5c3af78a9884614dfec7a188454a2f Mon Sep 17 00:00:00 2001
From: rsanchez <rsanchez@curisit.net>
Date: Wed, 15 Mar 2017 17:44:12 +0000
Subject: [PATCH] #3527 fix - Changes on lsting layout

---
 securis/src/main/webapp/src/app/license.list.component.html |  140 +++++++++++++++++++++++-----------------------
 1 files changed, 71 insertions(+), 69 deletions(-)

diff --git a/securis/src/main/webapp/src/app/license.list.component.html b/securis/src/main/webapp/src/app/license.list.component.html
index ac3b35e..9bab9a4 100644
--- a/securis/src/main/webapp/src/app/license.list.component.html
+++ b/securis/src/main/webapp/src/app/license.list.component.html
@@ -1,71 +1,73 @@
-<md-toolbar role="toolbar" class="mat-secondary">
-  <span class="push-left-sm">
-    <button md-icon-button (click)="goBack" color="accent">
-        <md-icon class="md-36">arrow_back</md-icon>
-    </button>
-      <span class="md-title" i18n>Licenses for pack</span>: {{pack?.code}}
-  </span>
-  <span class="push-left-sm" *ngIf="filteredItems < data.length">
-      <span class="md-body-1">{{filteredItems}} of {{data.length}} packs filtered</span>
-  </span>
-  <td-search-box #searchBox class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex>
-  </td-search-box>
-  <button md-mini-fab color="accent" (click)="createLicense()">
-      <md-icon>add</md-icon>
-    </button>
-  <md-toolbar-row *ngIf="!!pack">
-    <md-chip-list flex="80" style="margin-left: 70px;">
-      <md-chip selected [mdTooltip]="$L.get('field.application_name')" color="primary">{{pack.application_name}} </md-chip>
-      <md-chip selected [mdTooltip]="$L.get('field.organization_id')" color="accent">{{pack.organization_name}} </md-chip>
-      <md-chip selected [mdTooltip]="$L.get('field.license_type_id')" color="accent">{{pack.licensetype_code}} </md-chip>
-      <md-chip selected [mdTooltip]="$L.get('field.num_available')" color="accent">{{pack.num_available}} </md-chip>
-    </md-chip-list>
-  </md-toolbar-row>
-</md-toolbar>
-<md-divider></md-divider>
-<div layout="row" layout-align="center center">
-  <div flex="80" layout="column" layout-align="end center" >
-<td-data-table 
-  [data]="filteredData" 
-  [columns]="columns" 
-  [sortable]="true"
-  [sortBy]="sortBy"
-  (sortChange)="sort($event)"
-  style="width: 100%">
-  <template tdDataTableTemplate="status" let-row="row">
-    <div layout="row">
-      <md-chip-list>
-        <md-icon [style]="'color: ' + licenses.getStatusColor(row.status)">brightness_1</md-icon>&nbsp;<span>{{licenses.getStatusName(row.status)}}</span>
-      </md-chip-list>
-    </div>
-  </template>
-  <template tdDataTableTemplate="email" let-row="row">
-    <div layout="row">
-      <a [href]="'mailto:' + row.email + '?subject=SeCuris'">{{row.email}}</a>
-    </div>
-  </template>
-  <template tdDataTableTemplate="expiration_date" let-row="row">
-    <div layout="row">
-      <span [class]="isLicenseExpired(row) ? 'warn' : ''" >{{row.expiration_date | date: 'short'}}</span>
-    </div>
-  </template>
-  
-  <template tdDataTableTemplate="menu" let-row="row" let-index="index">
-    <div layout="row" layout-align="end center">
-      <button md-icon-button (click)="editLicense(row)" color="primary"><md-icon>edit</md-icon></button>
-      <button md-icon-button [mdMenuTriggerFor]="licenseMenu" aria-label="License menu">
-        <md-icon>more_vert</md-icon>
+<td-layout-card-over cardWidth="80">
+  <md-toolbar role="toolbar" class="mat-secondary">
+    <span class="push-left-sm">
+      <button md-icon-button (click)="goBack()" color="accent">
+          <md-icon>arrow_back</md-icon>
       </button>
-      <md-menu #licenseMenu="mdMenu">
-          <button md-menu-item *ngFor="let action of license_menu_options" (click)="licenseAction(action.command, row)" [disabled]="!isActionAvailable(row)">
-            <md-icon *ngIf="!!action.icon">{{ action.icon }}</md-icon> {{ action.name }}
+        <span class="md-title" i18n>Licenses for pack</span>: {{pack?.code}}
+    </span>
+    <span class="push-left-sm" *ngIf="filteredItems < data.length">
+        <span class="md-body-1">{{filteredItems}} of {{data.length}} packs filtered</span>
+    </span>
+    <td-search-box #searchBox class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex>
+    </td-search-box>
+    <button md-mini-fab color="accent" (click)="createLicense()">
+        <md-icon>add</md-icon>
+      </button>
+    <md-toolbar-row *ngIf="!!pack">
+      <md-chip-list flex="80" style="margin-left: 70px;">
+        <md-chip selected [mdTooltip]="$L.get('field.application_name')" color="primary">{{pack.application_name}} </md-chip>
+        <md-chip selected [mdTooltip]="$L.get('field.organization_id')" color="accent">{{pack.organization_name}} </md-chip>
+        <md-chip selected [mdTooltip]="$L.get('field.license_type_id')" color="accent">{{pack.licensetype_code}} </md-chip>
+        <md-chip selected [mdTooltip]="$L.get('field.num_available')" color="accent">{{pack.num_available}} </md-chip>
+      </md-chip-list>
+    </md-toolbar-row>
+  </md-toolbar>
+  <div flex layout="column" layout-align="center end" >
+    <td-data-table 
+      [data]="filteredData" 
+      [columns]="columns" 
+      [sortable]="true"
+      [sortBy]="sortBy"
+      (sortChange)="sort($event)"
+      style="width: 100%">
+      <template tdDataTableTemplate="code" let-row="row" let-value="value">
+        <div layout="row" layout-align="start center">
+          <span style="white-space: nowrap">{{value}}</span>
+        </div>
+      </template>
+      <template tdDataTableTemplate="status" let-row="row">
+        <div layout="row" layout-align="start center">
+            <md-icon [style.color]="licenses.getStatusColor(row.status)">brightness_1</md-icon>&nbsp;<span>{{licenses.getStatusName(row.status)}}</span>
+        </div>
+      </template>
+      <template tdDataTableTemplate="email" let-row="row">
+        <div layout="row">
+          <a md-button color="primary" [href]="'mailto:' + row.email + '?subject=SeCuris'">{{row.email}}</a>
+        </div>
+      </template>
+      <template tdDataTableTemplate="expiration_date" let-row="row">
+        <div layout="row">
+          <span [class.expired]="isLicenseExpired(row)" >{{row.expiration_date | date: 'mediumDate'}}</span>
+        </div>
+      </template>
+      
+      <template tdDataTableTemplate="menu" let-row="row" let-index="index">
+        <div layout="row" layout-align="end center">
+          <button md-icon-button (click)="editLicense(row)" color="primary"><md-icon>edit</md-icon></button>
+          <button md-icon-button [mdMenuTriggerFor]="licenseMenu" aria-label="License menu">
+            <md-icon>more_vert</md-icon>
           </button>
-      </md-menu>
-    </div>
-  </template>
-</td-data-table>
-<td-paging-bar #pagingBar [pageSizes]="[10, 20, 40]" [total]="filteredTotal" (change)="page($event)" align="end">
-  <span td-paging-bar-label hide-xs>Rows per page:</span> {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
-</td-paging-bar>
-</div>
-</div>
\ No newline at end of file
+          <md-menu #licenseMenu="mdMenu">
+              <button md-menu-item *ngFor="let action of license_menu_options" (click)="licenseAction(action.command, row)" [disabled]="!isActionAvailable(row)">
+                <md-icon *ngIf="!!action.icon">{{ action.icon }}</md-icon> {{ action.name }}
+              </button>
+          </md-menu>
+        </div>
+      </template>
+    </td-data-table>
+    <td-paging-bar #pagingBar [pageSizes]="[10, 20, 40]" [total]="filteredTotal" (change)="page($event)" [hidden]="pagingBar.total <= pagingBar.pageSize" >
+      <span i18n td-paging-bar-label hide-xs>Rows per page:</span> {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
+    </td-paging-bar>
+  </div>
+</td-layout-card-over>
\ No newline at end of file

--
Gitblit v1.3.2