#3527 feature - Added skeleton for all other admin catalogs: users, orgs an...

rsanchez

2017-03-20 470182be4f955a1c11d912743ce9e683ac4902a5

#3527 feature - Added skeleton for all other admin catalogs: users, orgs
and lic types

 securis/src/main/webapp/src/app/app.module.ts
..
..
@@ -28,17 +28,24 @@
28
28
 import { FooterComponent }  from './footer.component';
29
29
 import { LicenseListComponent } from './listing/license.list.component';
30
30
 import { PackListComponent }  from './listing/pack.list.component';
31
+import { ApplicationListComponent } from './listing/application.list.component';
32
+import { LicenseTypeListComponent } from './listing/licensetype.list.component';
33
+import { OrganizationListComponent } from './listing/organization.list.component';
34
+import { UserListComponent } from './listing/user.list.component';
35
+
31
36
 import { LoginFormComponent } from './forms/login.form.component';
32
37
 import { LicenseFormComponent } from './forms/license.form.component';
38
+import { LicenseTypeFormComponent } from './forms/licensetype.form.component';
39
+import { OrganizationFormComponent } from './forms/organization.form.component';
40
+import { UserFormComponent } from './forms/user.form.component';
41
+import { ApplicationFormComponent } from './forms/application.form.component';
42
+import { PackFormComponent } from "./forms/pack.form.component";
33
43
 
34
44
 
35
45
 import { appRoutes, appRoutingProviders } from './app.routes';
36
46
 import { requestOptionsProvider, requestBackendProvider } from './common/default.requests.options';
37
47
 import { LocaleServiceModule } from './common/i18n';
38
48
 import { SeCurisSession } from './common/session';
39
-import { PackFormComponent } from "./forms/pack.form.component";
40
-import { ApplicationFormComponent } from './forms/application.form.component';
41
-import { ApplicationListComponent } from './listing/application.list.component';
42
49
 
43
50
 @NgModule({
44
51
   imports: [
..
..
@@ -64,7 +71,13 @@
64
71
     LoginFormComponent,
65
72
     ErrorCheckerComponent,
66
73
     LicenseListComponent,
74
+    LicenseTypeListComponent,
75
+    OrganizationListComponent,
76
+    UserListComponent,
67
77
     LicenseFormComponent,
78
+    LicenseTypeFormComponent,
79
+    OrganizationFormComponent,
80
+    UserFormComponent,
68
81
     I18nDirective,
69
82
     HomeComponent,
70
83
     MenuComponent,
..
..
@@ -82,6 +95,9 @@
82
95
     LicensesService,
83
96
     PackFormComponent,
84
97
     LicenseFormComponent,
98
+    LicenseTypeFormComponent,
99
+    OrganizationFormComponent,
100
+    UserFormComponent,
85
101
     ApplicationsService,
86
102
     OrganizationsService,
87
103
     LicenseTypesService,
 securis/src/main/webapp/src/app/app.routes.ts
..
..
@@ -3,13 +3,20 @@
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 './listing/pack.list.component';
7
-import { LicenseListComponent } from './listing/license.list.component';
8
6
 import { LicenseFormComponent } from './forms/license.form.component';
9
7
 import { PackFormComponent } from './forms/pack.form.component';
10
8
 import { LoginFormComponent } from './forms/login.form.component';
11
9
 import { ApplicationFormComponent } from './forms/application.form.component';
10
+import { LicenseTypeFormComponent } from './forms/licensetype.form.component';
11
+import { OrganizationFormComponent } from './forms/organization.form.component';
12
+import { UserFormComponent } from './forms/user.form.component';
13
+
14
+import { PackListComponent } from './listing/pack.list.component';
15
+import { LicenseListComponent } from './listing/license.list.component';
12
16
 import { ApplicationListComponent } from './listing/application.list.component';
17
+import { LicenseTypeListComponent } from './listing/licensetype.list.component';
18
+import { OrganizationListComponent } from './listing/organization.list.component';
19
+import { UserListComponent } from './listing/user.list.component';
13
20
 
14
21
 const routes: Routes = [
15
22
   {path: 'public',  component: NoMenuComponent, children: [
..
..
@@ -30,7 +37,20 @@
30
37
         ]},
31
38
         {path: 'applications', component: ApplicationListComponent},
32
39
         {path: 'applications/create', component: ApplicationFormComponent},
33
-        {path: 'applications/edit/:applicationId', component: ApplicationFormComponent}
40
+        {path: 'applications/edit/:applicationId', component: ApplicationFormComponent},
41
+
42
+        {path: 'licensetypes', component: LicenseTypeListComponent},
43
+        {path: 'licensetypes/create', component: LicenseTypeFormComponent},
44
+        {path: 'licensetypes/edit/:applicationId', component: LicenseTypeFormComponent},
45
+
46
+        {path: 'organizations', component: OrganizationListComponent},
47
+        {path: 'organizations/create', component: OrganizationFormComponent},
48
+        {path: 'organizations/edit/:applicationId', component: OrganizationFormComponent},
49
+
50
+        {path: 'users', component: UserListComponent},
51
+        {path: 'users/create', component: UserFormComponent},
52
+        {path: 'users/edit/:applicationId', component: UserFormComponent}
53
+
34
54
     ]
35
55
   },
36
56
 
 securis/src/main/webapp/src/app/forms/application.form.component.ts
..
..
@@ -5,7 +5,7 @@
5
5
 import { LicenseTypesService } from '../resources/license_types';
6
6
 import { LocaleService } from '../common/i18n';
7
7
 import { TdDialogService } from '@covalent/core';
8
-import { Component, AfterViewInit } from '@angular/core';
8
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
9
9
 import { TdMediaService } from '@covalent/core';
10
10
 import { FormBase, IComboOption } from './base';
11
11
 import { ActivatedRoute, Router } from '@angular/router';
..
..
@@ -32,13 +32,13 @@
32
32
 
33
33
   constructor(private http: Http,
34
34
               private licenseTypes: LicenseTypesService,
35
-              private router: Router,
36
35
               private applications: ApplicationsService,
36
+              router: Router,
37
37
               toaster: ToastsManager,
38
38
               route: ActivatedRoute,              
39
39
               $L: LocaleService,
40
40
               dialogs: TdDialogService) {
41
-    super($L, route, toaster, applications, $L.get('application'), dialogs);
41
+    super($L, router, route, toaster, applications, $L.get('application'), dialogs);
42
42
   }
43
43
 
44
44
  
..
..
@@ -46,11 +46,16 @@
46
46
     this.router.navigate([`applications`]);
47
47
   }
48
48
 
49
- 
50
-  ngAfterViewInit(): void {
49
+  init() : void {
50
+    super.setFirstFocus();
51
+    super.reset();
51
52
     super.prepareInitialData('applicationId', {
52
53
       metadata: []
53
54
     });
54
55
   }
56
+ 
57
+  ngAfterViewInit(): void {
58
+    this.init();
59
+  }
55
60
 }
56
61
 
 securis/src/main/webapp/src/app/forms/application.form.html
..
..
@@ -28,18 +28,18 @@
28
28
 			</md-card-title>
29
29
 			<md-divider></md-divider>
30
30
 			<md-card-content>
31
-				<form #applicationForm="ngForm" class="inset">
31
+				<form #form="ngForm" class="inset">
32
32
 					<div layout="column" layout-align="start center">
33
33
 						<div layout="row" layout-fill layout-padding>
34
34
 							<field-readonly [value]="data.id" label="field.id" flex="15" *ngIf="!isNew"></field-readonly>
35
35
 							<div layout="column" layout-fill flex>
36
36
 								<md-input-container>
37
-									<input mdInput maxLength="50" type="text" [(ngModel)]="data.code" name="code" required [readonly]="!isNew" />
37
+									<input #firstField mdInput maxLength="50" type="text" [(ngModel)]="data.code" name="code" required [readonly]="!isNew" />
38
38
 									<md-placeholder>
39
39
 										<span i18n="field.code"></span>
40
40
 									</md-placeholder>
41
41
 								</md-input-container>
42
-								<error-checker [fieldName]="getFieldName('code')" [formField]="applicationForm.controls.code"></error-checker>
42
+								<error-checker [fieldName]="getFieldName('code')" [formField]="form.controls.code"></error-checker>
43
43
 							</div>
44
44
 						</div>
45
45
 						<div layout="row" layout-fill layout-padding>
..
..
@@ -50,7 +50,7 @@
50
50
 										<span i18n="field.name"></span>
51
51
 									</md-placeholder>
52
52
 								</md-input-container>
53
-								<error-checker [fieldName]="getFieldName('name')" [formField]="applicationForm.controls.name"></error-checker>
53
+								<error-checker [fieldName]="getFieldName('name')" [formField]="form.controls.name"></error-checker>
54
54
 							</div>
55
55
 							<div layout="column" layout-fill flex>
56
56
 								<md-input-container flex>
..
..
@@ -59,7 +59,7 @@
59
59
 										<span i18n="field.license_filename"></span>
60
60
 									</md-placeholder>
61
61
 								</md-input-container>
62
-								<error-checker [fieldName]="getFieldName('license_filename')" [formField]="applicationForm.controls.license_filename"></error-checker>
62
+								<error-checker [fieldName]="getFieldName('license_filename')" [formField]="form.controls.license_filename"></error-checker>
63
63
 							</div>
64
64
 						</div>
65
65
 						<div layout="row" layout-fill layout-padding>
..
..
@@ -85,7 +85,7 @@
85
85
 				<div layout="row" layout-align="start center" class="margin">
86
86
 					<button *ngIf="!isNew" md-raised-button color="warn" (click)="delete(data.id)">Delete</button>
87
87
 					<span flex></span>
88
-					<button [disabled]="!applicationForm.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
88
+					<button [disabled]="!form.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
89
89
 					<button md-button (click)="goBack()">Cancel</button>
90
90
 				</div>
91
91
 			</md-card-actions>
 securis/src/main/webapp/src/app/forms/base.ts
..
..
@@ -1,5 +1,5 @@
1
1
 import { Http } from '@angular/http';
2
-import { ActivatedRoute } from '@angular/router';
2
+import { ActivatedRoute, Router } from '@angular/router';
3
3
 import { TdDialogService } from '@covalent/core';
4
4
 import { ToastsManager } from 'ng2-toastr/ng2-toastr';
5
5
 
..
..
@@ -7,7 +7,8 @@
7
7
 import { BasicService } from '../common/utils';
8
8
 import { SeCurisResourceServices } from '../resources/base';
9
9
 
10
-import { AfterViewInit, Component, Input } from '@angular/core';
10
+import { ElementRef, ViewChild, AfterViewInit, Component, Input } from '@angular/core';
11
+import {FormGroup } from '@angular/forms';
11
12
 
12
13
 
13
14
 export interface IComboOption {
..
..
@@ -16,13 +17,17 @@
16
17
 }
17
18
 
18
19
 
19
-export class FormBase extends BasicService {
20
+export abstract class FormBase extends BasicService {
21
+	@ViewChild('firstField') firstField: ElementRef;
22
+	@ViewChild('form') form: FormGroup;
23
+
20
24
 	protected form_title: string = '';
21
25
 	protected form_subtitle: string = '';
22
26
 	protected data: any = {};
23
27
 	protected isNew : boolean = true;
24
28
 
25
29
 	constructor($L: LocaleService, 
30
+	            protected router: Router,
26
31
 	            protected route: ActivatedRoute,
27
32
 				protected toaster: ToastsManager,
28
33
 				protected resourceServices: SeCurisResourceServices, 
..
..
@@ -35,12 +40,31 @@
35
40
 		return this.$L.get(`field.${fieldId}`);
36
41
 	}
37
42
 
43
+	protected setFirstFocus() :void {
44
+		if (this.firstField) {
45
+			this.firstField.nativeElement.focus();
46
+		}
47
+	}
48
+
49
+	protected reset() :void {
50
+		if (this.form) {
51
+			this.form.reset();
52
+		}
53
+	}
54
+	
38
55
   	protected loadCombos(): void {}
56
+  	protected abstract init(): void;
57
+  	protected abstract goBack(): void;
39
58
 
40
59
 	save() {
41
60
 		var command = this.isNew ? this.resourceServices.create(this.data) : this.resourceServices.modify(this.data.id, this.data);
42
61
 		command.subscribe(
43
-			data => this.toaster.success(this.$L.get('{} saved sucessfully', this.resourceName.capitalize())),
62
+			data => {
63
+				this.toaster.success(this.$L.get('{} saved sucessfully', this.resourceName.capitalize()));
64
+				if (this.isNew) {
65
+					this.init();
66
+				}
67
+			},
44
68
 			err => this.toaster.error(err.message, this.$L.get('Error saving {}', this.resourceName))
45
69
 		);
46
70
 	}
..
..
@@ -56,7 +80,10 @@
56
80
 			if (accept) {
57
81
 				 this.resourceServices.remove(eleId)
58
82
 				 	.subscribe(
59
-						responseData => this.toaster.success(this.$L.get('{} was sucessfully deleted', this.resourceName.capitalize())),
83
+						responseData => {
84
+							this.toaster.success(this.$L.get('{} was sucessfully deleted', this.resourceName.capitalize()));
85
+							this.goBack();
86
+						},
60
87
 						err => this.toaster.success(err.message, this.$L.get('Error deleting the {}', this.resourceName))
61
88
 				);
62
89
 			}
 securis/src/main/webapp/src/app/forms/license.form.component.ts
..
..
@@ -24,13 +24,13 @@
24
24
 
25
25
   constructor(private http: Http,
26
26
               private licenses: LicensesService,
27
-              private router: Router,
28
27
               private packs: PacksService,
28
+              router: Router,
29
29
               toaster: ToastsManager,
30
30
               route: ActivatedRoute,
31
31
               $L: LocaleService,
32
32
               dialogs: TdDialogService) {
33
-      super($L, route, toaster, licenses, $L.get('license'), dialogs);
33
+      super($L, router, route, toaster, licenses, $L.get('license'), dialogs);
34
34
   }
35
35
 
36
36
   requestFileSelected(file: File) : void {
..
..
@@ -77,6 +77,10 @@
77
77
 
78
78
 
79
79
   ngAfterViewInit(): void {
80
+    this.init();
81
+  }
82
+
83
+  init(): void {
80
84
 
81
85
     this.route.params.subscribe(params => {
82
86
       var packId = +params['packId']; // (+) converts string 'id' to a number
 securis/src/main/webapp/src/app/forms/license.form.html
..
..
@@ -29,7 +29,7 @@
29
29
 				</md-card-title>
30
30
 				<md-divider></md-divider>
31
31
 				<md-card-content>
32
-					<form #licenseForm="ngForm" class="inset" (keyup.enter)="save()">
32
+					<form #form="ngForm" class="inset" (keyup.enter)="save()">
33
33
 						<div layout="column" layout-align="start center">
34
34
 							<div layout="row" layout-fill layout-padding>
35
35
 								<field-readonly [value]="data.id" label="field.id" flex="20" *ngIf="!isNew"></field-readonly>
..
..
@@ -50,7 +50,7 @@
50
50
 											<span i18n="field.full_name"></span>
51
51
 										</md-placeholder>
52
52
 									</md-input-container>
53
-									<error-checker [fieldName]="$L.get('field.full_name')" [formField]="licenseForm.controls.full_name"></error-checker>
53
+									<error-checker [fieldName]="$L.get('field.full_name')" [formField]="form.controls.full_name"></error-checker>
54
54
 								</div>
55
55
 								<div layout="column" layout-fill flex>
56
56
 									<md-input-container flex>
..
..
@@ -59,7 +59,7 @@
59
59
 											<span i18n="field.email"></span>
60
60
 										</md-placeholder>
61
61
 									</md-input-container>
62
-									<error-checker [fieldName]="$L.get('field.full_name')" [formField]="licenseForm.controls.email"></error-checker>
62
+									<error-checker [fieldName]="$L.get('field.full_name')" [formField]="form.controls.email"></error-checker>
63
63
 								</div>
64
64
 							</div>
65
65
 							<div layout="row" layout-fill layout-padding>
..
..
@@ -100,7 +100,7 @@
100
100
 				<md-card-actions>
101
101
 					<div layout="row" layout-align="start center" class="margin">
102
102
 						<span flex></span>
103
-						<button [disabled]="!licenseForm.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
103
+						<button [disabled]="!form.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
104
104
 						<button md-button (click)="goBack()">Cancel</button>
105
105
 					</div>
106
106
 				</md-card-actions>
 securis/src/main/webapp/src/app/forms/licensetype.form.component.ts
..
..
@@ -0,0 +1,61 @@
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 { TdDialogService } from '@covalent/core';
8
+import { Component, AfterViewInit, ViewChild } 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: 'licensetype-form',
29
+  templateUrl: 'src/app/forms/licensetype.form.html'
30
+})
31
+export class LicenseTypeFormComponent extends FormBase {
32
+
33
+  constructor(private http: Http,
34
+              private licenseTypes: LicenseTypesService,
35
+              private applications: ApplicationsService,
36
+              router: Router,
37
+              toaster: ToastsManager,
38
+              route: ActivatedRoute,              
39
+              $L: LocaleService,
40
+              dialogs: TdDialogService) {
41
+    super($L, router, route, toaster, licenseTypes, $L.get('license type'), dialogs);
42
+  }
43
+
44
+ 
45
+  goBack(): void {
46
+    this.router.navigate([`licensetypes`]);
47
+  }
48
+
49
+  init() : void {
50
+    super.setFirstFocus();
51
+    super.reset();
52
+    super.prepareInitialData('licenseTypeId', {
53
+      metadata: []
54
+    });
55
+  }
56
+ 
57
+  ngAfterViewInit(): void {
58
+    this.init();
59
+  }
60
+}
61
+
 securis/src/main/webapp/src/app/forms/licensetype.form.html
..
..
@@ -0,0 +1,94 @@
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
+	<!--
11
+			code: 'CICS',
12
+  creation_timestamp: 1418384439000,
13
+  description: 'Wellbore integrity analysis software',
14
+  id: 1,
15
+  license_filename: 'config_server.lic',
16
+  name: 'CurisIntegrity',
17
+  metadata: 
18
+   [ { key: 'max_docs',
19
+       value: '250000',
20
+       readonly: true,
21
+       mandatory: true } ] 
22
+}
23
+		-->
24
+	<div class="margin" layout-align-gt-xs="center start" layout-fill="" layout-gt-xs="row">
25
+		<md-card flex="70">
26
+			<md-card-title>
27
+				{{form_subtitle}}
28
+			</md-card-title>
29
+			<md-divider></md-divider>
30
+			<md-card-content>
31
+				<form #form="ngForm" class="inset">
32
+					<div layout="column" layout-align="start center">
33
+						<div layout="row" layout-fill layout-padding>
34
+							<field-readonly [value]="data.id" label="field.id" flex="15" *ngIf="!isNew"></field-readonly>
35
+							<div layout="column" layout-fill flex>
36
+								<md-input-container>
37
+									<input #firstField mdInput maxLength="50" type="text" [(ngModel)]="data.code" name="code" required [readonly]="!isNew" />
38
+									<md-placeholder>
39
+										<span i18n="field.code"></span>
40
+									</md-placeholder>
41
+								</md-input-container>
42
+								<error-checker [fieldName]="getFieldName('code')" [formField]="form.controls.code"></error-checker>
43
+							</div>
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.name" name="name" required />
49
+									<md-placeholder>
50
+										<span i18n="field.name"></span>
51
+									</md-placeholder>
52
+								</md-input-container>
53
+								<error-checker [fieldName]="getFieldName('name')" [formField]="form.controls.name"></error-checker>
54
+							</div>
55
+							<div layout="column" layout-fill flex>
56
+								<md-input-container flex>
57
+									<input mdInput type="text" [(ngModel)]="data.license_filename" name="license_filename" required />
58
+									<md-placeholder>
59
+										<span i18n="field.license_filename"></span>
60
+									</md-placeholder>
61
+								</md-input-container>
62
+								<error-checker [fieldName]="getFieldName('license_filename')" [formField]="form.controls.license_filename"></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.description" name="description" maxlength="1024"></textarea>
69
+									<md-placeholder>
70
+										<span i18n="field.description"></span>
71
+									</md-placeholder>
72
+									<md-hint align="end">(max 1024)</md-hint>
73
+								</md-input-container>
74
+							</div>
75
+						</div>
76
+						<div layout="row" layout-fill layout-padding *ngIf="!isNew">
77
+							<field-readonly [value]="data.creation_timestamp | date: 'medium'" label="field.creation_timestamp" flex></field-readonly>
78
+						</div>
79
+						<metadata-manager addOrDelete="true" editKeys="true" [metadata]="data.metadata" ></metadata-manager>
80
+					</div>
81
+				</form>
82
+			</md-card-content>
83
+			<md-divider></md-divider>
84
+			<md-card-actions>
85
+				<div layout="row" layout-align="start center" class="margin">
86
+					<button *ngIf="!isNew" md-raised-button color="warn" (click)="delete(data.id)">Delete</button>
87
+					<span flex></span>
88
+					<button [disabled]="!form.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
89
+					<button md-button (click)="goBack()">Cancel</button>
90
+				</div>
91
+			</md-card-actions>
92
+		</md-card>
93
+	</div>
94
+</td-layout-card-over>
 securis/src/main/webapp/src/app/forms/organization.form.component.ts
..
..
@@ -0,0 +1,59 @@
1
+import { Http } from '@angular/http';
2
+import { ToastsManager } from 'ng2-toastr/ng2-toastr';
3
+
4
+import { OrganizationsService } from '../resources/organizations';
5
+import { LicenseTypesService } from '../resources/license_types';
6
+import { LocaleService } from '../common/i18n';
7
+import { TdDialogService } from '@covalent/core';
8
+import { Component, AfterViewInit, ViewChild } 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: 'organization-form',
29
+  templateUrl: 'src/app/forms/organization.form.html'
30
+})
31
+export class OrganizationFormComponent extends FormBase {
32
+
33
+  constructor(private http: Http,
34
+              private licenseTypes: LicenseTypesService,
35
+              private organizations: OrganizationsService,
36
+              router: Router,
37
+              toaster: ToastsManager,
38
+              route: ActivatedRoute,              
39
+              $L: LocaleService,
40
+              dialogs: TdDialogService) {
41
+    super($L, router, route, toaster, organizations, $L.get('organization'), dialogs);
42
+  }
43
+
44
+ 
45
+  goBack(): void {
46
+    this.router.navigate([`organizations`]);
47
+  }
48
+
49
+  init() : void {
50
+    super.setFirstFocus();
51
+    super.reset();
52
+    super.prepareInitialData('organizationId');
53
+  }
54
+ 
55
+  ngAfterViewInit(): void {
56
+    this.init();
57
+  }
58
+}
59
+
 securis/src/main/webapp/src/app/forms/organization.form.html
..
..
@@ -0,0 +1,94 @@
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
+	<!--
11
+			code: 'CICS',
12
+  creation_timestamp: 1418384439000,
13
+  description: 'Wellbore integrity analysis software',
14
+  id: 1,
15
+  license_filename: 'config_server.lic',
16
+  name: 'CurisIntegrity',
17
+  metadata: 
18
+   [ { key: 'max_docs',
19
+       value: '250000',
20
+       readonly: true,
21
+       mandatory: true } ] 
22
+}
23
+		-->
24
+	<div class="margin" layout-align-gt-xs="center start" layout-fill="" layout-gt-xs="row">
25
+		<md-card flex="70">
26
+			<md-card-title>
27
+				{{form_subtitle}}
28
+			</md-card-title>
29
+			<md-divider></md-divider>
30
+			<md-card-content>
31
+				<form #form="ngForm" class="inset">
32
+					<div layout="column" layout-align="start center">
33
+						<div layout="row" layout-fill layout-padding>
34
+							<field-readonly [value]="data.id" label="field.id" flex="15" *ngIf="!isNew"></field-readonly>
35
+							<div layout="column" layout-fill flex>
36
+								<md-input-container>
37
+									<input #firstField mdInput maxLength="50" type="text" [(ngModel)]="data.code" name="code" required [readonly]="!isNew" />
38
+									<md-placeholder>
39
+										<span i18n="field.code"></span>
40
+									</md-placeholder>
41
+								</md-input-container>
42
+								<error-checker [fieldName]="getFieldName('code')" [formField]="form.controls.code"></error-checker>
43
+							</div>
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.name" name="name" required />
49
+									<md-placeholder>
50
+										<span i18n="field.name"></span>
51
+									</md-placeholder>
52
+								</md-input-container>
53
+								<error-checker [fieldName]="getFieldName('name')" [formField]="form.controls.name"></error-checker>
54
+							</div>
55
+							<div layout="column" layout-fill flex>
56
+								<md-input-container flex>
57
+									<input mdInput type="text" [(ngModel)]="data.license_filename" name="license_filename" required />
58
+									<md-placeholder>
59
+										<span i18n="field.license_filename"></span>
60
+									</md-placeholder>
61
+								</md-input-container>
62
+								<error-checker [fieldName]="getFieldName('license_filename')" [formField]="form.controls.license_filename"></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.description" name="description" maxlength="1024"></textarea>
69
+									<md-placeholder>
70
+										<span i18n="field.description"></span>
71
+									</md-placeholder>
72
+									<md-hint align="end">(max 1024)</md-hint>
73
+								</md-input-container>
74
+							</div>
75
+						</div>
76
+						<div layout="row" layout-fill layout-padding *ngIf="!isNew">
77
+							<field-readonly [value]="data.creation_timestamp | date: 'medium'" label="field.creation_timestamp" flex></field-readonly>
78
+						</div>
79
+						<metadata-manager addOrDelete="true" editKeys="true" [metadata]="data.metadata" ></metadata-manager>
80
+					</div>
81
+				</form>
82
+			</md-card-content>
83
+			<md-divider></md-divider>
84
+			<md-card-actions>
85
+				<div layout="row" layout-align="start center" class="margin">
86
+					<button *ngIf="!isNew" md-raised-button color="warn" (click)="delete(data.id)">Delete</button>
87
+					<span flex></span>
88
+					<button [disabled]="!form.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
89
+					<button md-button (click)="goBack()">Cancel</button>
90
+				</div>
91
+			</md-card-actions>
92
+		</md-card>
93
+	</div>
94
+</td-layout-card-over>
 securis/src/main/webapp/src/app/forms/pack.form.component.ts
..
..
@@ -24,13 +24,13 @@
24
24
   
25
25
   constructor(private http: Http,
26
26
               private licenseTypes: LicenseTypesService,
27
-              private router: Router,
28
27
               private packs: PacksService,
28
+              router: Router,
29
29
               toaster: ToastsManager,
30
30
               route: ActivatedRoute,              
31
31
               $L: LocaleService,
32
32
               dialogs: TdDialogService) {
33
-    super($L, route, toaster, packs, $L.get('pack'), dialogs);
33
+    super($L, router, route, toaster, packs, $L.get('pack'), dialogs);
34
34
   }
35
35
 
36
36
   loadCombos(): void {
..
..
@@ -72,6 +72,10 @@
72
72
   
73
73
 
74
74
   ngAfterViewInit(): void {
75
+    this.init();
76
+  }
77
+
78
+  init(): void {
75
79
     this.loadCombos();
76
80
     super.prepareInitialData('packId', {
77
81
       status: PACK_STATUS.CREATED
 securis/src/main/webapp/src/app/forms/pack.form.html
..
..
@@ -14,7 +14,7 @@
14
14
 			</md-card-title>
15
15
 			<md-divider></md-divider>
16
16
 			<md-card-content>
17
-				<form #packForm="ngForm" class="inset">
17
+				<form #form="ngForm" class="inset">
18
18
 					<div layout="column" layout-align="start center">
19
19
 						<div layout="row" layout-fill layout-padding>
20
20
 							<field-readonly [value]="data.id" label="field.id" flex="15" *ngIf="!isNew"></field-readonly>
..
..
@@ -25,7 +25,7 @@
25
25
 										<span i18n="field.code"></span>
26
26
 									</md-placeholder>
27
27
 								</md-input-container>
28
-								<error-checker [fieldName]="getFieldName('code')" [formField]="packForm.controls.code"></error-checker>
28
+								<error-checker [fieldName]="getFieldName('code')" [formField]="form.controls.code"></error-checker>
29
29
 							</div>
30
30
 							<div layout="column" layout-fill flex>
31
31
 								<md-input-container>
..
..
@@ -34,7 +34,7 @@
34
34
 										<span i18n="field.num_licenses"></span>
35
35
 									</md-placeholder>
36
36
 								</md-input-container>
37
-								<error-checker [fieldName]="getFieldName('num_licenses')" [formField]="packForm.controls.num_licenses"></error-checker>
37
+								<error-checker [fieldName]="getFieldName('num_licenses')" [formField]="form.controls.num_licenses"></error-checker>
38
38
 							</div>
39
39
 						</div>
40
40
 						<div layout="row" layout-fill layout-padding>
..
..
@@ -53,7 +53,7 @@
53
53
 										<span i18n="field.end_valid_date"></span>
54
54
 									</md-placeholder>
55
55
 								</md-input-container>
56
-								<error-checker [fieldName]="getFieldName('init_valid_date')" [formField]="packForm.controls.init_valid_date"></error-checker>
56
+								<error-checker [fieldName]="getFieldName('init_valid_date')" [formField]="form.controls.init_valid_date"></error-checker>
57
57
 							</div>
58
58
 							<div layout="column" layout-fill flex>
59
59
 								<md-input-container flex>
..
..
@@ -62,7 +62,7 @@
62
62
 										<span i18n="field.end_valid_date"></span>
63
63
 									</md-placeholder>
64
64
 								</md-input-container>
65
-								<error-checker [fieldName]="getFieldName('end_valid_date')" [formField]="packForm.controls.end_valid_date"></error-checker>
65
+								<error-checker [fieldName]="getFieldName('end_valid_date')" [formField]="form.controls.end_valid_date"></error-checker>
66
66
 							</div>
67
67
 						</div>
68
68
 						<div layout="row" layout-fill layout-padding *ngIf="isNew">
..
..
@@ -73,7 +73,7 @@
73
73
 										{{org.label}}
74
74
 									</md-option>
75
75
 								</md-select>
76
-								<error-checker [fieldName]="getFieldName('organization_id')" [formField]="packForm.controls.organization_id"></error-checker>
76
+								<error-checker [fieldName]="getFieldName('organization_id')" [formField]="form.controls.organization_id"></error-checker>
77
77
 							</div>
78
78
 							<div layout="column" layout-fill flex>
79
79
 								<md-select flex [placeholder]="getFieldName('license_type_id')" [(ngModel)]="data.license_type_id" name="license_type_id"
..
..
@@ -82,7 +82,7 @@
82
82
 										{{lt.label}}
83
83
 									</md-option>
84
84
 								</md-select>
85
-								<error-checker [fieldName]="getFieldName('license_type_id')" [formField]="packForm.controls.license_type_id"></error-checker>
85
+								<error-checker [fieldName]="getFieldName('license_type_id')" [formField]="form.controls.license_type_id"></error-checker>
86
86
 							</div>
87
87
 						</div>
88
88
 						<div layout="row" layout-fill layout-padding *ngIf="!isNew">
..
..
@@ -98,7 +98,7 @@
98
98
 									</md-placeholder>
99
99
 									<md-hint align="end">days</md-hint>
100
100
 								</md-input-container>
101
-								<error-checker [fieldName]="getFieldName('preactivation_valid_period')" [formField]="packForm.controls.preactivation_valid_period"></error-checker>
101
+								<error-checker [fieldName]="getFieldName('preactivation_valid_period')" [formField]="form.controls.preactivation_valid_period"></error-checker>
102
102
 							</div>
103
103
 							<div layout="column" layout-fill flex>
104
104
 								<md-input-container flex>
..
..
@@ -108,7 +108,7 @@
108
108
 									</md-placeholder>
109
109
 									<md-hint align="end">days</md-hint>
110
110
 								</md-input-container>
111
-								<error-checker [fieldName]="getFieldName('renew_valid_period')" [formField]="packForm.controls.renew_valid_period"></error-checker>
111
+								<error-checker [fieldName]="getFieldName('renew_valid_period')" [formField]="form.controls.renew_valid_period"></error-checker>
112
112
 							</div>
113
113
 						</div>
114
114
 						<div layout="row" layout-fill layout-padding>
..
..
@@ -134,7 +134,7 @@
134
134
 			<md-card-actions>
135
135
 				<div layout="row" layout-align="start center" class="margin">
136
136
 					<span flex></span>
137
-					<button [disabled]="!packForm.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
137
+					<button [disabled]="!form.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
138
138
 					<button md-button (click)="goBack()">Cancel</button>
139
139
 				</div>
140
140
 			</md-card-actions>
 securis/src/main/webapp/src/app/forms/user.form.component.ts
..
..
@@ -0,0 +1,51 @@
1
+import { Http } from '@angular/http';
2
+import { ToastsManager } from 'ng2-toastr/ng2-toastr';
3
+
4
+import { ApplicationsService } from '../resources/applications';
5
+import { UsersService } from '../resources/users';
6
+import { LocaleService } from '../common/i18n';
7
+import { TdDialogService } from '@covalent/core';
8
+import { Component, AfterViewInit, ViewChild } 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
+
15
+}
16
+
17
+@Component({
18
+  selector: 'user-form',
19
+  templateUrl: 'src/app/forms/user.form.html'
20
+})
21
+export class UserFormComponent extends FormBase {
22
+
23
+  constructor(private http: Http,
24
+              private users: UsersService,
25
+              private applications: ApplicationsService,
26
+              router: Router,
27
+              toaster: ToastsManager,
28
+              route: ActivatedRoute,              
29
+              $L: LocaleService,
30
+              dialogs: TdDialogService) {
31
+    super($L, router, route, toaster, users, $L.get('user'), dialogs);
32
+  }
33
+
34
+ 
35
+  goBack(): void {
36
+    this.router.navigate([`users`]);
37
+  }
38
+
39
+  init() : void {
40
+    super.setFirstFocus();
41
+    super.reset();
42
+    super.prepareInitialData('userId', {
43
+      metadata: []
44
+    });
45
+  }
46
+ 
47
+  ngAfterViewInit(): void {
48
+    this.init();
49
+  }
50
+}
51
+
 securis/src/main/webapp/src/app/forms/user.form.html
..
..
@@ -0,0 +1,94 @@
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
+	<!--
11
+			code: 'CICS',
12
+  creation_timestamp: 1418384439000,
13
+  description: 'Wellbore integrity analysis software',
14
+  id: 1,
15
+  license_filename: 'config_server.lic',
16
+  name: 'CurisIntegrity',
17
+  metadata: 
18
+   [ { key: 'max_docs',
19
+       value: '250000',
20
+       readonly: true,
21
+       mandatory: true } ] 
22
+}
23
+		-->
24
+	<div class="margin" layout-align-gt-xs="center start" layout-fill="" layout-gt-xs="row">
25
+		<md-card flex="70">
26
+			<md-card-title>
27
+				{{form_subtitle}}
28
+			</md-card-title>
29
+			<md-divider></md-divider>
30
+			<md-card-content>
31
+				<form #form="ngForm" class="inset">
32
+					<div layout="column" layout-align="start center">
33
+						<div layout="row" layout-fill layout-padding>
34
+							<field-readonly [value]="data.id" label="field.id" flex="15" *ngIf="!isNew"></field-readonly>
35
+							<div layout="column" layout-fill flex>
36
+								<md-input-container>
37
+									<input #firstField mdInput maxLength="50" type="text" [(ngModel)]="data.code" name="code" required [readonly]="!isNew" />
38
+									<md-placeholder>
39
+										<span i18n="field.code"></span>
40
+									</md-placeholder>
41
+								</md-input-container>
42
+								<error-checker [fieldName]="getFieldName('code')" [formField]="form.controls.code"></error-checker>
43
+							</div>
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.name" name="name" required />
49
+									<md-placeholder>
50
+										<span i18n="field.name"></span>
51
+									</md-placeholder>
52
+								</md-input-container>
53
+								<error-checker [fieldName]="getFieldName('name')" [formField]="form.controls.name"></error-checker>
54
+							</div>
55
+							<div layout="column" layout-fill flex>
56
+								<md-input-container flex>
57
+									<input mdInput type="text" [(ngModel)]="data.license_filename" name="license_filename" required />
58
+									<md-placeholder>
59
+										<span i18n="field.license_filename"></span>
60
+									</md-placeholder>
61
+								</md-input-container>
62
+								<error-checker [fieldName]="getFieldName('license_filename')" [formField]="form.controls.license_filename"></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.description" name="description" maxlength="1024"></textarea>
69
+									<md-placeholder>
70
+										<span i18n="field.description"></span>
71
+									</md-placeholder>
72
+									<md-hint align="end">(max 1024)</md-hint>
73
+								</md-input-container>
74
+							</div>
75
+						</div>
76
+						<div layout="row" layout-fill layout-padding *ngIf="!isNew">
77
+							<field-readonly [value]="data.creation_timestamp | date: 'medium'" label="field.creation_timestamp" flex></field-readonly>
78
+						</div>
79
+						<metadata-manager addOrDelete="true" editKeys="true" [metadata]="data.metadata" ></metadata-manager>
80
+					</div>
81
+				</form>
82
+			</md-card-content>
83
+			<md-divider></md-divider>
84
+			<md-card-actions>
85
+				<div layout="row" layout-align="start center" class="margin">
86
+					<button *ngIf="!isNew" md-raised-button color="warn" (click)="delete(data.id)">Delete</button>
87
+					<span flex></span>
88
+					<button [disabled]="!form.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
89
+					<button md-button (click)="goBack()">Cancel</button>
90
+				</div>
91
+			</md-card-actions>
92
+		</md-card>
93
+	</div>
94
+</td-layout-card-over>
 securis/src/main/webapp/src/app/listing/licensetype.list.component.html
..
..
@@ -0,0 +1,36 @@
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
+        </div>
30
+      </template>
31
+    </td-data-table>
32
+    <td-paging-bar #pagingBar [pageSizes]="[10, 20, 40]" [total]="filteredTotal" (change)="page($event)" [hidden]="pagingBar.total <= 10">
33
+      <span td-paging-bar-label hide-xs>Rows per page:</span> {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
34
+    </td-paging-bar>
35
+  </div>
36
+</td-layout-card-over>
 securis/src/main/webapp/src/app/listing/licensetype.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 { LicenseTypesService } from '../resources/license_types';
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: 'licensetype-list',
35
+  templateUrl: 'src/app/listing/licensetype.list.component.html'
36
+})
37
+export class LicenseTypeListComponent extends ListingBase implements AfterViewInit {
38
+
39
+  columns: ITdDataTableColumn[] = [
40
+    { name: 'code', label: 'Code', tooltip: 'License type 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 licensetypes: LicenseTypesService) {
61
+      super(_dataTableService);
62
+      this.licensetypes.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(['licensetypes/create']);
82
+  }
83
+
84
+  edit(ltId: number | string) : void {
85
+    this.router.navigate([`licensetypes/edit/${ltId}`]);
86
+  }
87
+
88
+}
89
+
 securis/src/main/webapp/src/app/listing/organization.list.component.html
..
..
@@ -0,0 +1,36 @@
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
+        </div>
30
+      </template>
31
+    </td-data-table>
32
+    <td-paging-bar #pagingBar [pageSizes]="[10, 20, 40]" [total]="filteredTotal" (change)="page($event)" [hidden]="pagingBar.total <= 10">
33
+      <span td-paging-bar-label hide-xs>Rows per page:</span> {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
34
+    </td-paging-bar>
35
+  </div>
36
+</td-layout-card-over>
 securis/src/main/webapp/src/app/listing/organization.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 { OrganizationsService } from '../resources/organizations';
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: 'organization-list',
35
+  templateUrl: 'src/app/listing/organization.list.component.html'
36
+})
37
+export class OrganizationListComponent extends ListingBase implements AfterViewInit {
38
+
39
+  columns: ITdDataTableColumn[] = [
40
+    { name: 'code', label: 'Code', tooltip: 'Organization 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 organizations: OrganizationsService) {
61
+      super(_dataTableService);
62
+      this.organizations.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(['organizations/create']);
82
+  }
83
+
84
+  edit(eleId: number | string) : void {
85
+    this.router.navigate([`organizations/edit/${eleId}`]);
86
+  }
87
+
88
+}
89
+
 securis/src/main/webapp/src/app/listing/user.list.component.html
..
..
@@ -0,0 +1,36 @@
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
+        </div>
30
+      </template>
31
+    </td-data-table>
32
+    <td-paging-bar #pagingBar [pageSizes]="[10, 20, 40]" [total]="filteredTotal" (change)="page($event)" [hidden]="pagingBar.total <= 10">
33
+      <span td-paging-bar-label hide-xs>Rows per page:</span> {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
34
+    </td-paging-bar>
35
+  </div>
36
+</td-layout-card-over>
 securis/src/main/webapp/src/app/listing/user.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 { UsersService } from '../resources/users';
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: 'user-list',
35
+  templateUrl: 'src/app/listing/user.list.component.html'
36
+})
37
+export class UserListComponent 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 users: UsersService) {
61
+      super(_dataTableService);
62
+      this.users.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(['users/create']);
82
+  }
83
+
84
+  edit(eleId: number | string) : void {
85
+    this.router.navigate([`users/edit/${eleId}`]);
86
+  }
87
+
88
+}
89
+