#3527 fix - Added applications and some minor refactoring

rsanchez

2017-03-19 280daa7f3f858ecfef9c91ffd5dea1007f021048

#3527 fix - Added applications and some minor refactoring

 securis/src/main/webapp/assets/securis.css
..
..
@@ -44,4 +44,14 @@
44
44
 
45
45
 td-paging-bar[hidden] {
46
46
 	display: none !important;
47
-}
47
+}
48
+
49
+.inner-padding > *{
50
+	margin-left: 5px;
51
+	margin-right: 5px;
52
+}
53
+
54
+
55
+
56
+
57
+
 securis/src/main/webapp/src/app/app.module.ts
..
..
@@ -18,15 +18,15 @@
18
18
 import { LicenseTypesService }  from './resources/license_types';
19
19
 import { OrganizationsService }  from './resources/organizations';
20
20
 import { ApplicationsService }  from './resources/applications';
21
-import { UsersService }  from './resources/users';
22
21
 import { LicensesService }  from './resources/licenses';
23
-import { PackListComponent }  from './pack.list.component';
24
-import { HeroDetailComponent } from './detail.component';
25
-import { LoginFormComponent } from './login.form.component';
22
+import { UsersService }  from './resources/users';
26
23
 import { MenuComponent }  from './menu.component';
27
24
 import { NoMenuComponent }  from './nomenu.component';
28
25
 import { FooterComponent }  from './footer.component';
29
-import { LicenseListComponent } from './license.list.component';
26
+import { FieldReadonlyComponent }  from './common/utils';
27
+import { LicenseListComponent } from './listing/license.list.component';
28
+import { PackListComponent }  from './listing/pack.list.component';
29
+import { LoginFormComponent } from './forms/login.form.component';
30
30
 import { LicenseFormComponent } from './forms/license.form.component';
31
31
 
32
32
 
..
..
@@ -35,6 +35,8 @@
35
35
 import { LocaleServiceModule } from './common/i18n';
36
36
 import { SeCurisSession } from './common/session';
37
37
 import { PackFormComponent } from "./forms/pack.form.component";
38
+import { ApplicationFormComponent } from './forms/application.form.component';
39
+import { ApplicationListComponent } from './listing/application.list.component';
38
40
 
39
41
 @NgModule({
40
42
   imports: [
..
..
@@ -53,7 +55,8 @@
53
55
     appRoutes,
54
56
   ],
55
57
   declarations: [
56
-    HeroDetailComponent,
58
+    ApplicationListComponent,
59
+    ApplicationFormComponent,
57
60
     PackListComponent,
58
61
     PackFormComponent,
59
62
     LoginFormComponent,
..
..
@@ -64,10 +67,11 @@
64
67
     HomeComponent,
65
68
     MenuComponent,
66
69
     NoMenuComponent,
67
-    FooterComponent    
70
+    FieldReadonlyComponent,
71
+    FooterComponent
68
72
   ],
69
73
   bootstrap: [ HomeComponent ],
70
-  entryComponents: [ PackFormComponent, LicenseFormComponent ],
74
+  entryComponents: [  ],
71
75
   providers: [
72
76
     SeCurisSession,
73
77
     UserService,
 securis/src/main/webapp/src/app/app.routes.ts
..
..
@@ -3,9 +3,13 @@
3
3
 import { HomeComponent } from './home.component';
4
4
 import { MenuComponent } from './menu.component';
5
5
 import { NoMenuComponent } from './nomenu.component';
6
-import { PackListComponent } from './pack.list.component';
7
-import { LicenseListComponent } from './license.list.component';
8
-import { LoginFormComponent } from './login.form.component';
6
+import { PackListComponent } from './listing/pack.list.component';
7
+import { LicenseListComponent } from './listing/license.list.component';
8
+import { LicenseFormComponent } from './forms/license.form.component';
9
+import { PackFormComponent } from './forms/pack.form.component';
10
+import { LoginFormComponent } from './forms/login.form.component';
11
+import { ApplicationFormComponent } from './forms/application.form.component';
12
+import { ApplicationListComponent } from './listing/application.list.component';
9
13
 
10
14
 const routes: Routes = [
11
15
   {path: 'public',  component: NoMenuComponent, children: [
..
..
@@ -16,8 +20,17 @@
16
20
     children: [
17
21
         {path: 'packs', children: [
18
22
           {path: '', component: PackListComponent },
19
-          {path: ':id/licenses', component: LicenseListComponent },
20
-        ]}
23
+          {path: 'create', component: PackFormComponent},
24
+          {path: 'edit/:packId', component: PackFormComponent},
25
+
26
+          {path: ':packId/licenses', component: LicenseListComponent},
27
+          {path: ':packId/licenses/edit/:licenseId', component: LicenseFormComponent },
28
+          {path: ':packId/licenses/create', component: LicenseFormComponent },
29
+
30
+        ]},
31
+        {path: 'applications', component: ApplicationListComponent},
32
+        {path: 'applications/create', component: ApplicationFormComponent},
33
+        {path: 'applications/edit/:applicationId', component: ApplicationFormComponent}
21
34
     ]
22
35
   },
23
36
 
 securis/src/main/webapp/src/app/common/error.checker.ts
..
..
@@ -19,7 +19,6 @@
19
19
   @Input() fieldName: string;
20
20
 
21
21
   constructor(private $L: LocaleService) {
22
-      console.log('contructor: ' + this.formField);
23
22
   }
24
23
   
25
24
   getFieldErrors() : string[] {
 securis/src/main/webapp/src/app/common/i18n.ts
..
..
@@ -2,6 +2,18 @@
2
2
 import { ModuleWithProviders, NgModule, Inject, Injectable, Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
3
3
 declare var navigator:any;
4
4
 
5
+declare global {
6
+    interface String {
7
+        capitalize(): string;
8
+        cap(): string;
9
+    }
10
+}
11
+
12
+String.prototype.capitalize = function() {
13
+    return this[0].toUpperCase() + this.slice(1);
14
+}
15
+String.prototype.cap = String.prototype.capitalize; 
16
+
5
17
 // Use as reference: https://github.com/ngx-translate/core/tree/master/src
6
18
 @Injectable()
7
19
 export class LocaleService {
..
..
@@ -50,9 +62,11 @@
50
62
      * It works similar to MessageFormat in Java
51
63
      */
52
64
     _format(str: string, ...params: string[]) {
53
-        
54
-        return str.replace(/\{(\d+)\}/g, function(match, index) {
55
-            return params[index];
65
+        var ocur = 0;
66
+        return str.replace(/\{(\d*)\}/g, function(match, index) {
67
+            var idx = index === '' ? ocur : +index;
68
+            ocur += 1;
69
+            return params[idx];
56
70
         });
57
71
     };
58
72
 
..
..
@@ -98,9 +112,10 @@
98
112
         }
99
113
         // Enviar evento cuando el idioma cambia al $rootScope
100
114
         
101
-        if (arguments.length === 1) return trans_msg;
115
+        if (params.length === 0) return trans_msg;
102
116
         return this._format(trans_msg, ...params);
103
117
     }
118
+
104
119
     
105
120
 }
106
121
 
..
..
@@ -134,3 +149,5 @@
134
149
 }
135
150
 
136
151
 
152
+
153
+
 securis/src/main/webapp/src/app/common/utils.ts
..
..
@@ -0,0 +1,50 @@
1
+
2
+import {Component, Input} from '@angular/core';
3
+import {LocaleService} from './i18n';
4
+
5
+@Component({
6
+  selector: 'field-readonly',
7
+  template: `
8
+  <div layout="column" class="mat-input-container readonly" >
9
+		<div class="mat-input-wrapper">
10
+			<div class="mat-input-table">
11
+				<div class="mat-input-prefix"></div>
12
+				<div class="mat-input-infix">
13
+					<div class="label-value mat-input-element">{{value}}</div>
14
+					<span class="mat-input-placeholder-wrapper" >
15
+						<label class="mat-input-placeholder mat-float">
16
+							<span class="placeholder">{{label}}</span>
17
+						</label>
18
+					</span>
19
+				</div>
20
+				<div class="mat-input-suffix"></div>
21
+			</div>
22
+			<div class="mat-input-underline"></div>
23
+		</div>
24
+	</div>`,
25
+	styles: [`.readonly .mat-input-element {
26
+				margin-top: 0px !important;
27
+				color: rgba(0, 0, 0, 0.50);
28
+			}`,
29
+			`.readonly .mat-input-element {
30
+				margin-top: 0px;
31
+				color: rgba(0, 0, 0, 0.50);
32
+			}`,
33
+			`.readonly.mat-input-container {
34
+				width: 100%;
35
+			}`]
36
+})
37
+export class FieldReadonlyComponent {
38
+	@Input('value') value: any;
39
+
40
+	private _label : string;
41
+    @Input('label')
42
+	set label(txt: string) {
43
+		this._label = this.$L.get(txt);
44
+	}
45
+	get label(): string { return this._label; }
46
+
47
+	constructor(private $L : LocaleService) {
48
+
49
+	}
50
+}
 securis/src/main/webapp/src/app/forms/application.form.component.ts
..
..
@@ -0,0 +1,64 @@
1
+import { Http } from '@angular/http';
2
+import { ToastsManager } from 'ng2-toastr/ng2-toastr';
3
+
4
+import { ApplicationsService } from '../resources/applications';
5
+import { LicenseTypesService } from '../resources/license_types';
6
+import { LocaleService } from '../common/i18n';
7
+import { IPageChangeEvent } from '@covalent/core';
8
+import { Component, AfterViewInit } from '@angular/core';
9
+import { TdMediaService } from '@covalent/core';
10
+import { FormBase, IComboOption } from './base';
11
+import { ActivatedRoute, Router } from '@angular/router';
12
+
13
+var app_example = { 
14
+	code: 'CICS',
15
+  creation_timestamp: 1418384439000,
16
+  description: 'Wellbore integrity analysis software',
17
+  id: 1,
18
+  license_filename: 'config_server.lic',
19
+  name: 'CurisIntegrity',
20
+  metadata: 
21
+   [ { key: 'max_docs',
22
+       value: '250000',
23
+       readonly: true,
24
+       mandatory: true } ] 
25
+}
26
+
27
+@Component({
28
+  selector: 'application-form',
29
+  templateUrl: 'src/app/forms/application.form.html'
30
+})
31
+export class ApplicationFormComponent extends FormBase {
32
+
33
+  fields: any = {
34
+    'id': '',
35
+    'code': '',
36
+    'name': '',
37
+    'creation_timestamp': '',
38
+    'license_filename': '',
39
+    'description': '',
40
+    'metadata': '',
41
+    'key': '',
42
+    'value': '',
43
+  }
44
+  constructor(private http: Http,
45
+              private licenseTypes: LicenseTypesService,
46
+              private router: Router,
47
+              private applications: ApplicationsService,
48
+              toaster: ToastsManager,
49
+              route: ActivatedRoute,              
50
+              $L: LocaleService) {
51
+    super($L, route, toaster, applications, $L.get('application'));
52
+  }
53
+
54
+ 
55
+  goBack(): void {
56
+    this.router.navigate([`applications`]);
57
+  }
58
+
59
+ 
60
+  ngAfterViewInit(): void {
61
+    super.prepareData('applicationId');
62
+  }
63
+}
64
+
 securis/src/main/webapp/src/app/forms/application.form.html
..
..
@@ -0,0 +1,152 @@
1
+<td-layout-card-over cardWidth="60">
2
+	<md-toolbar role="toolbar" class="mat-secondary">
3
+		<button md-icon-button (click)="goBack()" color="accent">
4
+			<md-icon>arrow_back</md-icon>
5
+		</button>
6
+		<span class="md-title" [innerText]="form_title"></span>
7
+		<span flex></span>
8
+		<button md-icon-button (click)="save()"><md-icon>save</md-icon></button>
9
+	</md-toolbar>
10
+	<div class="margin" layout-align-gt-xs="center start" layout-fill="" layout-gt-xs="row">
11
+		<md-card flex="70">
12
+			<md-card-title>
13
+				{{form_subtitle}}
14
+			</md-card-title>
15
+			<md-divider></md-divider>
16
+			<md-card-content>
17
+				<form #applicationForm="ngForm" class="inset">
18
+					<div layout="column" layout-align="start center">
19
+						<div layout="row" layout-fill layout-padding>
20
+							<field-readonly [value]="data.id" label="field.id" flex="15" *ngIf="!isNew"></field-readonly>
21
+							<div layout="column" layout-fill flex>
22
+								<md-input-container>
23
+									<input mdInput maxLength="50" type="text" [(ngModel)]="data.code" name="code" required [readonly]="!isNew" />
24
+									<md-placeholder>
25
+										<span i18n="field.code"></span>
26
+									</md-placeholder>
27
+								</md-input-container>
28
+								<error-checker [fieldName]="getFieldName('code')" [formField]="applicationForm.controls.code"></error-checker>
29
+							</div>
30
+							<div layout="column" layout-fill flex>
31
+								<md-input-container>
32
+									<input mdInput type="number" [(ngModel)]="data.num_licenses" name="num_licenses" required />
33
+									<md-placeholder>
34
+										<span i18n="field.num_licenses"></span>
35
+									</md-placeholder>
36
+								</md-input-container>
37
+								<error-checker [fieldName]="getFieldName('num_licenses')" [formField]="applicationForm.controls.num_licenses"></error-checker>
38
+							</div>
39
+						</div>
40
+						<div layout="row" layout-fill layout-padding>
41
+							<div layout="column" layout-fill flex>
42
+								<md-input-container flex>
43
+									<input mdInput type="date" [(ngModel)]="data.init_valid_date" name="init_valid_date" required />
44
+									<md-placeholder>
45
+										<span i18n="field.end_valid_date"></span>
46
+									</md-placeholder>
47
+								</md-input-container>
48
+								<error-checker [fieldName]="getFieldName('init_valid_date')" [formField]="applicationForm.controls.init_valid_date"></error-checker>
49
+							</div>
50
+							<div layout="column" layout-fill flex>
51
+								<md-input-container flex>
52
+									<input mdInput type="date" [(ngModel)]="data.end_valid_date" name="end_valid_date" required />
53
+									<md-placeholder>
54
+										<span i18n="field.end_valid_date"></span>
55
+									</md-placeholder>
56
+								</md-input-container>
57
+								<error-checker [fieldName]="getFieldName('end_valid_date')" [formField]="applicationForm.controls.end_valid_date"></error-checker>
58
+							</div>
59
+						</div>
60
+						<div layout="row" layout-fill layout-padding *ngIf="isNew">
61
+							<div layout="column" layout-fill flex>
62
+								<md-select [placeholder]="getFieldName('organization_id')" flex [(ngModel)]="data.organization_id" name="organization_id"
63
+								 (change)="changeOrg($event)">
64
+									<md-option *ngFor="let org of organizations" [value]="org.id">
65
+										{{org.label}}
66
+									</md-option>
67
+								</md-select>
68
+								<error-checker [fieldName]="getFieldName('organization_id')" [formField]="applicationForm.controls.organization_id"></error-checker>
69
+							</div>
70
+							<div layout="column" layout-fill flex>
71
+								<md-select flex [placeholder]="getFieldName('license_type_id')" [(ngModel)]="data.license_type_id" name="license_type_id"
72
+								 (change)="changeLicType($event)">
73
+									<md-option *ngFor="let lt of licensetypes" [value]="lt.id">
74
+										{{lt.label}}
75
+									</md-option>
76
+								</md-select>
77
+								<error-checker [fieldName]="getFieldName('license_type_id')" [formField]="applicationForm.controls.license_type_id"></error-checker>
78
+							</div>
79
+						</div>
80
+						<div layout="row" layout-fill layout-padding *ngIf="!isNew">
81
+							<field-readonly [value]="data.organization_name" label="field.organization_id" flex></field-readonly>
82
+							<field-readonly [value]="data.licensetype_code" label="field.license_type_id" flex></field-readonly>
83
+						</div>
84
+						<div layout="row" layout-fill layout-padding>
85
+							<div layout="column" layout-fill flex>
86
+								<md-input-container flex>
87
+									<input mdInput type="number" [(ngModel)]="data.preactivation_valid_period" name="preactivation_valid_period" required />
88
+									<md-placeholder>
89
+										<span i18n="field.preactivation_valid_period"></span>
90
+									</md-placeholder>
91
+									<md-hint align="end">days</md-hint>
92
+								</md-input-container>
93
+								<error-checker [fieldName]="getFieldName('preactivation_valid_period')" [formField]="applicationForm.controls.preactivation_valid_period"></error-checker>
94
+							</div>
95
+							<div layout="column" layout-fill flex>
96
+								<md-input-container flex>
97
+									<input mdInput type="number" [(ngModel)]="data.renew_valid_period" name="renew_valid_period" required />
98
+									<md-placeholder>
99
+										<span i18n="field.renew_valid_period"></span>
100
+									</md-placeholder>
101
+									<md-hint align="end">days</md-hint>
102
+								</md-input-container>
103
+								<error-checker [fieldName]="getFieldName('renew_valid_period')" [formField]="applicationForm.controls.renew_valid_period"></error-checker>
104
+							</div>
105
+						</div>
106
+						<div layout="row" layout-fill layout-padding>
107
+							<div layout="column" layout-fill flex>
108
+								<md-input-container flex>
109
+									<textarea mdInput type="text" type="text" [(ngModel)]="data.comments" name="comments" maxlength="1024"></textarea>
110
+									<md-placeholder>
111
+										<span i18n="field.comments"></span>
112
+									</md-placeholder>
113
+									<md-hint align="end">(max 1024)</md-hint>
114
+								</md-input-container>
115
+							</div>
116
+						</div>
117
+						<div layout="row" layout-fill layout-padding *ngIf="!isNew">
118
+							<field-readonly [value]="data.created_by_name" label="field.created_by" flex></field-readonly>
119
+							<field-readonly [value]="data.creation_timestamp | date: 'medium'" label="field.creation_timestamp" flex></field-readonly>
120
+						</div>
121
+						<div layout="column" layout-fill>
122
+							<span class="md-title" i18n>License metadata</span>
123
+							<div layout="row" layout-fill layout-padding *ngFor="let pair of data.metadata">
124
+								<md-input-container flex="40">
125
+									<input mdInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="pair.key" readonly />
126
+									<md-placeholder>
127
+										<span i18n="field.key"></span>
128
+									</md-placeholder>
129
+								</md-input-container>
130
+								<md-input-container flex>
131
+									<input mdInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="pair.value" [readonly]="pair.readonly" [required]="pair.required"
132
+									/>
133
+									<md-placeholder>
134
+										<span i18n="field.value"></span>
135
+									</md-placeholder>
136
+								</md-input-container>
137
+							</div>
138
+						</div>
139
+					</div>
140
+				</form>
141
+			</md-card-content>
142
+			<md-divider></md-divider>
143
+			<md-card-actions>
144
+				<div layout="row" layout-align="start center" class="margin">
145
+					<span flex></span>
146
+					<button [disabled]="!applicationForm.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
147
+					<button md-button (click)="goBack()">Cancel</button>
148
+				</div>
149
+			</md-card-actions>
150
+		</md-card>
151
+	</div>
152
+</td-layout-card-over>
 securis/src/main/webapp/src/app/forms/base.ts
..
..
@@ -1,5 +1,64 @@
1
+import { Http } from '@angular/http';
2
+import { ActivatedRoute } from '@angular/router';
3
+import { ToastsManager } from 'ng2-toastr/ng2-toastr';
4
+
5
+import { LocaleService } from '../common/i18n';
6
+import { SeCurisResourceServices } from '../resources/base';
7
+
8
+import { AfterViewInit } from '@angular/core';
9
+
1
10
 
2
11
 export interface IComboOption {
3
12
 	id: number,
4
13
 	label: string
14
+}
15
+
16
+
17
+export class FormBase {
18
+	protected form_title: string = '';
19
+	protected form_subtitle: string = '';
20
+	protected data: any = {};
21
+	protected isNew : boolean = true;
22
+
23
+	constructor(protected $L: LocaleService, 
24
+	            protected route: ActivatedRoute,
25
+				protected toaster: ToastsManager,
26
+				protected resourceServices: SeCurisResourceServices, 
27
+				protected resourceName: string ) {
28
+	}
29
+
30
+	public getFieldName(fieldId: string) : string {
31
+		return this.$L.get(`field.${fieldId}`);
32
+	}
33
+
34
+  	protected loadCombos(): void {}
35
+
36
+	save() {
37
+		var command = this.isNew ? this.resourceServices.create(this.data) : this.resourceServices.modify(this.data.id, this.data);
38
+		command.subscribe(
39
+			data => this.toaster.success(this.$L.get('{} saved sucessfully', this.$L.get(this.resourceName).capitalize())),
40
+			err => {
41
+				console.error(err);
42
+				this.toaster.success(this.$L.get('Error saving {}', this.$L.get(this.resourceName)));
43
+			}
44
+			);
45
+	}
46
+
47
+	protected prepareData(idparam: string, default_values: any = {}) : void {
48
+		this.form_title = this.$L.get('{} data', this.resourceName.capitalize());
49
+		this.isNew = true;
50
+		!!this.route && this.route.params.subscribe(params => {
51
+			var eleId = +params[idparam]; // (+) converts string 'id' to a number
52
+			if (!eleId) {
53
+				this.data = {};
54
+				Object.keys(default_values).forEach((k : string) => this.data[k] = default_values[k]);
55
+				this.form_subtitle = this.$L.get('Create a new {}', this.resourceName) ;
56
+			} else {
57
+				this.isNew = false;
58
+				this.resourceServices.get(eleId).subscribe(eleData => this.data = eleData);
59
+				this.form_subtitle = this.$L.get('Modify the {} data', this.resourceName) ;
60
+			}
61
+		});
62
+	}
63
+
5
64
 }
 securis/src/main/webapp/src/app/forms/license.form.component.ts
..
..
@@ -1,53 +1,92 @@
1
1
 import { Http } from '@angular/http';
2
2
 import { LicensesService } from '../resources/licenses';
3
+import { PacksService } from '../resources/packs';
3
4
 import { LocaleService } from '../common/i18n';
4
5
 import { TdDataTableService, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumn } from '@covalent/core';
5
6
 import { IPageChangeEvent } from '@covalent/core';
6
-import { Component, AfterViewInit } from '@angular/core';
7
-import { TdMediaService } from '@covalent/core';
8
-import { IComboOption } from './base';
7
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
8
+import { ActivatedRoute, Router } from '@angular/router';
9
+
10
+import { TdMediaService, TdFileInputComponent } from '@covalent/core';
11
+import { FormBase, IComboOption } from './base';
12
+import { ToastsManager } from "ng2-toastr/ng2-toastr";
13
+
14
+declare var window: any;
9
15
 
10
16
 @Component({
11
17
   selector: 'license-form',
12
18
   templateUrl: 'src/app/forms/license.form.html'
13
19
 })
14
-export class LicenseFormComponent implements AfterViewInit {
20
+export class LicenseFormComponent extends FormBase {
15
21
 
16
-  form_title: string = 'Title';
22
+  @ViewChild('requestFileUploader') requestFileUploader : TdFileInputComponent;
23
+  form_title: string = '';
17
24
   form_subtitle: string = '';
18
25
   data: any = {};
26
+  pack: any = null;
19
27
   isNew : boolean = true;
20
28
 
21
29
   constructor(private http: Http,
22
-              private packs: LicensesService,
23
-              private $L: LocaleService) {
24
-      
30
+              private licenses: LicensesService,
31
+              private router: Router,
32
+              private packs: PacksService,
33
+              toaster: ToastsManager,
34
+              route: ActivatedRoute,
35
+              $L: LocaleService) {
36
+      super($L, route, toaster, licenses, $L.get('license'));
25
37
   }
26
38
 
27
-  private loadCombos(): void {
28
-    /*
29
-      this.http.get('organization')
30
-        .map(response => response.json().map((org : any) => <IComboOption>{id: org.id, label: `(${org.code}) ${org.name}`}))
31
-        .subscribe(
32
-          data => this.organizations = (<IComboOption[]>data).sort((e1, e2) => e1.label.localeCompare(e2.label)),
33
-          err => console.error('Error loading orgs')
34
-        );
35
-        */
36
-  }
37
-
38
-  log(obj: any) {
39
-    console.log(obj)
39
+  requestFileSelected(file: File) : void {
40
+    console.log(file);
41
+    console.log(this.requestFileUploader);
42
+		if (!window.FileReader) { // Browser is not
43
+          // compatible
44
+          console.log(this.$L.get("Open your .req file with a text editor and copy&paste the content in the form text field?"));
45
+          return;
46
+  	}
47
+    var reader = new FileReader();
48
+    reader.onerror = (err) => console.error(err);
49
+    
50
+    reader.onload = (event) => {
51
+      this.data.request_data = reader.result;
52
+    }
53
+    reader.readAsText(file); 
54
+    this.requestFileUploader.clear();
55
+  } 
56
+  
57
+  requestFileUploaded(file: File) : void {
58
+    console.log(file);
40
59
   }
41
60
   
42
-  ngOnInit(): void {
43
-    this.loadCombos();
44
-    this.data = {};
45
-    this.form_title = this.$L.get('License data');
46
-    this.form_subtitle = this.$L.get(this.isNew ? 'Create a new license': 'Modify the license data') ;
61
+  createActivationCode() : string {
62
+      // http://www.ietf.org/rfc/rfc4122.txt
63
+      var s = new Array(36);
64
+      var hexDigits = "0123456789abcdef";
65
+      for (var i = 0; i < 36; i++) {
66
+          s[i] = hexDigits.substr(Math.random() * 0x10 | 0, 1);
67
+      }
68
+      s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
69
+      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
70
+      s[8] = s[13] = s[18] = s[23] = "-";
71
+
72
+      var uuid = s.join("");
73
+      return uuid;
74
+  }
75
+
76
+  goBack(): void {
77
+    this.router.navigate([`packs/${this.pack.id}/licenses`]);
47
78
   }
48
79
 
49
80
 
50
81
   ngAfterViewInit(): void {
82
+
83
+    this.route.params.subscribe(params => {
84
+      var packId = +params['packId']; // (+) converts string 'id' to a number
85
+      super.prepareData('licenseId', {
86
+        pack_id: packId,            
87
+        activation_code: this.createActivationCode()
88
+      });
89
+    });
51
90
   }
52
91
 }
53
92
 
 securis/src/main/webapp/src/app/forms/license.form.html
..
..
@@ -1,75 +1,124 @@
1
-<form #packForm="ngForm" class="inset" (keyup.enter)="save()">
2
-	<md-card>
3
-		<md-card-title>
4
-			{{form_title}}
5
-		</md-card-title>
6
-		<md-card-subtitle>
7
-			{{form_subtitle}}
8
-		</md-card-subtitle>
9
-<md-divider></md-divider>
10
-		<md-card-content>
11
-	<div layout="column" layout-align="start center" layout-fill>
12
-		<div layout="row" layout-fill layout-padding>
13
-			<div layout="column" layout-fill  flex="50">
14
-			<md-input-container>
15
-				<input mdInput maxLength="50" type="text" [(ngModel)]="data.code" name="code" required />
16
-				<md-placeholder>
17
-          			<span i18n>Code</span>
18
-        		</md-placeholder>
19
-			</md-input-container>
20
-			{{log(packForm.controls)}}
21
-			<div *ngIf="packForm.controls.code?.touched && packForm.controls.code.invalid" layout="column">
22
-				<span *ngIf="packForm.controls.code.errors.required" align="end">Code is required</span>
23
-				<span align="end">Code is ok</span>
1
+<td-layout-card-over cardWidth="60">
2
+	<md-toolbar role="toolbar" class="mat-secondary">
3
+		<button md-icon-button (click)="goBack()" color="accent">
4
+			<md-icon>arrow_back</md-icon>
5
+		</button>
6
+		<span>{{form_title}}</span>
7
+		<span flex></span>
8
+		<button md-icon-button (click)="save()"><md-icon>save</md-icon></button>
9
+		<md-toolbar-row class="inner-padding" *ngIf="!!pack" >
10
+			<div>
11
+				<span i18n>Pack</span>: {{pack.code}}
24
12
 			</div>
13
+			<div class="inner-padding" flex="70" style="margin-left: 10px;" layout-align="start center" layout="row">
14
+				<md-chip selected [mdTooltip]="$L.get('field.application_name')" color="primary">{{pack.application_name}} </md-chip>
15
+				<md-chip selected [mdTooltip]="$L.get('field.organization_id')" color="accent">{{pack.organization_name}} </md-chip>
16
+				<md-chip selected [mdTooltip]="$L.get('field.license_type_id')" color="accent">{{pack.licensetype_code}} </md-chip>
25
17
 			</div>
26
-	<!-- TODO: <div class="alert inline-alert alert-warning" ng-show="packForm.code.$invalid">
27
-		<span class="glyphicon glyphicon-warning-sign"></span> 
28
-		<span ng-show="packForm.code.$error.maxlength" ng-bind="maxLengthErrorMsg('Code', maxlength.code)" 
29
-		class="ng-binding ng-hide">Code length is too long (max: 50).</span> 
30
-		<span ng-show="packForm.code.$error.required" ng-bind="mandatoryFieldErrorMsg('Code')" class="ng-binding">'Code' is required.</span>
31
-	</div> -->
32
-			<md-input-container flex="50">
33
-				<input mdInput type="number" type="text" [(ngModel)]="data.num_licenses" name="num_licenses" required />
34
-				<md-placeholder>
35
-          			<span i18n>Num. licenses</span>
36
-        		</md-placeholder>
37
-			</md-input-container>
38
-		</div>
39
-		<div layout="row" layout-align="start center" layout-fill layout-padding>
40
-			<md-input-container flex>
41
-				<input mdInput type="date" type="text" [(ngModel)]="data.init_valid_date" name="init_valid_date" required />
42
-				<md-placeholder>
43
-          			<span i18n>Initial date</span>
44
-        		</md-placeholder>
45
-				<md-hint align="end">YYYY-MM-DD</md-hint>
46
-			</md-input-container>
47
-			<md-input-container flex>
48
-				<input mdInput type="date" type="text" [(ngModel)]="data.end_valid_date" name="end_valid_date" required />
49
-				<md-placeholder>
50
-          			<span i18n>End date</span>
51
-        		</md-placeholder>
52
-				<md-hint align="end">YYYY-MM-DD</md-hint>
53
-			</md-input-container>
54
-		</div>
55
-		<div layout="row" layout-fill layout-padding>
56
-			<md-select flex placeholder="Organization" [(ngModel)]="data.organization_id" name="organization_id">
57
-				<md-option *ngFor="let org of organizations" [value]="org.id">
58
-					{{org.label}}
59
-				</md-option>
60
-			</md-select>
61
-			<md-select flex placeholder="License type" [(ngModel)]="data.license_type_id" name="license_type_id">
62
-				<md-option *ngFor="let lt of licensetypes" [value]="lt.id">
63
-					{{lt.label}}
64
-				</md-option>
65
-			</md-select>
66
-		</div>
18
+			<span flex></span>
19
+			<md-chip-list>
20
+				<md-chip [mdTooltip]="$L.get('field.num_available')" color="secondary" [class.bgc-red-A100]="pack.num_available <= 0">
21
+					<span i18n="field.num_available"></span>: {{pack.num_available}} </md-chip>
22
+			</md-chip-list>
23
+		</md-toolbar-row>
24
+	</md-toolbar>
25
+	<div class="margin" layout-align-gt-xs="center start" layout-fill="" layout-gt-xs="row">
26
+			<md-card  flex="70">
27
+				<md-card-title>
28
+					{{form_subtitle}}
29
+				</md-card-title>
30
+				<md-divider></md-divider>
31
+				<md-card-content>
32
+					<form #licenseForm="ngForm" class="inset" (keyup.enter)="save()">
33
+						<div layout="column" layout-align="start center">
34
+							<div layout="row" layout-fill layout-padding>
35
+								<field-readonly [value]="data.id" label="field.id" flex="20" *ngIf="!isNew"></field-readonly>
36
+								<field-readonly [value]="data.code" label="field.code" flex></field-readonly>
37
+							</div>
38
+							<div layout="row" layout-fill layout-padding>
39
+								<field-readonly [value]="data.activation_code" label="field.activation_code" flex></field-readonly>
40
+							</div>
41
+							<div layout="row" layout-fill layout-padding *ngIf="!isNew">
42
+								<field-readonly [value]="data.expiration_date | date: 'dateMedium'" label="field.expiration_date" flex></field-readonly>
43
+								<field-readonly [value]="licenses.getStatusName(data.status)" label="field.status" flex></field-readonly>
44
+							</div>
45
+							<div layout="row" layout-fill layout-padding>
46
+								<div layout="column" layout-fill flex>
47
+									<md-input-container flex>
48
+										<input mdInput type="text" [(ngModel)]="data.full_name" name="full_name" required maxlength="200" />
49
+										<md-placeholder>
50
+											<span i18n="field.full_name"></span>
51
+										</md-placeholder>
52
+									</md-input-container>
53
+									<error-checker [fieldName]="$L.get('field.full_name')" [formField]="licenseForm.controls.full_name"></error-checker>
54
+								</div>
55
+								<div layout="column" layout-fill flex>
56
+									<md-input-container flex>
57
+										<input mdInput type="email" [(ngModel)]="data.email" name="email" required maxlength="200" />
58
+										<md-placeholder>
59
+											<span i18n="field.email"></span>
60
+										</md-placeholder>
61
+									</md-input-container>
62
+									<error-checker [fieldName]="$L.get('field.full_name')" [formField]="licenseForm.controls.email"></error-checker>
63
+								</div>
64
+							</div>
65
+							<div layout="row" layout-fill layout-padding>
66
+								<div layout="column" layout-fill flex>
67
+									<md-input-container flex>
68
+										<textarea mdInput type="text" type="text" [(ngModel)]="data.request_data" name="request_data" maxlength="2048"></textarea>
69
+										<md-placeholder>
70
+											<span i18n="field.request_data"></span>
71
+										</md-placeholder>
72
+										<md-hint align="end">(max 2048)</md-hint>
73
+									</md-input-container>
74
+								</div>
75
+								<td-file-input #requestFileUploader (select)="requestFileSelected($event)" accept=".req,.txt,.json">
76
+									<md-icon>attachment</md-icon>
77
+								</td-file-input>
78
+							</div>
79
+							<div layout="row" layout-fill layout-padding>
80
+								<div layout="column" layout-fill flex>
81
+									<md-input-container flex>
82
+										<textarea mdInput type="text" type="text" [(ngModel)]="data.comments" name="comments" maxlength="1024"></textarea>
83
+										<md-placeholder>
84
+											<span i18n="field.comments"></span>
85
+										</md-placeholder>
86
+										<md-hint align="end">(max 1024)</md-hint>
87
+									</md-input-container>
88
+								</div>
89
+							</div>
90
+							<div layout="row" layout-fill layout-padding *ngIf="!isNew">
91
+								<field-readonly [value]="data.created_by_id" label="field.created_by" flex></field-readonly>
92
+								<field-readonly [value]="data.creation_date | date: 'medium'" label="field.creation_date" flex></field-readonly>
93
+							</div>
94
+							<div layout="column" layout-fill>
95
+								<span class="md-title" i18n>License metadata</span>
96
+								<div layout="row" layout-fill layout-padding *ngFor="let pair of pack?.metadata">
97
+									<md-input-container flex="40">
98
+										<input mdInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="pair.key" readonly />
99
+										<md-placeholder>
100
+											<span i18n="field.key"></span>
101
+										</md-placeholder>
102
+									</md-input-container>
103
+									<md-input-container flex>
104
+										<input mdInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="pair.value" readonly />
105
+										<md-placeholder>
106
+											<span i18n="field.value"></span>
107
+										</md-placeholder>
108
+									</md-input-container>
109
+								</div>
110
+							</div>
111
+						</div>
112
+					</form>
113
+				</md-card-content>
114
+				<md-divider></md-divider>
115
+				<md-card-actions>
116
+					<div layout="row" layout-align="start center" class="margin">
117
+						<span flex></span>
118
+						<button [disabled]="!licenseForm.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
119
+						<button md-button (click)="goBack()">Cancel</button>
120
+					</div>
121
+				</md-card-actions>
122
+			</md-card>
67
123
 	</div>
68
-</md-card-content>
69
-<md-divider></md-divider>
70
-<md-card-actions>
71
-	<button [disabled]="!packForm.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
72
-	<button md-button md-dialog-close>Cancel</button>
73
-</md-card-actions>
74
-</md-card>
75
-</form>	
124
+</td-layout-card-over>
 securis/src/main/webapp/src/app/login.form.component.ts
similarity index 90%rename from securis/src/main/webapp/src/app/login.form.component.tsrename to securis/src/main/webapp/src/app/forms/login.form.component.ts
..
..
@@ -1,7 +1,7 @@
1
1
 import { Http } from '@angular/http';
2
2
 import { Router } from '@angular/router';
3
3
 import { AfterViewInit, Component, Input } from '@angular/core';
4
-import { UserService } from './user.service';
4
+import { UserService } from '../user.service';
5
5
 import { ToastsManager } from 'ng2-toastr/ng2-toastr';
6
6
 
7
7
 class LoginData {
..
..
@@ -11,7 +11,7 @@
11
11
 
12
12
 @Component({
13
13
   selector: 'login-form',
14
-  templateUrl: "src/app/login.form.html"
14
+  templateUrl: "src/app/forms/login.form.html"
15
15
 })
16
16
 export class LoginFormComponent implements AfterViewInit {
17
17
   data = new LoginData();
 securis/src/main/webapp/src/app/login.form.html
similarity index 100%rename from securis/src/main/webapp/src/app/login.form.htmlrename to securis/src/main/webapp/src/app/forms/login.form.html
 securis/src/main/webapp/src/app/forms/pack.form.component.ts
..
..
@@ -8,7 +8,8 @@
8
8
 import { IPageChangeEvent } from '@covalent/core';
9
9
 import { Component, AfterViewInit } from '@angular/core';
10
10
 import { TdMediaService } from '@covalent/core';
11
-import { IComboOption } from './base';
11
+import { IComboOption, FormBase } from './base';
12
+import { ActivatedRoute, Router } from '@angular/router';
12
13
 
13
14
 
14
15
 
..
..
@@ -16,10 +17,8 @@
16
17
   selector: 'pack-form',
17
18
   templateUrl: 'src/app/forms/pack.form.html'
18
19
 })
19
-export class PackFormComponent implements AfterViewInit {
20
+export class PackFormComponent extends FormBase implements AfterViewInit {
20
21
 
21
-  form_title: string = 'Title';
22
-  form_subtitle: string = '';
23
22
   organizations : IComboOption[];
24
23
   licensetypes : IComboOption[];
25
24
   data: any = {};
..
..
@@ -44,18 +43,20 @@
44
43
     'value': '',
45
44
   }
46
45
   constructor(private http: Http,
47
-              private toaster: ToastsManager,
46
+              toaster: ToastsManager,
48
47
               private licenseTypes: LicenseTypesService,
48
+              route: ActivatedRoute,
49
+              private router: Router,
49
50
               private packs: PacksService,
50
-              private $L: LocaleService) {
51
-      Object.keys(this.fields).forEach(k => this.fields[k] = $L.get(`field.${k}`));
51
+              $L: LocaleService) {
52
+    super($L, route, toaster, packs, $L.get('pack'));
52
53
   }
53
54
 
54
55
   public getFieldName(fieldId: string) : string {
55
56
     return this.fields[fieldId];
56
57
   }
57
58
 
58
-  private loadCombos(): void {
59
+  loadCombos(): void {
59
60
       this.http.get('organization')
60
61
         .map(response => response.json().map((org : any) => <IComboOption>{id: org.id, label: `(${org.code}) ${org.name}`}))
61
62
         .subscribe(
..
..
@@ -70,15 +71,9 @@
70
71
         );
71
72
   }
72
73
 
73
-  save() {
74
-      var command = this.isNew ? this.packs.create(this.data) : this.packs.modify(this.data.id, this.data);
75
-      command.subscribe(
76
-          data => this.toaster.success(this.$L.get('Pack saved sucessfully')),
77
-          err => {
78
-            console.error(err);
79
-            this.toaster.success(this.$L.get('Error saving pack'));
80
-          }
81
-        );
74
+
75
+  goBack(): void {
76
+    this.router.navigate([`packs`]);
82
77
   }
83
78
 
84
79
   changeLicType(event: any) {
..
..
@@ -99,16 +94,15 @@
99
94
   } 
100
95
   
101
96
   ngOnInit(): void {
102
-    this.loadCombos();
103
-    if (this.isNew) {
104
-      this.data.status = PACK_STATUS.CREATED;
105
-    }
106
-    this.form_title = this.$L.get('Pack data');
107
-    this.form_subtitle = this.$L.get(this.isNew ? 'Create a new licenses pack': 'Modify the licenses pack data') ;
97
+
108
98
   }
109
99
 
110
100
 
111
101
   ngAfterViewInit(): void {
102
+    this.loadCombos();
103
+    super.prepareData('packId', {
104
+      status: PACK_STATUS.CREATED
105
+    });
112
106
   }
113
107
 }
114
108
 
 securis/src/main/webapp/src/app/forms/pack.form.html
..
..
@@ -1,189 +1,160 @@
1
-<md-toolbar>
2
-	<span md-dialog-title>{{form_title}}</span>
3
-	<span flex></span>
4
-	<button md-icon-button (click)="save()"><md-icon>save</md-icon></button>
5
-	<button md-icon-button md-dialog-close><md-icon>close</md-icon></button>
6
-</md-toolbar>
7
-<p class="md-subhead">{{form_subtitle}}</p>
8
-<md-divider></md-divider>
9
-<form #packForm="ngForm" class="inset" >
10
-<div layout="column" >
11
-<md-dialog-content>
12
-	<div layout="column" layout-align="start center">
13
-		<div layout="row" layout-fill layout-padding>
14
-			<div layout="column" layout-fill  flex="15" *ngIf="!isNew">
15
-				<md-input-container>
16
-					<input mdInput maxLength="50" type="text" [(ngModel)]="data.id" name="id" required [readonly]="!isNew" />
17
-					<md-placeholder>
18
-						<span i18n="field.id"></span>
19
-					</md-placeholder>
20
-				</md-input-container>
21
-			</div>
22
-			<div layout="column" layout-fill  flex>
23
-				<md-input-container>
24
-					<input mdInput maxLength="50" type="text" [(ngModel)]="data.code" name="code" required [readonly]="!isNew" />
25
-					<md-placeholder>
26
-						<span i18n="field.code"></span>
27
-					</md-placeholder>
28
-				</md-input-container>
29
-				<error-checker [fieldName]="getFieldName('code')" [formField]="packForm.controls.code"></error-checker>
30
-			</div>
31
-			<div layout="column" layout-fill flex>
32
-				<md-input-container>
33
-					<input mdInput type="number"  [(ngModel)]="data.num_licenses" name="num_licenses" required />
34
-					<md-placeholder>
35
-						<span i18n="field.num_licenses"></span>
36
-					</md-placeholder>
37
-				</md-input-container>
38
-				<error-checker [fieldName]="getFieldName('num_licenses')" [formField]="packForm.controls.num_licenses"></error-checker>
39
-			</div>
40
-		</div>
41
-		<div layout="row" layout-fill layout-padding>
42
-			<div layout="column" layout-fill flex>
43
-				<md-checkbox labelPosition="after" [(ngModel)]="data.license_preactivation" name="license_preactivation">
44
-					<span i18n="field.license_preactivation"></span>
45
-				</md-checkbox>
46
-			</div>
47
-			<div layout="column" layout-fill flex *ngIf="!isNew">
48
-				<div layout="column" class="mat-input-container" flex>
49
-					<label class="mat-input-placeholder mat-float">
50
-						<span class="placeholder" i18n="field.status"></span>
51
-					</label>
52
-					<div class="label-value mat-input-element">{{packs.getStatusName(data.status)}}</div>
1
+<td-layout-card-over cardWidth="60">
2
+	<md-toolbar role="toolbar" class="mat-secondary">
3
+		<button md-icon-button (click)="goBack()" color="accent">
4
+			<md-icon>arrow_back</md-icon>
5
+		</button>
6
+		<span class="md-title" i18n>{{form_title}}</span>
7
+		<span flex></span>
8
+		<button md-icon-button (click)="save()"><md-icon>save</md-icon></button>
9
+	</md-toolbar>
10
+	<div class="margin" layout-align-gt-xs="center start" layout-fill="" layout-gt-xs="row">
11
+		<md-card flex="70">
12
+			<md-card-title>
13
+				{{form_subtitle}}
14
+			</md-card-title>
15
+			<md-divider></md-divider>
16
+			<md-card-content>
17
+				<form #packForm="ngForm" class="inset">
18
+					<div layout="column" layout-align="start center">
19
+						<div layout="row" layout-fill layout-padding>
20
+							<field-readonly [value]="data.id" label="field.id" flex="15" *ngIf="!isNew"></field-readonly>
21
+							<div layout="column" layout-fill flex>
22
+								<md-input-container>
23
+									<input mdInput maxLength="50" type="text" [(ngModel)]="data.code" name="code" required [readonly]="!isNew" />
24
+									<md-placeholder>
25
+										<span i18n="field.code"></span>
26
+									</md-placeholder>
27
+								</md-input-container>
28
+								<error-checker [fieldName]="getFieldName('code')" [formField]="packForm.controls.code"></error-checker>
29
+							</div>
30
+							<div layout="column" layout-fill flex>
31
+								<md-input-container>
32
+									<input mdInput type="number" [(ngModel)]="data.num_licenses" name="num_licenses" required />
33
+									<md-placeholder>
34
+										<span i18n="field.num_licenses"></span>
35
+									</md-placeholder>
36
+								</md-input-container>
37
+								<error-checker [fieldName]="getFieldName('num_licenses')" [formField]="packForm.controls.num_licenses"></error-checker>
38
+							</div>
39
+						</div>
40
+						<div layout="row" layout-fill layout-padding>
41
+							<div layout="column" layout-fill flex>
42
+								<md-checkbox labelPosition="after" [(ngModel)]="data.license_preactivation" name="license_preactivation">
43
+									<span i18n="field.license_preactivation"></span>
44
+								</md-checkbox>
45
+							</div>
46
+							<field-readonly [value]="packs.getStatusName(data.status)" label="field.status" flex *ngIf="!isNew"></field-readonly>
47
+						</div>
48
+						<div layout="row" layout-fill layout-padding>
49
+							<div layout="column" layout-fill flex>
50
+								<md-input-container flex>
51
+									<input mdInput type="date" [(ngModel)]="data.init_valid_date" name="init_valid_date" required />
52
+									<md-placeholder>
53
+										<span i18n="field.end_valid_date"></span>
54
+									</md-placeholder>
55
+								</md-input-container>
56
+								<error-checker [fieldName]="getFieldName('init_valid_date')" [formField]="packForm.controls.init_valid_date"></error-checker>
57
+							</div>
58
+							<div layout="column" layout-fill flex>
59
+								<md-input-container flex>
60
+									<input mdInput type="date" [(ngModel)]="data.end_valid_date" name="end_valid_date" required />
61
+									<md-placeholder>
62
+										<span i18n="field.end_valid_date"></span>
63
+									</md-placeholder>
64
+								</md-input-container>
65
+								<error-checker [fieldName]="getFieldName('end_valid_date')" [formField]="packForm.controls.end_valid_date"></error-checker>
66
+							</div>
67
+						</div>
68
+						<div layout="row" layout-fill layout-padding *ngIf="isNew">
69
+							<div layout="column" layout-fill flex>
70
+								<md-select [placeholder]="getFieldName('organization_id')" flex [(ngModel)]="data.organization_id" name="organization_id"
71
+								 (change)="changeOrg($event)">
72
+									<md-option *ngFor="let org of organizations" [value]="org.id">
73
+										{{org.label}}
74
+									</md-option>
75
+								</md-select>
76
+								<error-checker [fieldName]="getFieldName('organization_id')" [formField]="packForm.controls.organization_id"></error-checker>
77
+							</div>
78
+							<div layout="column" layout-fill flex>
79
+								<md-select flex [placeholder]="getFieldName('license_type_id')" [(ngModel)]="data.license_type_id" name="license_type_id"
80
+								 (change)="changeLicType($event)">
81
+									<md-option *ngFor="let lt of licensetypes" [value]="lt.id">
82
+										{{lt.label}}
83
+									</md-option>
84
+								</md-select>
85
+								<error-checker [fieldName]="getFieldName('license_type_id')" [formField]="packForm.controls.license_type_id"></error-checker>
86
+							</div>
87
+						</div>
88
+						<div layout="row" layout-fill layout-padding *ngIf="!isNew">
89
+							<field-readonly [value]="data.organization_name" label="field.organization_id" flex></field-readonly>
90
+							<field-readonly [value]="data.licensetype_code" label="field.license_type_id" flex></field-readonly>
91
+						</div>
92
+						<div layout="row" layout-fill layout-padding>
93
+							<div layout="column" layout-fill flex>
94
+								<md-input-container flex>
95
+									<input mdInput type="number" [(ngModel)]="data.preactivation_valid_period" name="preactivation_valid_period" required />
96
+									<md-placeholder>
97
+										<span i18n="field.preactivation_valid_period"></span>
98
+									</md-placeholder>
99
+									<md-hint align="end">days</md-hint>
100
+								</md-input-container>
101
+								<error-checker [fieldName]="getFieldName('preactivation_valid_period')" [formField]="packForm.controls.preactivation_valid_period"></error-checker>
102
+							</div>
103
+							<div layout="column" layout-fill flex>
104
+								<md-input-container flex>
105
+									<input mdInput type="number" [(ngModel)]="data.renew_valid_period" name="renew_valid_period" required />
106
+									<md-placeholder>
107
+										<span i18n="field.renew_valid_period"></span>
108
+									</md-placeholder>
109
+									<md-hint align="end">days</md-hint>
110
+								</md-input-container>
111
+								<error-checker [fieldName]="getFieldName('renew_valid_period')" [formField]="packForm.controls.renew_valid_period"></error-checker>
112
+							</div>
113
+						</div>
114
+						<div layout="row" layout-fill layout-padding>
115
+							<div layout="column" layout-fill flex>
116
+								<md-input-container flex>
117
+									<textarea mdInput type="text" type="text" [(ngModel)]="data.comments" name="comments" maxlength="1024"></textarea>
118
+									<md-placeholder>
119
+										<span i18n="field.comments"></span>
120
+									</md-placeholder>
121
+									<md-hint align="end">(max 1024)</md-hint>
122
+								</md-input-container>
123
+							</div>
124
+						</div>
125
+						<div layout="row" layout-fill layout-padding *ngIf="!isNew">
126
+							<field-readonly [value]="data.created_by_name" label="field.created_by" flex></field-readonly>
127
+							<field-readonly [value]="data.creation_timestamp | date: 'medium'" label="field.creation_timestamp" flex></field-readonly>
128
+						</div>
129
+						<div layout="column" layout-fill>
130
+							<span class="md-title" i18n>License metadata</span>
131
+							<div layout="row" layout-fill layout-padding *ngFor="let pair of data.metadata">
132
+								<md-input-container flex="40">
133
+									<input mdInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="pair.key" readonly />
134
+									<md-placeholder>
135
+										<span i18n="field.key"></span>
136
+									</md-placeholder>
137
+								</md-input-container>
138
+								<md-input-container flex>
139
+									<input mdInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="pair.value" [readonly]="pair.readonly" [required]="pair.required"
140
+									/>
141
+									<md-placeholder>
142
+										<span i18n="field.value"></span>
143
+									</md-placeholder>
144
+								</md-input-container>
145
+							</div>
146
+						</div>
147
+					</div>
148
+				</form>
149
+			</md-card-content>
150
+			<md-divider></md-divider>
151
+			<md-card-actions>
152
+				<div layout="row" layout-align="start center" class="margin">
153
+					<span flex></span>
154
+					<button [disabled]="!packForm.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
155
+					<button md-button (click)="goBack()">Cancel</button>
53
156
 				</div>
54
-			</div>
55
-		</div>
56
-		<div layout="row" layout-fill layout-padding>
57
-			<div layout="column" layout-fill flex>
58
-				<md-input-container flex>
59
-					<input mdInput type="date" [(ngModel)]="data.init_valid_date" name="init_valid_date" required />
60
-					<md-placeholder>
61
-						<span i18n="field.end_valid_date"></span>
62
-					</md-placeholder>
63
-				</md-input-container>
64
-				<error-checker [fieldName]="getFieldName('init_valid_date')" [formField]="packForm.controls.init_valid_date"></error-checker>
65
-			</div>
66
-			<div layout="column" layout-fill flex>
67
-				<md-input-container flex>
68
-					<input mdInput type="date" [(ngModel)]="data.end_valid_date" name="end_valid_date" required />
69
-					<md-placeholder>
70
-						<span i18n="field.end_valid_date"></span>
71
-					</md-placeholder>
72
-				</md-input-container>
73
-				<error-checker [fieldName]="getFieldName('end_valid_date')" [formField]="packForm.controls.end_valid_date"></error-checker>
74
-			</div>
75
-		</div>
76
-		<div layout="row" layout-fill layout-padding *ngIf="isNew">
77
-			<div layout="column" layout-fill flex>
78
-				<md-select [placeholder]="getFieldName('organization_id')" flex [(ngModel)]="data.organization_id" name="organization_id" (change)="changeOrg($event)">
79
-					<md-option *ngFor="let org of organizations" [value]="org.id">
80
-						{{org.label}}
81
-					</md-option>
82
-				</md-select>
83
-				<error-checker [fieldName]="getFieldName('organization_id')" [formField]="packForm.controls.organization_id"></error-checker>
84
-			</div>
85
-			<div layout="column" layout-fill flex>
86
-				<md-select flex [placeholder]="getFieldName('license_type_id')" [(ngModel)]="data.license_type_id" name="license_type_id" (change)="changeLicType($event)">
87
-					<md-option *ngFor="let lt of licensetypes" [value]="lt.id">
88
-						{{lt.label}}
89
-					</md-option>
90
-				</md-select>
91
-				<error-checker [fieldName]="getFieldName('license_type_id')" [formField]="packForm.controls.license_type_id"></error-checker>
92
-			</div>
93
-		</div>
94
-		<div layout="row" layout-fill layout-padding *ngIf="!isNew">
95
-			<div layout="column" layout-fill flex>
96
-				<div layout="column" class="mat-input-container" flex>
97
-					<label class="mat-input-placeholder mat-float">
98
-						<span class="placeholder" i18n="field.organization_id"></span>
99
-					</label>
100
-					<div class="label-value mat-input-element">{{data.organization_name}}</div>
101
-				</div>
102
-			</div>
103
-			<div layout="column" layout-fill flex>
104
-				<div layout="column" class="mat-input-container" flex>
105
-					<label class="mat-input-placeholder mat-float">
106
-						<span class="placeholder" i18n="field.license_type_id"></span>
107
-					</label>
108
-					<div class="label-value mat-input-element">{{data.licensetype_code}}</div>
109
-				</div>
110
-			</div>
111
-		</div>
112
-		<div layout="row" layout-fill layout-padding >
113
-			<div layout="column" layout-fill flex>
114
-				<md-input-container flex>
115
-					<input mdInput type="number"  [(ngModel)]="data.preactivation_valid_period" name="preactivation_valid_period" required />
116
-					<md-placeholder>
117
-						<span i18n="field.preactivation_valid_period"></span>
118
-					</md-placeholder>
119
-					<md-hint align="end">days</md-hint>
120
-				</md-input-container>
121
-				<error-checker [fieldName]="getFieldName('preactivation_valid_period')" [formField]="packForm.controls.preactivation_valid_period"></error-checker>
122
-			</div>
123
-			<div layout="column" layout-fill flex>
124
-				<md-input-container flex>
125
-					<input mdInput type="number"[(ngModel)]="data.renew_valid_period" name="renew_valid_period" required />
126
-					<md-placeholder>
127
-						<span i18n="field.renew_valid_period"></span>
128
-					</md-placeholder>
129
-					<md-hint align="end">days</md-hint>
130
-				</md-input-container>
131
-				<error-checker [fieldName]="getFieldName('renew_valid_period')" [formField]="packForm.controls.renew_valid_period"></error-checker>
132
-			</div>
133
-		</div>
134
-		<div layout="row" layout-fill layout-padding>
135
-			<div layout="column" layout-fill flex>
136
-				<md-input-container flex>
137
-					<textarea mdInput type="text" type="text" [(ngModel)]="data.comments" name="comments" maxlength="1024" ></textarea>
138
-					<md-placeholder>
139
-						<span i18n="field.comments"></span>
140
-					</md-placeholder>
141
-					<md-hint align="end">(max 1024)</md-hint>
142
-				</md-input-container>
143
-			</div>
144
-		</div>
145
-		<div layout="row" layout-fill layout-padding *ngIf="!isNew">
146
-			<div layout="column" layout-fill flex>
147
-				<div layout="column" class="mat-input-container" flex>
148
-					<label class="mat-input-placeholder mat-float">
149
-						<span class="placeholder" i18n="field.created_by_name"></span>
150
-					</label>
151
-					<div class="label-value mat-input-element">{{data.created_by_name}}</div>
152
-				</div>
153
-			</div>
154
-			<div layout="column" layout-fill flex>
155
-				<div layout="column" class="mat-input-container" flex>
156
-					<label class="mat-input-placeholder mat-float">
157
-						<span class="placeholder" i18n="field.creation_timestamp"></span>
158
-					</label>
159
-					<div class="label-value mat-input-element">{{data.creation_timestamp | date: 'medium'}}</div>
160
-				</div>
161
-			</div>
162
-		</div>
163
-		<div layout="column" layout-fill>
164
-			<span class="md-title" i18n>License metadata</span>
165
-			<div layout="row" layout-fill layout-padding *ngFor="let pair of data.metadata">
166
-				<md-input-container flex="40">
167
-					<input mdInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="pair.key" readonly />
168
-					<md-placeholder>
169
-						<span i18n="field.key"></span>
170
-					</md-placeholder>
171
-				</md-input-container>
172
-				<md-input-container flex>
173
-					<input mdInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="pair.value" [readonly]="pair.readonly" [required]="pair.required" />
174
-					<md-placeholder>
175
-						<span i18n="field.value"></span>
176
-					</md-placeholder>
177
-				</md-input-container>
178
-			</div>
179
-		</div>
157
+			</md-card-actions>
158
+		</md-card>
180
159
 	</div>
181
-</md-dialog-content>
182
-<div flex></div>
183
-<md-divider></md-divider>
184
-<md-dialog-actions layout="row" layout-align="end center">
185
-		<button [disabled]="!packForm.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
186
-		<button md-button md-dialog-close>Cancel</button>
187
-</md-dialog-actions>
188
-</div>
189
-</form>	
160
+</td-layout-card-over>
 securis/src/main/webapp/src/app/license.list.component.ts
deleted file mode 100644
..
..
@@ -1,178 +0,0 @@
1
-import { LocaleService } from './common/i18n';
2
-import { ActivatedRoute, Router } from '@angular/router';
3
-import { MdDialog, MdDialogConfig } from '@angular/material';
4
-import { TdDataTableService, TdPagingBarComponent, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumn } from '@covalent/core';
5
-import { IPageChangeEvent } from '@covalent/core';
6
-import { Component, AfterViewInit, ViewChild } from '@angular/core';
7
-import { TdMediaService } from '@covalent/core';
8
-import { LicensesService } from './resources/licenses';
9
-import { PacksService } from './resources/packs';
10
-import { Location } from '@angular/common';
11
-
12
-import { LicenseFormComponent } from './forms/license.form.component';
13
-
14
-var lic_example = { activation_code: '19fa8d30-29cb-4b59-81b5-3837af8204b6',
15
-  code: 'CISA02-494-1',
16
-  code_suffix: 1,
17
-  created_by_id: '_client',
18
-  creation_timestamp: 1447848747000,
19
-  email: 'ccalvo@curisit.net',
20
-  expiration_date: 1450440747000,
21
-  full_name: 'César SA',
22
-  id: 110,
23
-  licenseData: '{"appCode":"CISA","appName":"CurisIntegrity SA","licenseCode":"CISA02-494-1","activationCode":"19fa8d30-29cb-4b59-81b5-3837af8204b6","expirationDate":1450440746790,"arch":"x86_64","osName":"Mac OS X","macAddresses":["60-03-08-95-AE-D0","B6-2B-33-E9-64-2D"],"crcLogo":"10f6379e0e1c00ebc403160307e3c5d0aba0727c9cae0bf1ac7cd19d84fdc80f","metadata":{"maxWellLifeLines":"50","simulationModes":"A1,A2,N1,QL"},"signature":"Tejun4bNbknxOyEmPaO/fGfGhv4URhVON/7bESxbODFWMJYKQqOPHrDiSUMlf6RbfWSVg2Dry8bY1WX881QGjTkBaHeDJKCy1EaJBwJ2nv9TYSMOiRj0eqMNYWE9/oLpvufHylAkPUpZwXVkSzTxmN+RvWa2Xt4Fu7xN+4PDHV4t7PSq7QwsFlD9ArgYC6Vx+zuL9WZANBtJ2gU/gKOE0CU0KjsB49RGQSFS/G27+H/YuDkCiQq7PC7VdVwYONQ2HO91fyPvInIrzDC5+sWHcUAqSCop//8klMy03hWl6VvAlaSP7kNM3KadyqXIJ3tx4Jwm1W+gBb3tngHzVCpYmw=="}',
24
-  modification_timestamp: 1447848747000,
25
-  pack_code: 'CISA02',
26
-  pack_id: 18,
27
-  request_data: '{"appCode":"CISA","activationCode":"19fa8d30-29cb-4b59-81b5-3837af8204b6","arch":"x86_64","osName":"Mac OS X","macAddresses":["60-03-08-95-AE-D0","B6-2B-33-E9-64-2D"],"crcLogo":"10f6379e0e1c00ebc403160307e3c5d0aba0727c9cae0bf1ac7cd19d84fdc80f"}',
28
-  status: 'AC' }
29
-
30
-const DIALOG_OPTIONS : MdDialogConfig = {
31
-  height: '80%', // can be px or %
32
-  width: '45%', // can be px or %
33
-}
34
-
35
-@Component({
36
-  selector: 'license-list',
37
-  templateUrl: 'src/app/license.list.component.html'
38
-})
39
-export class LicenseListComponent implements AfterViewInit {
40
-  data: any[] = [];
41
-  @ViewChild('pagingBar') pagingBar : TdPagingBarComponent ;
42
-
43
-  pack: any = null;
44
-  columns: ITdDataTableColumn[] = [
45
-    { name: 'code', label: 'Code', tooltip: 'License code' },
46
-    { name: 'full_name', label: 'User name' },
47
-    { name: 'email', label: 'User email' },
48
-    { name: 'expiration_date', label: 'Expiration date' },
49
-    { name: 'status', label: 'Status' },
50
-    { name: 'menu', label: '' }
51
-  ];
52
-
53
-  filteredData: any[] = this.data;
54
-  filteredTotal: number = this.data.length;
55
-
56
-  searchTerm: string = '';
57
-  fromRow: number = 1;
58
-  currentPage: number = 1;
59
-  pageSize: number = 10;
60
-  sortBy: string = 'expiration_date';
61
-  sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending;
62
-  filteredItems = this.data.length;
63
-  license_menu_options : any[] = [{
64
-    icon: 'edit',
65
-    command: 'edit',
66
-    name: 'Edit'
67
-  },{
68
-    icon: 'cancel',
69
-    command: 'cancel',
70
-    name: 'Cancel'
71
-  }]
72
-  
73
-  licenseAction(action: any) {
74
-    console.log(action.command);
75
-  }
76
-
77
-  isActionAvailable(pack : any) : boolean {
78
-    return true;
79
-  }
80
-
81
-  constructor(private _dataTableService: TdDataTableService,
82
-    private media: TdMediaService,
83
-    private $L: LocaleService,
84
-    private router: Router,
85
-    private location: Location,
86
-    private route: ActivatedRoute,
87
-    private dialog: MdDialog,
88
-    private licenseForm: LicenseFormComponent,
89
-    private licenses: LicensesService,
90
-    private packs: PacksService) {
91
-  }
92
-
93
-  ngOnInit(): void {
94
-    this.route.params.subscribe(params => {
95
-        var packId = +params['id']; // (+) converts string 'id' to a number
96
-        this.licenses.getByPack(packId).subscribe(
97
-          list => {
98
-            this.data = list;
99
-            this.filter();
100
-          },
101
-          err => console.error(err)
102
-        );
103
-        this.packs.get(packId).subscribe(
104
-          packData => {
105
-            this.pack = packData;
106
-          },
107
-          err => console.error(err)
108
-        );
109
-      });
110
-  }
111
-
112
-  goBack() : void {
113
-    this.location.back();
114
-  }
115
-
116
-  isLicenseExpired(lic: any): boolean {
117
-    return lic.expiration_date < (new Date().getTime());
118
-  }
119
-
120
-  createLicense() : void {
121
-    let ref = this.dialog.open(LicenseFormComponent, DIALOG_OPTIONS);
122
-    
123
-    ref.componentInstance.isNew = true;
124
-    ref.componentInstance.data = {};
125
-    ref.afterClosed().subscribe(result => {
126
-      this.filter();
127
-    });
128
-  
129
-  }
130
-
131
-  editLicense(lic: any) : void {
132
-    let ref = this.dialog.open(LicenseFormComponent, DIALOG_OPTIONS);
133
-    ref.componentInstance.isNew = false;
134
-    ref.componentInstance.data = lic;
135
-    ref.afterClosed().subscribe(result => {
136
-      this.filter();
137
-    });
138
-  }
139
-
140
-
141
-  sort(sortEvent: ITdDataTableSortChangeEvent): void {
142
-    this.sortBy = sortEvent.name;
143
-    this.sortOrder = sortEvent.order;
144
-    this.filter();
145
-  }
146
-
147
-  search(searchTerm: string): void {
148
-    this.searchTerm = searchTerm;
149
-    this.filter();
150
-  }
151
-
152
-  page(pagingEvent: IPageChangeEvent): void {
153
-    this.fromRow = pagingEvent.fromRow;
154
-    this.currentPage = pagingEvent.page;
155
-    this.pageSize = pagingEvent.pageSize;
156
-    this.filter();
157
-  }
158
-
159
-  loadData() {
160
-
161
-  }
162
-
163
-  filter(): void {
164
-    let newData: any[] = this.data;
165
-    newData = this._dataTableService.filterData(newData, this.searchTerm, true);
166
-    this.filteredTotal = newData.length;
167
-    this.filteredItems = newData.length;
168
-    newData = this._dataTableService.sortData(newData, this.sortBy, this.sortOrder);
169
-    newData = this._dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize);
170
-    this.filteredData = newData;
171
-  }
172
-
173
-  ngAfterViewInit(): void {
174
-    this.media.broadcast();
175
-
176
-  }
177
-}
178
-
 securis/src/main/webapp/src/app/listing/application.list.component.html
..
..
@@ -0,0 +1,37 @@
1
+<td-layout-card-over cardWidth="70">
2
+  <md-toolbar role="toolbar" class="mat-secondary">
3
+    <span class="push-left-sm">
4
+        <span class="md-title" i18n>Applications</span>
5
+    </span>
6
+    <span class="push-left-sm" *ngIf="filteredItems < data.length">
7
+        <span class="md-body-1">{{filteredItems}} of {{data.length}} applications 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)="create()" [mdTooltip]="$L.get('Create a new application')">
12
+        <md-icon>add</md-icon>
13
+      </button>
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="creation_timestamp" let-row="row" let-value="value">
24
+         <span>{{value | date: 'medium'}}</span>
25
+      </template>
26
+      <template tdDataTableTemplate="menu" let-row="row" let-index="index">
27
+        <div layout="row" layout-align="end center">
28
+          <button md-icon-button (click)="edit(row.id)" color="primary"><md-icon>edit</md-icon></button>
29
+          <button md-icon-button (click)="delete(row)" color="warn"><md-icon>delete</md-icon></button>
30
+        </div>
31
+      </template>
32
+    </td-data-table>
33
+    <td-paging-bar #pagingBar [pageSizes]="[10, 20, 40]" [total]="filteredTotal" (change)="page($event)" [hidden]="pagingBar.total <= 10">
34
+      <span td-paging-bar-label hide-xs>Rows per page:</span> {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
35
+    </td-paging-bar>
36
+  </div>
37
+</td-layout-card-over>
 securis/src/main/webapp/src/app/listing/application.list.component.ts
..
..
@@ -0,0 +1,89 @@
1
+import { Router, ActivatedRoute } from '@angular/router';
2
+import { MdDialog, MdDialogConfig } from '@angular/material';
3
+import {
4
+    ITdDataTableColumn,
5
+    ITdDataTableSortChangeEvent,
6
+    TdDataTableService,
7
+    TdDataTableSortingOrder,
8
+    TdPagingBarComponent
9
+} from '@covalent/core';
10
+import { IPageChangeEvent } from '@covalent/core';
11
+import { Component, ViewChild, AfterViewInit } from '@angular/core';
12
+import { TdMediaService } from '@covalent/core';
13
+import { ApplicationsService } from '../resources/applications';
14
+import { PackFormComponent } from '../forms/pack.form.component';
15
+import { LocaleService } from '../common/i18n';
16
+import { ListingBase } from './base';
17
+
18
+
19
+var app_example = { 
20
+	code: 'CICS',
21
+  creation_timestamp: 1418384439000,
22
+  description: 'Wellbore integrity analysis software',
23
+  id: 1,
24
+  license_filename: 'config_server.lic',
25
+  name: 'CurisIntegrity',
26
+  metadata: 
27
+   [ { key: 'max_docs',
28
+       value: '250000',
29
+       readonly: true,
30
+       mandatory: true } ] 
31
+}
32
+
33
+@Component({
34
+  selector: 'application-list',
35
+  templateUrl: 'src/app/listing/application.list.component.html'
36
+})
37
+export class ApplicationListComponent extends ListingBase implements AfterViewInit {
38
+
39
+  columns: ITdDataTableColumn[] = [
40
+    { name: 'code', label: 'Code', tooltip: 'Application code' },
41
+    { name: 'name', label: 'Application name' },
42
+    { name: 'creation_timestamp', label: 'Creation date' },
43
+    { name: 'menu', label: '' }
44
+  ];
45
+
46
+  pack_menu_options : any[] = [{
47
+    command: 'edit',
48
+    name: 'Edit'
49
+  },{
50
+    command: 'cancel',
51
+    name: 'Cancel'
52
+  }]
53
+  
54
+
55
+  constructor(_dataTableService: TdDataTableService,
56
+    private media: TdMediaService,
57
+    private router: Router,
58
+    private $L: LocaleService,
59
+    private applicationForm: PackFormComponent,
60
+    private applications: ApplicationsService) {
61
+      super(_dataTableService);
62
+      this.applications.get().subscribe(
63
+        (list : any[]) => {
64
+          this.data = list;
65
+          this.refresh();
66
+        },
67
+        (err: any) => console.error(err)
68
+      );
69
+  }
70
+
71
+
72
+  packAction(action: any) {
73
+    console.log(action.command);
74
+  }
75
+
76
+  isActionAvailable(pack : any) : boolean {
77
+    return true;
78
+  }
79
+
80
+  create() : void {
81
+    this.router.navigate(['applications/create']);
82
+  }
83
+
84
+  edit(appId: number | string) : void {
85
+    this.router.navigate([`applications/edit/${appId}`]);
86
+  }
87
+
88
+}
89
+
 securis/src/main/webapp/src/app/listing/base.ts
..
..
@@ -0,0 +1,83 @@
1
+import { AfterViewInit, Component, Input, ViewChild } from '@angular/core';
2
+import { TdDataTableService, TdPagingBarComponent, TdDataTableSortingOrder, IPageChangeEvent, ITdDataTableSortChangeEvent } from '@covalent/core';
3
+import { UserService } from '../user.service';
4
+import { ToastsManager } from 'ng2-toastr/ng2-toastr';
5
+
6
+export interface IListing {
7
+
8
+	create() : void;
9
+	edit(id: number | string) : void;
10
+	refresh() : void;
11
+	sort(sortEvent: ITdDataTableSortChangeEvent): void;
12
+	search(searchTerm: string): void;
13
+	page(pagingEvent: IPageChangeEvent): void;
14
+}
15
+
16
+export class ListingBase implements IListing, AfterViewInit {
17
+  data: any[] = [];
18
+  
19
+  @ViewChild('pagingBar') pagingBar : TdPagingBarComponent ;
20
+  filteredData: any[] = this.data;
21
+  filteredTotal: number = this.data.length;
22
+  
23
+  searchTerm: string = '';
24
+  fromRow: number = 1;
25
+  currentPage: number = 1;
26
+  pageSize: number = 10;
27
+  sortBy: string;
28
+  sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending;
29
+  filteredItems = this.data.length;
30
+  
31
+  constructor(private _dataTableService: TdDataTableService) {
32
+  }
33
+
34
+  create() : void {
35
+    // To be implemented in the child class
36
+    // For instance: 
37
+    // this.router.navigate([`create`], {relativeTo: this.route});
38
+    throw new Error('Method not implemented');
39
+  }
40
+
41
+  edit(id: number | string) : void {
42
+    // To be implemented in the child class
43
+    // For instance: 
44
+    // this.router.navigate([`edit/${id}`], {relativeTo: this.route});
45
+    throw new Error('Method not implemented');
46
+  }
47
+
48
+
49
+  sort(sortEvent: ITdDataTableSortChangeEvent): void {
50
+    this.sortBy = sortEvent.name;
51
+    this.sortOrder = sortEvent.order;
52
+    this.refresh();
53
+  }
54
+
55
+  search(searchTerm: string): void {
56
+    this.searchTerm = searchTerm;
57
+    this.refresh();
58
+  }
59
+
60
+  page(pagingEvent: IPageChangeEvent): void {
61
+    this.fromRow = pagingEvent.fromRow;
62
+    this.currentPage = pagingEvent.page;
63
+    this.pageSize = pagingEvent.pageSize;
64
+    this.refresh();
65
+  }
66
+
67
+
68
+  refresh(): void {
69
+    let newData: any[] = this.data;
70
+    newData = this._dataTableService.filterData(newData, this.searchTerm, true);
71
+    this.filteredTotal = newData.length;
72
+    this.filteredItems = newData.length;
73
+    newData = this._dataTableService.sortData(newData, this.sortBy, this.sortOrder);
74
+    newData = this._dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize);
75
+    this.filteredData = newData;
76
+  }
77
+
78
+  ngAfterViewInit(): void {
79
+    this.refresh();
80
+  }
81
+
82
+  
83
+}
 securis/src/main/webapp/src/app/license.list.component.html
similarity index 81%rename from securis/src/main/webapp/src/app/license.list.component.htmlrename to securis/src/main/webapp/src/app/listing/license.list.component.html
..
..
@@ -11,15 +11,19 @@
11
11
     </span>
12
12
     <td-search-box #searchBox class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex>
13
13
     </td-search-box>
14
-    <button md-mini-fab color="accent" (click)="createLicense()">
15
-        <md-icon>add</md-icon>
14
+    <button md-mini-fab color="accent" (click)="create()" [mdTooltip]="$L.get('Create a new license')">
15
+        <md-icon>add</md-icon>        
16
16
       </button>
17
17
     <md-toolbar-row *ngIf="!!pack">
18
-      <md-chip-list flex="80" style="margin-left: 70px;">
18
+      <md-chip-list flex="70" style="margin-left: 70px;">
19
19
         <md-chip selected [mdTooltip]="$L.get('field.application_name')" color="primary">{{pack.application_name}} </md-chip>
20
20
         <md-chip selected [mdTooltip]="$L.get('field.organization_id')" color="accent">{{pack.organization_name}} </md-chip>
21
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>
22
+      </md-chip-list>
23
+      <span flex></span>
24
+      <md-chip-list>
25
+        <md-chip [mdTooltip]="$L.get('field.num_available')" color="secondary" [class.bgc-red-A100]="pack.num_available <= 0">
26
+          <span i18n="field.num_available"></span>: {{pack.num_available}} </md-chip>
23
27
       </md-chip-list>
24
28
     </md-toolbar-row>
25
29
   </md-toolbar>
..
..
@@ -54,7 +58,7 @@
54
58
       
55
59
       <template tdDataTableTemplate="menu" let-row="row" let-index="index">
56
60
         <div layout="row" layout-align="end center">
57
-          <button md-icon-button (click)="editLicense(row)" color="primary"><md-icon>edit</md-icon></button>
61
+          <button md-icon-button (click)="edit(row.id)" color="primary"><md-icon>edit</md-icon></button>
58
62
           <button md-icon-button [mdMenuTriggerFor]="licenseMenu" aria-label="License menu">
59
63
             <md-icon>more_vert</md-icon>
60
64
           </button>
..
..
@@ -66,7 +70,7 @@
66
70
         </div>
67
71
       </template>
68
72
     </td-data-table>
69
-    <td-paging-bar #pagingBar [pageSizes]="[10, 20, 40]" [total]="filteredTotal" (change)="page($event)" [hidden]="pagingBar.total <= 10" >
73
+    <td-paging-bar #pagingBar [pageSizes]="[10, 25, 50, 100]" [total]="filteredTotal" (change)="page($event)" [hidden]="pagingBar.total <= 10" >
70
74
       <span i18n td-paging-bar-label hide-xs>Rows per page:</span> {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
71
75
     </td-paging-bar>
72
76
   </div>
 securis/src/main/webapp/src/app/listing/license.list.component.ts
..
..
@@ -0,0 +1,117 @@
1
+import { ActivatedRoute, Router } from '@angular/router';
2
+import { MdDialog, MdDialogConfig } from '@angular/material';
3
+import { TdDataTableService, TdPagingBarComponent, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumn } from '@covalent/core';
4
+import { IPageChangeEvent } from '@covalent/core';
5
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
6
+import { TdMediaService } from '@covalent/core';
7
+import { Location } from '@angular/common';
8
+
9
+import { LocaleService } from '../common/i18n';
10
+import { LicensesService } from '../resources/licenses';
11
+import { PacksService } from '../resources/packs';
12
+import { LicenseFormComponent } from '../forms/license.form.component';
13
+import { ListingBase } from './base';
14
+
15
+var lic_example = { activation_code: '19fa8d30-29cb-4b59-81b5-3837af8204b6',
16
+  code: 'CISA02-494-1',
17
+  code_suffix: 1,
18
+  created_by_id: '_client',
19
+  creation_timestamp: 1447848747000,
20
+  email: 'ccalvo@curisit.net',
21
+  expiration_date: 1450440747000,
22
+  full_name: 'César SA',
23
+  id: 110,
24
+  licenseData: '{"appCode":"CISA","appName":"CurisIntegrity SA","licenseCode":"CISA02-494-1","activationCode":"19fa8d30-29cb-4b59-81b5-3837af8204b6","expirationDate":1450440746790,"arch":"x86_64","osName":"Mac OS X","macAddresses":["60-03-08-95-AE-D0","B6-2B-33-E9-64-2D"],"crcLogo":"10f6379e0e1c00ebc403160307e3c5d0aba0727c9cae0bf1ac7cd19d84fdc80f","metadata":{"maxWellLifeLines":"50","simulationModes":"A1,A2,N1,QL"},"signature":"Tejun4bNbknxOyEmPaO/fGfGhv4URhVON/7bESxbODFWMJYKQqOPHrDiSUMlf6RbfWSVg2Dry8bY1WX881QGjTkBaHeDJKCy1EaJBwJ2nv9TYSMOiRj0eqMNYWE9/oLpvufHylAkPUpZwXVkSzTxmN+RvWa2Xt4Fu7xN+4PDHV4t7PSq7QwsFlD9ArgYC6Vx+zuL9WZANBtJ2gU/gKOE0CU0KjsB49RGQSFS/G27+H/YuDkCiQq7PC7VdVwYONQ2HO91fyPvInIrzDC5+sWHcUAqSCop//8klMy03hWl6VvAlaSP7kNM3KadyqXIJ3tx4Jwm1W+gBb3tngHzVCpYmw=="}',
25
+  modification_timestamp: 1447848747000,
26
+  pack_code: 'CISA02',
27
+  pack_id: 18,
28
+  request_data: '{"appCode":"CISA","activationCode":"19fa8d30-29cb-4b59-81b5-3837af8204b6","arch":"x86_64","osName":"Mac OS X","macAddresses":["60-03-08-95-AE-D0","B6-2B-33-E9-64-2D"],"crcLogo":"10f6379e0e1c00ebc403160307e3c5d0aba0727c9cae0bf1ac7cd19d84fdc80f"}',
29
+  status: 'AC' }
30
+
31
+@Component({
32
+  selector: 'license-list',
33
+  templateUrl: 'src/app/listing/license.list.component.html'
34
+})
35
+export class LicenseListComponent extends ListingBase implements AfterViewInit {
36
+  pack: any = null;
37
+  columns: ITdDataTableColumn[] = [
38
+    { name: 'code', label: 'Code', tooltip: 'License code' },
39
+    { name: 'full_name', label: 'User name' },
40
+    { name: 'email', label: 'User email' },
41
+    { name: 'expiration_date', label: 'Expiration date' },
42
+    { name: 'status', label: 'Status' },
43
+    { name: 'menu', label: '' }
44
+  ];
45
+
46
+  license_menu_options : any[] = [{
47
+    icon: 'edit',
48
+    command: 'edit',
49
+    name: 'Edit'
50
+  },{
51
+    icon: 'cancel',
52
+    command: 'cancel',
53
+    name: 'Cancel'
54
+  }]
55
+  
56
+  licenseAction(action: any) {
57
+    console.log(action.command);
58
+  }
59
+
60
+  isActionAvailable(pack : any) : boolean {
61
+    return true;
62
+  }
63
+
64
+  constructor( _dataTableService: TdDataTableService,
65
+    private media: TdMediaService,
66
+    private $L: LocaleService,
67
+    private router: Router,
68
+    private location: Location,
69
+    private route: ActivatedRoute,
70
+    private dialog: MdDialog,
71
+    private licenseForm: LicenseFormComponent,
72
+    private licenses: LicensesService,
73
+    private packs: PacksService) {
74
+      super(_dataTableService);
75
+  }
76
+
77
+  ngOnInit(): void {
78
+    this.route.params.subscribe(params => {
79
+        var packId = +params['packId']; // (+) converts string 'id' to a number
80
+        this.licenses.getByPack(packId).subscribe(
81
+          list => {
82
+            this.data = list;
83
+            this.refresh();
84
+          },
85
+          err => console.error(err)
86
+        );
87
+        this.packs.get(packId).subscribe(
88
+          packData => {
89
+            this.pack = packData;
90
+          },
91
+          err => console.error(err)
92
+        );
93
+      });
94
+  }
95
+
96
+  goBack() : void {
97
+    this.router.navigate([`packs`]);
98
+  }
99
+
100
+  isLicenseExpired(lic: any): boolean {
101
+    return lic.expiration_date < (new Date().getTime());
102
+  }
103
+
104
+  create() : void {
105
+    this.router.navigate([`packs/${this.pack.id}/licenses/create`]);
106
+  }
107
+
108
+  edit(licId: number | string) : void {
109
+    this.router.navigate([`packs/${this.pack.id}/licenses/edit/${licId}`]);
110
+  }
111
+
112
+  ngAfterViewInit(): void {
113
+    this.media.broadcast();
114
+
115
+  }
116
+}
117
+
 securis/src/main/webapp/src/app/pack.list.component.html
similarity index 92%rename from securis/src/main/webapp/src/app/pack.list.component.htmlrename to securis/src/main/webapp/src/app/listing/pack.list.component.html
..
..
@@ -8,7 +8,7 @@
8
8
     </span>
9
9
     <td-search-box #searchBox class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex>
10
10
     </td-search-box>
11
-    <button md-mini-fab color="accent" (click)="createPack()">
11
+    <button md-mini-fab color="accent" (click)="create()" [mdTooltip]="$L.get('Create a new pack')">
12
12
         <md-icon>add</md-icon>
13
13
       </button>
14
14
   </md-toolbar>
..
..
@@ -35,7 +35,7 @@
35
35
       </template>
36
36
       <template tdDataTableTemplate="menu" let-row="row" let-index="index">
37
37
         <div layout="row" layout-align="end center">
38
-          <button md-icon-button (click)="editPack(row)" color="primary"><md-icon>edit</md-icon></button>
38
+          <button md-icon-button (click)="edit(row.id)" color="primary"><md-icon>edit</md-icon></button>
39
39
           <button md-icon-button [mdMenuTriggerFor]="packMenu" aria-label="Pack menu">
40
40
             <md-icon>more_vert</md-icon>
41
41
           </button>
 securis/src/main/webapp/src/app/listing/pack.list.component.ts
..
..
@@ -0,0 +1,122 @@
1
+import { Router, ActivatedRoute } from '@angular/router';
2
+import { MdDialog, MdDialogConfig } from '@angular/material';
3
+import {
4
+    ITdDataTableColumn,
5
+    ITdDataTableSortChangeEvent,
6
+    TdDataTableService,
7
+    TdDataTableSortingOrder,
8
+    TdPagingBarComponent
9
+} from '@covalent/core';
10
+import { IPageChangeEvent } from '@covalent/core';
11
+import { Component, ViewChild, AfterViewInit } from '@angular/core';
12
+import { TdMediaService } from '@covalent/core';
13
+import { PacksService } from '../resources/packs';
14
+import { PackFormComponent } from '../forms/pack.form.component';
15
+import { LocaleService } from '../common/i18n';
16
+import { ListingBase } from './base';
17
+
18
+
19
+var pack_example = { 
20
+  id: 7,
21
+  code: 'DX250000',
22
+  status: 'AC',
23
+  application_name: 'Doxr',
24
+  created_by_id: 'admin',
25
+  created_by_name: 'Administrator  (admin)',
26
+  creation_timestamp: 1440597540000,
27
+  end_valid_date: 2051222400000,
28
+  init_valid_date: 1440547200000,
29
+  license_preactivation: true,
30
+  license_type_id: 5,
31
+  licensetype_code: 'DXL3',
32
+  metadata: 
33
+   [ { key: 'max_docs',
34
+       value: '250000',
35
+       readonly: true,
36
+       mandatory: true,
37
+       pack_id: 7 } ],
38
+  num_activations: 7,
39
+  num_available: -2,
40
+  num_creations: 7,
41
+  num_licenses: 5,
42
+  organization_id: 2,
43
+  organization_name: 'CurisTec',
44
+  preactivation_valid_period: 70,
45
+  renew_valid_period: 0,
46
+}
47
+
48
+@Component({
49
+  selector: 'pack-list',
50
+  templateUrl: 'src/app/listing/pack.list.component.html'
51
+})
52
+export class PackListComponent extends ListingBase implements AfterViewInit {
53
+
54
+  columns: ITdDataTableColumn[] = [
55
+    { name: 'code', label: 'Code', tooltip: 'License pack code' },
56
+    { name: 'application_name', label: 'App name' },
57
+    { name: 'licensetype_code', label: 'License type' },
58
+    { name: 'organization_name', label: 'Organization' },
59
+    { name: 'used_licenses', label: 'Licenses', tooltip: 'Initial/Available pack licenses' },
60
+    { name: 'menu', label: '' }
61
+  ];
62
+
63
+  pack_menu_options : any[] = [{
64
+    command: 'edit',
65
+    name: 'Edit'
66
+  },{
67
+    command: 'cancel',
68
+    name: 'Cancel'
69
+  }]
70
+  
71
+
72
+  constructor(_dataTableService: TdDataTableService,
73
+    private media: TdMediaService,
74
+    private router: Router,
75
+    private route: ActivatedRoute,
76
+    private dialog: MdDialog,
77
+    private $L: LocaleService,
78
+    private packForm: PackFormComponent,
79
+    private packs: PacksService) {
80
+      super(_dataTableService);
81
+      this.packs.get().subscribe(
82
+        (list : any[]) => {
83
+          this.data = list;
84
+          this.refresh();
85
+        },
86
+        (err: any) => console.error(err)
87
+      );
88
+  }
89
+
90
+
91
+  packAction(action: any) {
92
+    console.log(action.command);
93
+  }
94
+
95
+  isActionAvailable(pack : any) : boolean {
96
+    return true;
97
+  }
98
+
99
+  showLicenses(pack: any) : void {
100
+    this.router.navigate([`${pack.id}/licenses`], {relativeTo: this.route});
101
+  }
102
+
103
+  create() : void {
104
+    this.router.navigate([`create`], {relativeTo: this.route});
105
+  }
106
+
107
+  edit(pack: any) : void {
108
+    this.router.navigate([`edit/${pack.id}`], {relativeTo: this.route});
109
+  }
110
+
111
+  sort(sortEvent: ITdDataTableSortChangeEvent): void {
112
+    this.sortBy = sortEvent.name === 'used_licenses' ? 'num_available' : sortEvent.name;
113
+    this.sortOrder = sortEvent.order;
114
+    this.refresh();
115
+  }
116
+
117
+  ngAfterViewInit(): void {
118
+    this.media.broadcast();
119
+
120
+  }
121
+}
122
+
 securis/src/main/webapp/src/app/menu.component.html
..
..
@@ -3,28 +3,28 @@
3
3
   </td-navigation-drawer>
4
4
 
5
5
   <md-nav-list td-sidenav-content>
6
-    <a routerLink="/menu/packs" md-list-item (click)="closeMenu()">
7
-      <md-icon md-list-avatar>view_compact</md-icon>
6
+    <a routerLink="/packs" md-list-item (click)="closeMenu()">
7
+      <md-icon md-list-avatar>collections_bookmark</md-icon>
8
8
       <h3 md-line i18n="menu.packs">  </h3>
9
9
       <p md-line i18n="menu.packs.description"> </p>
10
10
     </a>
11
-    <a routerLink="/menu/packs" md-list-item (click)="closeMenu()">
12
-      <md-icon md-list-avatar>view_compact</md-icon>
11
+    <a routerLink="/applications" md-list-item (click)="closeMenu()">
12
+      <md-icon md-list-avatar>web</md-icon>
13
13
       <h3 md-line i18n="menu.applications">  </h3>
14
14
       <p md-line i18n="menu.applications.description"> </p>
15
15
     </a>
16
-    <a routerLink="/menu/packs" md-list-item (click)="closeMenu()">
17
-      <md-icon md-list-avatar>view_compact</md-icon>
16
+    <a routerLink="licesetypes" md-list-item (click)="closeMenu()">
17
+      <md-icon md-list-avatar>class</md-icon>
18
18
       <h3 md-line i18n="menu.license_types">  </h3>
19
19
       <p md-line i18n="menu.license_types.description"> </p>
20
20
     </a>
21
-    <a routerLink="/menu/packs" md-list-item (click)="closeMenu()">
22
-      <md-icon md-list-avatar>view_compact</md-icon>
21
+    <a routerLink="organizations" md-list-item (click)="closeMenu()">
22
+      <md-icon md-list-avatar>business</md-icon>
23
23
       <h3 md-line i18n="menu.organizations">  </h3>
24
24
       <p md-line i18n="menu.organizations.description"> </p>
25
25
     </a>
26
-    <a routerLink="/menu/packs" md-list-item (click)="closeMenu()">
27
-      <md-icon md-list-avatar>view_compact</md-icon>
26
+    <a routerLink="users" md-list-item (click)="closeMenu()">
27
+      <md-icon md-list-avatar>account_circle</md-icon>
28
28
       <h3 md-line i18n="menu.users">  </h3>
29
29
       <p md-line i18n="menu.users.description"> </p>
30
30
     </a>                
..
..
@@ -33,8 +33,11 @@
33
33
 <td-layout-nav toolbarTitle="SeCuris" logo="assets:logo-white">
34
34
   <div td-toolbar-content layout="row" layout-align="start center" flex>
35
35
     <span flex ></span>
36
-    <button md-icon-button (click)="logout()">
37
-        <md-icon color="white">exit_to_app</md-icon>
36
+    <md-icon>account_box</md-icon>
37
+    <span>&nbsp;{{userFullName}}</span>
38
+    <span flex="5" ></span>
39
+    <button md-mini-fab raised (click)="logout()" color="warn" [mdTooltip]="$L.get('Logout')">
40
+        <md-icon>exit_to_app</md-icon>
38
41
     </button>
39
42
   </div>
40
43
 	<router-outlet></router-outlet>
 securis/src/main/webapp/src/app/menu.component.ts
..
..
@@ -1,8 +1,10 @@
1
+import { LocaleService } from './common/i18n';
2
+import { LocalStorageService } from 'angular-2-local-storage';
1
3
 import { Observable } from 'rxjs/Observable';
2
4
 import { BaseRequestOptions, Http } from '@angular/http';
3
5
 import { Component, ViewChild } from '@angular/core';
4
6
 import { UserService } from './user.service';
5
-import { Router } from '@angular/router';
7
+import { ActivatedRoute, Router } from '@angular/router';
6
8
 import { TdNavigationDrawerComponent } from '@covalent/core'
7
9
 
8
10
 
..
..
@@ -13,8 +15,12 @@
13
15
 
14
16
   @ViewChild('mainMenu') mainMenu: TdNavigationDrawerComponent;
15
17
 
18
+  userFullName: string;
16
19
 
17
20
   constructor(private userService: UserService,
21
+              private store: LocalStorageService,
22
+              private $L: LocaleService,
23
+              private route: ActivatedRoute,
18
24
               private router: Router) {
19
25
   }
20
26
 
..
..
@@ -23,8 +29,12 @@
23
29
         let isLoggedIn = authOk.valueOf();
24
30
         if (!isLoggedIn) {
25
31
           this.router.navigateByUrl('public/login');
32
+          this.userFullName = null;
26
33
         } else {
27
-          this.router.navigate(['packs']);
34
+          if (this.route.firstChild == null) {
35
+            this.router.navigate(['packs']);
36
+          }
37
+          this.userFullName = this.store.get<string>("user_full_name");
28
38
         }
29
39
       }  , 
30
40
       err => /* Show message */ this.router.navigateByUrl('public/login'));  
 securis/src/main/webapp/src/app/pack.list.component.ts
deleted file mode 100644
..
..
@@ -1,179 +0,0 @@
1
-import { Router, ActivatedRoute } from '@angular/router';
2
-import { MdDialog, MdDialogConfig } from '@angular/material';
3
-import {
4
-    ITdDataTableColumn,
5
-    ITdDataTableSortChangeEvent,
6
-    TdDataTableService,
7
-    TdDataTableSortingOrder,
8
-    TdPagingBarComponent
9
-} from '@covalent/core';
10
-import { IPageChangeEvent } from '@covalent/core';
11
-import { Component, ViewChild, AfterViewInit } from '@angular/core';
12
-import { TdMediaService } from '@covalent/core';
13
-import { PacksService } from './resources/packs';
14
-import { PackFormComponent } from './forms/pack.form.component';
15
-import { LocaleService } from './common/i18n';
16
-
17
-
18
-var pack_example = { 
19
-  id: 7,
20
-  code: 'DX250000',
21
-  status: 'AC',
22
-  application_name: 'Doxr',
23
-  created_by_id: 'admin',
24
-  created_by_name: 'Administrator  (admin)',
25
-  creation_timestamp: 1440597540000,
26
-  end_valid_date: 2051222400000,
27
-  init_valid_date: 1440547200000,
28
-  license_preactivation: true,
29
-  license_type_id: 5,
30
-  licensetype_code: 'DXL3',
31
-  metadata: 
32
-   [ { key: 'max_docs',
33
-       value: '250000',
34
-       readonly: true,
35
-       mandatory: true,
36
-       pack_id: 7 } ],
37
-  num_activations: 7,
38
-  num_available: -2,
39
-  num_creations: 7,
40
-  num_licenses: 5,
41
-  organization_id: 2,
42
-  organization_name: 'CurisTec',
43
-  preactivation_valid_period: 70,
44
-  renew_valid_period: 0,
45
-}
46
-
47
-const DIALOG_OPTIONS : MdDialogConfig = {
48
-  height: '80%', // can be px or %
49
-  width: '45%', // can be px or %
50
-}
51
-
52
-@Component({
53
-  selector: 'pack-list',
54
-  templateUrl: 'src/app/pack.list.component.html'
55
-})
56
-export class PackListComponent implements AfterViewInit {
57
-  data: any[] = [];
58
-  
59
-  @ViewChild('pagingBar') pagingBar : TdPagingBarComponent ;
60
-
61
-  columns: ITdDataTableColumn[] = [
62
-    { name: 'code', label: 'Code', tooltip: 'License pack code' },
63
-    { name: 'application_name', label: 'App name' },
64
-    { name: 'licensetype_code', label: 'License type' },
65
-    { name: 'organization_name', label: 'Organization' },
66
-    { name: 'used_licenses', label: 'Licenses', tooltip: 'Initial/Available pack licenses' },
67
-    { name: 'menu', label: '' }
68
-  ];
69
-
70
-  filteredData: any[] = this.data;
71
-  filteredTotal: number = this.data.length;
72
-
73
-  searchTerm: string = '';
74
-  fromRow: number = 1;
75
-  currentPage: number = 1;
76
-  pageSize: number = 10;
77
-  sortBy: string = 'code';
78
-  sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending;
79
-  filteredItems = this.data.length;
80
-  pack_menu_options : any[] = [{
81
-    command: 'edit',
82
-    name: 'Edit'
83
-  },{
84
-    command: 'cancel',
85
-    name: 'Cancel'
86
-  }]
87
-  
88
-  packAction(action: any) {
89
-    console.log(action.command);
90
-  }
91
-
92
-  isActionAvailable(pack : any) : boolean {
93
-    return true;
94
-  }
95
-
96
-  constructor(private _dataTableService: TdDataTableService,
97
-    private media: TdMediaService,
98
-    private router: Router,
99
-    private route: ActivatedRoute,
100
-    private dialog: MdDialog,
101
-    private $L: LocaleService,
102
-    private packForm: PackFormComponent,
103
-    private packs: PacksService) {
104
-      this.packs.get().subscribe(
105
-        list => {
106
-          this.data = list;
107
-          this.filter();
108
-        },
109
-        err => console.error(err)
110
-      );
111
-  }
112
-
113
-  ngOnInit(): void {
114
-    this.filter();
115
-  }
116
-
117
-  createPack() : void {
118
-    var ref = this.dialog.open(PackFormComponent, DIALOG_OPTIONS);
119
-    ref.componentInstance.isNew = true;
120
-    ref.afterClosed().subscribe(result => {
121
-      console.log(result);
122
-      this.filter();
123
-    });
124
-  }
125
-
126
-  showLicenses(pack: any) : void {
127
-    this.router.navigate([`${pack.id}/licenses`], {relativeTo: this.route});
128
-  }
129
-
130
-  editPack(pack: any) : void {
131
-    var ref = this.dialog.open(PackFormComponent, DIALOG_OPTIONS);
132
-    ref.componentInstance.isNew = false;
133
-    ref.componentInstance.data = pack;
134
-    ref.afterClosed().subscribe(result => {
135
-      console.log(result);
136
-      this.filter();
137
-    });
138
-  }
139
-
140
-
141
-  sort(sortEvent: ITdDataTableSortChangeEvent): void {
142
-    this.sortBy = sortEvent.name === 'used_licenses' ? 'num_available' : sortEvent.name;
143
-    this.sortOrder = sortEvent.order;
144
-    this.filter();
145
-    console.log(this.pagingBar);
146
-  }
147
-
148
-  search(searchTerm: string): void {
149
-    this.searchTerm = searchTerm;
150
-    this.filter();
151
-  }
152
-
153
-  page(pagingEvent: IPageChangeEvent): void {
154
-    this.fromRow = pagingEvent.fromRow;
155
-    this.currentPage = pagingEvent.page;
156
-    this.pageSize = pagingEvent.pageSize;
157
-    this.filter();
158
-  }
159
-
160
-  loadData() {
161
-
162
-  }
163
-
164
-  filter(): void {
165
-    let newData: any[] = this.data;
166
-    newData = this._dataTableService.filterData(newData, this.searchTerm, true);
167
-    this.filteredTotal = newData.length;
168
-    this.filteredItems = newData.length;
169
-    newData = this._dataTableService.sortData(newData, this.sortBy, this.sortOrder);
170
-    newData = this._dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize);
171
-    this.filteredData = newData;
172
-  }
173
-
174
-  ngAfterViewInit(): void {
175
-    this.media.broadcast();
176
-
177
-  }
178
-}
179
-
 securis/src/main/webapp/src/app/resources/packs.ts
..
..
@@ -75,6 +75,11 @@
75
75
   public putonhold(id: number) {
76
76
 			return super.action(id, "putonhold");
77
77
 	}
78
+  public nextLicCode(id: number) {
79
+      let url = `pack/${id}/next_license_code`
80
+      return this.http.get(url).map(response => response.text());
81
+	}
82
+  
78
83
 
79
84
  	public isActionAvailable(action:string, pack:any) {
80
85
 		var validStatuses = PACK_ACTIONS_BY_STATUS[action];
 securis/src/main/webapp/src/app/user.service.ts
..
..
@@ -28,11 +28,12 @@
28
28
     let options = new RequestOptions({ headers: new Headers({ "Content-Type": "application/x-www-form-urlencoded" })});
29
29
     return this.http.post('user/login', params.toString(), options)
30
30
                     .map((resp) => this.mapLogin(resp))
31
-                    .catch(this.handleError);
31
+                    .catch((err) => this.handleError(err));
32
32
   }
33
33
 
34
34
   private mapLogin(res : Response) : string {
35
35
     let data = res.json();
36
+    this.store.set('user_full_name', data.full_name);
36
37
     this.store.set('username', data.username);
37
38
 		this.store.set('token', data.token);
38
39
     return <string>data.token;
..
..
@@ -46,7 +47,7 @@
46
47
     let option = new RequestOptions({ headers: new Headers({ 'X-SECURIS-TOKEN': token }) });
47
48
     return this.http.get('check', option)
48
49
                     .map((resp) => this.mapCheck(resp))
49
-                    .catch(this.handleError);
50
+                    .catch((err) => this.handleError(err));
50
51
   }
51
52
 
52
53
   private mapCheck(res : Response) : boolean {
 securis/src/main/webapp/src/lang/messages_en.json
..
..
@@ -14,10 +14,17 @@
14
14
 	"field.preactivation_valid_period": "Preactivation valid period",
15
15
 	"field.renew_valid_period": "Renew valid period",
16
16
 	"field.application_name": "Application name",
17
+	"field.activation_code": "Activation code",
17
18
 	"field.status": "Status",
18
19
 	"field.metadata": "Metadata",
19
20
 	"field.key": "Parameter",
20
21
 	"field.value": "Value",
22
+	"field.created_by": "Created by",
23
+	"field.creation_date": "Creation date",
24
+	"field.request_data": "Request data",
25
+	"field.full_name": "Full name",
26
+	"field.email": "Email",
27
+	"field.creation_timestamp": "Creation timestamp",
21
28
 	"field.comments": "Comments",
22
29
 	"pack.status.CR": "Created",
23
30
 	"pack.status.AC": "Active",