Update endpoint interaction of UI.

This commit is contained in:
kunw 2017-04-11 11:42:56 +08:00
parent ad02cab82a
commit 9c6e49c5dd
3 changed files with 37 additions and 26 deletions

View File

@ -14,7 +14,7 @@
<div class="form-group">
<label for="destination_name" class="col-md-4 form-group-label-override">{{ 'DESTINATION.NAME' | translate }}<span style="color: red">*</span></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)="clearPassword($event)">
<input type="text" id="destination_name" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.name" name="targetName" size="20" #targetName="ngModel" required (keyup)="changedTargetName($event)">
<span class="tooltip-content" *ngIf="targetName.errors && targetName.errors.required && (targetName.dirty || targetName.touched)">
{{ 'DESTINATION.NAME_IS_REQUIRED' | translate }}
</span>

View File

@ -44,7 +44,8 @@ export class CreateEditDestinationComponent implements AfterViewChecked {
hasChanged: boolean;
endpointUrlHasChanged: boolean;
endpointHasChanged: boolean;
targetNameHasChanged: boolean;
@ViewChild(InlineAlertComponent)
inlineAlert: InlineAlertComponent;
@ -63,7 +64,8 @@ export class CreateEditDestinationComponent implements AfterViewChecked {
this.editable = editable;
this.hasChanged = false;
this.endpointUrlHasChanged = false;
this.endpointHasChanged = false;
this.targetNameHasChanged = false;
this.pingTestMessage = '';
this.pingStatus = true;
@ -96,22 +98,17 @@ export class CreateEditDestinationComponent implements AfterViewChecked {
this.pingStatus = true;
this.testOngoing = !this.testOngoing;
let postedTarget: any = {};
if(!this.endpointUrlHasChanged) {
postedTarget = {
id: this.target.id
};
let payload: Target = new Target();
if(this.endpointHasChanged) {
payload.endpoint = this.target.endpoint;
payload.username = this.target.username;
payload.password = this.target.password;
} else {
postedTarget = {
endpoint: this.target.endpoint,
username: this.target.username,
password: this.target.password
};
payload.id = this.target.id;
}
this.replicationService
.pingTarget(postedTarget)
.pingTarget(payload)
.subscribe(
response=>{
this.pingStatus = true;
@ -126,10 +123,16 @@ export class CreateEditDestinationComponent implements AfterViewChecked {
)
}
changedTargetName($event: any) {
if(this.editable) {
this.targetNameHasChanged = true;
}
}
clearPassword($event: any) {
if(this.editable) {
this.target.password = '';
this.endpointUrlHasChanged = true;
this.endpointHasChanged = true;
}
}
@ -172,12 +175,21 @@ export class CreateEditDestinationComponent implements AfterViewChecked {
);
break;
case ActionType.EDIT:
if(!this.endpointUrlHasChanged) {
if(!(this.targetNameHasChanged || this.endpointHasChanged)) {
this.createEditDestinationOpened = false;
return;
}
let payload: Target = new Target();
if(this.targetNameHasChanged) {
payload.name = this.target.name;
}
if (this.endpointHasChanged) {
payload.endpoint = this.target.endpoint;
payload.username = this.target.username;
payload.password = this.target.password;
}
this.replicationService
.updateTarget(this.target)
.updateTarget(payload, this.target.id)
.subscribe(
response=>{
this.messageHandlerService.showSuccess('DESTINATION.UPDATED_SUCCESS');

View File

@ -139,22 +139,21 @@ export class ReplicationService {
}
pingTarget(target: Target): Observable<any> {
let body = new URLSearchParams();
if(target.id) {
body.set('id', target.id + '');
return this.http
.post(`/api/targets/${target.id}/ping`, {})
.map(response=>response.status)
.catch(error=>Observable.throw(error));
}
body.set('endpoint', target.endpoint);
body.set('username', target.username);
body.set('password', target.password);
return this.http
.post(`/api/targets/ping`, body)
.post(`/api/targets/ping`, target)
.map(response=>response.status)
.catch(error=>Observable.throw(error));
}
updateTarget(target: Target): Observable<any> {
updateTarget(target: Target, targetId: number): Observable<any> {
return this.http
.put(`/api/targets/${target.id}`, JSON.stringify(target))
.put(`/api/targets/${targetId}`, JSON.stringify(target))
.map(response=>response.status)
.catch(error=>Observable.throw(error));
}