From 38b0782c887f046426c31766901906c614d73140 Mon Sep 17 00:00:00 2001
From: rsanchez <rsanchez@curisit.net>
Date: Tue, 14 Mar 2017 13:51:56 +0000
Subject: [PATCH] #3527 feature - Added pack form

---
 securis/src/main/webapp/src/app/forms/pack.form.html |  229 +++++++++++++++++++++++++++++++++++++++++----------------
 1 files changed, 164 insertions(+), 65 deletions(-)

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 df65d4d..82d8815 100644
--- a/securis/src/main/webapp/src/app/forms/pack.form.html
+++ b/securis/src/main/webapp/src/app/forms/pack.form.html
@@ -1,75 +1,174 @@
-<form #packForm="ngForm" class="inset" (keyup.enter)="save()">
-	<md-card>
-		<md-card-title>
-			{{form_title}}
-		</md-card-title>
-		<md-card-subtitle>
-			{{form_subtitle}}
-		</md-card-subtitle>
+<md-toolbar>
+	<span md-dialog-title>{{form_title}}</span>
+	<span flex></span>
+	<button md-icon-button (click)="save()"><md-icon>save</md-icon></button>
+	<button md-icon-button md-dialog-close><md-icon>close</md-icon></button>
+</md-toolbar>
+<p class="md-subhead">{{form_subtitle}}</p>
 <md-divider></md-divider>
-		<md-card-content>
-	<div layout="column" layout-align="start center" layout-fill>
+<form #packForm="ngForm" class="inset" >
+<div layout="column" >
+<md-dialog-content>
+	<div layout="column" layout-align="start center">
 		<div layout="row" layout-fill layout-padding>
-			<div layout="column" layout-fill  flex="50">
-			<md-input-container>
-				<input mdInput maxLength="50" type="text" [(ngModel)]="data.code" name="code" required />
-				<md-placeholder>
-          			<span i18n>Code</span>
-        		</md-placeholder>
-			</md-input-container>
-			{{log(packForm.controls)}}
-			<div *ngIf="packForm.controls.code?.touched && packForm.controls.code.invalid" layout="column">
-				<span *ngIf="packForm.controls.code.errors.required" align="end">Code is required</span>
-				<span align="end">Code is ok</span>
+			<div layout="column" layout-fill  flex="15" *ngIf="!isNew">
+				<md-input-container>
+					<input mdInput maxLength="50" type="text" [(ngModel)]="data.id" name="id" required [readonly]="!isNew" />
+					<md-placeholder>
+						<span i18n="field.id"></span>
+					</md-placeholder>
+				</md-input-container>
 			</div>
+			<div layout="column" layout-fill  flex>
+				<md-input-container>
+					<input mdInput maxLength="50" type="text" [(ngModel)]="data.code" name="code" required [readonly]="!isNew" />
+					<md-placeholder>
+						<span i18n="field.code"></span>
+					</md-placeholder>
+				</md-input-container>
+				<error-checker [fieldName]="getFieldName('code')" [formField]="packForm.controls.code"></error-checker>
 			</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="50">
-				<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-fill layout-padding>
-			<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-hint align="end">YYYY-MM-DD</md-hint>
-			</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-hint align="end">YYYY-MM-DD</md-hint>
-			</md-input-container>
+			<div layout="column" layout-fill flex>
+				<md-input-container>
+					<input mdInput type="number"  [(ngModel)]="data.num_licenses" name="num_licenses" required />
+					<md-placeholder>
+						<span i18n="field.num_licenses"></span>
+					</md-placeholder>
+				</md-input-container>
+				<error-checker [fieldName]="getFieldName('num_licenses')" [formField]="packForm.controls.num_licenses"></error-checker>
+			</div>
 		</div>
 		<div layout="row" layout-fill layout-padding>
-			<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 licensetypes" [value]="lt.id">
-					{{lt.label}}
-				</md-option>
-			</md-select>
+			<div layout="column" layout-fill flex>
+				<md-input-container flex>
+					<input mdInput type="date" [(ngModel)]="data.init_valid_date" name="init_valid_date" required />
+					<md-placeholder>
+						<span i18n="field.end_valid_date"></span>
+					</md-placeholder>
+				</md-input-container>
+				<error-checker [fieldName]="getFieldName('init_valid_date')" [formField]="packForm.controls.init_valid_date"></error-checker>
+			</div>
+			<div layout="column" layout-fill flex>
+				<md-input-container flex>
+					<input mdInput type="date" [(ngModel)]="data.end_valid_date" name="end_valid_date" required />
+					<md-placeholder>
+						<span i18n="field.end_valid_date"></span>
+					</md-placeholder>
+				</md-input-container>
+				<error-checker [fieldName]="getFieldName('end_valid_date')" [formField]="packForm.controls.end_valid_date"></error-checker>
+			</div>
+		</div>
+		<div layout="row" layout-fill layout-padding *ngIf="isNew">
+			<div layout="column" layout-fill flex>
+				<md-select [placeholder]="getFieldName('organization_id')" flex [(ngModel)]="data.organization_id" name="organization_id" (change)="changeOrg($event)">
+					<md-option *ngFor="let org of organizations" [value]="org.id">
+						{{org.label}}
+					</md-option>
+				</md-select>
+				<error-checker [fieldName]="getFieldName('organization_id')" [formField]="packForm.controls.organization_id"></error-checker>
+			</div>
+			<div layout="column" layout-fill flex>
+				<md-select flex [placeholder]="getFieldName('license_type_id')" [(ngModel)]="data.license_type_id" name="license_type_id" (change)="changeLicType($event)">
+					<md-option *ngFor="let lt of licensetypes" [value]="lt.id">
+						{{lt.label}}
+					</md-option>
+				</md-select>
+				<error-checker [fieldName]="getFieldName('license_type_id')" [formField]="packForm.controls.license_type_id"></error-checker>
+			</div>
+		</div>
+		<div layout="row" layout-fill layout-padding *ngIf="!isNew">
+			<div layout="column" layout-fill flex>
+				<div layout="column" class="mat-input-container" flex>
+					<label class="mat-input-placeholder mat-float">
+						<span class="placeholder" i18n="field.organization_id"></span>
+					</label>
+					<div class="label-value mat-input-element">{{data.organization_name}}</div>
+				</div>
+			</div>
+			<div layout="column" layout-fill flex>
+				<div layout="column" class="mat-input-container" flex>
+					<label class="mat-input-placeholder mat-float">
+						<span class="placeholder" i18n="field.license_type_id"></span>
+					</label>
+					<div class="label-value mat-input-element">{{data.licensetype_code}}</div>
+				</div>
+			</div>
+		</div>
+		<div layout="row" layout-fill layout-padding >
+			<div layout="column" layout-fill flex>
+				<md-input-container flex>
+					<input mdInput type="number"  [(ngModel)]="data.preactivation_valid_period" name="preactivation_valid_period" required />
+					<md-placeholder>
+						<span i18n="field.preactivation_valid_period"></span>
+					</md-placeholder>
+					<md-hint align="end">days</md-hint>
+				</md-input-container>
+				<error-checker [fieldName]="getFieldName('preactivation_valid_period')" [formField]="packForm.controls.preactivation_valid_period"></error-checker>
+			</div>
+			<div layout="column" layout-fill flex>
+				<md-input-container flex>
+					<input mdInput type="number"[(ngModel)]="data.renew_valid_period" name="renew_valid_period" required />
+					<md-placeholder>
+						<span i18n="field.renew_valid_period"></span>
+					</md-placeholder>
+					<md-hint align="end">days</md-hint>
+				</md-input-container>
+				<error-checker [fieldName]="getFieldName('renew_valid_period')" [formField]="packForm.controls.renew_valid_period"></error-checker>
+			</div>
+		</div>
+		<div layout="row" layout-fill layout-padding>
+			<div layout="column" layout-fill flex>
+				<md-input-container flex>
+					<textarea mdInput type="text" type="text" [(ngModel)]="data.comments" name="comments" maxlength="1024" ></textarea>
+					<md-placeholder>
+						<span i18n="field.comments"></span>
+					</md-placeholder>
+					<md-hint align="end">(max 1024)</md-hint>
+				</md-input-container>
+			</div>
+		</div>
+		<div layout="row" layout-fill layout-padding *ngIf="!isNew">
+			<div layout="column" layout-fill flex>
+				<div layout="column" class="mat-input-container" flex>
+					<label class="mat-input-placeholder mat-float">
+						<span class="placeholder" i18n="field.created_by_name"></span>
+					</label>
+					<div class="label-value mat-input-element">{{data.created_by_name}}</div>
+				</div>
+			</div>
+			<div layout="column" layout-fill flex>
+				<div layout="column" class="mat-input-container" flex>
+					<label class="mat-input-placeholder mat-float">
+						<span class="placeholder" i18n="field.creation_timestamp"></span>
+					</label>
+					<div class="label-value mat-input-element">{{data.creation_timestamp | date: 'medium'}}</div>
+				</div>
+			</div>
+		</div>
+		<div layout="column" layout-fill>
+			<span class="md-title" i18n>License metadata</span>
+			<div layout="row" layout-fill layout-padding *ngFor="let pair of data.metadata">
+				<md-input-container flex="40">
+					<input mdInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="pair.key" readonly />
+					<md-placeholder>
+						<span i18n="field.key"></span>
+					</md-placeholder>
+				</md-input-container>
+				<md-input-container flex>
+					<input mdInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="pair.value" [readonly]="pair.readonly" [required]="pair.required" />
+					<md-placeholder>
+						<span i18n="field.value"></span>
+					</md-placeholder>
+				</md-input-container>
+			</div>
 		</div>
 	</div>
-</md-card-content>
+</md-dialog-content>
+<div flex></div>
 <md-divider></md-divider>
-<md-card-actions>
-	<button [disabled]="!packForm.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
-	<button md-button md-dialog-close>Cancel</button>
-</md-card-actions>
-</md-card>
+<md-dialog-actions layout="row" layout-align="end center">
+		<button [disabled]="!packForm.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
+		<button md-button md-dialog-close>Cancel</button>
+</md-dialog-actions>
+</div>
 </form>	

--
Gitblit v1.3.2