Improve input validator for copy-component (#17310)

Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
Shijun Sun 2022-08-09 12:15:17 +08:00 committed by GitHub
parent 893cb0a655
commit 423647ea33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 37 additions and 24 deletions

View File

@ -46,7 +46,8 @@
[disabled]="
imageNameInput.projectName.invalid ||
imageNameInput.repoName.invalid ||
imageNameInput.noProjectInfo !== ''
imageNameInput.notExist ||
imageNameInput.checkingName
"
class="btn btn-primary"
(click)="onRetag()">

View File

@ -849,7 +849,9 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
this.retagDialogOpened = true;
this.imageNameInput.imageNameForm.reset({
repoName: this.repoName,
projectName: null,
});
this.imageNameInput.notExist = false;
this.retagSrcImage =
this.repoName + ':' + this.selectedRow[0].digest;
}

View File

@ -9,7 +9,9 @@
<div
class="clr-control-container"
[class.clr-error]="
noProjectInfo && (projectName.dirty || projectName.touched)
(projectName.invalid &&
(projectName.dirty || projectName.touched)) ||
notExist
">
<div class="clr-input-wrapper">
<input
@ -22,6 +24,9 @@
<clr-icon
class="clr-validate-icon"
shape="exclamation-circle"></clr-icon>
<span
class="spinner spinner-inline"
[hidden]="!checkingName"></span>
<div
class="selectBox"
[style.display]="
@ -38,10 +43,17 @@
</div>
<clr-control-error
*ngIf="
noProjectInfo && (projectName.dirty || projectName.touched)
(projectName.invalid &&
(projectName.dirty || projectName.touched)) ||
notExist
"
class="tooltip-content">
{{ noProjectInfo | translate }}
<ng-container *ngIf="projectName.invalid">
{{ 'PROJECT.NAME_TOOLTIP' | translate }}
</ng-container>
<ng-container *ngIf="notExist">
{{ 'REPLICATION.NO_PROJECT_INFO' | translate }}
</ng-container>
</clr-control-error>
</div>
</div>

View File

@ -1,6 +1,6 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime, switchMap } from 'rxjs/operators';
import { debounceTime, finalize, switchMap } from 'rxjs/operators';
import {
AbstractControl,
FormBuilder,
@ -17,10 +17,11 @@ import { Project } from 'ng-swagger-gen/models/project';
styleUrls: ['./image-name-input.component.scss'],
})
export class ImageNameInputComponent implements OnInit, OnDestroy {
noProjectInfo = '';
selectedProjectList: Project[] = [];
proNameChecker: Subject<string> = new Subject<string>();
imageNameForm: FormGroup;
notExist: boolean = false;
checkingName: boolean = false;
public project: string;
public repo: string;
public tag: string;
@ -57,13 +58,16 @@ export class ImageNameInputComponent implements OnInit, OnDestroy {
.pipe(debounceTime(200))
.pipe(
switchMap(name => {
this.noProjectInfo = '';
this.notExist = false;
this.checkingName = true;
this.selectedProjectList = [];
return this.proService.listProjects({
name: name,
page: 1,
pageSize: 10,
});
return this.proService
.listProjects({
name: name,
page: 1,
pageSize: 10,
})
.pipe(finalize(() => (this.checkingName = false)));
})
)
.subscribe(
@ -76,18 +80,14 @@ export class ImageNameInputComponent implements OnInit, OnDestroy {
data.name ===
this.imageNameForm.controls['projectName'].value
);
if (!exist) {
this.noProjectInfo = 'REPLICATION.NO_PROJECT_INFO';
} else {
this.noProjectInfo = '';
}
this.notExist = !exist;
} else {
this.noProjectInfo = 'REPLICATION.NO_PROJECT_INFO';
this.notExist = true;
}
},
(error: any) => {
this.errorHandler.error(error);
this.noProjectInfo = 'REPLICATION.NO_PROJECT_INFO';
this.notExist = true;
}
);
}
@ -96,8 +96,6 @@ export class ImageNameInputComponent implements OnInit, OnDestroy {
let cont = this.imageNameForm.controls['projectName'];
if (cont && cont.valid) {
this.proNameChecker.next(cont.value);
} else {
this.noProjectInfo = 'PROJECT.NAME_TOOLTIP';
}
}
@ -126,6 +124,6 @@ export class ImageNameInputComponent implements OnInit, OnDestroy {
selectedProjectName(projectName: string) {
this.imageNameForm.controls['projectName'].setValue(projectName);
this.selectedProjectList = [];
this.noProjectInfo = '';
this.notExist = false;
}
}

View File

@ -601,7 +601,7 @@
"JOB_PLACEHOLDER": "We couldn't find any replication jobs!",
"NO_ENDPOINT_INFO": "Please add an endpoint first",
"NO_LABEL_INFO": "Please add a label first",
"NO_PROJECT_INFO": "This project is not exist",
"NO_PROJECT_INFO": "This project does not exist",
"SOURCE_RESOURCE_FILTER": "Source resource filter",
"SCHEDULED": "Scheduled",
"MANUAL": "Manual",

View File

@ -603,7 +603,7 @@
"JOB_PLACEHOLDER": "We couldn't find any replication jobs!",
"NO_ENDPOINT_INFO": "Please add an endpoint first",
"NO_LABEL_INFO": "Please add a label first",
"NO_PROJECT_INFO": "This project is not exist",
"NO_PROJECT_INFO": "This project does not exist",
"SOURCE_RESOURCE_FILTER": "Source resource filter",
"SCHEDULED": "Scheduled",
"MANUAL": "Manual",