From fc6d3cd9b9808b1e171b0f4937320d2167cb12d9 Mon Sep 17 00:00:00 2001
From: kunw <kunw@vmware.com>
Date: Wed, 26 Apr 2017 18:34:18 +0800
Subject: [PATCH] Update per comments.

---
 .../src/app/log/audit-log.component.html      | 12 +++++-----
 src/ui_ng/src/app/log/audit-log.component.ts  | 23 +++++++++++++++----
 .../create-project.component.html             |  2 +-
 .../replication/replication.component.html    | 12 +++++-----
 .../app/replication/replication.component.ts  | 20 ++++++++++++----
 5 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/src/ui_ng/src/app/log/audit-log.component.html b/src/ui_ng/src/app/log/audit-log.component.html
index 69791755f..2d026c4d0 100644
--- a/src/ui_ng/src/app/log/audit-log.component.html
+++ b/src/ui_ng/src/app/log/audit-log.component.html
@@ -23,16 +23,16 @@
       </clr-dropdown>
       <div class="flex-xs-middle">
           <clr-icon shape="date"></clr-icon>
-          <label for="fromDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="fromTime.errors && fromTime.errors.dateValidator && (fromTime.dirty || fromTime.touched)" [class.valid]="fromTime.valid" class="tooltip tooltip-validation invalid tooltip-sm">
-            <input id="fromDateInput" type="date" #fromTime="ngModel" name="from" [(ngModel)]="queryParam.fromTime" dateValidator placeholder="dd/mm/yyyy" (change)="doSearchByStartTime(!(fromTime.errors && fromTime.errors.dateValidator), fromTime.value)">
-            <span *ngIf="fromTime.errors && fromTime.errors.dateValidator && (fromTime.dirty || fromTime.touched)" class="tooltip-content">
+          <label for="fromDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="fromTimeInvalid" class="tooltip tooltip-validation invalid tooltip-sm">
+            <input id="fromDateInput" type="date" #fromTime="ngModel" name="from" [(ngModel)]="queryParam.fromTime" dateValidator placeholder="dd/mm/yyyy" (change)="doSearchByStartTime(fromTime.value)">
+            <span *ngIf="fromTimeInvalid" class="tooltip-content">
                {{'AUDIT_LOG.INVALID_DATE' | translate }}
             </span>
           </label>
           <clr-icon shape="date"></clr-icon>
-          <label for="toDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="toTime.errors && toTime.errors.dateValidator && (toTime.dirty || toTime.touched)" [class.valid]="toTime.valid" class="tooltip tooltip-validation invalid tooltip-sm">
-            <input id="toDateInput" type="date" #toTime="ngModel" name="to" [(ngModel)]="queryParam.toTime" dateValidator placeholder="dd/mm/yyyy" (change)="doSearchByEndTime(!(toTime.errors && toTime.errors.dateValidator),toTime.value)">
-            <span *ngIf="toTime.errors && toTime.errors.dateValidator && (toTime.dirty || toTime.touched)" class="tooltip-content">
+          <label for="toDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="toTimeInvalid" class="tooltip tooltip-validation invalid tooltip-sm">
+            <input id="toDateInput" type="date" #toTime="ngModel" name="to" [(ngModel)]="queryParam.toTime" dateValidator placeholder="dd/mm/yyyy" (change)="doSearchByEndTime(toTime.value)">
+            <span *ngIf="toTimeInvalid" class="tooltip-content">
                {{'AUDIT_LOG.INVALID_DATE' | translate }}
             </span>
           </label>
diff --git a/src/ui_ng/src/app/log/audit-log.component.ts b/src/ui_ng/src/app/log/audit-log.component.ts
index aa5e84831..6444b7a26 100644
--- a/src/ui_ng/src/app/log/audit-log.component.ts
+++ b/src/ui_ng/src/app/log/audit-log.component.ts
@@ -11,7 +11,8 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgModel } from '@angular/forms';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 
 import { AuditLog } from './audit-log';
@@ -70,6 +71,17 @@ export class AuditLogComponent implements OnInit {
   totalRecordCount: number;
   totalPage: number;
   
+  @ViewChild('fromTime') fromTimeInput: NgModel;
+  @ViewChild('toTime') toTimeInput: NgModel;
+
+  get fromTimeInvalid(): boolean {
+    return this.fromTimeInput.errors && this.fromTimeInput.errors.dateValidator && (this.fromTimeInput.dirty || this.fromTimeInput.touched)
+  }
+
+  get toTimeInvalid(): boolean {
+    return this.toTimeInput.errors && this.toTimeInput.errors.dateValidator && (this.toTimeInput.dirty || this.toTimeInput.touched);
+  }
+
   constructor(private route: ActivatedRoute, private router: Router, private auditLogService: AuditLogService, private messageHandlerService: MessageHandlerService) {
     //Get current user from registered resolver.
     this.route.data.subscribe(data=>this.currentUser = <SessionUser>data['auditLogResolver']);    
@@ -79,6 +91,7 @@ export class AuditLogComponent implements OnInit {
     this.projectId = +this.route.snapshot.parent.params['id'];
     this.queryParam.project_id = this.projectId;
     this.queryParam.page_size = this.pageSize;
+    
   }
 
   retrieve(state?: State): void {
@@ -113,18 +126,18 @@ export class AuditLogComponent implements OnInit {
     return strDate;
   }
 
-  doSearchByStartTime(valid: boolean, strDate: string): void {
+  doSearchByStartTime(strDate: string): void {
     this.queryParam.begin_timestamp = 0;
-    if(valid && strDate){
+    if(this.fromTimeInput.valid && strDate){
       strDate = this.convertDate(strDate);
       this.queryParam.begin_timestamp = new Date(strDate).getTime() / 1000;
     }
     this.retrieve();
   }
 
-  doSearchByEndTime(valid: boolean, strDate: string): void {
+  doSearchByEndTime(strDate: string): void {
     this.queryParam.end_timestamp = 0;
-    if(valid && strDate) {
+    if(this.toTimeInput.valid && strDate) {
       strDate = this.convertDate(strDate);
       let oneDayOffset = 3600 * 24;
       this.queryParam.end_timestamp = new Date(strDate).getTime() / 1000 + oneDayOffset;
diff --git a/src/ui_ng/src/app/project/create-project/create-project.component.html b/src/ui_ng/src/app/project/create-project/create-project.component.html
index 2fa899a64..5ccdd2b0d 100644
--- a/src/ui_ng/src/app/project/create-project/create-project.component.html
+++ b/src/ui_ng/src/app/project/create-project/create-project.component.html
@@ -6,7 +6,7 @@
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
           <label for="create_project_name" class="col-md-3 form-group-label-override">{{'PROJECT.NAME' | translate}}</label>
-          <label for="create_project_name" aria-haspopup="true" role="tooltip" [class.invalid]="projectName.invalid && (projectName.dirty || projectName.touched)" [class.valid]="projectName.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
+          <label for="create_project_name" aria-haspopup="true" role="tooltip" [class.invalid]="projectName.invalid && (projectName.dirty || projectName.touched)" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
             <input type="text" id="create_project_name"  [(ngModel)]="project.name" name="name" size="38" required minlength="2" #projectName="ngModel" targetExists="PROJECT_NAME">
             <span class="tooltip-content" *ngIf="projectName.errors && projectName.errors.required && (projectName.dirty || projectName.touched)">
               {{'PROJECT.NAME_IS_REQUIRED' | translate}}
diff --git a/src/ui_ng/src/app/replication/replication.component.html b/src/ui_ng/src/app/replication/replication.component.html
index b4bd9ff10..2f28a0c00 100644
--- a/src/ui_ng/src/app/replication/replication.component.html
+++ b/src/ui_ng/src/app/replication/replication.component.html
@@ -40,16 +40,16 @@
         </div>
         <div class="flex-items-xs-middle">
           <clr-icon shape="date"></clr-icon>
-          <label for="fromDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="fromTime.errors && fromTime.errors.dateValidator && (fromTime.dirty || fromTime.touched)" [class.valid]="fromTime.valid" class="tooltip tooltip-validation invalid tooltip-sm">
-            <input id="fromDateInput" type="date" #fromTime="ngModel" name="from" [(ngModel)]="search.startTime" dateValidator placeholder="dd/mm/yyyy" (change)="doJobSearchByStartTime(!(fromTime.errors && fromTime.errors.dateValidator), fromTime.value)">
-            <span *ngIf="fromTime.errors && fromTime.errors.dateValidator && (fromTime.dirty || fromTime.touched)" class="tooltip-content">
+          <label for="fromDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="fromTimeInvalid" class="tooltip tooltip-validation invalid tooltip-sm">
+            <input id="fromDateInput" type="date" #fromTime="ngModel" name="from" [(ngModel)]="search.startTime" dateValidator placeholder="dd/mm/yyyy" (change)="doJobSearchByStartTime(fromTime.value)">
+            <span *ngIf="fromTimeInvalid" class="tooltip-content">
                {{'AUDIT_LOG.INVALID_DATE' | translate }}
             </span>
           </label>
           <clr-icon shape="date"></clr-icon>
-          <label for="toDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="toTime.errors && toTime.errors.dateValidator && (toTime.dirty || toTime.touched)" [class.valid]="toTime.valid" class="tooltip tooltip-validation invalid tooltip-sm">
-            <input id="toDateInput" type="date" #toTime="ngModel" name="to" [(ngModel)]="search.endTime" dateValidator placeholder="dd/mm/yyyy" (change)="doJobSearchByEndTime(!(toTime.errors && toTime.errors.dateValidator),toTime.value)">
-            <span *ngIf="toTime.errors && toTime.errors.dateValidator && (toTime.dirty || toTime.touched)" class="tooltip-content">
+          <label for="toDateInput" aria-haspopup="true" role="tooltip" [class.invalid]="toTimeInvalid" class="tooltip tooltip-validation invalid tooltip-sm">
+            <input id="toDateInput" type="date" #toTime="ngModel" name="to" [(ngModel)]="search.endTime" dateValidator placeholder="dd/mm/yyyy" (change)="doJobSearchByEndTime(toTime.value)">
+            <span *ngIf="toTimeInvalid" class="tooltip-content">
                {{'AUDIT_LOG.INVALID_DATE' | translate }}
             </span>
           </label>
diff --git a/src/ui_ng/src/app/replication/replication.component.ts b/src/ui_ng/src/app/replication/replication.component.ts
index 602134885..9bbeffaa3 100644
--- a/src/ui_ng/src/app/replication/replication.component.ts
+++ b/src/ui_ng/src/app/replication/replication.component.ts
@@ -13,6 +13,7 @@
 // limitations under the License.
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { NgModel } from '@angular/forms';
 
 import { CreateEditPolicyComponent } from '../shared/create-edit-policy/create-edit-policy.component';
 
@@ -92,6 +93,17 @@ export class ReplicationComponent implements OnInit {
    @ViewChild(CreateEditPolicyComponent) 
    createEditPolicyComponent: CreateEditPolicyComponent;
 
+   @ViewChild('fromTime') fromTimeInput: NgModel;
+   @ViewChild('toTime') toTimeInput: NgModel;
+
+   get fromTimeInvalid(): boolean {
+     return this.fromTimeInput.errors && this.fromTimeInput.errors.dateValidator && (this.fromTimeInput.dirty || this.fromTimeInput.touched);
+   }
+
+   get toTimeInvalid(): boolean {
+     return this.toTimeInput.errors && this.toTimeInput.errors.dateValidator && (this.toTimeInput.dirty || this.toTimeInput.touched);
+   }
+
    constructor(
      private messageHandlerService: MessageHandlerService,
      private replicationService: ReplicationService,
@@ -241,18 +253,18 @@ export class ReplicationComponent implements OnInit {
       return strDate;
    }
 
-   doJobSearchByStartTime(valid: boolean, strDate: string) {
+   doJobSearchByStartTime(strDate: string) {
      this.search.startTimestamp = '';
-     if(valid && strDate) {
+     if(this.fromTimeInput.valid && strDate) {
        strDate = this.convertDate(strDate);
        this.search.startTimestamp = new Date(strDate).getTime() / 1000 + '';
      }
      this.fetchPolicyJobs();
    }
 
-   doJobSearchByEndTime(valid: boolean, strDate: string) {
+   doJobSearchByEndTime(strDate: string) {
      this.search.endTimestamp = '';
-     if(valid && strDate) {
+     if(this.toTimeInput.valid && strDate) {
        strDate = this.convertDate(strDate);
        let oneDayOffset = 3600 * 24;
        this.search.endTimestamp = (new Date(strDate).getTime() / 1000 + oneDayOffset) + '';