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.ts | 12 ++
securis/src/main/webapp/src/app/pack.list.component.html | 109 ++++++++++-----------
securis/src/main/webapp/src/app/license.list.component.html | 140 ++++++++++++++-------------
securis/src/main/webapp/src/app/pack.list.component.ts | 14 ++
securis/src/main/webapp/assets/securis.css | 13 +-
5 files changed, 155 insertions(+), 133 deletions(-)
diff --git a/securis/src/main/webapp/assets/securis.css b/securis/src/main/webapp/assets/securis.css
index 64749e5..80fe531 100644
--- a/securis/src/main/webapp/assets/securis.css
+++ b/securis/src/main/webapp/assets/securis.css
@@ -25,11 +25,6 @@
font-size: 0.8em;
}
-.td-data-table-row > .td-data-table-cell:first-child,
-.td-data-table-row > .td-data-table-column:first-child {
- max-width: 30px !important;
-}
-
md-dialog-actions > .mat-button {
margin-left: 5px !important;
margin-right: 5px !important;
@@ -41,4 +36,12 @@
input:read-only {
color: rgba(0, 0, 0, 0.50) !important;
+}
+
+.expired {
+ color: darkred;
+}
+
+td-paging-bar[hidden] {
+ display: none !important;
}
\ No newline at end of file
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> <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> <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
diff --git a/securis/src/main/webapp/src/app/license.list.component.ts b/securis/src/main/webapp/src/app/license.list.component.ts
index 2417192..2ffc546 100644
--- a/securis/src/main/webapp/src/app/license.list.component.ts
+++ b/securis/src/main/webapp/src/app/license.list.component.ts
@@ -1,12 +1,13 @@
import { LocaleService } from './common/i18n';
import { ActivatedRoute, Router } from '@angular/router';
import { MdDialog, MdDialogConfig } from '@angular/material';
-import { TdDataTableService, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumn } from '@covalent/core';
+import { TdDataTableService, TdPagingBarComponent, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumn } from '@covalent/core';
import { IPageChangeEvent } from '@covalent/core';
-import { Component, AfterViewInit } from '@angular/core';
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { TdMediaService } from '@covalent/core';
import { LicensesService } from './resources/licenses';
import { PacksService } from './resources/packs';
+import { Location } from '@angular/common';
import { LicenseFormComponent } from './forms/license.form.component';
@@ -37,6 +38,8 @@
})
export class LicenseListComponent implements AfterViewInit {
data: any[] = [];
+ @ViewChild('pagingBar') pagingBar : TdPagingBarComponent ;
+
pack: any = null;
columns: ITdDataTableColumn[] = [
{ name: 'code', label: 'Code', tooltip: 'License code' },
@@ -79,6 +82,7 @@
private media: TdMediaService,
private $L: LocaleService,
private router: Router,
+ private location: Location,
private route: ActivatedRoute,
private dialog: MdDialog,
private licenseForm: LicenseFormComponent,
@@ -105,6 +109,10 @@
});
}
+ goBack() : void {
+ this.location.back();
+ }
+
isLicenseExpired(lic: any): boolean {
return lic.expiration_date < (new Date().getTime());
}
diff --git a/securis/src/main/webapp/src/app/pack.list.component.html b/securis/src/main/webapp/src/app/pack.list.component.html
index 07e1b18..710e5b9 100644
--- a/securis/src/main/webapp/src/app/pack.list.component.html
+++ b/securis/src/main/webapp/src/app/pack.list.component.html
@@ -1,57 +1,56 @@
-<md-toolbar role="toolbar" class="mat-secondary">
- <span class="push-left-sm">
- <span class="md-title" i18n>License Packs</span>
- </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)="createPack()">
- <md-icon>add</md-icon>
- </button>
-</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="used_licenses" let-row="row">
- <div layout="row">
- <md-chip-list flex>
- <md-chip selected [mdTooltip]="$L.get('field.num_licenses')" color="secondary" >{{row['num_licenses']}}</md-chip>
- <md-chip selected [mdTooltip]="$L.get('field.num_available')" [color]="row['num_available'] > 0 ? 'primary': 'warn'">{{row['num_available']}}</md-chip>
- </md-chip-list>
- </div>
- </template>
- <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="menu" let-row="row" let-index="index">
- <div layout="row" layout-align="end center">
- <button md-icon-button (click)="editPack(row)" color="primary"><md-icon>edit</md-icon></button>
- <button md-icon-button [mdMenuTriggerFor]="packMenu" aria-label="Pack menu">
- <md-icon>more_vert</md-icon>
+<td-layout-card-over cardWidth="90">
+ <md-toolbar role="toolbar" class="mat-secondary">
+ <span class="push-left-sm">
+ <span class="md-title" i18n>Packs</span>
+ </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)="createPack()">
+ <md-icon>add</md-icon>
</button>
-
- <md-menu #packMenu="mdMenu">
- <button md-menu-item *ngFor="let action of pack_menu_options" (click)="packAction(action.command, row)" [disabled]="!isActionAvailable(row)">
- <md-icon *ngIf="!!action.icon">{{ action.icon }}</md-icon> {{ action.name }}
+ </md-toolbar>
+ <div flex="84" layout-align="center end" layout="column">
+ <td-data-table
+ [data]="filteredData"
+ [columns]="columns"
+ [sortable]="true"
+ [sortBy]="sortBy"
+ (sortChange)="sort($event)"
+ style="width: 100%">
+ <template tdDataTableTemplate="used_licenses" let-row="row">
+ <div layout="row">
+ <md-chip-list flex>
+ <md-chip selected [mdTooltip]="$L.get('field.num_licenses')" color="secondary" >{{row['num_licenses']}}</md-chip>
+ <md-chip selected [mdTooltip]="$L.get('field.num_available')" [color]="row['num_available'] > 0 ? 'primary': 'warn'">{{row['num_available']}}</md-chip>
+ </md-chip-list>
+ </div>
+ </template>
+ <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="menu" let-row="row" let-index="index">
+ <div layout="row" layout-align="end center">
+ <button md-icon-button (click)="editPack(row)" color="primary"><md-icon>edit</md-icon></button>
+ <button md-icon-button [mdMenuTriggerFor]="packMenu" aria-label="Pack menu">
+ <md-icon>more_vert</md-icon>
</button>
- </md-menu>
- <button md-icon-button (click)="showLicenses(row)" color="accent"><md-icon>arrow_forward</md-icon></button>
- </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 #packMenu="mdMenu">
+ <button md-menu-item *ngFor="let action of pack_menu_options" (click)="packAction(action.command, row)" [disabled]="!isActionAvailable(row)">
+ <md-icon *ngIf="!!action.icon">{{ action.icon }}</md-icon> {{ action.name }}
+ </button>
+ </md-menu>
+ <button md-icon-button (click)="showLicenses(row)" color="accent"><md-icon>arrow_forward</md-icon></button>
+ </div>
+ </template>
+ </td-data-table>
+ <td-paging-bar #pagingBar [pageSizes]="[10, 20, 40]" [total]="filteredTotal" (change)="page($event)" [hidden]="pagingBar.total <= pagingBar.pageSize">
+ <span 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>
diff --git a/securis/src/main/webapp/src/app/pack.list.component.ts b/securis/src/main/webapp/src/app/pack.list.component.ts
index 5c44a1d..e13800b 100644
--- a/securis/src/main/webapp/src/app/pack.list.component.ts
+++ b/securis/src/main/webapp/src/app/pack.list.component.ts
@@ -1,8 +1,14 @@
import { Router, ActivatedRoute } from '@angular/router';
import { MdDialog, MdDialogConfig } from '@angular/material';
-import { TdDataTableService, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumn } from '@covalent/core';
+import {
+ ITdDataTableColumn,
+ ITdDataTableSortChangeEvent,
+ TdDataTableService,
+ TdDataTableSortingOrder,
+ TdPagingBarComponent
+} from '@covalent/core';
import { IPageChangeEvent } from '@covalent/core';
-import { Component, AfterViewInit } from '@angular/core';
+import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { TdMediaService } from '@covalent/core';
import { PacksService } from './resources/packs';
import { PackFormComponent } from './forms/pack.form.component';
@@ -49,6 +55,9 @@
})
export class PackListComponent implements AfterViewInit {
data: any[] = [];
+
+ @ViewChild('pagingBar') pagingBar : TdPagingBarComponent ;
+
columns: ITdDataTableColumn[] = [
{ name: 'code', label: 'Code', tooltip: 'License pack code' },
{ name: 'application_name', label: 'App name' },
@@ -133,6 +142,7 @@
this.sortBy = sortEvent.name === 'used_licenses' ? 'num_available' : sortEvent.name;
this.sortOrder = sortEvent.order;
this.filter();
+ console.log(this.pagingBar);
}
search(searchTerm: string): void {
--
Gitblit v1.3.2