#2240 change notebook server validation ui

metatron-app · Jul 15, 2019 · 9e59d7a · 9e59d7a
1 parent 74392df
commit 9e59d7a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 10 deletions.
diff --git a/...p/model-management/notebook-server/add-notebook-server/add-notebook-server.component.html b/...p/model-management/notebook-server/add-notebook-server/add-notebook-server.component.html
@@ -38,14 +38,23 @@
           <!-- //edit option -->
         </div>
         <div class="ddp-clear">
-          <div class="ddp-wrap-edit2">
+          <div class="ddp-wrap-edit2" [class.ddp-error]="isUrlReqError || isUrlValidError">
             <label class="ddp-label-type">{{'msg.comm.th.url' | translate}}</label>
-            <input type="text" class="ddp-input-type" placeholder="{{'msg.nbook.ui.url.ph' | translate}}" [(ngModel)]="notebook.url">
+            <input type="text" class="ddp-input-type" placeholder="{{'msg.nbook.ui.url.ph' | translate}}"
+                   [(ngModel)]="notebook.url" (ngModelChange)="notebook.url = $event; isUrlReqError = undefined; isUrlValidError = undefined;">
+            <!-- error -->
+            <span class="ddp-ui-error" *ngIf="isUrlReqError">{{'msg.storage.alert.url.required' | translate}}</span>
+            <span class="ddp-ui-error" *ngIf="isUrlValidError">{{'msg.dp.ui.invalid.url' | translate}}</span>
+            <!-- error -->
           </div>
         </div>
-        <div class="ddp-wrap-edit2">
+        <div class="ddp-wrap-edit2" [class.ddp-error]="isNameError">
           <label class="ddp-label-type">{{'msg.comm.ui.name' | translate}}</label>
-          <input type="text" class="ddp-input-type" placeholder="{{'msg.comm.ui.create.name' | translate}}" [(ngModel)]="notebook.name">
+          <input type="text" class="ddp-input-type" placeholder="{{'msg.comm.ui.create.name' | translate}}"
+                 [(ngModel)]="notebook.name" (ngModelChange)="notebook.name = $event; isNameError = undefined;">
+          <!-- error -->
+          <span class="ddp-ui-error" *ngIf="isNameError">{{'msg.dp.alert.name.error' | translate}}</span>
+          <!-- error -->
         </div>
         <div class="ddp-wrap-edit2">
           <label class="ddp-label-type">{{'msg.comm.ui.description' | translate}}</label>

diff --git a/...app/model-management/notebook-server/add-notebook-server/add-notebook-server.component.ts b/...app/model-management/notebook-server/add-notebook-server/add-notebook-server.component.ts
@@ -58,6 +58,11 @@ export class AddNotebookServerComponent extends AbstractComponent implements OnI
 
   public isShow = false;
 
+  // input error
+  public isUrlReqError: boolean;
+  public isUrlValidError: boolean;
+  public isNameError: boolean;
+
   /*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    | Constructor
    |-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
@@ -98,6 +103,8 @@ export class AddNotebookServerComponent extends AbstractComponent implements OnI
     this.notebook = new NoteBook();
     this.mode = 'create';
     this.disabledFlag = false;
+
+    this.inputErrorInitialize();
   }
 
   // 업데이트.
@@ -112,13 +119,21 @@ export class AddNotebookServerComponent extends AbstractComponent implements OnI
     this.selectedNotebookServerType = notebook.type;
     this.mode = 'update';
     this.disabledFlag = true;
+
+    this.inputErrorInitialize();
   }
 
   // 닫기
   public close() {
     this.isShow = false;
   }
 
+  public inputErrorInitialize(): void {
+    this.isUrlReqError = undefined;
+    this.isUrlValidError = undefined;
+    this.isNameError = undefined;
+  }
+
   // selected 박스 선택시.
   public selectedLanguage(event) {
     this.selectedNotebookServerType = event;
@@ -131,17 +146,19 @@ export class AddNotebookServerComponent extends AbstractComponent implements OnI
     this.notebook.name  = this.notebook.name  ? this.notebook.name.trim() : ''; // trim 처리
 
     if (this.notebook.url === '' || isUndefined(this.notebook.url)) {
-      Alert.warning(this.translateService.instant('msg.storage.alert.url.required'));
-      return;
+      this.isUrlReqError = true;
     }
 
-    if (!StringUtil.isURL(this.notebook.url)) {
-      Alert.warning(this.translateService.instant('msg.dp.ui.invalid.url'));
+    if (!this.isUrlReqError && !StringUtil.isURL(this.notebook.url)) {
+      this.isUrlValidError = true;
       return;
     }
 
     if (this.notebook.name === '' || isUndefined(this.notebook.name)) {
-      Alert.warning(this.translateService.instant('msg.dp.alert.name.error'));
+      this.isNameError = true;
+    }
+
+    if (this.isUrlReqError || this.isUrlValidError || this.isNameError) {
       return;
     }
 
@@ -176,7 +193,6 @@ export class AddNotebookServerComponent extends AbstractComponent implements OnI
         });
     }
 
-
   }
 
   /*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=