From ac8d1f0e8ab4bab6eb546daa8062a6dad3ab8e23 Mon Sep 17 00:00:00 2001
From: rsanchez <rsanchez@curisit.net>
Date: Fri, 10 Mar 2017 11:28:36 +0000
Subject: [PATCH] #3527 fix - Fixed dialog data

---
 securis/src/main/webapp/src/app/pack.list.component.1.html   |  112 +++++++++++
 securis/src/main/webapp/src/app/forms/base.ts                |    5 
 securis/src/main/webapp/src/app/forms/pack.form.1.html       |  170 +++++++++++++++++
 securis/src/main/webapp/src/app/forms/pack.form.component.ts |   34 ++
 securis/src/main/webapp/src/app/app.module.ts                |    4 
 securis/src/main/webapp/src/app/forms/pack.form.html         |  222 +++++----------------
 securis/src/main/webapp/src/app/pack.list.component.ts       |    9 
 7 files changed, 386 insertions(+), 170 deletions(-)

diff --git a/securis/src/main/webapp/src/app/app.module.ts b/securis/src/main/webapp/src/app/app.module.ts
index 7ac7a54..04dca82 100644
--- a/securis/src/main/webapp/src/app/app.module.ts
+++ b/securis/src/main/webapp/src/app/app.module.ts
@@ -25,6 +25,7 @@
 import { appRoutes, appRoutingProviders } from './app.routes';
 import { requestOptionsProvider, requestBackendProvider } from './common/default.requests.options';
 import { LocaleServiceModule } from './common/i18n';
+import { PackFormComponent } from "./forms/pack.form.component";
 
 @NgModule({
   imports: [
@@ -45,14 +46,17 @@
   declarations: [
     HeroDetailComponent,
     PackListComponent,
+    PackFormComponent,
     LoginFormComponent,
     AppHomeComponent
   ],
   bootstrap: [ AppHomeComponent ],
+  entryComponents: [ PackFormComponent ],
   providers: [
     UserService,
     PacksService,
     LicensesService,
+    PackFormComponent,
     ApplicationsService,
     OrganizationsService,
     LicenseTypesService,
diff --git a/securis/src/main/webapp/src/app/forms/base.ts b/securis/src/main/webapp/src/app/forms/base.ts
new file mode 100644
index 0000000..915ad53
--- /dev/null
+++ b/securis/src/main/webapp/src/app/forms/base.ts
@@ -0,0 +1,5 @@
+
+export interface IComboOption {
+	id: number,
+	label: string
+}
\ No newline at end of file
diff --git a/securis/src/main/webapp/src/app/forms/pack.form.1.html b/securis/src/main/webapp/src/app/forms/pack.form.1.html
new file mode 100644
index 0000000..ea6718a
--- /dev/null
+++ b/securis/src/main/webapp/src/app/forms/pack.form.1.html
@@ -0,0 +1,170 @@
+<h3 md-dialog-title>{{form_title}}</h3>
+<form #packForm="ngForm" class="inset" (keyup.enter)="save()">
+<md-dialog-content>
+	<div layout="column" layout-align="start center">
+		<div layout="row" layout-align="start center" layout-margin>
+			<md-input-container flex>
+				<input mdInput maxLength="50" type="text" [(ngModel)]="data.code" name="code" required />
+				<md-placeholder>
+          			<span i18n>Code</span>
+        		</md-placeholder>
+			</md-input-container>
+	<!-- TODO: <div class="alert inline-alert alert-warning" ng-show="packForm.code.$invalid">
+		<span class="glyphicon glyphicon-warning-sign"></span> 
+		<span ng-show="packForm.code.$error.maxlength" ng-bind="maxLengthErrorMsg('Code', maxlength.code)" 
+		class="ng-binding ng-hide">Code length is too long (max: 50).</span> 
+		<span ng-show="packForm.code.$error.required" ng-bind="mandatoryFieldErrorMsg('Code')" class="ng-binding">'Code' is required.</span>
+	</div> -->
+			<md-input-container flex>
+				<input mdInput type="number" type="text" [(ngModel)]="data.num_licenses" name="num_licenses" required />
+				<md-placeholder>
+          			<span i18n>Num. licenses</span>
+        		</md-placeholder>
+			</md-input-container>
+		</div>
+		<div layout="row" layout-align="start center" layout-margin>
+			<md-input-container flex>
+				<input mdInput type="date" type="text" [(ngModel)]="data.init_valid_date" name="init_valid_date" required />
+				<md-placeholder>
+          			<span i18n>Initial date</span>
+        		</md-placeholder>
+			</md-input-container>
+			<md-input-container flex>
+				<input mdInput type="date" type="text" [(ngModel)]="data.end_valid_date" name="end_valid_date" required />
+				<md-placeholder>
+          			<span i18n>End date</span>
+        		</md-placeholder>
+			</md-input-container>
+		</div>
+		<div layout="row" layout-align="start center" layout-margin>
+			<md-select flex placeholder="Organization" [(ngModel)]="data.organization_id" name="organization_id">
+				<md-option *ngFor="let org of organizations" [value]="org.id">
+					{{org.label}}
+				</md-option>
+			</md-select>
+			<md-select flex placeholder="License type" [(ngModel)]="data.license_type_id" name="license_type_id">
+				<md-option *ngFor="let lt of lictypes" [value]="lt.id">
+					{{lt.label}}
+				</md-option>
+			</md-select>
+		</div>
+	</div>
+</md-dialog-content>
+<md-dialog-actions layout="row" layout-align="end center">
+	<button flex [disabled]="!packForm.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
+	<button flex md-button (click)="close()">Cancel</button>
+</md-dialog-actions>
+</form>	
+
+<!-- **************************************************************************************************
+     **************************************************************************************************
+	 **************************************************************************************************
+-->
+
+<div class="form-group">
+<label class="col-md-3 control-label" for="license_type_id" i18n="">License
+	type</label>
+<div class="col-md-8">
+	<!-- ngIf: isNew -->
+	<select ng-if="isNew" class="form-control ng-pristine ng-untouched ng-scope ng-invalid ng-invalid-required" id="license_type_id" 
+	ng-change="updateMetadata()" 
+	ng-required="mandatory.license_type_id" 
+	ng-model="pack.license_type_id" 
+	ng-options="o.id as o.label for o in refs.license_type_id" required="required">
+	<option value="" selected="selected" label=""></option><option value="0" label="CI ConfigServer ext">CI ConfigServer ext</option><option value="1" label="Analytic2">Analytic2</option><option value="2" label="Doxr L2">Doxr L2</option><option value="3" label="Doxr L3">Doxr L3</option><option value="4" label="CurisIntegrity - Desktop">CurisIntegrity - Desktop</option><option value="5" label="CurisIntegrity SA">CurisIntegrity SA</option><option value="6" label="Analytic1">Analytic1</option><option value="7" label="CurisIntegrity - List of modes">CurisIntegrity - List of modes</option><option value="8" label="CurisIntegrity for Curistec">CurisIntegrity for Curistec</option><option value="9" label="CurisIntegrity for BP">CurisIntegrity for BP</option><option value="10" label="CD_AllMod_AllCemtest_Custom_0U">CD_AllMod_AllCemtest_Custom_0U</option><option value="11" label="CurisIntegrity StandAlone - A1CPC">CurisIntegrity StandAlone - A1CPC</option><option value="12" label="CD_AllMod_AllCemtest_MIDtest_Custom_0U">CD_AllMod_AllCemtest_MIDtest_Custom_0U</option><option value="13" label="CI SA Complete">CI SA Complete</option><option value="14" label="CI for Dev Complete">CI for Dev Complete</option><option value="15" label="CD_RockMod_MIDtest_MIDSynth_Express_50U">CD_RockMod_MIDtest_MIDSynth_Express_50U</option><option value="16" label="CurisData for Sonatrach">CurisData for Sonatrach</option><option value="17" label="CD_AllMod_Alltest_Full_100_L_0S_0U">CD_AllMod_Alltest_Full_100_L_0S_0U</option><option value="18" label="CD_CementAdvMod_AllCemtest_Custom_100L_0S_0U">CD_CementAdvMod_AllCemtest_Custom_100L_0S_0U</option><option value="19" label="CD_CementAdvMod_AllCemtest_Custom_30U">CD_CementAdvMod_AllCemtest_Custom_30U</option><option value="20" label="CD_CementAdvMod_30U_10L_Express">CD_CementAdvMod_30U_10L_Express</option><option value="21" label="CD_CementAdv_Monolab">CD_CementAdv_Monolab</option><option value="22" label="Stand alone - MultiComputation">Stand alone - MultiComputation</option><option value="23" label="MultiCement">MultiCement</option><option value="24" label="CD_CementAdvMod_AllCemtest_Custom_100U">CD_CementAdvMod_AllCemtest_Custom_100U</option><option value="25" label="CI StandAlone A1">CI StandAlone A1</option><option value="26" label="CI StandAlone A1 A2 QL CementProperties">CI StandAlone A1 A2 QL CementProperties</option><option value="27" label="CI Corporate A1">CI Corporate A1</option><option value="28" label="CI Demo version">CI Demo version</option><option value="29" label="CD Complete">CD Complete</option></select>
+	<!-- end ngIf: isNew -->
+	<!-- ngIf: !isNew -->
+	<div class="alert inline-alert alert-warning ng-hide" ng-show="packForm.license_type_id.$invalid">
+		<span class="glyphicon glyphicon-warning-sign"></span> <span ng-show="packForm.license_type_id.$error.required" ng-bind="mandatoryFieldErrorMsg('License type')" class="ng-binding ng-hide">'License type' is required.</span>
+	</div>
+</div>
+</div>
+
+<div class="form-group">
+<label class="col-md-3 control-label" for="organization_id" i18n="">Organization</label>
+<div class="col-md-8">
+	<!-- ngIf: isNew --><select ng-if="isNew" class="form-control ng-pristine ng-untouched ng-scope ng-invalid ng-invalid-required" ng-model="pack.organization_id" ng-required="mandatory.organization_id" ng-options="o.id as o.label for o in refs.organization_id" required="required"><option value="" selected="selected" label=""></option><option value="0" label="British Petroleum">British Petroleum</option><option value="1" label="CurisTec">CurisTec</option><option value="2" label="KindSoft">KindSoft</option><option value="3" label="CurisIT">CurisIT</option><option value="4" label="Trican">Trican</option><option value="5" label="Schlumberger">Schlumberger</option><option value="6" label="Sonatrach">Sonatrach</option><option value="7" label="Sanjel-Taqa">Sanjel-Taqa</option><option value="8" label="National Petroleum Services Saudi Arabia Int.">National Petroleum Services Saudi Arabia Int.</option></select><!-- end ngIf: isNew -->
+	<!-- ngIf: !isNew -->
+	<div class="alert inline-alert alert-warning ng-hide" ng-show="packForm.organization_id.$invalid">
+		<span class="glyphicon glyphicon-warning-sign"></span> <span ng-show="packForm.organization_id.$error.required" ng-bind="mandatoryFieldErrorMsg('Organization')" class="ng-binding ng-hide">'Organization' is required.</span>
+	</div>
+</div>
+</div>
+<div class="form-group">
+<label class="col-md-3 control-label" for="license_preactivation" i18n="">License preactivation</label>
+<div class="col-md-8">
+	<input type="checkbox" class="form-control ng-pristine ng-untouched ng-valid" ng-model="pack.license_preactivation">
+</div>
+</div>
+<div class="form-group">
+<label class="col-md-3 control-label" for="preactivation_valid_period" i18n="">Preactivation valid period (days)</label>
+<div class="col-md-8">
+	<input type="number" id="preactivation_valid_period" name="preactivation_valid_period" min="1" class="form-control ng-pristine ng-untouched ng-valid ng-valid-min ng-valid-required" ng-model="pack.preactivation_valid_period" ng-required="pack.license_preactivation" required="required">
+	<div class="alert inline-alert alert-warning ng-hide" ng-show="packForm.preactivation_valid_period.$invalid">
+		<span class="glyphicon glyphicon-warning-sign"></span> 
+		<span ng-show="packForm.preactivation_valid_period.$error.required" ng-bind="mandatoryFieldErrorMsg('Preactivation valid period')" class="ng-binding ng-hide">'Preactivation valid period' is required.</span>
+		<span ng-show="packForm.preactivation_valid_period.$error.min" ng-bind="field1ShouldBeGreaterThanField2('The preactivation valid period', '0')" class="ng-binding ng-hide">The preactivation valid period should be greater than 0</span>
+	</div>
+</div>
+</div>
+<div class="form-group">
+<label class="col-md-3 control-label" for="renew_valid_period" i18n="">Period for renew (days)</label>
+<div class="col-md-8">
+	<input type="number" id="renew_valid_period" name="renew_valid_period" min="0" class="form-control ng-pristine ng-untouched ng-valid-min ng-valid ng-valid-required" ng-model="pack.renew_valid_period" ng-required="true" required="required">
+	<div class="alert inline-alert alert-warning ng-hide" ng-show="packForm.renew_valid_period.$invalid">
+		<span class="glyphicon glyphicon-warning-sign"></span> 
+		<span ng-show="packForm.renew_valid_period.$error.required" ng-bind="mandatoryFieldErrorMsg('Period for renew')" class="ng-binding ng-hide">'Period for renew' is required.</span>
+		<span ng-show="packForm.renew_valid_period.$error.min" ng-bind="field1ShouldBeGreaterThanField2('The period for renew valid period', '0')" class="ng-binding ng-hide">The period for renew valid period should be greater than 0</span>
+	</div>
+</div>
+</div>
+
+
+<div class="form-group">
+<label class="col-md-3 control-label" for="comments" i18n="">Comments</label>
+<div class="col-md-8">
+	<textarea type="string" id="comments" name="comments" placeholder="" class="form-control ng-pristine ng-untouched ng-valid ng-valid-maxlength ng-valid-required" ng-model="pack.comments" rows="2" ng-required="mandatory.comments" ng-maxlength="1024"></textarea>
+	<div class="alert inline-alert alert-warning ng-hide" ng-show="packForm.comments.$invalid">
+		<span class="glyphicon glyphicon-warning-sign"></span> <span ng-show="packForm.comments.$error.maxlength" ng-bind="maxLengthErrorMsg('Comments', maxlength.comments)" class="ng-binding ng-hide">Comments length is too long (max: 1024).</span>
+		<span ng-show="packForm.comments.$error.required" ng-bind="mandatoryFieldErrorMsg('comments')" class="ng-binding ng-hide">'comments' is required.</span>
+	</div>
+</div>
+</div>
+
+<!-- ngIf: !isNew -->
+
+<!-- ngIf: !isNew -->
+
+<div class="form-group">
+<label class="col-md-3 control-label" i18n="">Metadata</label>
+<div class="col-md-8">
+	<table class="table table-hover table-condensed">
+		<thead>
+			<tr>
+				<th i18n="">Key</th>
+				<th i18n="">Value</th>
+			</tr>
+		</thead>
+		<tbody>
+			<!-- ngRepeat: row_md in pack.metadata -->
+		</tbody>
+	</table>
+</div>
+</div>
+
+<div class="form-group">
+<div class="col-md-offset-3 col-md-10">
+	<button id="save" type="submit" class="btn btn-primary">
+		<span i18n="" class="glyphicon glyphicon-floppy-disk"></span> Save
+	</button>
+	<!-- ngIf: !isNew -->
+	<ul class="dropdown-menu" role="menu">
+		<li><!-- ngIf: Packs.isActionAvailable('activate', pack) --><a ng-click="execute('activate')" ng-if="Packs.isActionAvailable('activate', pack)" href="#" class="ng-scope">Activate</a><!-- end ngIf: Packs.isActionAvailable('activate', pack) --></li>
+		<li><!-- ngIf: Packs.isActionAvailable('putonhold', pack) --></li>
+		<li class="divider"></li>
+		<li><!-- ngIf: Packs.isActionAvailable('cancel', pack) --></li>
+		<li><!-- ngIf: Packs.isActionAvailable('delete', pack) --><a ng-click="execute('delete')" ng-if="Packs.isActionAvailable('delete', pack)" href="#" class="ng-scope">Delete</a><!-- end ngIf: Packs.isActionAvailable('delete', pack) --></li>
+		</ul>
+</div>
+</div>
+</form>
\ No newline at end of file
diff --git a/securis/src/main/webapp/src/app/forms/pack.form.component.ts b/securis/src/main/webapp/src/app/forms/pack.form.component.ts
index a10a8c6..90c51bd 100644
--- a/securis/src/main/webapp/src/app/forms/pack.form.component.ts
+++ b/securis/src/main/webapp/src/app/forms/pack.form.component.ts
@@ -1,9 +1,11 @@
+import { Http } from '@angular/http';
 import { PacksService } from '../resources/packs';
 import { LocaleService } from '../common/i18n';
 import { TdDataTableService, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumn } from '@covalent/core';
 import { IPageChangeEvent } from '@covalent/core';
 import { Component, AfterViewInit } from '@angular/core';
 import { TdMediaService } from '@covalent/core';
+import { IComboOption } from './base';
 
 @Component({
   selector: 'pack-form',
@@ -11,21 +13,43 @@
 })
 export class PackFormComponent implements AfterViewInit {
 
-  form_title: string = '';
+  form_title: string = 'Title';
   form_subtitle: string = '';
+  organizations : IComboOption[];
+  licensetypes : IComboOption[];
+  data: any = {};
+  isNew : boolean = true;
 
-  constructor(private packs: PacksService,
+  constructor(private http: Http,
+              private packs: PacksService,
               private $L: LocaleService) {
-      this.form_title = $L.get('Pack data');
-      this.form_subtitle = $L.get('Fullfill the pack data and save the changes');
+      
   }
 
+  private loadCombos(): void {
+      this.http.get('organization')
+        .map(response => response.json().map((org : any) => <IComboOption>{id: org.id, label: `(${org.code}) ${org.name}`}))
+        .subscribe(
+          data => this.organizations = data,
+          err => console.error('Error loading orgs')
+        );
+      this.http.get('licensetype')
+        .map(response => response.json().map((lt : any) => <IComboOption>{id: lt.id, label: `(${lt.code}) ${lt.name}`}))
+        .subscribe(
+          data => this.licensetypes = data,
+          err => console.error('Error loading orgs')
+        );
+  }
+
+
   ngOnInit(): void {
+    this.loadCombos();
+    this.data = {};
+    this.form_title = this.$L.get('Pack data');
   }
 
 
   ngAfterViewInit(): void {
-
   }
 }
 
diff --git a/securis/src/main/webapp/src/app/forms/pack.form.html b/securis/src/main/webapp/src/app/forms/pack.form.html
index f9fae7f..9b0d17c 100644
--- a/securis/src/main/webapp/src/app/forms/pack.form.html
+++ b/securis/src/main/webapp/src/app/forms/pack.form.html
@@ -1,172 +1,66 @@
-<h3 md-dialog-title>{{form_title}}</h3>
 <form #packForm="ngForm" class="inset" (keyup.enter)="save()">
-<md-dialog-content>
+	<md-card>
+		<md-card-title>
+			{{form_title}}
+		</md-card-title>
+		<md-card-subtitle>
+			{{form_subtitle}}
+		</md-card-subtitle>
+<md-divider></md-divider>
+		<md-card-content>
 	<div layout="column" layout-align="start center">
-		<div layout="row" layout-align="start center">
-			<md-icon class="form-icon">face</md-icon>
-			<md-input-container class="md-icon-float">
-				<input mdInput flex placeholder="Username" type="text" [(ngModel)]="data.username" name="username" required />
+		<div layout="row" layout-align="start center" layout-margin>
+			<md-input-container flex>
+				<input mdInput maxLength="50" type="text" [(ngModel)]="data.code" name="code" required />
+				<md-placeholder>
+          			<span i18n>Code</span>
+        		</md-placeholder>
 			</md-input-container>
-			<div id="invalid-auth-msg" *ngIf="invalidError" class="tc-red-600 text-center" flex i18n>The username or password is incorrect. Please try again.</div>
+	<!-- TODO: <div class="alert inline-alert alert-warning" ng-show="packForm.code.$invalid">
+		<span class="glyphicon glyphicon-warning-sign"></span> 
+		<span ng-show="packForm.code.$error.maxlength" ng-bind="maxLengthErrorMsg('Code', maxlength.code)" 
+		class="ng-binding ng-hide">Code length is too long (max: 50).</span> 
+		<span ng-show="packForm.code.$error.required" ng-bind="mandatoryFieldErrorMsg('Code')" class="ng-binding">'Code' is required.</span>
+	</div> -->
+			<md-input-container flex>
+				<input mdInput type="number" type="text" [(ngModel)]="data.num_licenses" name="num_licenses" required />
+				<md-placeholder>
+          			<span i18n>Num. licenses</span>
+        		</md-placeholder>
+			</md-input-container>
 		</div>
-		<div layout="row" layout-align="start center">
-			<md-icon class="form-icon">vpn_key</md-icon>
-			<md-input-container class="md-icon-float">
-				<input mdInput (keyup.enter)="loginForm.form.valid && false" flex placeholder="Password" type="password" [(ngModel)]="data.password"
-					name="password" required/>
+		<div layout="row" layout-align="start center" layout-margin>
+			<md-input-container flex>
+				<input mdInput type="date" type="text" [(ngModel)]="data.init_valid_date" name="init_valid_date" required />
+				<md-placeholder>
+          			<span i18n>Initial date</span>
+        		</md-placeholder>
 			</md-input-container>
+			<md-input-container flex>
+				<input mdInput type="date" type="text" [(ngModel)]="data.end_valid_date" name="end_valid_date" required />
+				<md-placeholder>
+          			<span i18n>End date</span>
+        		</md-placeholder>
+			</md-input-container>
+		</div>
+		<div layout="row" layout-align="start center" layout-margin>
+			<md-select flex placeholder="Organization" [(ngModel)]="data.organization_id" name="organization_id">
+				<md-option *ngFor="let org of organizations" [value]="org.id">
+					{{org.label}}
+				</md-option>
+			</md-select>
+			<md-select flex placeholder="License type" [(ngModel)]="data.license_type_id" name="license_type_id">
+				<md-option *ngFor="let lt of lictypes" [value]="lt.id">
+					{{lt.label}}
+				</md-option>
+			</md-select>
 		</div>
 	</div>
-</md-dialog-content>
-<md-dialog-actions layout="row" layout-align="end center">
-	<button flex [disabled]="!packForm.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
-	<button flex md-button (click)="close()">Cancel</button>
-</md-dialog-actions>
+</md-card-content>
+<md-divider></md-divider>
+<md-card-actions>
+	<button [disabled]="!packForm.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
+	<button md-button (click)="close()">Cancel</button>
+</md-card-actions>
+</md-card>
 </form>	
-
-
-<form role="form" class="form-horizontal  ng-pristine ng-invalid ng-invalid-required ng-valid-maxlength ng-valid-min" name="packForm" id="packForm" ng-submit="save()">
-<!-- ngIf: !isNew -->
-<div class="form-group">
-<label class="col-md-3 control-label" for="code" i18n="">Code</label>
-<div class="col-md-8">
-	<input type="string" id="code" name="code" placeholder="" class="form-control ng-pristine ng-invalid ng-invalid-required ng-valid-maxlength ng-touched" ng-model="pack.code" ng-required="mandatory.code" ng-maxlength="50" required="required">
-	<div class="alert inline-alert alert-warning" ng-show="packForm.code.$invalid">
-		<span class="glyphicon glyphicon-warning-sign"></span> <span ng-show="packForm.code.$error.maxlength" ng-bind="maxLengthErrorMsg('Code', maxlength.code)" class="ng-binding ng-hide">Code length is too long (max: 50).</span> <span ng-show="packForm.code.$error.required" ng-bind="mandatoryFieldErrorMsg('Code')" class="ng-binding">'Code' is required.</span>
-	</div>
-</div>
-</div>
-
-<div class="form-group">
-<label class="col-md-3 control-label" for="init_valid_date" i18n="">Validity (from - to)</label>
-<div class="col-md-4">
-	<input type="date" id="init_valid_date" name="init_valid_date" placeholder="" class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" ng-model="pack.init_valid_date" ng-required="mandatory.init_valid_date" required="required">
-	<div class="alert inline-alert alert-warning ng-hide" ng-show="packForm.initValidDate.$invalid">
-		<span class="glyphicon glyphicon-warning-sign"></span> 
-		<span ng-show="packForm.init_valid_date.$error.required" ng-bind="mandatoryFieldErrorMsg('Init valid date')" class="ng-binding ng-hide">'Init valid date' is required.</span>
-	</div>
-</div>
-<div class="col-md-4">
-	<input type="date" id="end_valid_date" name="end_valid_date" placeholder="" class="form-control ng-pristine ng-untouched ng-valid-min ng-invalid ng-invalid-required" ng-model="pack.end_valid_date" min="2017-03-09" ng-required="mandatory.end_valid_date" required="required">
-	<div class="alert inline-alert alert-warning" ng-show="packForm.end_valid_date.$invalid">
-		<span class="glyphicon glyphicon-warning-sign"></span> 
-		<span ng-show="packForm.end_valid_date.$error.required" ng-bind="mandatoryFieldErrorMsg('End valid date')" class="ng-binding">'End valid date' is required.</span>
-		<span ng-show="packForm.end_valid_date.$error.min" ng-bind="field1ShouldBeGreaterThanField2('End date', 'Init date')" class="ng-binding ng-hide">End date should be greater than Init date</span>
-	</div>
-</div>
-</div>
-
-<div class="form-group">
-<label class="col-md-3 control-label" for="num_licenses" i18n="">Num.
-	Licenses</label>
-<div class="col-md-8">
-	<input type="number" id="num_licenses" name="num_licenses" placeholder="" class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" ng-model="pack.num_licenses" ng-required="mandatory.num_licenses" required="required">
-	<div class="alert inline-alert alert-warning ng-hide" ng-show="packForm.num_licenses.$invalid">
-		<span class="glyphicon glyphicon-warning-sign"></span> <span ng-show="packForm.num_licenses.$error.maxlength" ng-bind="maxLengthErrorMsg('Num. Licenses', maxlength.num_licenses)" class="ng-binding ng-hide">Num. Licenses length is too long (max: undefined).</span>
-		<span ng-show="packForm.num_licenses.$error.required" ng-bind="mandatoryFieldErrorMsg('Num. Licenses')" class="ng-binding ng-hide">'Num. Licenses' is required.</span>
-	</div>
-</div>
-</div>
-
-<!-- ngIf: !isNew -->
-
-<div class="form-group">
-<label class="col-md-3 control-label" for="license_type_id" i18n="">License
-	type</label>
-<div class="col-md-8">
-	<!-- ngIf: isNew --><select ng-if="isNew" class="form-control ng-pristine ng-untouched ng-scope ng-invalid ng-invalid-required" id="license_type_id" ng-change="updateMetadata()" ng-required="mandatory.license_type_id" ng-model="pack.license_type_id" ng-options="o.id as o.label for o in refs.license_type_id" required="required"><option value="" selected="selected" label=""></option><option value="0" label="CI ConfigServer ext">CI ConfigServer ext</option><option value="1" label="Analytic2">Analytic2</option><option value="2" label="Doxr L2">Doxr L2</option><option value="3" label="Doxr L3">Doxr L3</option><option value="4" label="CurisIntegrity - Desktop">CurisIntegrity - Desktop</option><option value="5" label="CurisIntegrity SA">CurisIntegrity SA</option><option value="6" label="Analytic1">Analytic1</option><option value="7" label="CurisIntegrity - List of modes">CurisIntegrity - List of modes</option><option value="8" label="CurisIntegrity for Curistec">CurisIntegrity for Curistec</option><option value="9" label="CurisIntegrity for BP">CurisIntegrity for BP</option><option value="10" label="CD_AllMod_AllCemtest_Custom_0U">CD_AllMod_AllCemtest_Custom_0U</option><option value="11" label="CurisIntegrity StandAlone - A1CPC">CurisIntegrity StandAlone - A1CPC</option><option value="12" label="CD_AllMod_AllCemtest_MIDtest_Custom_0U">CD_AllMod_AllCemtest_MIDtest_Custom_0U</option><option value="13" label="CI SA Complete">CI SA Complete</option><option value="14" label="CI for Dev Complete">CI for Dev Complete</option><option value="15" label="CD_RockMod_MIDtest_MIDSynth_Express_50U">CD_RockMod_MIDtest_MIDSynth_Express_50U</option><option value="16" label="CurisData for Sonatrach">CurisData for Sonatrach</option><option value="17" label="CD_AllMod_Alltest_Full_100_L_0S_0U">CD_AllMod_Alltest_Full_100_L_0S_0U</option><option value="18" label="CD_CementAdvMod_AllCemtest_Custom_100L_0S_0U">CD_CementAdvMod_AllCemtest_Custom_100L_0S_0U</option><option value="19" label="CD_CementAdvMod_AllCemtest_Custom_30U">CD_CementAdvMod_AllCemtest_Custom_30U</option><option value="20" label="CD_CementAdvMod_30U_10L_Express">CD_CementAdvMod_30U_10L_Express</option><option value="21" label="CD_CementAdv_Monolab">CD_CementAdv_Monolab</option><option value="22" label="Stand alone - MultiComputation">Stand alone - MultiComputation</option><option value="23" label="MultiCement">MultiCement</option><option value="24" label="CD_CementAdvMod_AllCemtest_Custom_100U">CD_CementAdvMod_AllCemtest_Custom_100U</option><option value="25" label="CI StandAlone A1">CI StandAlone A1</option><option value="26" label="CI StandAlone A1 A2 QL CementProperties">CI StandAlone A1 A2 QL CementProperties</option><option value="27" label="CI Corporate A1">CI Corporate A1</option><option value="28" label="CI Demo version">CI Demo version</option><option value="29" label="CD Complete">CD Complete</option></select><!-- end ngIf: isNew -->
-	<!-- ngIf: !isNew -->
-	<div class="alert inline-alert alert-warning ng-hide" ng-show="packForm.license_type_id.$invalid">
-		<span class="glyphicon glyphicon-warning-sign"></span> <span ng-show="packForm.license_type_id.$error.required" ng-bind="mandatoryFieldErrorMsg('License type')" class="ng-binding ng-hide">'License type' is required.</span>
-	</div>
-</div>
-</div>
-
-<div class="form-group">
-<label class="col-md-3 control-label" for="organization_id" i18n="">Organization</label>
-<div class="col-md-8">
-	<!-- ngIf: isNew --><select ng-if="isNew" class="form-control ng-pristine ng-untouched ng-scope ng-invalid ng-invalid-required" ng-model="pack.organization_id" ng-required="mandatory.organization_id" ng-options="o.id as o.label for o in refs.organization_id" required="required"><option value="" selected="selected" label=""></option><option value="0" label="British Petroleum">British Petroleum</option><option value="1" label="CurisTec">CurisTec</option><option value="2" label="KindSoft">KindSoft</option><option value="3" label="CurisIT">CurisIT</option><option value="4" label="Trican">Trican</option><option value="5" label="Schlumberger">Schlumberger</option><option value="6" label="Sonatrach">Sonatrach</option><option value="7" label="Sanjel-Taqa">Sanjel-Taqa</option><option value="8" label="National Petroleum Services Saudi Arabia Int.">National Petroleum Services Saudi Arabia Int.</option></select><!-- end ngIf: isNew -->
-	<!-- ngIf: !isNew -->
-	<div class="alert inline-alert alert-warning ng-hide" ng-show="packForm.organization_id.$invalid">
-		<span class="glyphicon glyphicon-warning-sign"></span> <span ng-show="packForm.organization_id.$error.required" ng-bind="mandatoryFieldErrorMsg('Organization')" class="ng-binding ng-hide">'Organization' is required.</span>
-	</div>
-</div>
-</div>
-<div class="form-group">
-<label class="col-md-3 control-label" for="license_preactivation" i18n="">License preactivation</label>
-<div class="col-md-8">
-	<input type="checkbox" class="form-control ng-pristine ng-untouched ng-valid" ng-model="pack.license_preactivation">
-</div>
-</div>
-<div class="form-group">
-<label class="col-md-3 control-label" for="preactivation_valid_period" i18n="">Preactivation valid period (days)</label>
-<div class="col-md-8">
-	<input type="number" id="preactivation_valid_period" name="preactivation_valid_period" min="1" class="form-control ng-pristine ng-untouched ng-valid ng-valid-min ng-valid-required" ng-model="pack.preactivation_valid_period" ng-required="pack.license_preactivation" required="required">
-	<div class="alert inline-alert alert-warning ng-hide" ng-show="packForm.preactivation_valid_period.$invalid">
-		<span class="glyphicon glyphicon-warning-sign"></span> 
-		<span ng-show="packForm.preactivation_valid_period.$error.required" ng-bind="mandatoryFieldErrorMsg('Preactivation valid period')" class="ng-binding ng-hide">'Preactivation valid period' is required.</span>
-		<span ng-show="packForm.preactivation_valid_period.$error.min" ng-bind="field1ShouldBeGreaterThanField2('The preactivation valid period', '0')" class="ng-binding ng-hide">The preactivation valid period should be greater than 0</span>
-	</div>
-</div>
-</div>
-<div class="form-group">
-<label class="col-md-3 control-label" for="renew_valid_period" i18n="">Period for renew (days)</label>
-<div class="col-md-8">
-	<input type="number" id="renew_valid_period" name="renew_valid_period" min="0" class="form-control ng-pristine ng-untouched ng-valid-min ng-valid ng-valid-required" ng-model="pack.renew_valid_period" ng-required="true" required="required">
-	<div class="alert inline-alert alert-warning ng-hide" ng-show="packForm.renew_valid_period.$invalid">
-		<span class="glyphicon glyphicon-warning-sign"></span> 
-		<span ng-show="packForm.renew_valid_period.$error.required" ng-bind="mandatoryFieldErrorMsg('Period for renew')" class="ng-binding ng-hide">'Period for renew' is required.</span>
-		<span ng-show="packForm.renew_valid_period.$error.min" ng-bind="field1ShouldBeGreaterThanField2('The period for renew valid period', '0')" class="ng-binding ng-hide">The period for renew valid period should be greater than 0</span>
-	</div>
-</div>
-</div>
-
-
-<div class="form-group">
-<label class="col-md-3 control-label" for="comments" i18n="">Comments</label>
-<div class="col-md-8">
-	<textarea type="string" id="comments" name="comments" placeholder="" class="form-control ng-pristine ng-untouched ng-valid ng-valid-maxlength ng-valid-required" ng-model="pack.comments" rows="2" ng-required="mandatory.comments" ng-maxlength="1024"></textarea>
-	<div class="alert inline-alert alert-warning ng-hide" ng-show="packForm.comments.$invalid">
-		<span class="glyphicon glyphicon-warning-sign"></span> <span ng-show="packForm.comments.$error.maxlength" ng-bind="maxLengthErrorMsg('Comments', maxlength.comments)" class="ng-binding ng-hide">Comments length is too long (max: 1024).</span>
-		<span ng-show="packForm.comments.$error.required" ng-bind="mandatoryFieldErrorMsg('comments')" class="ng-binding ng-hide">'comments' is required.</span>
-	</div>
-</div>
-</div>
-
-<!-- ngIf: !isNew -->
-
-<!-- ngIf: !isNew -->
-
-<div class="form-group">
-<label class="col-md-3 control-label" i18n="">Metadata</label>
-<div class="col-md-8">
-	<table class="table table-hover table-condensed">
-		<thead>
-			<tr>
-				<th i18n="">Key</th>
-				<th i18n="">Value</th>
-			</tr>
-		</thead>
-		<tbody>
-			<!-- ngRepeat: row_md in pack.metadata -->
-		</tbody>
-	</table>
-</div>
-</div>
-
-<div class="form-group">
-<div class="col-md-offset-3 col-md-10">
-	<button id="save" type="submit" class="btn btn-primary">
-		<span i18n="" class="glyphicon glyphicon-floppy-disk"></span> Save
-	</button>
-	<!-- ngIf: !isNew -->
-	<ul class="dropdown-menu" role="menu">
-		<li><!-- ngIf: Packs.isActionAvailable('activate', pack) --><a ng-click="execute('activate')" ng-if="Packs.isActionAvailable('activate', pack)" href="#" class="ng-scope">Activate</a><!-- end ngIf: Packs.isActionAvailable('activate', pack) --></li>
-		<li><!-- ngIf: Packs.isActionAvailable('putonhold', pack) --></li>
-		<li class="divider"></li>
-		<li><!-- ngIf: Packs.isActionAvailable('cancel', pack) --></li>
-		<li><!-- ngIf: Packs.isActionAvailable('delete', pack) --><a ng-click="execute('delete')" ng-if="Packs.isActionAvailable('delete', pack)" href="#" class="ng-scope">Delete</a><!-- end ngIf: Packs.isActionAvailable('delete', pack) --></li>
-		</ul>
-</div>
-</div>
-</form>
\ No newline at end of file
diff --git a/securis/src/main/webapp/src/app/pack.list.component.1.html b/securis/src/main/webapp/src/app/pack.list.component.1.html
new file mode 100644
index 0000000..a2d59b6
--- /dev/null
+++ b/securis/src/main/webapp/src/app/pack.list.component.1.html
@@ -0,0 +1,112 @@
+<td-layout-nav-list #navList
+                    logo="assets:covalent"
+                    toolbarTitle="Email App"
+                    class="light-blue-red"
+                    [opened]="media.registerQuery('gt-sm') | async"
+					[mode] = "side"
+                    [sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '350px' : '100%'">
+  <div td-toolbar-content layout="row" layout-align="start center" flex>
+    <span flex *ngIf="!searchBox.searchVisible"></span>
+    <td-search-box #searchBox backIcon="arrow_back" class="pull-top-sm pull-bottom-sm" placeholder="Search here" flex>
+    </td-search-box>
+    <button md-icon-button [mdMenuTriggerFor]="notificationsMenu">
+      <td-notification-count color="accent" [notifications]="4">
+        <md-icon>apps</md-icon>
+      </td-notification-count>
+    </button>
+    <md-menu #notificationsMenu="mdMenu">
+      <td-menu>
+        <div td-menu-header class="md-subhead">Templates</div>
+        <md-nav-list dense>
+          <a md-list-item [routerLink]="['/templates']">
+            <md-icon md-list-avatar>system_update_alt</md-icon>
+            <h4 md-line><span class="text-wrap">Landing Page</span></h4>
+            <p md-line>a landing page template</p>
+          </a>
+          <md-divider></md-divider>
+          <a md-list-item [routerLink]="['/templates/dashboard']">
+            <md-icon md-list-avatar>dashboard</md-icon>
+            <h4 md-line><span class="text-wrap">Dashboard</span></h4>
+            <p md-line>an ngx-charts dashboard template</p>
+          </a>
+          <md-divider></md-divider>
+          <a md-list-item [routerLink]="['/templates/email']">
+            <md-icon md-list-avatar>email</md-icon>
+            <h4 md-line><span class="text-wrap">Email App</span></h4>
+            <p md-line>an email app template</p>
+          </a>
+          <md-divider></md-divider>
+          <a md-list-item [routerLink]="['/templates/editor']">
+            <md-icon md-list-avatar>view_array</md-icon>
+            <h4 md-line><span class="text-wrap">IDE Editor</span></h4>
+            <p md-line>an IDE text editor app template</p>
+          </a>
+        </md-nav-list>
+        <a md-button color="accent" td-menu-footer href="https://github.com/Teradata/covalent-quickstart/tree/develop/src/app/templates" target="_blank">
+          View Code
+        </a>
+      </td-menu>
+    </md-menu>
+    <a md-icon-button mdTooltip="View this code" href="https://github.com/Teradata/covalent-quickstart/tree/develop/src/app/templates" target="_blank"><md-icon svgIcon="assets:github"></md-icon></a>
+  </div>
+  <a md-fab td-sidenav-content color="accent" class="md-fab-position-bottom-right" style="bottom:20px; position: fixed;"> 
+    <md-icon>add</md-icon>
+  </a>
+  <md-nav-list td-sidenav-content >
+      <template let-i="index" let-last="last" let-hero ngFor [ngForOf]="heroes" [ngForTrackBy]="trackById">
+        <a md-list-item>
+          <img md-list-avatar src="http://lorempixel.com/40/40/people/{{i+1}}" />
+          <h3 md-line> {{hero.name}} </h3>
+          <p md-line> Hero ID is: {{hero.id}} </p>
+          <md-icon class="tc-amber-800">fiber_new</md-icon>
+        </a>
+        <md-divider *ngIf="!last" md-inset></md-divider>
+      </template>
+  </md-nav-list>
+  <md-card tdMediaToggle="gt-xs" [mediaClasses]="['side']">
+    <md-card-header>
+      <img md-card-avatar src="http://lorempixel.com/40/40/people/9" />
+      <md-card-title>Firstname Lastname</md-card-title>
+      <md-card-subtitle>Tuesday, January 3 2017 at 8:39 PM</md-card-subtitle>
+      <span flex></span>
+      <div class="pad-top pad-right">
+        <button md-icon-button><md-icon>reply</md-icon></button>
+        <button md-icon-button><md-icon>forward</md-icon></button>
+        <button md-icon-button><md-icon>more_vert</md-icon></button>
+      </div>
+    </md-card-header>
+    <md-divider></md-divider>
+    <div class="md-padding">
+      <p>
+        Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
+      </p>
+      <p>
+        Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
+      </p>
+      <p>
+        Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
+      </p>
+      <p>
+        Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.
+      </p>
+      <p>
+        Sincerly<br>-Kimmie
+      </p>
+    </div>
+    <md-divider></md-divider>
+    <div layout="row" layout-align="space-around center" class="pad">
+      <button md-button class="tc-grey-600">
+        <md-icon class="pull-bottom">reply</md-icon>
+        <div class="md-caption">Reply</div>
+      </button>
+      <button md-button class="tc-grey-600">
+        <md-icon class="pull-bottom">reply_all</md-icon>
+        <div class="md-caption">Reply All</div>
+      </button>
+      <button md-button class="tc-grey-600">
+        <md-icon class="pull-bottom">forward</md-icon>
+        <div class="md-caption">Forward</div>
+      </button>
+    </div>
+  </md-card>
+</td-layout-nav-list>
\ No newline at end of file
diff --git a/securis/src/main/webapp/src/app/pack.list.component.ts b/securis/src/main/webapp/src/app/pack.list.component.ts
index 8b883a0..f63e72f 100644
--- a/securis/src/main/webapp/src/app/pack.list.component.ts
+++ b/securis/src/main/webapp/src/app/pack.list.component.ts
@@ -1,8 +1,10 @@
+import { MdDialog } from '@angular/material';
 import { TdDataTableService, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumn } from '@covalent/core';
 import { IPageChangeEvent } from '@covalent/core';
 import { Component, AfterViewInit } from '@angular/core';
 import { TdMediaService } from '@covalent/core';
 import { PacksService } from './resources/packs';
+import { PackFormComponent } from './forms/pack.form.component';
 
 var pack_example = { 
   id: 7,
@@ -61,6 +63,8 @@
 
   constructor(private _dataTableService: TdDataTableService,
     private media: TdMediaService,
+    private dialog: MdDialog,
+    private packForm: PackFormComponent,
     private packs: PacksService) {
       this.packs.get().subscribe(
         list => {
@@ -76,7 +80,10 @@
   }
 
   createPack() : void {
-    
+    this.dialog.open(PackFormComponent, {
+      height: '50%', // can be px or %
+      width: '40%', // can be px or %
+    });
   }
 
   sort(sortEvent: ITdDataTableSortChangeEvent): void {

--
Gitblit v1.3.2