#3527 fix - Customizing packs listing

rsanchez

2017-03-10 6078e6018ca05bcc0203241dc44071a59cf5e78c

#3527 fix - Customizing packs listing

 securis/src/main/webapp/assets/securis.css
..
..
@@ -23,4 +23,9 @@
23
23
 
24
24
 td-layout-footer {
25
25
 	font-size: 0.8em;
26
+}
27
+
28
+.td-data-table-row > .td-data-table-cell:first-child,
29
+.td-data-table-row > .td-data-table-column:first-child {
30
+	max-width: 30px !important;
26
31
 }
 securis/src/main/webapp/src/app/forms/pack.form.1.html
..
..
@@ -1,5 +1,5 @@
1
1
 <h3 md-dialog-title>{{form_title}}</h3>
2
-<form #packForm="ngForm" class="inset" (keyup.enter)="save()">
2
+<form #packForm="ngForm" (keyup.enter)="save()">
3
3
 <md-dialog-content>
4
4
 	<div layout="column" layout-align="start center">
5
5
 		<div layout="row" layout-align="start center" layout-margin>
 securis/src/main/webapp/src/app/forms/pack.form.component.ts
..
..
@@ -30,22 +30,26 @@
30
30
       this.http.get('organization')
31
31
         .map(response => response.json().map((org : any) => <IComboOption>{id: org.id, label: `(${org.code}) ${org.name}`}))
32
32
         .subscribe(
33
-          data => this.organizations = data,
33
+          data => this.organizations = (<IComboOption[]>data).sort((e1, e2) => e1.label.localeCompare(e2.label)),
34
34
           err => console.error('Error loading orgs')
35
35
         );
36
36
       this.http.get('licensetype')
37
37
         .map(response => response.json().map((lt : any) => <IComboOption>{id: lt.id, label: `(${lt.code}) ${lt.name}`}))
38
38
         .subscribe(
39
-          data => this.licensetypes = data,
40
-          err => console.error('Error loading orgs')
39
+          data => this.licensetypes = (<IComboOption[]>data).sort((e1, e2) => e1.label.localeCompare(e2.label)),
40
+          err => console.error('Error loading license types')
41
41
         );
42
42
   }
43
43
 
44
-
44
+  log(obj: any) {
45
+    console.log(obj)
46
+  }
47
+  
45
48
   ngOnInit(): void {
46
49
     this.loadCombos();
47
50
     this.data = {};
48
51
     this.form_title = this.$L.get('Pack data');
52
+    this.form_subtitle = this.$L.get('Create a new licenses pack');
49
53
   }
50
54
 
51
55
 
 securis/src/main/webapp/src/app/forms/pack.form.html
..
..
@@ -8,49 +8,58 @@
8
8
 		</md-card-subtitle>
9
9
 <md-divider></md-divider>
10
10
 		<md-card-content>
11
-	<div layout="column" layout-align="start center">
12
-		<div layout="row" layout-align="start center" layout-margin>
13
-			<md-input-container flex>
11
+	<div layout="column" layout-align="start center" layout-fill>
12
+		<div layout="row" layout-fill layout-padding>
13
+			<div layout="column" layout-fill  flex="50">
14
+			<md-input-container>
14
15
 				<input mdInput maxLength="50" type="text" [(ngModel)]="data.code" name="code" required />
15
16
 				<md-placeholder>
16
17
           			<span i18n>Code</span>
17
18
         		</md-placeholder>
18
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>
24
+			</div>
25
+			</div>
19
26
 	<!-- TODO: <div class="alert inline-alert alert-warning" ng-show="packForm.code.$invalid">
20
27
 		<span class="glyphicon glyphicon-warning-sign"></span> 
21
28
 		<span ng-show="packForm.code.$error.maxlength" ng-bind="maxLengthErrorMsg('Code', maxlength.code)" 
22
29
 		class="ng-binding ng-hide">Code length is too long (max: 50).</span> 
23
30
 		<span ng-show="packForm.code.$error.required" ng-bind="mandatoryFieldErrorMsg('Code')" class="ng-binding">'Code' is required.</span>
24
31
 	</div> -->
25
-			<md-input-container flex>
32
+			<md-input-container flex="50">
26
33
 				<input mdInput type="number" type="text" [(ngModel)]="data.num_licenses" name="num_licenses" required />
27
34
 				<md-placeholder>
28
35
           			<span i18n>Num. licenses</span>
29
36
         		</md-placeholder>
30
37
 			</md-input-container>
31
38
 		</div>
32
-		<div layout="row" layout-align="start center" layout-margin>
39
+		<div layout="row" layout-align="start center" layout-fill layout-padding>
33
40
 			<md-input-container flex>
34
41
 				<input mdInput type="date" type="text" [(ngModel)]="data.init_valid_date" name="init_valid_date" required />
35
42
 				<md-placeholder>
36
43
           			<span i18n>Initial date</span>
37
44
         		</md-placeholder>
45
+				<md-hint align="end">YYYY-MM-DD</md-hint>
38
46
 			</md-input-container>
39
47
 			<md-input-container flex>
40
48
 				<input mdInput type="date" type="text" [(ngModel)]="data.end_valid_date" name="end_valid_date" required />
41
49
 				<md-placeholder>
42
50
           			<span i18n>End date</span>
43
51
         		</md-placeholder>
52
+				<md-hint align="end">YYYY-MM-DD</md-hint>
44
53
 			</md-input-container>
45
54
 		</div>
46
-		<div layout="row" layout-align="start center" layout-margin>
55
+		<div layout="row" layout-fill layout-padding>
47
56
 			<md-select flex placeholder="Organization" [(ngModel)]="data.organization_id" name="organization_id">
48
57
 				<md-option *ngFor="let org of organizations" [value]="org.id">
49
58
 					{{org.label}}
50
59
 				</md-option>
51
60
 			</md-select>
52
61
 			<md-select flex placeholder="License type" [(ngModel)]="data.license_type_id" name="license_type_id">
53
-				<md-option *ngFor="let lt of lictypes" [value]="lt.id">
62
+				<md-option *ngFor="let lt of licensetypes" [value]="lt.id">
54
63
 					{{lt.label}}
55
64
 				</md-option>
56
65
 			</md-select>
..
..
@@ -60,7 +69,7 @@
60
69
 <md-divider></md-divider>
61
70
 <md-card-actions>
62
71
 	<button [disabled]="!packForm.form.valid" md-raised-button color="primary" (click)="save()">Save</button>
63
-	<button md-button (click)="close()">Cancel</button>
72
+	<button md-button md-dialog-close>Cancel</button>
64
73
 </md-card-actions>
65
74
 </md-card>
66
75
 </form>	
 securis/src/main/webapp/src/app/login.form.component.ts
..
..
@@ -25,7 +25,9 @@
25
25
 
26
26
   public login() {
27
27
     this.userService.login(this.data.username, this.data.password).subscribe(
28
-      token => this.router.navigateByUrl("packs"),
28
+      token => {
29
+        this.router.navigateByUrl("packs");
30
+      },
29
31
       errMsg => this.toaster.error(errMsg, 'Login error'));
30
32
   }
31
33
 
 securis/src/main/webapp/src/app/pack.list.component.html
..
..
@@ -1,26 +1,38 @@
1
1
 <md-toolbar role="toolbar" class="mat-secondary">
2
-    <span class="push-left-sm">
2
+  <span class="push-left-sm">
3
3
       <span class="md-title" i18n>License Packs</span>
4
-    </span>
5
-    <span class="push-left-sm" *ngIf="filteredItems < data.length">
4
+  </span>
5
+  <span class="push-left-sm" *ngIf="filteredItems < data.length">
6
6
       <span class="md-body-1">{{filteredItems}} of {{data.length}} packs filtered</span>
7
-    </span>
8
-    <td-search-box #searchBox class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex>
9
-    </td-search-box>
10
-    <button md-mini-fab color="accent" (click)="createPack()">
7
+  </span>
8
+  <td-search-box #searchBox class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex>
9
+  </td-search-box>
10
+  <button md-mini-fab color="accent" (click)="createPack()">
11
11
       <md-icon>add</md-icon>
12
12
     </button>
13
13
 </md-toolbar>
14
14
 <md-divider></md-divider>
15
-<td-data-table
16
-  [data]="filteredData"
17
-  [columns]="columns"
18
-  [sortable]="true"
19
-  [sortBy]="sortBy"
20
-  [sortOrder]="sortOrder"
21
-  (sortChange)="sort($event)">
15
+<td-data-table [data]="filteredData" [columns]="columns">
16
+  
17
+  <template tdDataTableTemplate="used_licenses" let-row="row">
18
+    <div layout="row">
19
+        <td-notification-count color="secondary" [notifications]="row['num_licenses']">
20
+        </td-notification-count>
21
+        <td-notification-count color="green" [notifications]="row['num_available']">
22
+        </td-notification-count>
23
+    </div>
24
+  </template>
25
+  <template tdDataTableTemplate="lics" let-row="row">
26
+      <button md-icon-button color="primary"><md-icon>arrow_right</md-icon></button>
27
+  </template>
28
+  <template tdDataTableTemplate="menu" let-row="row">
29
+    <div layout="row">
30
+      <button md-icon-button color="primary"><md-icon>arrow_right</md-icon></button>
31
+      <button md-icon-button><md-icon>edit</md-icon></button>
32
+      <button md-icon-button><md-icon>more_vert</md-icon></button>
33
+    </div>
34
+  </template>
22
35
 </td-data-table>
23
36
 <td-paging-bar #pagingBar [pageSizes]="[10, 20, 40]" [total]="filteredTotal" (change)="page($event)">
24
-  <span td-paging-bar-label hide-xs>Rows per page:</span>
25
-  {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
26
-</td-paging-bar>
37
+  <span td-paging-bar-label hide-xs>Rows per page:</span> {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
38
+</td-paging-bar>
 securis/src/main/webapp/src/app/pack.list.component.ts
..
..
@@ -42,12 +42,13 @@
42
42
 export class PackListComponent implements AfterViewInit {
43
43
   data: any[] = [];
44
44
   columns: ITdDataTableColumn[] = [
45
+    { name: 'lics', label: '' },
45
46
     { name: 'code', label: 'Code', tooltip: 'License pack code' },
46
47
     { name: 'application_name', label: 'App name' },
47
48
     { name: 'licensetype_code', label: 'License type' },
48
49
     { name: 'organization_name', label: 'Organization' },
49
-    { name: 'num_licenses', label: 'Lic', numeric: true, tooltip: 'Initial pack licenses' },
50
-    { name: 'num_available', label: 'Ava', numeric: true, tooltip: 'Available licenses' },
50
+    { name: 'used_licenses', label: 'Lics', tooltip: 'Initial/Available pack licenses' },
51
+    { name: 'menu', label: '' }
51
52
   ];
52
53
 
53
54
   filteredData: any[] = this.data;
..
..
@@ -80,12 +81,31 @@
80
81
   }
81
82
 
82
83
   createPack() : void {
83
-    this.dialog.open(PackFormComponent, {
84
+    var ref = this.dialog.open(PackFormComponent, {
84
85
       height: '50%', // can be px or %
85
86
       width: '40%', // can be px or %
86
87
     });
88
+    ref.componentInstance.isNew = true;
89
+    ref.afterClosed().subscribe(result => {
90
+      console.log(result);
91
+      this.filter();
92
+    });
87
93
   }
88
94
 
95
+  editPack(pack: any) : void {
96
+    var ref = this.dialog.open(PackFormComponent, {
97
+      height: '50%', // can be px or %
98
+      width: '40%', // can be px or %
99
+    });
100
+    ref.componentInstance.isNew = false;
101
+    ref.componentInstance.data = pack;
102
+    ref.afterClosed().subscribe(result => {
103
+      console.log(result);
104
+      this.filter();
105
+    });
106
+  }
107
+
108
+
89
109
   sort(sortEvent: ITdDataTableSortChangeEvent): void {
90
110
     this.sortBy = sortEvent.name;
91
111
     this.sortOrder = sortEvent.order;
 securis/src/main/webapp/src/app/user.service.ts
..
..
@@ -52,7 +52,6 @@
52
52
   }
53
53
 
54
54
   existsToken() : Boolean {
55
-    console.log(this.store.get("token"));
56
55
     return this.store.get("token") !== null;
57
56
   }
58
57