Added functions and fixed the issue that copies did not take effect

Issue-ID: USECASEUI-844
Change-Id: I88c5bb570cbfe4379375ba2cfad045402726b7fc
Signed-off-by: kaixiliu <liukaixi@chinamobile.com>

10 files changed, 126 insertions, 47 deletions

diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.html b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.html
index 1931220f..d60f504e 100644
--- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.html
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.html
@@ -13,22 +13,28 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
-<nz-modal [(nzVisible)]="showModal" [nzTitle]="title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
+<nz-modal [(nzVisible)]="showModal" [nzTitle]="title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzFooter]="modalFooter"
   nzWidth="648px" nzHeight="800px">
-  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
+  <form nz-form [formGroup]="validateForm">
     <nz-form-item>
       <nz-form-label [nzSpan]="8" nzFor="name" nzRequired>Knowledge Base Name</nz-form-label>
       <nz-form-control [nzSpan]="12">
-        <input type="text" nz-input formControlName="name" placeholder="Please input knowledge base name">
+        <input type="text" nz-input formControlName="name" maxlength="255"  placeholder="Please input knowledge base name">
         <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">
-          Please input knowledge base name!
+          <ng-container *ngIf="validateForm.get('name').hasError('required')">
+            Please input knowledge base name!
+          </ng-container>
+          <ng-container *ngIf="validateForm.get('name').hasError('duplicated')">
+            {{ 'maas.nameDuplicateTip' | translate}}
+          </ng-container>
         </nz-form-explain>
       </nz-form-control>
     </nz-form-item>
     <nz-form-item>
       <nz-form-label [nzSpan]="8" nzFor="description">Knowledge Base Description</nz-form-label>
       <nz-form-control [nzSpan]="12">
-        <textarea rows="2" nz-input formControlName="description"></textarea>
+        <textarea #textarea id="myTextarea" rows="2" nz-input formControlName="description" maxlength="255" (input)="maasService.updateCharCount(textarea,charCount)"></textarea>
+        <div #charCount id="charCount">0/255</div>
       </nz-form-control>
     </nz-form-item>
     <nz-form-item>
@@ -59,13 +65,18 @@
     <nz-form-item>
       <nz-form-label [nzSpan]="8" nzFor="fileList" nzRequired>File Upload</nz-form-label>
       <nz-form-control [nzSpan]="12">
-        <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">
+        <nz-upload [nzFileList]="fileList" [nzBeforeUpload]="beforeUpload" [nzRemove]="handleRemove">
           <button nz-button>
             <i class="anticon anticon-upload"></i>
             <span>Select File</span>
           </button>
         </nz-upload>
+        <nz-form-explain class="error" *ngIf="validateForm.get('fileList').dirty && validateForm.get('fileList').errors">Please upload file!</nz-form-explain>
       </nz-form-control>
     </nz-form-item>
   </form>
+  <ng-template #modalFooter>
+    <button nz-button nzType="default" (click)="handleCancel()">Cancel</button>
+    <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="loading">OK</button>
+  </ng-template>
 </nz-modal>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.less b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.less
index e69de29b..252bd609 100644
--- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.less
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.less
@@ -0,0 +1,14 @@
+.error {
+    color: #f5222d;
+}
+
+#charCount {
+    position: absolute;
+    right: 0;
+    line-height: 20px;
+    color: #00000073;
+  }
+
+:host ::ng-deep #myTextarea {
+    position: relative;
+  }
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.ts b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.ts
index aefe2066..012a70d4 100644
--- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.ts
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/create-knowledge-base/create-knowledge-base.component.ts
@@ -1,11 +1,9 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Util } from '../../../../shared/utils/utils';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { NzMessageService, UploadFile } from 'ng-zorro-antd';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { MaasApi } from '@src/app/api/maas.api';
-import { Operator } from 'rxjs';
 import { MaaSPlatform, Operators } from '../knowledge-base.type';
+import { MaasService } from '../../maas-service.service';
 
 @Component({
   selector: 'app-create-knowledge-base',
@@ -15,27 +13,37 @@ import { MaaSPlatform, Operators } from '../knowledge-base.type';
 export class CreateKnowledgeBaseComponent implements OnInit {
   title = 'Add Knowledge Base';
   @Input() showModal: boolean;
+  @Input() existedNames: string[] = [];
   @Output() modalOpreation = new EventEmitter();
-  fileList: File[] = [];
+  fileList: UploadFile[] = [];
   operators: Operators[] = [];
   filteredPlatforms: MaaSPlatform[] = [];
   validateForm: FormGroup;
+  loading = false;
 
   constructor(
     private myhttp: MaasApi,
-    private Util: Util,
     private message: NzMessageService,
-    private http: HttpClient,
-    private fb: FormBuilder
+    private fb: FormBuilder,
+    public maasService: MaasService
   ) { }
 
+  nameDuplicateValidator = (control: FormControl): { [s: string]: boolean } => {
+    if (!control.value) {
+      return { required: true };
+    } else if (this.existedNames.includes(control.value)) {
+      return { duplicated: true, error: true };
+    }
+  }
+
   ngOnInit() {
     this.fetchOperators();
     this.validateForm = this.fb.group({
-      name: [null, [Validators.required]],
+      name: [null, [Validators.required, this.nameDuplicateValidator]],
       description: [null],
       selectedOperator: [null, [Validators.required]],
-      selectedPlatform: [null, [Validators.required]]
+      selectedPlatform: [null, [Validators.required]],
+      fileList: [null, [Validators.required]]
     });
   }
   fetchOperators(): void {
@@ -62,10 +70,23 @@ export class CreateKnowledgeBaseComponent implements OnInit {
     }
     this.validateForm.get('selectedPlatform').setValue(null);
   }
-  beforeUpload = (file: File): boolean => {
-    this.fileList.push(file);
+
+  beforeUpload = (file: UploadFile): boolean => {
+    if(this.fileList.some(item => item.name === file.name)) {
+      this.message.error("You can't upload a file with the same name.");
+    } else {
+      this.fileList.push(file);
+      this.validateForm.get('fileList').setValue(this.fileList);
+    }
     return false;
   }
+
+  handleRemove = (file: UploadFile): boolean => {
+    this.fileList = this.fileList.filter((item) => item.uid !== file.uid);
+    this.validateForm.get('fileList').setValue(this.fileList);
+    return true;
+  }
+
   handleCancel(): void {
     this.showModal = false;
     this.modalOpreation.emit({ "cancel": true });
@@ -83,7 +104,7 @@ export class CreateKnowledgeBaseComponent implements OnInit {
     };
     const metaDataJson = JSON.stringify(metaData);
     formData.append('metaData', metaDataJson);
-    this.fileList.forEach((file: File) => {
+    this.validateForm.value.fileList.forEach((file: File) => {
       formData.append('files', file);
     });
     return formData
@@ -95,6 +116,7 @@ export class CreateKnowledgeBaseComponent implements OnInit {
       this.showModal = true;
       return;
     }
+    this.loading = true;
     this.myhttp.createKnowledgeBase(this.constructBody()).subscribe(
       (response) => {
         if (response.result_header.result_code === 200) {
@@ -102,10 +124,12 @@ export class CreateKnowledgeBaseComponent implements OnInit {
         } else {
           this.message.error(response.result_header.result_message);
         }
+        this.loading = false;
         this.modalOpreation.emit({ "cancel": false });
       },
-      (error) => {
-        console.log('Upload failed', error);
+      () => {
+        this.loading = false;
+        console.log('Upload failed');
       }
     );
   }
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.html b/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.html
index e181ee5c..66cc07ce 100644
--- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.html
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.html
@@ -1,5 +1,5 @@
 <nz-modal [(nzVisible)]="showModal" [nzTitle]="title" (nzOnCancel)="handleCancel()"
-  (nzOnOk)="submitForm()" nzWidth="648px" nzHeight="800px">
+  (nzOnOk)="submitForm()" [nzFooter]="modalFooter" nzWidth="648px" nzHeight="800px">
   <form nz-form [formGroup]="validateForm" (ngSubmit)="checkForm()">
     <nz-form-item>
       <nz-form-label [nzSpan]="8" nzFor="name" nzRequired>Knowledge Base Name</nz-form-label>
@@ -10,8 +10,13 @@
     <nz-form-item>
       <nz-form-label [nzSpan]="8" nzFor="description">Knowledge Base Description</nz-form-label>
       <nz-form-control [nzSpan]="12">
-        <textarea rows="2" formControlName="description" nz-input></textarea>
+        <textarea #textarea id="myTextarea" rows="2" nz-input formControlName="description" maxlength="255" (input)="maasService.updateCharCount(textarea,charCount)"></textarea>
+        <div #charCount id="charCount">0/255</div>
       </nz-form-control>
     </nz-form-item>
   </form>
+  <ng-template #modalFooter>
+    <button nz-button nzType="default" (click)="handleCancel()">Cancel</button>
+    <button nz-button nzType="primary" (click)="submitForm()" [nzLoading]="loading">OK</button>
+  </ng-template>
 </nz-modal>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.less b/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.less
index a5e73a17..dfdf8268 100644
--- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.less
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.less
@@ -18,4 +18,15 @@
   box-shadow: none;
   cursor: not-allowed;
   opacity: 1;
+}
+
+#charCount {
+  position: absolute;
+  right: 0;
+  line-height: 20px;
+  color: #00000073;
+}
+
+:host ::ng-deep #myTextarea {
+  position: relative;
 }
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.ts b/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.ts
index 00b65dfe..1b5bab4e 100644
--- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.ts
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component.ts
@@ -1,8 +1,9 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { NzMessageService } from 'ng-zorro-antd';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { KnowledgeBase } from '../knowledge-base.type';
 import { MaasApi } from '@src/app/api/maas.api';
+import { MaasService } from '../../maas-service.service';
 
 @Component({
   selector: 'app-edit-knowledge-base',
@@ -27,11 +28,15 @@ export class EditKnowledgeBaseComponent implements OnInit {
     operatorId: ''
   }
   knowledgeBase: KnowledgeBase = this.defalutKnowledgeBase;
+  loading = false;
+  @ViewChild('textarea') textarea: ElementRef;
+  @ViewChild('charCount') charCount: ElementRef;
 
   constructor(
     private myhttp: MaasApi,
     private message: NzMessageService,
     private fb: FormBuilder,
+    public maasService: MaasService
   ) { }
 
   ngOnInit() {
@@ -50,6 +55,7 @@ export class EditKnowledgeBaseComponent implements OnInit {
   }
 
   submitForm(): void {
+    this.loading = true;
     this.checkForm();
     this.create();
   }
@@ -67,6 +73,7 @@ export class EditKnowledgeBaseComponent implements OnInit {
             name: this.knowledgeBase.knowledgeBaseName,
             description: this.knowledgeBase.knowledgeBaseDescription
           });
+          this.maasService.updateCharCount(this.textarea.nativeElement, this.charCount.nativeElement);
         },
         () => {
           this.message.error('Failed to obtain knowledge base data');
@@ -96,10 +103,12 @@ export class EditKnowledgeBaseComponent implements OnInit {
         } else {
           this.message.error(response.result_header.result_message);
         }
+        this.loading = false;
         this.modalOpreation.emit({ "cancel": false });
       },
-      (error) => {
-        console.log('Upload failed', error);
+      () => {
+        this.loading = false;
+        console.log('Upload failed');
       }
     );
   }
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.html b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.html
index 419bb6b3..c1dcce82 100644
--- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.html
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.html
@@ -30,7 +30,7 @@
         </app-descriptions-item>
         <app-descriptions-item [nzSpan]="3" nzTitle="Files Name">
             <div class="upload-file">
-                <nz-upload [nzAction]="url" [(nzFileList)]="fileList"  (nzChange)="handleChange($event)" nzName="files" [nzData]="nzdata">
+                <nz-upload [nzAction]="url" [(nzFileList)]="fileList"  (nzChange)="handleChange($event)" nzName="files" [nzData]="nzdata" [nzBeforeUpload]="beforeUpload">
                     <button nz-button>
                         <i class="anticon anticon-upload"></i>
                         <span>Select File</span> 
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.ts b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.ts
index a9b0adaa..906236c7 100644
--- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.ts
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.ts
@@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { KnowledgeBase } from '../knowledge-base.type';
 import { KnowledgeBaseService } from '../knowledge-base.service';
 import { MaasApi } from '@src/app/api/maas.api';
-import { NzMessageService } from 'ng-zorro-antd';
+import { NzMessageService, UploadFile } from 'ng-zorro-antd';
 import { forkJoin } from 'rxjs/observable/forkJoin';
 import { of } from 'rxjs/observable/of';
 import { catchError } from 'rxjs/operators';
@@ -38,19 +38,18 @@ export class KnowledgeBaseDetailComponent implements OnInit {
   removedFiles:string[] = [];
   url = `${(window as any).baseUrl}${this.myhttp.url.uploadFile}`;
   
-  ngOnInit() {
-    this.displayKnowledgeDetails(this.id);
+  async ngOnInit() {
+    await this.displayKnowledgeDetails(this.id);
   }
 
-  displayKnowledgeDetails(id: string) {
-    this.myhttp.getKnowledgeBaseById(id).subscribe(
-      (response) => {
-        this.knowledgeBaseDetail = response.result_body;
-      },
-      () => {
-        this.message.error('Failed to obtain knowledge base data');
-      }
-    );
+  async displayKnowledgeDetails(id: string) {
+    try {
+      const response = await this.myhttp.getKnowledgeBaseById(id).toPromise();
+      this.knowledgeBaseDetail = response.result_body;
+    } catch { 
+      this.knowledgeBaseDetail = null;
+      this.message.error('Failed to obtain knowledge base data');
+    }
   }
 
   handleCancel(): void {
@@ -63,13 +62,13 @@ export class KnowledgeBaseDetailComponent implements OnInit {
     this.modalOpreation.emit();
   }
 
-  handleChange({ file}): void {
+  async handleChange({ file}) {
     const status = file.status;
     if (status === 'done') {
       this.fileList = [];
       if (file.response.result_header.result_code === 200) {
+        await this.displayKnowledgeDetails(this.id);
         this.message.success(`${file.name} upload successfully.`);
-        this.displayKnowledgeDetails(this.id);
       } else {
         this.displayFiles.unshift({fileId: this.maasServie.generateUniqueId, fileName: file.name, status: 'error'});
       }
@@ -109,8 +108,12 @@ export class KnowledgeBaseDetailComponent implements OnInit {
     )
   }
 
-  beforeUpload = (): boolean => {
-    return true;
+  beforeUpload = (file: UploadFile): boolean => {
+    if(this.displayFiles.some(item => item.fileName === file.name)) {
+      this.message.error("You can't upload a file with the same name.");
+      return false;
+    } else {
+      return true;
+    }
   }
-
 }
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.html b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.html
index 703bc04a..8b5cf78f 100644
--- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.html
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.html
@@ -43,7 +43,7 @@
   </nz-table>
 </div>
 <app-create-knowledge-base *ngIf="createModalShow" [showModal]="createModalShow"
-  (modalOpreation)="createModalClose($event)"></app-create-knowledge-base>
+  (modalOpreation)="createModalClose($event)" [existedNames]="existedNames"></app-create-knowledge-base>
 <app-knowledge-base-detail *ngIf="knowledgeBaseShow" [showModal]="knowledgeBaseShow"
   (modalOpreation)="knowledgeBaseDetailClose()" [id]="knowledgeBaseId"
   ></app-knowledge-base-detail>
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.ts b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.ts
index e6c96189..0c11b468 100644
--- a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.ts
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.ts
@@ -16,6 +16,7 @@ export class KnowledgeBaseManagementComponent implements OnInit {
   createModalShow: boolean = false;
   knowledgeBaseShow: boolean = false;
   knowledgeBaseDetail: Object = {};
+  existedNames = [];
 
   constructor(
     private myhttp: MaasApi,
@@ -32,7 +33,8 @@ export class KnowledgeBaseManagementComponent implements OnInit {
     this.myhttp.getKnowledgeBaseRecord()
       .subscribe(
         (data) => {
-          this.data = data.result_body
+          this.data = data.result_body;
+          this.existedNames = this.data.map(item => item.knowledgeBaseName);
         },
         () => {
           this.message.error('Failed to obtain knowledgeBase data');