diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/maas/knowledge-base-management')
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'); |