Intent analysis frontend

Issue-ID: USECASEUI-711

Signed-off-by: zoulingli128 <zll_1208@126.com>
Change-Id: I8f8636f6b47c5ba25e6f342c484fd8ffb5ed1d6d

4 files changed, 193 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.html b/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.html
new file mode 100644
index 00000000..b20ba987
--- /dev/null
+++ b/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.html
@@ -0,0 +1,59 @@
+<nz-modal [(nzVisible)]="showModel" nzTitle="Add Expectation" nzCentered (nzOnCancel)="handleCancel()"
+    (nzOnOk)="handleOk()" nzWidth="52%" nzHeight="600px" class="intent-management-modal">
+    <div class="add-expectation-container">
+      <p class="expectation-p">
+        <span class="left"> Expectation Name:</span>
+        <input nz-input id="expectation_name" [(ngModel)]="this.defaultParams['expectationName']">
+      </p>
+      <p class="expectation-p">
+        <span class="left"> Expectation Type:</span>
+        <nz-select [(ngModel)]="this.defaultParams['expectationType']">
+          <nz-option [nzValue]="itemType.value" [nzLabel]="itemType.label" *ngFor="let itemType of expectationTypeList"></nz-option>
+        </nz-select>
+      </p>
+      <p class="expectation-p">
+        <span class="left"> Object Instance:</span>
+        <input nz-input id="object_instance" [(ngModel)]="this.defaultParams['expectationObject']['objectInstance']">
+      </p>
+      <p class="expectation-p">
+        <span class="left"> Object Type:</span>
+        <nz-select [(ngModel)]="this.defaultParams['expectationObject']['objectType']">
+          <nz-option [nzValue]="itemType.value" [nzLabel]="itemType.label" *ngFor="let itemType of expectationObjectTypeList"></nz-option>
+        </nz-select>
+      </p>
+      <div class="target-div">
+        <p class="title">
+          Target List
+          <button nz-button nzType="primary" class="add" (click)="inputIntentTargetShow()">
+            {{"i18nTextDefine_Create" | translate}} </button>
+        </p>
+        <nz-table
+          #basicTable [nzData]="listOfData"
+          [nzFrontPagination]="false"
+          [nzShowPagination]="false"
+        >
+          <thead>
+            <tr>
+              <th nzWidth="10%">No</th>
+              <th nzWidth="20%">Target Name</th>
+              <th nzWidth="15%">{{"i18nTextDefine_Action" | translate}}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index">
+              <tr>
+                <td>{{i+1}}</td>
+                <td>{{ data.targetName }}</td>
+                <td>
+                  <em class="anticon anticon-edit" (click)="editTargetList(data,i)"></em>
+                  <em class="anticon anticon-delete" (click)="deleteTargetList(i)"></em>
+                </td>
+              </tr>
+            </ng-template>
+          </tbody>
+        </nz-table>
+      </div>
+      
+    </div>
+  </nz-modal>
+<app-input-intent-state [showModel]="intentTargetShow" (modalOpreation)="inputIntentStateClose($event)" [editTargetTableData]="editTargetTableList"></app-input-intent-state>
diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.less b/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.less
diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.spec.ts b/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.spec.ts
new file mode 100644
index 00000000..797eddea
--- /dev/null
+++ b/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputIntentExpectationComponent } from './input-intent-expectation.component';
+
+describe('InputIntentExpectationComponent', () => {
+  let component: InputIntentExpectationComponent;
+  let fixture: ComponentFixture<InputIntentExpectationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InputIntentExpectationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InputIntentExpectationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.ts b/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.ts
new file mode 100644
index 00000000..3848ffbb
--- /dev/null
+++ b/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.ts
@@ -0,0 +1,109 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Util } from '../../../shared/utils/utils';
+
+@Component({
+  selector: 'app-input-intent-expectation',
+  templateUrl: './input-intent-expectation.component.html',
+  styleUrls: ['../intent-management.component.less']
+})
+export class InputIntentExpectationComponent implements OnInit {
+
+  constructor(
+    private Util: Util
+  ) { }
+
+  @Input() showModel: boolean;
+  @Output() modalOpreation = new EventEmitter();
+  @Input() editExpectationTableData;
+
+  defaultParams:Object={
+    expectationId:'',
+    expectationName:'',
+    expectationType:'DELIVERY',
+    expectationObject:{
+      objectType:'CLL_VPN',
+      objectInstance:'',
+    },
+    expectationTargets:[]
+  };
+  currentIndex:number = -1;
+
+  listOfData: any[] = [];
+
+  intentTargetShow: boolean = false;
+  editTargetTableList: Object={};
+
+  expectationTypeList: any[] = [];
+  expectationObjectTypeList: any[] = [];
+
+  ngOnInit() {
+    this.expectationTypeList = [
+      { label:'DELIVERY', value:'DELIVERY' },
+      { label:'ASSURANCE', value:'ASSURANCE' }
+    ]
+    this.expectationObjectTypeList = [
+      { label:'CLL_VPN', value:'CLL_VPN' }
+    ]
+  }
+
+  ngOnChanges() {
+    if (this.showModel) {
+      if (JSON.stringify(this.editExpectationTableData)!=='{}') {
+        this.defaultParams=this.editExpectationTableData
+        this.listOfData=this.defaultParams['expectationTargets']
+      }
+    }
+	}
+
+  handleCancel(): void {
+    this.modalOpreation.emit({ "cancel": true });
+    this.clearExpectationData()
+  }
+  handleOk(): void {
+    if(JSON.stringify(this.editExpectationTableData)==='{}'){
+      this.defaultParams['expectationId']=this.Util.getUuid()
+    }
+    this.modalOpreation.emit({ "cancel": false, "param": this.defaultParams });
+    this.clearExpectationData()
+  }
+  editTargetList(data,i): void {
+    this.editTargetTableList=JSON.parse(JSON.stringify(data))
+    this.currentIndex=i
+    this.intentTargetShow = true
+  }
+  deleteTargetList(i): void{
+    this.listOfData.splice(i,1)
+  }
+  clearExpectationData(): void{
+    this.showModel = false;
+    this.defaultParams = {
+      expectationId:'',
+      expectationName:'',
+      expectationType:'DELIVERY',
+      expectationObject:{
+        objectType:'CLL_VPN',
+        objectInstance:'',
+      },
+      expectationTargets:[]
+    };
+    this.listOfData=[]
+  }
+  inputIntentTargetShow(): void {
+    this.intentTargetShow = true;
+  }
+  inputIntentStateClose($event: any): void {
+    this.intentTargetShow = false;
+    this.editTargetTableList={}
+    if ($event.cancel) {
+        return;
+    }
+    if(this.currentIndex>-1){
+      this.listOfData[this.currentIndex]=$event.param
+      this.currentIndex=-1
+    }else{
+      this.listOfData.push($event.param)
+    }
+    this.defaultParams['expectationTargets']=this.listOfData
+  }
+
+}