mirror of
https://github.com/goharbor/harbor.git
synced 2024-11-06 18:50:09 +01:00
Modify project name checking
This commit is contained in:
parent
26d20bd9aa
commit
755654615e
@ -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>
|
||||||
|
@ -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';
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user