From f22ebeee979fa215b491393a2ae8ef58644cb12e Mon Sep 17 00:00:00 2001
From: "Fuhui Peng (c)" <pengf@vmware.com>
Date: Tue, 28 Nov 2017 20:06:28 +0800
Subject: [PATCH] Modify code about create endpoint #3661

---
 .../create-edit-endpoint.component.html.ts    |   8 +-
 .../create-edit-endpoint.component.ts         | 152 +++++++++---------
 src/ui_ng/lib/src/service/interface.ts        |   1 +
 src/ui_ng/package.json                        |   2 +-
 4 files changed, 79 insertions(+), 84 deletions(-)

diff --git a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts
index 91d924199ff6..6912e245806b 100644
--- a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts
+++ b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts
@@ -15,7 +15,7 @@ export const CREATE_EDIT_ENDPOINT_TEMPLATE: string = `
         <div class="form-group">
           <label for="destination_name" class="col-md-4 form-group-label-override required">{{ 'DESTINATION.NAME' | translate }}</label>
           <label class="col-md-8" for="destination_name" aria-haspopup="true" role="tooltip" [class.invalid]="targetName.errors && (targetName.dirty || targetName.touched)" [class.valid]="targetName.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
-            <input type="text" id="destination_name" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.name" name="targetName" size="20" #targetName="ngModel" required  (keyup)="changedTargetName($event)"> 
+            <input type="text" id="destination_name" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.name" name="targetName" size="20" #targetName="ngModel" required> 
             <span class="tooltip-content" *ngIf="targetName.errors && targetName.errors.required && (targetName.dirty || targetName.touched)">
               {{ 'DESTINATION.NAME_IS_REQUIRED' | translate }}
             </span>
@@ -24,7 +24,7 @@ export const CREATE_EDIT_ENDPOINT_TEMPLATE: string = `
         <div class="form-group">
           <label for="destination_url" class="col-md-4 form-group-label-override required">{{ 'DESTINATION.URL' | translate }}</label>
           <label class="col-md-8" for="destination_url" aria-haspopup="true" role="tooltip" [class.invalid]="targetEndpoint.errors && (targetEndpoint.dirty || targetEndpoint.touched)" [class.valid]="targetEndpoint.valid" class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left">
-            <input type="text" id="destination_url" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.endpoint" size="20" name="endpointUrl" #targetEndpoint="ngModel" required (keyup)="clearPassword($event)" placeholder="http(s)://192.168.1.1">
+            <input type="text" id="destination_url" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.endpoint" size="20" name="endpointUrl" #targetEndpoint="ngModel" required placeholder="http(s)://192.168.1.1">
             <span class="tooltip-content" *ngIf="targetEndpoint.errors && targetEndpoint.errors.required && (targetEndpoint.dirty || targetEndpoint.touched)">
               {{ 'DESTINATION.URL_IS_REQUIRED' | translate }}
             </span>
@@ -32,11 +32,11 @@ export const CREATE_EDIT_ENDPOINT_TEMPLATE: string = `
         </div>
         <div class="form-group">
           <label for="destination_username" class="col-md-4 form-group-label-override">{{ 'DESTINATION.USERNAME' | translate }}</label>
-          <input type="text" class="col-md-8" id="destination_username" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.username" size="20" name="username" #username="ngModel" (keyup)="clearPassword($event)">
+          <input type="text" class="col-md-8" id="destination_username" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.username" size="20" name="username" #username="ngModel">
         </div>
         <div class="form-group">
           <label for="destination_password" class="col-md-4 form-group-label-override">{{ 'DESTINATION.PASSWORD' | translate }}</label>
-          <input type="password" class="col-md-8" id="destination_password" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.password" size="20" name="password" #password="ngModel" (focus)="clearPassword($event)">
+          <input type="password" class="col-md-8" id="destination_password" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.password" size="20" name="password" #password="ngModel">
         </div>
         <div class="form-group">
           <label for="destination_insecure" class="col-md-4 form-group-label-override">{{'CONFIG.VERIFY_REMOTE_CERT' | translate }}</label>
diff --git a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts
index d2233dfcd1a8..ec6ec5860107 100644
--- a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts
+++ b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts
@@ -51,8 +51,6 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
     createEditDestinationOpened: boolean;
     staticBackdrop: boolean = true;
     closable: boolean = false;
-
-    actionType: ActionType;
     editable: boolean;
 
     target: Endpoint = this.initEndpoint();
@@ -62,11 +60,9 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
     @ViewChild('targetForm')
     currentForm: NgForm;
 
-    endpointHasChanged: boolean;
-    targetNameHasChanged: boolean;
-
     testOngoing: boolean;
     onGoing: boolean;
+    endpointId: number | string;
 
     @ViewChild(InlineAlertComponent)
     inlineAlert: InlineAlertComponent;
@@ -84,38 +80,19 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
         private ref: ChangeDetectorRef
     ) { }
 
-    public get hasChanged(): boolean {
-        if (this.actionType === ActionType.ADD_NEW) {
-            //Create new
-            return this.target && (
-                (this.target.endpoint && this.target.endpoint.trim() !== "") ||
-                (this.target.name && this.target.name.trim() !== "") ||
-                (this.target.username && this.target.username.trim() !== "") ||
-                (this.target.password && this.target.password.trim() !== "")) ||
-                this.target.insecure;
-        } else {
-            //Edit
-            return !compareValue(this.target, this.initVal);
-        }
-    }
-
     public get isValid(): boolean {
         return !this.testOngoing &&
             !this.onGoing &&
             this.targetForm &&
             this.targetForm.valid &&
             this.editable &&
-            (this.targetNameHasChanged || this.endpointHasChanged || this.checkboxHasChanged);
+            !compareValue(this.target, this.initVal);
     }
 
     public get inProgress(): boolean {
         return this.onGoing || this.testOngoing;
     }
 
-    public get checkboxHasChanged(): boolean {
-        return (this.target.insecure !== this.initVal.insecure) ? true : false;
-    }
-
     setInsecureValue($event: any) {
         this.target.insecure = !$event;
     }
@@ -147,8 +124,6 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
 
     reset(): void {
         //Reset status variables
-        this.endpointHasChanged = false;
-        this.targetNameHasChanged = false;
         this.testOngoing = false;
         this.onGoing = false;
 
@@ -156,6 +131,7 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
         this.target = this.initEndpoint();
         this.initVal = this.initEndpoint();
         this.formValues = null;
+        this.endpointId = '';
 
         this.inlineAlert.close();
     }
@@ -180,7 +156,7 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
         //reset
         this.reset();
         if (targetId) {
-            this.actionType = ActionType.EDIT;
+            this.endpointId = targetId;
             this.translateService.get('DESTINATION.TITLE_EDIT').subscribe(res => this.modalTitle = res);
             toPromise<Endpoint>(this.endpointService
                 .getEndpoint(targetId))
@@ -198,7 +174,7 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
                 })
                 .catch(error => this.errorHandler.error(error));
         } else {
-            this.actionType = ActionType.ADD_NEW;
+            this.endpointId = '';
             this.translateService.get('DESTINATION.TITLE_ADD').subscribe(res => this.modalTitle = res);
             //Directly open the modal
             this.open();
@@ -207,20 +183,26 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
 
     testConnection() {
         let payload: Endpoint = this.initEndpoint();
-
-        if (this.endpointHasChanged) {
+        if (!this.endpointId) {
             payload.endpoint = this.target.endpoint;
             payload.username = this.target.username;
             payload.password = this.target.password;
             payload.insecure = this.target.insecure;
-        }else if (this.checkboxHasChanged) {
-            payload.insecure = this.target.insecure;
+        }else {
             payload.id = this.target.id;
+            let changes: {[key: string]: any} = this.getChanges();
+            delete payload.endpoint;
             delete payload.username;
             delete payload.password;
             delete payload.name;
-        } else {
-            payload.id = this.target.id;
+            delete payload.insecure;
+            delete payload.type;
+            if (!this.isEmpty(changes)) {
+                let changekeys: {[key: string]: any} = Object.keys(this.getChanges());
+                changekeys.forEach((key: string) => {
+                    payload[key] = changes[key];
+                });
+            }
         }
 
         this.testOngoing = true;
@@ -239,27 +221,11 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
             });
     }
 
-    changedTargetName($event: any) {
-        if (this.editable) {
-            this.targetNameHasChanged = true;
-        }
-    }
-
-    clearPassword($event: any) {
-        if (this.editable) {
-            this.target.password = '';
-            this.endpointHasChanged = true;
-        }
-    }
-
     onSubmit() {
-        switch (this.actionType) {
-            case ActionType.ADD_NEW:
-                this.addEndpoint();
-                break;
-            case ActionType.EDIT:
-                this.updateEndpoint();
-                break;
+        if (this.endpointId) {
+            this.updateEndpoint();
+        } else {
+            this.addEndpoint();
         }
     }
 
@@ -293,29 +259,22 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
         if (this.onGoing) {
             return;//Avoid duplicated submitting
         }
-        if (!(this.targetNameHasChanged || this.endpointHasChanged || this.checkboxHasChanged)) {
-            return;//Avoid invalid submitting
-        }
+
         let payload: Endpoint = this.initEndpoint();
-        if (this.targetNameHasChanged) {
-            payload.name = this.target.name;
-        }else {
-            delete payload.name;
-        }
-        if (this.endpointHasChanged) {
-            payload.endpoint = this.target.endpoint;
-            payload.username = this.target.username;
-            payload.password = this.target.password;
-        }else {
-            delete payload.endpoint;
-            delete payload.username;
-            delete payload.password;
-        }
-        if (this.checkboxHasChanged) {
-            payload.insecure = this.target.insecure;
-        }else {
-            delete payload.insecure;
+        delete payload.endpoint;
+        delete payload.username;
+        delete payload.password;
+        delete payload.name;
+        delete payload.insecure;
+        delete payload.type;
+        let changes: {[key: string]: any} = this.getChanges();
+        let changekeys: {[key: string]: any} = Object.keys(this.getChanges());
+        if (this.isEmpty(changes)) {
+            return;
         }
+        changekeys.forEach((key: string) => {
+            payload[key] = changes[key];
+        });
 
         if (!this.target.id) { return; }
 
@@ -355,9 +314,10 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
     }
 
     onCancel() {
-        if (this.hasChanged) {
+        let changes: {[key: string]: any} = this.getChanges();
+        if (!this.isEmpty(changes)) {
             this.inlineAlert.showInlineConfirmation({ message: 'ALERT.FORM_CHANGE_CONFIRMATION' });
-        } else {
+        }else {
             this.close();
             if (this.targetForm) {
                 this.targetForm.reset();
@@ -397,5 +357,39 @@ export class CreateEditEndpointComponent implements AfterViewChecked, OnDestroy
             }
         }
     }
+    getChanges(): { [key: string]: any | any[] } {
+        let changes: { [key: string]: any | any[] } = {};
+        if (!this.target || !this.initVal) {
+            return changes;
+        }
+        for (let prop in this.target) {
+            let field: any = this.initVal[prop];
+                if (!this.compareValue(field, this.target[prop])) {
+                    changes[prop] = this.target[prop];
+                    //Number
+                    if (typeof field === "number") {
+                        changes[prop] = +changes[prop];
+                    }
+
+                    //Trim string value
+                    if (typeof field === "string") {
+                        changes[prop] = ('' + changes[prop]).trim();
+                    }
+            }
+        }
 
-}
\ No newline at end of file
+        return changes;
+    }
+
+    //private
+    compareValue(a: any, b: any): boolean {
+        if ((a && !b) || (!a && b)) return false;
+        if (!a && !b) return true;
+
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+
+    isEmpty(obj: any): boolean {
+        return !obj || JSON.stringify(obj) === "{}";
+    }
+}
diff --git a/src/ui_ng/lib/src/service/interface.ts b/src/ui_ng/lib/src/service/interface.ts
index 96fc2383d34e..6b876154d663 100644
--- a/src/ui_ng/lib/src/service/interface.ts
+++ b/src/ui_ng/lib/src/service/interface.ts
@@ -75,6 +75,7 @@ export interface Endpoint extends Base {
     password?: string;
     insecure: boolean;
     type: number;
+    [key: string]: any;
 }
 
 /**
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json
index d824ef357f3c..9620072d1fdb 100644
--- a/src/ui_ng/package.json
+++ b/src/ui_ng/package.json
@@ -31,7 +31,7 @@
         "clarity-icons": "^0.9.8",
         "clarity-ui": "^0.9.8",
         "core-js": "^2.4.1",
-        "harbor-ui": "0.5.14",
+        "harbor-ui": "0.5.15",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
         "ngx-cookie": "^1.0.0",