Add force refresh to new user form

This commit is contained in:
Deng, Qian 2018-01-30 20:42:39 +08:00
parent 11288ccc0c
commit 32793e2859
2 changed files with 58 additions and 42 deletions

View File

@ -10,7 +10,8 @@
<span class="tooltip-content"> <span class="tooltip-content">
{{usernameTooltip | translate}} {{usernameTooltip | translate}}
</span> </span>
</label><span class="spinner spinner-inline spinner-pos" [hidden]='isChecking("username")'></span> </label>
<span class="spinner spinner-inline spinner-pos" [hidden]='isChecking("username")'></span>
</div> </div>
<div class="form-group form-group-override"> <div class="form-group form-group-override">
<label for="email" class="required form-group-label-override">{{'PROFILE.EMAIL' | translate}}</label> <label for="email" class="required form-group-label-override">{{'PROFILE.EMAIL' | translate}}</label>

View File

@ -18,7 +18,8 @@ import {
Output, Output,
EventEmitter, EventEmitter,
Input, Input,
OnInit OnInit,
ChangeDetectorRef,
} from '@angular/core'; } from '@angular/core';
import { NgForm } from '@angular/forms'; import { NgForm } from '@angular/forms';
@ -33,33 +34,29 @@ import { SessionService } from '../../shared/session.service';
}) })
export class NewUserFormComponent implements AfterViewChecked, OnInit { export class NewUserFormComponent implements AfterViewChecked, OnInit {
newUser: User = new User();
@Input() isSelfRegistration: boolean = false;
newUserFormRef: NgForm;
@ViewChild("newUserFrom") newUserForm: NgForm;
@Input() isSelfRegistration = false;
// Notify the form value changes // Notify the form value changes
@Output() valueChange = new EventEmitter<boolean>(); @Output() valueChange = new EventEmitter<boolean>();
@ViewChild("newUserFrom") newUserForm: NgForm;
newUser: User = new User();
newUserFormRef: NgForm;
confirmedPwd: string; confirmedPwd: string;
timerHandler: any;
validationStateMap: any = {};
mailAlreadyChecked: any = {};
userNameAlreadyChecked: any = {};
emailTooltip = 'TOOLTIP.EMAIL';
usernameTooltip = 'TOOLTIP.USER_NAME';
formValueChanged = false;
constructor(private session: SessionService) { } checkOnGoing: any = {};
constructor(private session: SessionService,
private ref: ChangeDetectorRef) { }
ngOnInit() { ngOnInit() {
this.resetState(); this.resetState();
} }
validationStateMap: any = {};
mailAlreadyChecked: any = {};
userNameAlreadyChecked: any = {};
emailTooltip: string = 'TOOLTIP.EMAIL';
usernameTooltip: string = 'TOOLTIP.USER_NAME';
formValueChanged: boolean = false;
checkOnGoing: any = {};
resetState(): void { resetState(): void {
this.mailAlreadyChecked = {}; this.mailAlreadyChecked = {};
this.userNameAlreadyChecked = {}; this.userNameAlreadyChecked = {};
@ -84,6 +81,20 @@ export class NewUserFormComponent implements AfterViewChecked, OnInit {
return !this.checkOnGoing[key]; return !this.checkOnGoing[key];
} }
forceRefreshView(duration: number): void {
// Reset timer
if (this.timerHandler) {
clearInterval(this.timerHandler);
}
this.timerHandler = setInterval(() => this.ref.markForCheck(), 100);
setTimeout(() => {
if (this.timerHandler) {
clearInterval(this.timerHandler);
this.timerHandler = null;
}
}, duration);
}
getValidationState(key: string): boolean { getValidationState(key: string): boolean {
return !this.validationStateMap[key]; return !this.validationStateMap[key];
} }
@ -117,10 +128,12 @@ export class NewUserFormComponent implements AfterViewChecked, OnInit {
this.userNameAlreadyChecked[this.newUser.username.trim()] = { this.userNameAlreadyChecked[this.newUser.username.trim()] = {
result: res result: res
}; // Tag it checked }; // Tag it checked
this.forceRefreshView(2000);
}) })
.catch(error => { .catch(error => {
this.checkOnGoing[key] = false; this.checkOnGoing[key] = false;
this.validationStateMap[key] = false;// Not valid @ backend this.validationStateMap[key] = false;// Not valid @ backend
this.forceRefreshView(2000);
}); });
return; return;
@ -148,10 +161,12 @@ export class NewUserFormComponent implements AfterViewChecked, OnInit {
this.mailAlreadyChecked[this.newUser.email.trim()] = { this.mailAlreadyChecked[this.newUser.email.trim()] = {
result: res result: res
}; // Tag it checked }; // Tag it checked
this.forceRefreshView(2000);
}) })
.catch(error => { .catch(error => {
this.checkOnGoing[key] = false; this.checkOnGoing[key] = false;
this.validationStateMap[key] = false;// Not valid @ backend this.validationStateMap[key] = false;// Not valid @ backend
this.forceRefreshView(2000);
}); });
return; return;
} }