Add name validate when creat new replication rule

2024-09-29 05:47:31 +02:00 · 2018-06-11 11:34:17 +08:00 · 2018-06-11 11:34:17 +08:00 · 2366f6a39f
commit 2366f6a39f
parent c13f2f6948
8 changed files with 46 additions and 29 deletions
--- a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html
+++ b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html
@ -7,7 +7,7 @@
      <div class="form-group form-group-override">
       <label class="form-group-label-override required">{{'REPLICATION.NAME' | translate}}</label>
       <label aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left"
-              [class.invalid]='(ruleForm.controls.name.touched && ruleForm.controls.name.invalid) || isRuleNameExist'>
+              [class.invalid]='(ruleForm.controls.name.touched && ruleForm.controls.name.invalid) || !isRuleNameValid'>
        <input type="text" id="ruleName" pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$" class="inputWidth" required maxlength="255" formControlName="name" #ruleName (keyup)='checkRuleName()' autocomplete="off">
        <span class="tooltip-content">{{ruleNameTooltip | translate}}</span>
       </label><span class="spinner spinner-inline spinner-pos" [hidden]="!inNameChecking"></span>
--- a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.scss
+++ b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.scss
@ -155,3 +155,9 @@ h4 {
    line-height: 14px;
    cursor: pointer;
 }
+
+clr-modal {
+    ::ng-deep div.modal-dialog {
+        width: 25rem;
+    }
+}
--- a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.ts
+++ b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.ts
@ -68,14 +68,14 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
    "Sunday"
  ];
  filterSelect: string[] = ["repository", "tag"];
-  ruleNameTooltip = "TOOLTIP.EMPTY";
+  ruleNameTooltip = "REPLICATION.NAME_TOOLTIP";
  headerTitle = "REPLICATION.ADD_POLICY";

  createEditRuleOpened: boolean;
  filterListData: { [key: string]: any }[] = [];
  inProgress = false;
  inNameChecking = false;
-  isRuleNameExist = false;
+  isRuleNameValid = true;
  nameChecker: Subject<string> = new Subject<string>();
  proNameChecker: Subject<string> = new Subject<string>();
  firstClick = 0;
@ -113,7 +113,7 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
    private errorHandler: ErrorHandler,
    private proService: ProjectService,
    private translateService: TranslateService,
-    public ref: ChangeDetectorRef
+    private ref: ChangeDetectorRef
  ) {
    this.createForm();
  }
@ -143,10 +143,13 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
    }

    this.nameChecker
-      .debounceTime(500)
+      .debounceTime(300)
      .distinctUntilChanged()
      .subscribe((ruleName: string) => {
-        this.isRuleNameExist = false;
+        let cont = this.ruleForm.controls["name"];
+        if (cont) {
+          this.isRuleNameValid = cont.valid;
+          if (this.isRuleNameValid) {
            this.inNameChecking = true;
            toPromise<ReplicationRule[]>(
                this.repService.getReplicationRules(0, ruleName)
@ -154,13 +157,17 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
                .then(response => {
                  if (response.some(rule => rule.name === ruleName)) {
                    this.ruleNameTooltip = "TOOLTIP.RULE_USER_EXISTING";
-              this.isRuleNameExist = true;
+                    this.isRuleNameValid = false;
                  }
                  this.inNameChecking = false;
                })
                .catch(() => {
                  this.inNameChecking = false;
                });
+          }else {
+            this.ruleNameTooltip = "REPLICATION.NAME_TOOLTIP";
+          }
+        }
      });

    this.proNameChecker
@ -210,7 +217,7 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {

  get isValid() {
    return !(
-      this.isRuleNameExist ||
+      !this.isRuleNameValid ||
      this.noSelectedProject ||
      this.noSelectedEndpoint ||
      this.inProgress
@ -483,7 +490,7 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
    if (ruleName) {
      this.nameChecker.next(ruleName);
    } else {
-      this.ruleNameTooltip = "TOOLTIP.EMPTY";
+      this.ruleNameTooltip = "REPLICATION.NAME_TOOLTIP";
    }
  }

@ -601,7 +608,7 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
    this.firstClick = 0;
    this.noSelectedProject = true;
    this.noSelectedEndpoint = true;
-    this.isRuleNameExist = false;
+    this.isRuleNameValid = true;

    this.weeklySchedule = false;
    this.isScheduleOpt = false;
--- a/src/ui_ng/package.json
+++ b/src/ui_ng/package.json
@ -49,7 +49,7 @@
        "bootstrap": "4.0.0-alpha.5",
        "codelyzer": "~2.0.0-beta.4",
        "enhanced-resolve": "^3.0.0",
-        "harbor-ui": "0.7.19-test-9",
+        "harbor-ui": "^0.7.19-test-12",
        "jasmine-core": "2.4.1",
        "jasmine-spec-reporter": "2.5.0",
        "karma": "~1.7.0",
--- a/src/ui_ng/src/i18n/lang/en-us-lang.json
+++ b/src/ui_ng/src/i18n/lang/en-us-lang.json
@ -343,7 +343,8 @@
        "REPLICATE": "Replicate",
        "DELETE_REMOTE_IMAGES":"Delete remote images when locally deleted",
        "REPLICATE_IMMEDIATE":"Replicate existing images immediately",
-        "NEW": "New"
+        "NEW": "New",
+        "NAME_TOOLTIP": "replication rule name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers."
    },
    "DESTINATION": {
        "NEW_ENDPOINT": "New Endpoint",
--- a/src/ui_ng/src/i18n/lang/es-es-lang.json
+++ b/src/ui_ng/src/i18n/lang/es-es-lang.json
@ -342,7 +342,8 @@
        "REPLICATE": "Replicate",
        "DELETE_REMOTE_IMAGES":"Delete remote images when locally deleted",
        "REPLICATE_IMMEDIATE":"Replicate existing images immediately",
-        "NEW": "New"
+        "NEW": "New",
+        "NAME_TOOLTIP": "replication rule name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers."
    },
    "DESTINATION": {
        "NEW_ENDPOINT": "Nuevo Endpoint",
--- a/src/ui_ng/src/i18n/lang/fr-fr-lang.json
+++ b/src/ui_ng/src/i18n/lang/fr-fr-lang.json
@ -320,7 +320,8 @@
        "REPLICATE": "Replicate",
        "DELETE_REMOTE_IMAGES":"Delete remote images when locally deleted",
        "REPLICATE_IMMEDIATE":"Replicate existing images immediately",
-        "NEW": "New"
+        "NEW": "New",
+        "NAME_TOOLTIP": "replication rule name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers."
    },
    "DESTINATION": {
        "NEW_ENDPOINT": "Nouveau Point Final",
--- a/src/ui_ng/src/i18n/lang/zh-cn-lang.json
+++ b/src/ui_ng/src/i18n/lang/zh-cn-lang.json
@ -342,7 +342,8 @@
        "REPLICATE": "复制",
        "DELETE_REMOTE_IMAGES":"删除本地镜像时同时也删除远程的镜像。",
        "REPLICATE_IMMEDIATE":"立即复制现有的镜像。",
-        "NEW": "新增"
+        "NEW": "新增",
+        "NAME_TOOLTIP": "项目名称由小写字符、数字和._-组成且至少2个字符并以字符或者数字开头。"
    },
    "DESTINATION": {
        "NEW_ENDPOINT": "新建目标",