Modify project name checking

This commit is contained in:
Steven Zou 2017-05-16 18:23:09 -07:00
parent 26d20bd9aa
commit 755654615e
3 changed files with 62 additions and 33 deletions

View File

@ -13,9 +13,7 @@
pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$" pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$"
minlength="2" minlength="2"
#projectName="ngModel" #projectName="ngModel"
(input)='handleValidation(false)' (keyup)='handleValidation()'>
(blur)='handleValidation(true)'
>
<span class="tooltip-content"> <span class="tooltip-content">
{{ nameTooltipText | translate }} {{ nameTooltipText | translate }}
</span> </span>

View File

@ -11,7 +11,16 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import { Component, EventEmitter, Output, ViewChild, AfterViewChecked, HostBinding } from '@angular/core'; import {
Component,
EventEmitter,
Output,
ViewChild,
AfterViewChecked,
HostBinding,
OnInit,
OnDestroy
} from '@angular/core';
import { Response } from '@angular/http'; import { Response } from '@angular/http';
import { NgForm } from '@angular/forms'; import { NgForm } from '@angular/forms';
@ -23,12 +32,16 @@ import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.com
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
@Component({ @Component({
selector: 'create-project', selector: 'create-project',
templateUrl: 'create-project.component.html', templateUrl: 'create-project.component.html',
styleUrls: ['create-project.css'] styleUrls: ['create-project.css']
}) })
export class CreateProjectComponent implements AfterViewChecked { export class CreateProjectComponent implements AfterViewChecked, OnInit, OnDestroy {
projectForm: NgForm; projectForm: NgForm;
@ -48,6 +61,7 @@ export class CreateProjectComponent implements AfterViewChecked {
isNameValid: boolean = true; isNameValid: boolean = true;
nameTooltipText: string = 'PROJECT.NAME_TOOLTIP'; nameTooltipText: string = 'PROJECT.NAME_TOOLTIP';
checkOnGoing: boolean = false; checkOnGoing: boolean = false;
proNameChecker: Subject<string> = new Subject<string>();
@Output() create = new EventEmitter<boolean>(); @Output() create = new EventEmitter<boolean>();
@ViewChild(InlineAlertComponent) @ViewChild(InlineAlertComponent)
@ -61,6 +75,39 @@ export class CreateProjectComponent implements AfterViewChecked {
return this.project.public ? 'PROJECT.PUBLIC' : 'PROJECT.PRIVATE'; return this.project.public ? 'PROJECT.PUBLIC' : 'PROJECT.PRIVATE';
} }
ngOnInit(): void {
this.proNameChecker
.debounceTime(500)
.distinctUntilChanged()
.subscribe((name: string) => {
let cont = this.currentForm.controls["create_project_name"];
if (cont && this.hasChanged) {
this.isNameValid = cont.valid;
if (this.isNameValid) {
//Check exiting from backend
this.checkOnGoing = true;
this.projectService
.checkProjectExists(cont.value).toPromise()
.then(() => {
//Project existing
this.isNameValid = false;
this.nameTooltipText = 'PROJECT.NAME_ALREADY_EXISTS';
this.checkOnGoing = false;
})
.catch(error => {
this.checkOnGoing = false;
});
} else {
this.nameTooltipText = 'PROJECT.NAME_TOOLTIP';
}
}
});
}
ngOnDestroy(): void {
this.proNameChecker.unsubscribe();
}
onSubmit() { onSubmit() {
this.projectService this.projectService
.createProject(this.project.name, this.project.public ? 1 : 0) .createProject(this.project.name, this.project.public ? 1 : 0)
@ -135,36 +182,17 @@ export class CreateProjectComponent implements AfterViewChecked {
} }
public get isValid(): boolean { public get isValid(): boolean {
return this.currentForm && this.currentForm.valid && this.isNameValid; return this.currentForm &&
this.currentForm.valid &&
this.isNameValid &&
!this.checkOnGoing;
} }
//Handle the form validation //Handle the form validation
handleValidation(flag: boolean): void { handleValidation(): void {
if (flag) { let cont = this.currentForm.controls["create_project_name"];
//validate if (cont) {
let cont = this.currentForm.controls["create_project_name"]; this.proNameChecker.next(cont.value);
if (cont) {
this.isNameValid = cont.valid;
if (this.isNameValid && this.hasChanged) {
//Check exiting from backend
this.checkOnGoing = true;
this.projectService
.checkProjectExists(cont.value).toPromise()
.then(() => {
//Project existing
this.isNameValid = false;
this.nameTooltipText = 'PROJECT.NAME_ALREADY_EXISTS';
this.checkOnGoing = false;
})
.catch(error => {
this.checkOnGoing = false;
});
}
}
} else {
//reset
this.isNameValid = true;
this.nameTooltipText = 'PROJECT.NAME_TOOLTIP';
} }
} }
} }

View File

@ -193,6 +193,9 @@ export class AddMemberComponent implements AfterViewChecked, OnInit, OnDestroy {
} }
public get isValid(): boolean { public get isValid(): boolean {
return this.currentForm && this.currentForm.valid && this.isMemberNameValid; return this.currentForm &&
this.currentForm.valid &&
this.isMemberNameValid &&
!this.checkOnGoing;
} }
} }