feat:intentBasedService predict

Signed-off-by: liuwh7 <liuwh7@asiainfo.com>
Change-Id: I08e0d7a5141325f830bf522b42894b399ea6e7af
Issue-ID: REQ-1075

4 files changed, 162 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-predict/intent-based-predict.component.html b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-predict/intent-based-predict.component.html
new file mode 100644
index 00000000..bdd59ea3
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-predict/intent-based-predict.component.html
@@ -0,0 +1,42 @@
+<div class="subnet_params_container">
+  <div class="form_class">
+    <form nz-form class='text-form-class'>
+      <nz-form-item>
+        <nz-form-control [nzSpan]="24">
+          <textarea
+            [id]="communicationMessage"
+            nz-tooltip
+            nz-input
+            placeholder="Please input communicationMessage"
+            [nzAutosize]="{ minRows: 6, maxRows: 6 }"
+            [(ngModel)]="communicationMessage"
+            name="communicationMessage">
+          </textarea>
+        </nz-form-control>
+      </nz-form-item>
+    </form>
+  </div>
+  <div class="submit">
+    <button
+      nz-button
+      nzType="primary"
+      nzSize="middle"
+      (click)="submitFormMessage()"
+      [nzLoading]="isConfirmCreating"
+      form="createForm">
+        <span>
+          Submit
+        </span>
+    </button>
+  </div>
+  <app-cloud-leased-line-modal
+    [modelParams]="modalParam"
+    [cloudLeasedLineShowFlag]="cloudModalShowFlag"
+    (cancelEmitter)="modalClose()"
+  ></app-cloud-leased-line-modal>
+  <app-business-order
+    [modelParams]="modalParam"
+    [showModel]="businessModalShowFlag"
+    (cancel)="modalClose()"
+  ></app-business-order>
+</div>
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-predict/intent-based-predict.component.less b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-predict/intent-based-predict.component.less
new file mode 100644
index 00000000..e71b27cc
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-predict/intent-based-predict.component.less
@@ -0,0 +1,22 @@
+.subnet_params_container {
+  // padding-left: 3%;
+  // padding-right: 3%;
+  .form_class {
+    padding: 0 100px;
+  }
+  .submit {
+    text-align: center;
+    margin-top: 30px;
+  }
+}
+.ant-form-item {
+  margin-top: 20px;
+  margin-bottom: -5px;
+}
+
+.validateRules{
+  color: red;
+}
+.error-input-border{
+  border-color: red!important;
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-predict/intent-based-predict.component.spec.ts b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-predict/intent-based-predict.component.spec.ts
new file mode 100644
index 00000000..ffdd130f
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-predict/intent-based-predict.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputBusinessOrderComponent } from './input-business-order.component';
+
+describe('InputBusinessOrderComponent', () => {
+  let component: InputBusinessOrderComponent;
+  let fixture: ComponentFixture<InputBusinessOrderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InputBusinessOrderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InputBusinessOrderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-predict/intent-based-predict.component.ts b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-predict/intent-based-predict.component.ts
new file mode 100644
index 00000000..d88afa9c
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-predict/intent-based-predict.component.ts
@@ -0,0 +1,73 @@
+import { Component, OnInit } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd';
+import { intentBaseService } from '../../../../core/services/intentBase.service';
+
+@Component({
+  selector: 'app-intent-based-predict',
+  templateUrl: './intent-based-predict.component.html',
+  styleUrls: ['./intent-based-predict.component.less']
+})
+export class IntentBasedPredictComponent implements OnInit {
+
+  constructor(
+    private myhttp: intentBaseService,
+    private msg: NzMessageService
+  ) {}
+  
+  // textarea input predict param
+  communicationMessage: String = "";
+  // button loading
+  isConfirmCreating: boolean = false;
+  // modal param
+  modalParam: Object = {};
+  // cloud modal show flag
+  cloudModalShowFlag: boolean = false;
+  // business modal show flag
+  businessModalShowFlag: boolean = false;
+
+  ngOnInit() {
+    this.communicationMessage = '';
+  }
+
+  ngOnChange() {}
+
+  submitFormMessage(): void {
+    this.isConfirmCreating = true;
+    this.myhttp.intentBasedUnifyPredict({
+      "text": this.communicationMessage
+    }).subscribe(
+      (response) => {
+        this.isConfirmCreating = false;
+        const { code, message, data: { type, formData } } = response;
+        if (code !== 200) {
+          this.msg.error(message);
+          return;
+        }
+
+        this.modalParam = {
+          ...formData,
+          intentContent: this.communicationMessage
+        };
+
+        if (type === 'ccvpn') {
+          this.cloudModalShowFlag = true;
+        }
+
+        if (type === '5gs') {
+          this.businessModalShowFlag = true;
+        }
+      },
+      (err) => {
+        this.isConfirmCreating = false;
+        console.log(err);
+      }
+    )
+  }
+
+  modalClose() {
+    this.cloudModalShowFlag = false;
+    this.businessModalShowFlag = false;
+    this.modalParam = {};
+    this.communicationMessage = '';
+  }
+}