Optimize your code and add editing capabilities for your knowledge base and apps.

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

4 files changed, 152 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.html b/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.html
new file mode 100644
index 00000000..d2fb553b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.html
@@ -0,0 +1,18 @@
+<nz-modal [(nzVisible)]="showModal" [nzTitle]="title" (nzOnCancel)="handleCancel()"
+  (nzOnOk)="submitForm()" nzWidth="648px" nzHeight="800px">
+  <form nz-form [formGroup]="validateForm" (ngSubmit)="checkForm()">
+    <nz-form-item>
+      <nz-form-label [nzSpan]="8" nzFor="name" nzRequired>Application Name</nz-form-label>
+      <nz-form-control [nzSpan]="12">
+        <input nz-input formControlName="name" placeholder="Please input application name" />
+        <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">Please input application name</nz-form-explain>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-label [nzSpan]="8" nzFor="description">Application Description</nz-form-label>
+      <nz-form-control [nzSpan]="12">
+        <textarea rows="2" formControlName="description" nz-input></textarea>
+      </nz-form-control>
+    </nz-form-item>
+  </form>
+</nz-modal>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.less b/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.less
diff --git a/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.spec.ts b/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.spec.ts
new file mode 100644
index 00000000..40fc6bd5
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditApplicationComponent } from './edit-application.component';
+
+describe('EditApplicationComponent', () => {
+  let component: EditApplicationComponent;
+  let fixture: ComponentFixture<EditApplicationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditApplicationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditApplicationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.ts b/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.ts
new file mode 100644
index 00000000..380cd5ff
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/build/edit-application/edit-application.component.ts
@@ -0,0 +1,109 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MaasApi } from '@src/app/api/maas.api';
+import { NzMessageService } from 'ng-zorro-antd';
+import { Application } from '../application.type';
+
+@Component({
+  selector: 'app-edit-application',
+  templateUrl: './edit-application.component.html',
+  styleUrls: ['./edit-application.component.less']
+})
+export class EditApplicationComponent implements OnInit {
+  title = 'Edit Application';
+  @Input() showModal: boolean;
+  @Input() applicationId: string;
+  @Output() modalOpreation = new EventEmitter();
+  validateForm: FormGroup;
+  defalutApplication: Application = {
+  'applicationId': '',
+  'applicationName': '',
+  'applicationDescription': '',
+  'applicationType': '',
+  'operatorId': '',
+  'operatorName': '',
+  'maaSPlatformId': '',
+  'maaSPlatformName': '',
+  'knowledgeBaseName': '',
+  'knowledgeBaseId': '',
+  'largeModelName': '',
+  'largeModelId': '',
+  'prompt': '',
+  'temperature': 3,
+  'top_p': 3,
+  'openingRemarks': '',
+  }
+  application: Application = this.defalutApplication;
+  constructor(
+    private myhttp: MaasApi,
+    private message: NzMessageService,
+    private fb: FormBuilder,
+  ) { }
+
+  ngOnInit() {
+    this.validateForm = this.fb.group({
+      name: [this.application.applicationName, [Validators.required]],
+      description: [this.application.applicationDescription],
+    });
+    this.fetchApplication();
+  }
+
+  checkForm(): void {
+    for (const i in this.validateForm.controls) {
+      this.validateForm.controls[i].markAsDirty();
+      this.validateForm.controls[i].updateValueAndValidity();
+    }
+  }
+
+  submitForm(): void {
+    this.checkForm();
+    this.create();
+  }
+
+  fetchApplication(): void {
+    this.myhttp.getApplicationById(this.applicationId)
+      .subscribe(
+        (response) => {
+          if (response.result_header.result_code !== 200) {
+            this.message.error('get application error');
+            return;
+          }
+          this.application = response.result_body;
+          this.validateForm.patchValue({
+            name: this.application.applicationName,
+            description: this.application.applicationDescription
+          });
+        },
+        () => {
+          this.message.error('Failed to obtain knowledge base data');
+        }
+      )
+  }
+
+  handleCancel(): void {
+    this.showModal = false;
+    this.modalOpreation.emit({ 'cancel': true });
+  }
+
+  create() {
+    const metaData = {
+      ...this.application,
+      applicationName: this.validateForm.get('name').value,
+      applicationDescription: this.validateForm.get('description').value,
+    };
+    this.myhttp.updateApplication(metaData).subscribe(
+      (response) => {
+        if (response.result_header.result_code === 200) {
+          this.message.success('update knowledge base successfully');
+        } else {
+          this.message.error(response.result_header.result_message);
+        }
+        this.modalOpreation.emit({ 'cancel': false });
+      },
+      (error) => {
+        console.log('Upload failed', error);
+      }
+    );
+  }
+
+}