From 758f9e94eb9dc48705b42e72642d9e9a1aaab19a Mon Sep 17 00:00:00 2001 From: kaixiliu Date: Thu, 13 Feb 2025 09:51:14 +0800 Subject: Added functions and fixed the issue that copies did not take effect Issue-ID: USECASEUI-844 Change-Id: I88c5bb570cbfe4379375ba2cfad045402726b7fc Signed-off-by: kaixiliu --- .../create-application-management.component.html | 31 ++++++++---- .../create-application-management.component.less | 14 ++++-- .../create-application-management.component.ts | 36 +++++++------- .../create-knowledge-base.component.html | 23 ++++++--- .../create-knowledge-base.component.less | 14 ++++++ .../create-knowledge-base.component.ts | 56 +++++++++++++++------- .../edit-knowledge-base.component.html | 9 +++- .../edit-knowledge-base.component.less | 11 +++++ .../edit-knowledge-base.component.ts | 15 ++++-- .../knowledge-base-detail.component.html | 2 +- .../knowledge-base-detail.component.ts | 37 +++++++------- .../knowledge-base-management.component.html | 2 +- .../knowledge-base-management.component.ts | 4 +- .../src/app/views/maas/maas-service.service.ts | 7 +++ .../views/maas/use/use-application.component.less | 1 + .../views/maas/use/use-application.component.ts | 19 ++++---- 16 files changed, 191 insertions(+), 90 deletions(-) (limited to 'usecaseui-portal/src') diff --git a/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.html b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.html index 5824f706..f83c459a 100644 --- a/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.html +++ b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.html @@ -14,13 +14,13 @@ limitations under the License. --> -
Application Name - + Please input application name @@ -32,15 +32,21 @@ - Application Description + Application Description - + +
0/255
+ + + Please input application description + + Application Type - @@ -52,7 +58,7 @@ Operator Name - MaaS Platform Name - Prompt - -
0/1000
+ +
0/1000
{{ 'maas.application.promptTip' | translate}} @@ -115,7 +121,8 @@ Opening Remarks - + +
0/500
Please input opening remarks! @@ -158,4 +165,8 @@ + + + +
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.less b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.less index f8fea30c..21ebd1e2 100644 --- a/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.less +++ b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.less @@ -35,11 +35,15 @@ width: 300px; } -:host ::ng-deep #myTextarea { +:host ::ng-deep .myTextarea { position: relative; } -.disabled-input ::ng-deep .ant-select-selection{ +.disabled-input { + cursor: not-allowed; +} + +.disabled-select ::ng-deep .ant-select-selection, .disabled-input{ color: #00000040; background-color: #f5f5f5; border-color: #d9d9d9; @@ -49,12 +53,12 @@ #charCount { position: absolute; - top: 9px; - right: 15px; + right: 0; line-height: 20px; + color: #00000073; } -.disabled-input { +.disabled-select { pointer-events: none; } diff --git a/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.ts b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.ts index 0ee40d7b..7e5dae60 100644 --- a/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.ts +++ b/usecaseui-portal/src/app/views/maas/build/create-application-management/create-application-management.component.ts @@ -3,9 +3,8 @@ import { NzMessageService } from "ng-zorro-antd"; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { MaasApi } from '@src/app/api/maas.api'; import { KnowledgeBase, MaaSPlatform, ModelInformation, Operators } from '../../knowledge-base-management/knowledge-base.type'; -import { Subject } from 'rxjs'; -import { debounceTime } from 'rxjs/operators'; import { Application } from '../application.type'; +import { MaasService } from '../../maas-service.service'; @Component({ selector: 'app-create-application-management', @@ -38,16 +37,21 @@ export class CreateApplicationManagementComponent implements OnInit { knowledgeBases: KnowledgeBase[] = []; temperature = 3; top_p = 3; - private submitSubject = new Subject(); - @ViewChild('myTextarea') myTextarea: ElementRef; - @ViewChild('charCount') charCount: ElementRef; @Input() existedNames: string[] = []; application: Application; + loading = false; + @ViewChild('despTextarea') despTextarea: ElementRef; + @ViewChild('despCharCount') despCharCount: ElementRef; + @ViewChild('promptTextarea') promptTextarea: ElementRef; + @ViewChild('promptCharCount') promptCharCount: ElementRef; + @ViewChild('orTextarea') orTextarea: ElementRef; + @ViewChild('orCharCount') orCharCount: ElementRef; constructor( private myhttp: MaasApi, private message: NzMessageService, - private fb: FormBuilder + private fb: FormBuilder, + public maasService: MaasService ) { } async ngOnInit() { @@ -56,7 +60,9 @@ export class CreateApplicationManagementComponent implements OnInit { if (this.isEdit) { await this.fetchApplication(); } - this.submitSubject.pipe(debounceTime(3000)).subscribe(() => this.executeSubmit()); + this.maasService.updateCharCount(this.despTextarea.nativeElement, this.despCharCount.nativeElement); + this.maasService.updateCharCount(this.promptTextarea.nativeElement, this.promptCharCount.nativeElement); + this.maasService.updateCharCount(this.orTextarea.nativeElement, this.orCharCount.nativeElement); } async fetchApplication(): Promise { @@ -98,8 +104,8 @@ export class CreateApplicationManagementComponent implements OnInit { initFormData() { this.validateForm = this.fb.group({ - name: this.isEdit ? [null, [Validators.required]] : [null, [Validators.required, this.nameDuplicateValidator]], - description: [null], + name: this.isEdit ? [null] : [null, [Validators.required, this.nameDuplicateValidator]], + description: [null, [Validators.required]], applicationType: [null, [Validators.required]], selectedOperator: [null, [Validators.required]], selectedPlatform: [null, [Validators.required]], @@ -163,7 +169,7 @@ export class CreateApplicationManagementComponent implements OnInit { } handleOk() { - this.submitSubject.next(); + this.executeSubmit(); } private executeSubmit() { @@ -172,6 +178,7 @@ export class CreateApplicationManagementComponent implements OnInit { this.showModal = true; return; } + this.loading = true; const url = this.isEdit ? this.myhttp.url.updateApplication : this.myhttp.url.createApplicationUrl; this.myhttp.createApplication(url, this.constructBody()).subscribe( (response) => { @@ -182,8 +189,10 @@ export class CreateApplicationManagementComponent implements OnInit { } else { this.message.error(response.result_header.result_message); } + this.loading = false; }, () => { + this.loading = false; this.showModal = false; this.message.error('Operate failed'); } @@ -247,12 +256,5 @@ export class CreateApplicationManagementComponent implements OnInit { toppInputChange(event: number): void { this.validateForm.controls.top_pSlider.setValue(event); } - - updateCharCount() { - const textarea = this.myTextarea.nativeElement as HTMLTextAreaElement; - const charCount = textarea.value.length; - const maxLength = textarea.getAttribute('maxlength'); - this.charCount.nativeElement.innerText = charCount + '/' + maxLength; - } } 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. --> - -
+ Knowledge Base Name - + - Please input knowledge base name! + + Please input knowledge base name! + + + {{ 'maas.nameDuplicateTip' | translate}} + Knowledge Base Description - + +
0/255
 @@ -59,13 +65,18 @@ File Upload - + + Please upload file! + + + +
\ 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 @@ + (nzOnOk)="submitForm()" [nzFooter]="modalFooter" nzWidth="648px" nzHeight="800px">
Knowledge Base Name @@ -10,8 +10,13 @@ Knowledge Base Description - + +
0/255
 + + + +
\ 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 @@
- +
+ (modalOpreation)="createModalClose($event)" [existedNames]="existedNames"> 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'); diff --git a/usecaseui-portal/src/app/views/maas/maas-service.service.ts b/usecaseui-portal/src/app/views/maas/maas-service.service.ts index 257f7a1c..3d4b9859 100644 --- a/usecaseui-portal/src/app/views/maas/maas-service.service.ts +++ b/usecaseui-portal/src/app/views/maas/maas-service.service.ts @@ -11,4 +11,11 @@ export class MaasService { return `${timestamp}${randomNum}`; } + updateCharCount(textarea: HTMLTextAreaElement, charCount: HTMLElement) { + const charCountValue = textarea.value.length; + const maxLength = textarea.getAttribute('maxlength'); + charCount.innerText = `${charCountValue}/${maxLength}`; + + } + } diff --git a/usecaseui-portal/src/app/views/maas/use/use-application.component.less b/usecaseui-portal/src/app/views/maas/use/use-application.component.less index d57a6900..e57914d0 100644 --- a/usecaseui-portal/src/app/views/maas/use/use-application.component.less +++ b/usecaseui-portal/src/app/views/maas/use/use-application.component.less @@ -52,6 +52,7 @@ .question-container { border-radius: 8px; background-color: white; + max-width: 100%; } .question-text { diff --git a/usecaseui-portal/src/app/views/maas/use/use-application.component.ts b/usecaseui-portal/src/app/views/maas/use/use-application.component.ts index f0ce4f7e..abee90d0 100644 --- a/usecaseui-portal/src/app/views/maas/use/use-application.component.ts +++ b/usecaseui-portal/src/app/views/maas/use/use-application.component.ts @@ -5,6 +5,7 @@ import { ActivatedRoute } from '@angular/router'; import { MaasApi } from '@src/app/api/maas.api'; import { TranslateService } from '@ngx-translate/core'; import { MaasService } from '../maas-service.service'; +import { ClipboardService } from 'ngx-clipboard'; export type StatusEnum = 'typing' | 'finished'; export type Chat = { question: string, answer: string, questionId: string, status: StatusEnum }; @Component({ @@ -34,7 +35,8 @@ export class UseApplicationComponent implements OnInit, OnDestroy { private myhttp: MaasApi, private translate: TranslateService, private maasService: MaasService, - private renderer: Renderer2 + private renderer: Renderer2, + private clipboardService: ClipboardService ) { } async ngOnInit() { @@ -45,13 +47,13 @@ export class UseApplicationComponent implements OnInit, OnDestroy { }); this.keydownListener = this.renderer.listen(this.questionInput.nativeElement, 'keydown', this.handleKeyDown.bind(this)); } - + ngOnDestroy() { if (this.keydownListener) { this.keydownListener(); } } - + close() { if (this.currentSSE) { this.currentSSE.close(); @@ -119,18 +121,14 @@ export class UseApplicationComponent implements OnInit, OnDestroy { nzLabel: item.applicationName })); this.selectedName = this.options.length > 0 ? this.options[0].nzValue : ''; - } catch { + } catch (error) { this.message.error('Failed to obtain intent data'); } } async copy(content: string): Promise { - try { - await (navigator as any).clipboard.writeText(content); - this.message.success(this.translate.instant('maas.copy_to_clipboard')); - } catch (err) { - console.error(this.translate.instant('maas.copy_failed') + ': ', err); - } + this.clipboardService.copyFromContent(content); + this.message.success(this.translate.instant('maas.copy_to_clipboard')); } deleteQuestion(questionId: string): void { @@ -157,7 +155,6 @@ export class UseApplicationComponent implements OnInit, OnDestroy { } else { this.doAction(); } - } } } -- cgit