diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/maas/build/create-application-management')
3 files changed, 49 insertions, 32 deletions
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. --> -<nz-modal [(nzVisible)]="showModal" [nzTitle]="title" nzOkText="Ok" (nzOnCancel)="handleCancel()" +<nz-modal [(nzVisible)]="showModal" [nzTitle]="title" nzOkText="Ok" (nzOnCancel)="handleCancel()" [nzFooter]="modalFooter" (nzOnOk)="handleOk()" nzWidth="648px" nzHeight="800px"> <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()"> <nz-form-item> <nz-form-label [nzSpan]="8" nzFor="name" nzRequired>Application Name</nz-form-label> <nz-form-control [nzSpan]="12"> - <input type="text" nz-input formControlName="name"> + <input [ngClass]="{'disabled-input': isEdit}" type="text" nz-input formControlName="name" maxlength="255" placeholder="Please input application name"> <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors"> <ng-container *ngIf="validateForm.get('name').hasError('required')"> Please input application name @@ -32,15 +32,21 @@ </nz-form-control> </nz-form-item> <nz-form-item> - <nz-form-label [nzSpan]="8" nzFor="description">Application Description</nz-form-label> + <nz-form-label [nzSpan]="8" nzFor="description" nzRequired>Application Description</nz-form-label> <nz-form-control [nzSpan]="12"> - <textarea rows="2" nz-input formControlName="description"></textarea> + <textarea #despTextarea class="myTextarea" rows="2" nz-input formControlName="description" maxlength="255" (input)="maasService.updateCharCount(despTextarea,despCharCount)"></textarea> + <div #despCharCount id="charCount">0/255</div> + <nz-form-explain *ngIf="validateForm.get('description').dirty && validateForm.get('description').errors"> + <ng-container *ngIf="validateForm.get('description').hasError('required')"> + Please input application description + </ng-container> + </nz-form-explain> </nz-form-control> </nz-form-item> <nz-form-item> <nz-form-label [nzSpan]="8" nzFor="applicationType" nzRequired>Application Type</nz-form-label> <nz-form-control [nzSpan]="12" [ngClass]="{'disabled-item': isEdit}"> - <nz-select name="applicationType" [ngClass]="{'disabled-input': isEdit}" + <nz-select name="applicationType" [ngClass]="{'disabled-select': isEdit}" nzPlaceHolder="Select Application Type" formControlName="applicationType"> <nz-option nzValue="Knowledge Assistant" nzLabel="Knowledge Assistant"></nz-option> </nz-select> @@ -52,7 +58,7 @@ <nz-form-item> <nz-form-label [nzSpan]="8" nzFor="selectedOperator" nzRequired>Operator Name</nz-form-label> <nz-form-control [nzSpan]="12" [ngClass]="{'disabled-item': isEdit}"> - <nz-select name="selectedOperator" [ngClass]="{'disabled-input': isEdit}" + <nz-select name="selectedOperator" [ngClass]="{'disabled-select': isEdit}" nzPlaceHolder="Select Operator" formControlName="selectedOperator" (ngModelChange)="handleOperatorChange($event)"> <nz-option *ngFor="let operator of operators" [nzValue]="operator" @@ -66,7 +72,7 @@ <nz-form-item> <nz-form-label [nzSpan]="8" nzFor="selectedPlatform" nzRequired>MaaS Platform Name</nz-form-label> <nz-form-control [nzSpan]="12" [ngClass]="{'disabled-item': isEdit}"> - <nz-select name="selectedPlatform" [ngClass]="{'disabled-input': isEdit}" + <nz-select name="selectedPlatform" [ngClass]="{'disabled-select': isEdit}" nzPlaceHolder="Select Platform" formControlName="selectedPlatform" (ngModelChange)="handleMaasChange($event)"> <nz-option *ngFor="let platform of filteredPlatforms" [nzValue]="platform.maaSPlatformId" @@ -105,8 +111,8 @@ <nz-form-item> <nz-form-label [nzSpan]="8" nzFor="prompt" nzRequired>Prompt</nz-form-label> <nz-form-control [nzSpan]="12"> - <textarea #myTextarea id="myTextarea" rows="2" nz-input formControlName="prompt" [placeholder]="'maas.application.promptTip' | translate" maxlength="1000" minlength="20" (input)="updateCharCount()"></textarea> - <div #charCount id="charCount">0/1000</div> + <textarea #promptTextarea class="myTextarea" rows="2" nz-input formControlName="prompt" [placeholder]="'maas.application.promptTip' | translate" maxlength="1000" minlength="20" (input)="maasService.updateCharCount(promptTextarea,promptCharCount)"></textarea> + <div #promptCharCount id="charCount">0/1000</div> <nz-form-explain *ngIf="validateForm.get('prompt').dirty && validateForm.get('prompt').errors"> {{ 'maas.application.promptTip' | translate}} </nz-form-explain> @@ -115,7 +121,8 @@ <nz-form-item> <nz-form-label [nzSpan]="8" nzFor="openingRemarks" nzRequired>Opening Remarks</nz-form-label> <nz-form-control [nzSpan]="12"> - <textarea rows="2" nz-input formControlName="openingRemarks"></textarea> + <textarea #orTextarea class="myTextarea" rows="2" nz-input formControlName="openingRemarks" maxlength="500" (input)="maasService.updateCharCount(orTextarea,orCharCount)"></textarea> + <div #orCharCount id="charCount">0/500</div> <nz-form-explain *ngIf="validateForm.get('openingRemarks').dirty && validateForm.get('openingRemarks').errors"> Please input opening remarks! </nz-form-explain> @@ -158,4 +165,8 @@ </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/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<void>(); - @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<void> { @@ -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; - } } |