From 6078e6018ca05bcc0203241dc44071a59cf5e78c Mon Sep 17 00:00:00 2001
From: rsanchez <rsanchez@curisit.net>
Date: Fri, 10 Mar 2017 16:33:31 +0000
Subject: [PATCH] #3527 fix - Customizing packs listing

---
 securis/src/main/webapp/src/app/login.form.component.ts      |    4 +
 securis/src/main/webapp/src/app/pack.list.component.html     |   46 +++++++++-----
 securis/src/main/webapp/src/app/forms/pack.form.1.html       |    2 
 securis/src/main/webapp/src/app/forms/pack.form.component.ts |   12 ++-
 securis/src/main/webapp/src/app/user.service.ts              |    1 
 securis/src/main/webapp/src/app/forms/pack.form.html         |   25 +++++--
 securis/src/main/webapp/src/app/pack.list.component.ts       |   26 +++++++-
 securis/src/main/webapp/assets/securis.css                   |    5 +
 8 files changed, 86 insertions(+), 35 deletions(-)

diff --git a/securis/src/main/webapp/assets/securis.css b/securis/src/main/webapp/assets/securis.css
index 3f5485c..993196c 100644
--- a/securis/src/main/webapp/assets/securis.css
+++ b/securis/src/main/webapp/assets/securis.css
@@ -23,4 +23,9 @@
 
 td-layout-footer {
 	font-size: 0.8em;
+}
+
+.td-data-table-row > .td-data-table-cell:first-child,
+.td-data-table-row > .td-data-table-column:first-child {
+	max-width: 30px !important;
 }
\ 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
index ea6718a..5c6b688 100644
--- a/securis/src/main/webapp/src/app/forms/pack.form.1.html
+++ b/securis/src/main/webapp/src/app/forms/pack.form.1.html
@@ -1,5 +1,5 @@
 <h3 md-dialog-title>{{form_title}}</h3>
-<form #packForm="ngForm" class="inset" (keyup.enter)="save()">
+<form #packForm="ngForm" (keyup.enter)="save()">
 <md-dialog-content>
 	<div layout="column" layout-align="start center">
 		<div layout="row" layout-align="start center" layout-margin>
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 90c51bd..852dba3 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
@@ -30,22 +30,26 @@
       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,
+          data => this.organizations = (<IComboOption[]>data).sort((e1, e2) => e1.label.localeCompare(e2.label)),
           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')
+          data => this.licensetypes = (<IComboOption[]>data).sort((e1, e2) => e1.label.localeCompare(e2.label)),
+          err => console.error('Error loading license types')
         );
   }
 
-
+  log(obj: any) {
+    console.log(obj)
+  }
+  
   ngOnInit(): void {
     this.loadCombos();
     this.data = {};
     this.form_title = this.$L.get('Pack data');
+    this.form_subtitle = this.$L.get('Create a new licenses pack');
   }
 
 
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 9b0d17c..df65d4d 100644
--- a/securis/src/main/webapp/src/app/forms/pack.form.html
+++ b/securis/src/main/webapp/src/app/forms/pack.form.html
@@ -8,49 +8,58 @@
 		</md-card-subtitle>
 <md-divider></md-divider>
 		<md-card-content>
-	<div layout="column" layout-align="start center">
-		<div layout="row" layout-align="start center" layout-margin>
-			<md-input-container flex>
+	<div layout="column" layout-align="start center" layout-fill>
+		<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>
+			</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>
+			<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-margin>
+		<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>
-		<div layout="row" layout-align="start center" layout-margin>
+		<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 lictypes" [value]="lt.id">
+				<md-option *ngFor="let lt of licensetypes" [value]="lt.id">
 					{{lt.label}}
 				</md-option>
 			</md-select>
@@ -60,7 +69,7 @@
 <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>
+	<button md-button md-dialog-close>Cancel</button>
 </md-card-actions>
 </md-card>
 </form>	
diff --git a/securis/src/main/webapp/src/app/login.form.component.ts b/securis/src/main/webapp/src/app/login.form.component.ts
index 0994685..972ac97 100644
--- a/securis/src/main/webapp/src/app/login.form.component.ts
+++ b/securis/src/main/webapp/src/app/login.form.component.ts
@@ -25,7 +25,9 @@
 
   public login() {
     this.userService.login(this.data.username, this.data.password).subscribe(
-      token => this.router.navigateByUrl("packs"),
+      token => {
+        this.router.navigateByUrl("packs");
+      },
       errMsg => this.toaster.error(errMsg, 'Login error'));
   }
 
diff --git a/securis/src/main/webapp/src/app/pack.list.component.html b/securis/src/main/webapp/src/app/pack.list.component.html
index 7637a3f..73a3bfe 100644
--- a/securis/src/main/webapp/src/app/pack.list.component.html
+++ b/securis/src/main/webapp/src/app/pack.list.component.html
@@ -1,26 +1,38 @@
 <md-toolbar role="toolbar" class="mat-secondary">
-    <span class="push-left-sm">
+  <span class="push-left-sm">
       <span class="md-title" i18n>License Packs</span>
-    </span>
-    <span class="push-left-sm" *ngIf="filteredItems < data.length">
+  </span>
+  <span class="push-left-sm" *ngIf="filteredItems < data.length">
       <span class="md-body-1">{{filteredItems}} of {{data.length}} packs filtered</span>
-    </span>
-    <td-search-box #searchBox class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex>
-    </td-search-box>
-    <button md-mini-fab color="accent" (click)="createPack()">
+  </span>
+  <td-search-box #searchBox class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex>
+  </td-search-box>
+  <button md-mini-fab color="accent" (click)="createPack()">
       <md-icon>add</md-icon>
     </button>
 </md-toolbar>
 <md-divider></md-divider>
-<td-data-table
-  [data]="filteredData"
-  [columns]="columns"
-  [sortable]="true"
-  [sortBy]="sortBy"
-  [sortOrder]="sortOrder"
-  (sortChange)="sort($event)">
+<td-data-table [data]="filteredData" [columns]="columns">
+  
+  <template tdDataTableTemplate="used_licenses" let-row="row">
+    <div layout="row">
+        <td-notification-count color="secondary" [notifications]="row['num_licenses']">
+        </td-notification-count>
+        <td-notification-count color="green" [notifications]="row['num_available']">
+        </td-notification-count>
+    </div>
+  </template>
+  <template tdDataTableTemplate="lics" let-row="row">
+      <button md-icon-button color="primary"><md-icon>arrow_right</md-icon></button>
+  </template>
+  <template tdDataTableTemplate="menu" let-row="row">
+    <div layout="row">
+      <button md-icon-button color="primary"><md-icon>arrow_right</md-icon></button>
+      <button md-icon-button><md-icon>edit</md-icon></button>
+      <button md-icon-button><md-icon>more_vert</md-icon></button>
+    </div>
+  </template>
 </td-data-table>
 <td-paging-bar #pagingBar [pageSizes]="[10, 20, 40]" [total]="filteredTotal" (change)="page($event)">
-  <span td-paging-bar-label hide-xs>Rows per page:</span>
-  {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
-</td-paging-bar>
+  <span td-paging-bar-label hide-xs>Rows per page:</span> {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
+</td-paging-bar>
\ 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 f63e72f..f931ef8 100644
--- a/securis/src/main/webapp/src/app/pack.list.component.ts
+++ b/securis/src/main/webapp/src/app/pack.list.component.ts
@@ -42,12 +42,13 @@
 export class PackListComponent implements AfterViewInit {
   data: any[] = [];
   columns: ITdDataTableColumn[] = [
+    { name: 'lics', label: '' },
     { name: 'code', label: 'Code', tooltip: 'License pack code' },
     { name: 'application_name', label: 'App name' },
     { name: 'licensetype_code', label: 'License type' },
     { name: 'organization_name', label: 'Organization' },
-    { name: 'num_licenses', label: 'Lic', numeric: true, tooltip: 'Initial pack licenses' },
-    { name: 'num_available', label: 'Ava', numeric: true, tooltip: 'Available licenses' },
+    { name: 'used_licenses', label: 'Lics', tooltip: 'Initial/Available pack licenses' },
+    { name: 'menu', label: '' }
   ];
 
   filteredData: any[] = this.data;
@@ -80,12 +81,31 @@
   }
 
   createPack() : void {
-    this.dialog.open(PackFormComponent, {
+    var ref = this.dialog.open(PackFormComponent, {
       height: '50%', // can be px or %
       width: '40%', // can be px or %
     });
+    ref.componentInstance.isNew = true;
+    ref.afterClosed().subscribe(result => {
+      console.log(result);
+      this.filter();
+    });
   }
 
+  editPack(pack: any) : void {
+    var ref = this.dialog.open(PackFormComponent, {
+      height: '50%', // can be px or %
+      width: '40%', // can be px or %
+    });
+    ref.componentInstance.isNew = false;
+    ref.componentInstance.data = pack;
+    ref.afterClosed().subscribe(result => {
+      console.log(result);
+      this.filter();
+    });
+  }
+
+
   sort(sortEvent: ITdDataTableSortChangeEvent): void {
     this.sortBy = sortEvent.name;
     this.sortOrder = sortEvent.order;
diff --git a/securis/src/main/webapp/src/app/user.service.ts b/securis/src/main/webapp/src/app/user.service.ts
index e65e100..04f5cb7 100644
--- a/securis/src/main/webapp/src/app/user.service.ts
+++ b/securis/src/main/webapp/src/app/user.service.ts
@@ -52,7 +52,6 @@
   }
 
   existsToken() : Boolean {
-    console.log(this.store.get("token"));
     return this.store.get("token") !== null;
   }
 

--
Gitblit v1.3.2