blame | history | patch | commit | commitdiff
rsanchez
2017-03-14 38b0782c887f046426c31766901906c614d73140 
 securis/src/main/webapp/src/app/forms/pack.form.html
....@@ -1,75 +1,174 @@
1
-<form #packForm="ngForm" class="inset" (keyup.enter)="save()">
2
-	<md-card>
3
-		<md-card-title>
4
-			{{form_title}}
5
-		</md-card-title>
6
-		<md-card-subtitle>
7
-			{{form_subtitle}}
8
-		</md-card-subtitle>
1
+<md-toolbar>
2
+	<span md-dialog-title>{{form_title}}</span>
3
+	<span flex></span>
4
+	<button md-icon-button (click)="save()"><md-icon>save</md-icon></button>
5
+	<button md-icon-button md-dialog-close><md-icon>close</md-icon></button>
6
+</md-toolbar>
7
+<p class="md-subhead">{{form_subtitle}}</p>
98 <md-divider></md-divider>
10
-		<md-card-content>
11
-	<div layout="column" layout-align="start center" layout-fill>
9
+<form #packForm="ngForm" class="inset" >
10
+<div layout="column" >
11
+<md-dialog-content>
12
+	<div layout="column" layout-align="start center">
1213 		<div layout="row" layout-fill layout-padding>
13
-			<div layout="column" layout-fill  flex="50">
14
-			<md-input-container>
15
-				<input mdInput maxLength="50" type="text" [(ngModel)]="data.code" name="code" required />
16
-				<md-placeholder>
17
-          			<span i18n>Code</span>
18
-        		</md-placeholder>
19
-			</md-input-container>
20
-			{{log(packForm.controls)}}
21
-			<div *ngIf="packForm.controls.code?.touched && packForm.controls.code.invalid" layout="column">
22
-				<span *ngIf="packForm.controls.code.errors.required" align="end">Code is required</span>
23
-				<span align="end">Code is ok</span>
14
+			<div layout="column" layout-fill  flex="15" *ngIf="!isNew">
15
+				<md-input-container>
16
+					<input mdInput maxLength="50" type="text" [(ngModel)]="data.id" name="id" required [readonly]="!isNew" />
17
+					<md-placeholder>
18
+						<span i18n="field.id"></span>
19
+					</md-placeholder>
20
+				</md-input-container>
2421 			</div>
22
+			<div layout="column" layout-fill  flex>
23
+				<md-input-container>
24
+					<input mdInput maxLength="50" type="text" [(ngModel)]="data.code" name="code" required [readonly]="!isNew" />
25
+					<md-placeholder>
26
+						<span i18n="field.code"></span>
27
+					</md-placeholder>
28
+				</md-input-container>
29
+				<error-checker [fieldName]="getFieldName('code')" [formField]="packForm.controls.code"></error-checker>
2530 			</div>
26
-	<!-- TODO: <div class="alert inline-alert alert-warning" ng-show="packForm.code.$invalid">
27
-		<span class="glyphicon glyphicon-warning-sign"></span> 
28
-		<span ng-show="packForm.code.$error.maxlength" ng-bind="maxLengthErrorMsg('Code', maxlength.code)" 
29
-		class="ng-binding ng-hide">Code length is too long (max: 50).</span> 
30
-		<span ng-show="packForm.code.$error.required" ng-bind="mandatoryFieldErrorMsg('Code')" class="ng-binding">'Code' is required.</span>
31
-	</div> -->
32
-			<md-input-container flex="50">
33
-				<input mdInput type="number" type="text" [(ngModel)]="data.num_licenses" name="num_licenses" required />
34
-				<md-placeholder>
35
-          			<span i18n>Num. licenses</span>
36
-        		</md-placeholder>
37
-			</md-input-container>
38
-		</div>
39
-		<div layout="row" layout-align="start center" layout-fill layout-padding>
40
-			<md-input-container flex>
41
-				<input mdInput type="date" type="text" [(ngModel)]="data.init_valid_date" name="init_valid_date" required />
42
-				<md-placeholder>
43
-          			<span i18n>Initial date</span>
44
-        		</md-placeholder>
45
-				<md-hint align="end">YYYY-MM-DD</md-hint>
46
-			</md-input-container>
47
-			<md-input-container flex>
48
-				<input mdInput type="date" type="text" [(ngModel)]="data.end_valid_date" name="end_valid_date" required />
49
-				<md-placeholder>
50
-          			<span i18n>End date</span>
51
-        		</md-placeholder>
52
-				<md-hint align="end">YYYY-MM-DD</md-hint>
53
-			</md-input-container>
31
+			<div layout="column" layout-fill flex>
32
+				<md-input-container>
33
+					<input mdInput type="number"  [(ngModel)]="data.num_licenses" name="num_licenses" required />
34
+					<md-placeholder>
35
+						<span i18n="field.num_licenses"></span>
36
+					</md-placeholder>
37
+				</md-input-container>
38
+				<error-checker [fieldName]="getFieldName('num_licenses')" [formField]="packForm.controls.num_licenses"></error-checker>
39
+			</div>
5440 		</div>
5541 		<div layout="row" layout-fill layout-padding>
56
-			<md-select flex placeholder="Organization" [(ngModel)]="data.organization_id" name="organization_id">
57
-				<md-option *ngFor="let org of organizations" [value]="org.id">
58
-					{{org.label}}
59
-				</md-option>
60
-			</md-select>
61
-			<md-select flex placeholder="License type" [(ngModel)]="data.license_type_id" name="license_type_id">
62
-				<md-option *ngFor="let lt of licensetypes" [value]="lt.id">
63
-					{{lt.label}}
64
-				</md-option>
65
-			</md-select>
42
+			<div layout="column" layout-fill flex>
43
+				<md-input-container flex>
44
+					<input mdInput type="date" [(ngModel)]="data.init_valid_date" name="init_valid_date" required />
45
+					<md-placeholder>
46
+						<span i18n="field.end_valid_date"></span>
47
+					</md-placeholder>
48
+				</md-input-container>
49
+				<error-checker [fieldName]="getFieldName('init_valid_date')" [formField]="packForm.controls.init_valid_date"></error-checker>
50
+			</div>
51
+			<div layout="column" layout-fill flex>
52
+				<md-input-container flex>
53
+					<input mdInput type="date" [(ngModel)]="data.end_valid_date" name="end_valid_date" required />
54
+					<md-placeholder>
55
+						<span i18n="field.end_valid_date"></span>
56
+					</md-placeholder>
57
+				</md-input-container>
58
+				<error-checker [fieldName]="getFieldName('end_valid_date')" [formField]="packForm.controls.end_valid_date"></error-checker>
59
+			</div>
60
+		</div>
61
+		<div layout="row" layout-fill layout-padding *ngIf="isNew">
62
+			<div layout="column" layout-fill flex>
63
+				<md-select [placeholder]="getFieldName('organization_id')" flex [(ngModel)]="data.organization_id" name="organization_id" (change)="changeOrg($event)">
64
+					<md-option *ngFor="let org of organizations" [value]="org.id">
65
+						{{org.label}}
66
+					</md-option>
67
+				</md-select>
68
+				<error-checker [fieldName]="getFieldName('organization_id')" [formField]="packForm.controls.organization_id"></error-checker>
69
+			</div>
70
+			<div layout="column" layout-fill flex>
71
+				<md-select flex [placeholder]="getFieldName('license_type_id')" [(ngModel)]="data.license_type_id" name="license_type_id" (change)="changeLicType($event)">
72
+					<md-option *ngFor="let lt of licensetypes" [value]="lt.id">
73
+						{{lt.label}}
74
+					</md-option>
75
+				</md-select>
76
+				<error-checker [fieldName]="getFieldName('license_type_id')" [formField]="packForm.controls.license_type_id"></error-checker>
77
+			</div>
78
+		</div>
79
+		<div layout="row" layout-fill layout-padding *ngIf="!isNew">
80
+			<div layout="column" layout-fill flex>
81
+				<div layout="column" class="mat-input-container" flex>
82
+					<label class="mat-input-placeholder mat-float">
83
+						<span class="placeholder" i18n="field.organization_id"></span>
84
+					</label>
85
+					<div class="label-value mat-input-element">{{data.organization_name}}</div>
86
+				</div>
87
+			</div>
88
+			<div layout="column" layout-fill flex>
89
+				<div layout="column" class="mat-input-container" flex>
90
+					<label class="mat-input-placeholder mat-float">
91
+						<span class="placeholder" i18n="field.license_type_id"></span>
92
+					</label>
93
+					<div class="label-value mat-input-element">{{data.licensetype_code}}</div>
94
+				</div>
95
+			</div>
96
+		</div>
97
+		<div layout="row" layout-fill layout-padding >
98
+			<div layout="column" layout-fill flex>
99
+				<md-input-container flex>
100
+					<input mdInput type="number"  [(ngModel)]="data.preactivation_valid_period" name="preactivation_valid_period" required />
101
+					<md-placeholder>
102
+						<span i18n="field.preactivation_valid_period"></span>
103
+					</md-placeholder>
104
+					<md-hint align="end">days</md-hint>
105
+				</md-input-container>
106
+				<error-checker [fieldName]="getFieldName('preactivation_valid_period')" [formField]="packForm.controls.preactivation_valid_period"></error-checker>
107
+			</div>
108
+			<div layout="column" layout-fill flex>
109
+				<md-input-container flex>
110
+					<input mdInput type="number"[(ngModel)]="data.renew_valid_period" name="renew_valid_period" required />
111
+					<md-placeholder>
112
+						<span i18n="field.renew_valid_period"></span>
113
+					</md-placeholder>
114
+					<md-hint align="end">days</md-hint>
115
+				</md-input-container>
116
+				<error-checker [fieldName]="getFieldName('renew_valid_period')" [formField]="packForm.controls.renew_valid_period"></error-checker>
117
+			</div>
118
+		</div>
119
+		<div layout="row" layout-fill layout-padding>
120
+			<div layout="column" layout-fill flex>
121
+				<md-input-container flex>
122
+					<textarea mdInput type="text" type="text" [(ngModel)]="data.comments" name="comments" maxlength="1024" ></textarea>
123
+					<md-placeholder>
124
+						<span i18n="field.comments"></span>
125
+					</md-placeholder>
126
+					<md-hint align="end">(max 1024)</md-hint>
127
+				</md-input-container>
128
+			</div>
129
+		</div>
130
+		<div layout="row" layout-fill layout-padding *ngIf="!isNew">
131
+			<div layout="column" layout-fill flex>
132
+				<div layout="column" class="mat-input-container" flex>
133
+					<label class="mat-input-placeholder mat-float">
134
+						<span class="placeholder" i18n="field.created_by_name"></span>
135
+					</label>
136
+					<div class="label-value mat-input-element">{{data.created_by_name}}</div>
137
+				</div>
138
+			</div>
139
+			<div layout="column" layout-fill flex>
140
+				<div layout="column" class="mat-input-container" flex>
141
+					<label class="mat-input-placeholder mat-float">
142
+						<span class="placeholder" i18n="field.creation_timestamp"></span>
143
+					</label>
144
+					<div class="label-value mat-input-element">{{data.creation_timestamp | date: 'medium'}}</div>
145
+				</div>
146
+			</div>
147
+		</div>
148
+		<div layout="column" layout-fill>
149
+			<span class="md-title" i18n>License metadata</span>
150
+			<div layout="row" layout-fill layout-padding *ngFor="let pair of data.metadata">
151
+				<md-input-container flex="40">
152
+					<input mdInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="pair.key" readonly />
153
+					<md-placeholder>
154
+						<span i18n="field.key"></span>
155
+					</md-placeholder>
156
+				</md-input-container>
157
+				<md-input-container flex>
158
+					<input mdInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="pair.value" [readonly]="pair.readonly" [required]="pair.required" />
159
+					<md-placeholder>
160
+						<span i18n="field.value"></span>
161
+					</md-placeholder>
162
+				</md-input-container>
163
+			</div>
66164 		</div>
67165 	</div>
68
-</md-card-content>
166
+</md-dialog-content>
167
+<div flex></div>
69168 <md-divider></md-divider>
70
-<md-card-actions>
71
-	<button [disabled]="!packForm.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
72
-	<button md-button md-dialog-close>Cancel</button>
73
-</md-card-actions>
74
-</md-card>
169
+<md-dialog-actions layout="row" layout-align="end center">
170
+		<button [disabled]="!packForm.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
171
+		<button md-button md-dialog-close>Cancel</button>
172
+</md-dialog-actions>
173
+</div>
75174 </form>