Fix instance detail for CCVPN

Change-Id: I8f1bbbfa80d48ec91d3929069771638c9f5dbb8a
Issue-ID: USECASEUI-222
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

3 files changed, 243 insertions, 12 deletions

diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
index 272e0b8f..d0479145 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
@@ -39,6 +39,19 @@ hr {
     position: relative;
     display: inline-block;
 }
+.model .submit{
+    position: absolute;
+    width: 90px;
+    height: 35px;
+    top: 10px;
+    right: 85px;
+    color: #fff;
+    font-size: 18px;
+    background: #0DA9E2;
+    border-radius: 4px;
+    border: none!important;
+    border-color: rgba(0,0,0,0)!important;
+}
 .model .back,.model .back:hover{
     position: absolute;
     top: 10px;
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
index 96d5dcb5..cf87ff16 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
@@ -19,6 +19,8 @@
   <div class="top-title">
     <h3 class="title fl">{{detailParams['service-instance-name']}} Instance Detail</h3>
     <div class="fl" style="width: 20%">
+      <button class="submit" nz-button (click)="submitUpdate()" *ngIf="upDateShow"><span> {{"i18nTextDefine_Update" | translate}} </span>
+      </button>
       <button class="back" nz-button (click)="goback()"></button>
     </div>
   </div>
@@ -164,7 +166,7 @@
     </div>
   </div>
   <div class="detaildata">
-    <nz-tabset [nzTabPosition]="'top'" [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle>
+    <nz-tabset [nzTabPosition]="'top'" [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle [nzSelectedIndex]="upDateShow == false?0:1">
       <nz-tab nzTitle="Service Info">
         <div class="service-title" style="clear: both">
           <span class="lable" style="width: 60px">name:</span>
@@ -206,7 +208,7 @@
         <div class="site">
           <div style="height: 10px">
             <h3 style="float: left;color: #3C4F8C">Site List</h3>
-            <button nz-button (click)="addSite()" class="addListBtn"
+            <button nz-button *ngIf="upDateShow" (click)="addSite()" class="addListBtn"
                     style="float: right;margin-right: 10px"><i class="anticon anticon-plus"
                                                                style="transform: scale(1.2);font-weight: 700"></i>{{"i18nTextDefine_Add" | translate}}
             </button>
@@ -236,7 +238,10 @@
               <td>{{item.sdwansite_emails}}</td>
               <td>
                 <span class="action" (click)="showSiteDetail(i+1)"><i class="anticon anticon-bars"></i></span>
-                <span class="action" (click)="deleteSite(i+1)"><i class="anticon anticon-delete"></i></span>
+                &nbsp;
+                <span class="action" (click)="editUpdateSite(i+1)" *ngIf="sitenum[i]"><i class="anticon anticon-edit"></i></span>
+                &nbsp;
+                <span class="action" (click)="deleteUpdateSite(i+1)" *ngIf="upDateShow"><i class="anticon anticon-delete"></i></span>
               </td>
             </tr>
 
@@ -329,5 +334,67 @@
       <button nz-button nzType="primary" (click)="detailsite_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button>
     </div>
   </div>
-  <div class="mask" *ngIf="sotnVpnDetailShow || siteDetail" (click)="hiddenModel()"></div>
+  <!-- site update model -->
+  <div class="sitemodel" *ngIf="siteAddModelShow">
+    <h3> {{"i18nTextDefine_Base" | translate}} </h3>
+    <div class="inputs">
+      <ul>
+        <li *ngFor="let item of this.templateParameters.site.sdwansiteresource_list">
+          <span>{{item.lableShow}}:</span>
+          <input nz-input [(ngModel)]="siteBaseData[item.lable]"></li>
+      </ul>
+    </div>
+    <div>
+      <h3>Sdwandevice</h3>
+      <div class="inputs">
+        <ul>
+          <li *ngFor="let item of this.templateParameters.site.sdwandevice_list">
+            <span>{{item.lable}}:</span>
+            <input nz-input [(ngModel)]="siteCpeData[item.lable]">
+          </li>
+        </ul>
+      </div>
+      <h3>Sdwansitewan List</h3>
+      <div>
+        <div style="width: 100%;text-align: right">
+          <button nz-button (click)="updateSiteWan()" class="addListBtn"><i class="anticon anticon-plus"
+                                                                         style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}}
+          </button>
+        </div>
+        <table class="siteWanTab">
+          <thead>
+          <tr>
+            <th width="4%"> NO.</th>
+            <th *ngFor="let key of getKeys(this.siteWanParams)">{{key}}</th>
+            <th width="7%"> Action</th>
+          </tr>
+          </thead>
+          <tbody>
+          <!-- <ng-template ngFor let-data [ngForOf]="siteModalTable.data" let-i="index"> -->
+          <tr *ngFor="let item of siteWanData; let i = index;"
+              [ngClass]="{'tr-border':item.tabInputShowWanPort ==false}">
+            <td>{{i+1}}</td>
+            <td *ngFor="let key of getKeys(item);let a = index;">
+                            <span *ngIf="!tabInputShowWanPort[i]">{{item[key]}}</span>
+              <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowWanPort[i] ">
+            </td>
+            <td>
+                            <span class="action" (click)="editUpdateWanPort(i+1,item,siteWanData)"><i
+                                    class="anticon anticon-edit" style="margin: 0 5px;"></i></span>
+              <span class="action" (click)="deleteUpdateWanPort(i+1,item,siteWanData)"><i
+                      class="anticon anticon-delete"></i></span>
+            </td>
+          </tr>
+          <!-- </ng-template> -->
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="action">
+      <button nz-button nzType="primary" (click)="updatesite_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button>
+      <button nz-button nzType="primary" (click)="updatesite_OK()">{{"i18nTextDefine_Add" | translate}}</button>
+    </div>
+  </div>
+  <div class="mask" *ngIf="sotnVpnDetailShow || siteDetail || siteAddModelShow" (click)="hiddenModel()"></div>
 </div>
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
index aff3ef9e..484a6d93 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
@@ -35,6 +35,7 @@ export class CcvpnDetailComponent implements OnInit {
     @Input() detailParams;
     @Input() upDateShow;
     @Output() closeDetail = new EventEmitter();
+    @Output() closeUpdate = new EventEmitter();
 
     tabBarStyle = {
         "height": "58px",
@@ -63,7 +64,7 @@ export class CcvpnDetailComponent implements OnInit {
     sotnInfo = {};//sotnmodel  The first part of sotnInfo
     sotnSdwansitelanData = [];//sotnmodel The second part of the data  sdwansitelan Table
     sotnSdwansitelanParams = {};//sdwansitelan Table  Detailed parameters of each line of data
-
+    tabInputShowSdwansitelan = [];//sdwansitelan table input and span 
     // Site List
     siteTableData = [];
     siteBaseData = {}; //sitemodel one sdwansiteresource_list
@@ -72,6 +73,8 @@ export class CcvpnDetailComponent implements OnInit {
     // Wan Port
     siteWanData = [];  //sitemodel three wan port Table data
     siteWanParams = {}; //wan port Table Detailed parameters of each line of data
+    tabInputShowWanPort = [];//wan port table input and span
+    sitenum = [];
     getKeys(item) {
         return Object.keys(item);
     }
@@ -84,7 +87,9 @@ export class CcvpnDetailComponent implements OnInit {
         console.log(this.input_parameters);
         this.templateParameters.service = {
             name:  this.input_parameters.service.name,
-            description:  this.input_parameters.service.description
+            description: this.input_parameters.service.description,
+            serviceInvariantUuid: this.input_parameters.service["serviceInvariantUuid"],
+            serviceUuid: this.input_parameters.service["serviceUuid"]
         };
         let inputs = this.input_parameters.service.parameters.requestInputs;
         //筛选 分离 sotnvpn数据
@@ -109,6 +114,7 @@ export class CcvpnDetailComponent implements OnInit {
         //筛选 分离 site数据
         inputs["sdwansiteresource_list"].map((item, index) => {
             this.siteTableData.push(item);
+            this.sitenum.push(false);
         });
 
         let sdwansiteresource_list = inputs["sdwansiteresource_list"][0];
@@ -188,6 +194,11 @@ export class CcvpnDetailComponent implements OnInit {
                 }
             }
         });
+        this.templateParameters.site.sdwandevice_list.map((item, index) => {
+            if (this.getKeys(item).indexOf("lable") == -1) {
+                this.templateParameters.site.sdwandevice_list.splice(index, 1)
+            }
+        });
         this.templateParameters.site.sdwansitewan_list.map((item, index) => {
             let input = {};
             for (var keys in item) {
@@ -199,6 +210,9 @@ export class CcvpnDetailComponent implements OnInit {
             }
         });
         this.siteWanData.push(this.siteWanParams);
+        this.siteWanData.map((item, index) => {
+            this.tabInputShowWanPort[index] = true;
+        });
     }
 
     //sotnVpn detail show
@@ -226,7 +240,7 @@ export class CcvpnDetailComponent implements OnInit {
         this.isEditSite = num;
         console.log(this.siteTableData[num - 1]);
         console.log(this.siteCpeData);
-        console.log(this.templateParameters.site.sdwandevice_list);
+        console.log(this.templateParameters);
         Object.keys(this.siteBaseData).forEach((item) => {
             this.siteBaseData[item] = this.siteTableData[num - 1][item];
         });
@@ -239,20 +253,130 @@ export class CcvpnDetailComponent implements OnInit {
     detailsite_cancel(){
         this.siteDetail = false;
     }
-    deleteSite(num){
+    deleteUpdateSite(num) {
         this.siteTableData = this.siteTableData.filter((d, i) => i !== num - 1);
+        this.sitenum.splice(num - 1, 1);
         console.log(this.siteTableData)
+        console.log(this.sitenum)
     }
 
-    addSite(){
 
+    // site addModel
+    siteAddModelShow = false;
+
+    addSite() {
+        this.siteAddModelShow = true;
+        this.isEditSite = 0;
+        console.log(this.siteWanParams);
+        console.log(this.templateParameters);
+    }
+
+    updatesite_cancel() {
+        Object.keys(this.siteBaseData).forEach((item) => { 
+            this.siteBaseData[item] = null;
+        })
+        Object.keys(this.siteCpeData).forEach((item) => { 
+            this.siteCpeData[item] = null;
+        })
+        this.siteWanData.forEach((item, index) => {
+            if (index > 0) {
+                this.siteWanData.splice(index, 1);
+            } else {
+                Object.keys(item).forEach((item2) => {
+                    item[item2] = null;
+                });
+                this.tabInputShowWanPort[index] = true;
+            }
+
+        });
+        this.siteAddModelShow = false;
+    }
+
+    updatesite_OK() {
+        let inputs = {
+            "sdwandevice_list": [],
+            "sdwansitewan_list": []
+        };
+        inputs = Object.assign(inputs, this.siteBaseData);
+        inputs["sdwandevice_list"][0] = Object.assign({}, this.siteCpeData);
+        inputs["sdwansitewan_list"] = this.siteWanData.map((item) => {
+            return Object.assign({}, item);
+        });
+        console.log(inputs);
+        if (this.isEditSite) {
+            // Edit status does not increase
+            this.siteTableData[this.isEditSite - 1] = inputs;
+            this.siteTableData = [...this.siteTableData]; //Table refresh
+        } else {
+            // this.siteTableData.push(inputs);
+            this.siteTableData = [...this.siteTableData, inputs];
+            this.sitenum = [...this.sitenum, true];
+        }
+
+        Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box
+            this.siteBaseData[item] = null;
+        });
+        Object.keys(this.siteCpeData).forEach((item) => { //Clear modal box
+            this.siteCpeData[item] = null;
+        });
+        this.siteWanData.forEach((item, index) => {
+            if (index > 0) {
+                this.siteWanData.splice(index, 1);
+                this.tabInputShowWanPort.splice(index, 1);
+            } else {
+                Object.keys(item).forEach((item2) => {
+                    item[item2] = null;
+                });
+                this.tabInputShowWanPort[index] = true;
+            }
+
+        });
+        console.log(this.siteTableData);
+        this.siteAddModelShow = false;
     }
 
+    //add.edit，detele siteWanPort
+    updateSiteWan() {
+        console.log(this.tabInputShowWanPort)
+        if (this.tabInputShowWanPort.indexOf(true) > -1) {//Adding new rows is not allowed when there is a row of data being edited
+            return false;
+        }
+        let addNum = this.siteWanData.length;
+        let inputsData = Object.assign({}, this.siteWanParams);
+        Object.keys(inputsData).forEach((item) => {//Add a new line of empty data
+            if (item != "description") {
+                inputsData[item] = null;
+            }
+        });
+        this.siteWanData[addNum] = inputsData;
+        this.tabInputShowWanPort[addNum] = true;
+        this.siteWanData = [...this.siteWanData]; //Table refresh
+        console.log(this.siteWanData)
+    }
 
+    editUpdateWanPort(num, item, siteWanData) {
+        console.log(item)
+        if (this.tabInputShowWanPort[num - 1] == false) {
+            this.tabInputShowWanPort[num - 1] = true;
+        } else {
+            this.tabInputShowWanPort[num - 1] = false;
+        }
+        console.log(siteWanData);
+    }
 
+    deleteUpdateWanPort(num, item, siteWanData) {
+        if (this.siteWanData.length <= 1) {
+            console.log("num>=1", "siteWanData");
+            return false;
+        }
+        this.siteWanData = this.siteWanData.filter((d, i) => i !== num - 1);
+        console.log(this.siteWanData)
+    }
 
-    localSite = [];
-    outerSite = [];
+    // site节点图形描绘
+    // site分类，根据site查tp pnf --> allotted-resource
+    localSite = [];//本地site
+    outerSite = [];//外部site
 
     getSiteAResource(){
         return new Promise((res,rej)=>{
@@ -440,7 +564,34 @@ export class CcvpnDetailComponent implements OnInit {
         }
     ];
 
-    goback(){
+    submitUpdate() {
+        let globalCustomerId = this.detailParams.customer.id;
+        let globalServiceType = this.detailParams.serviceType.name;
+        let servicebody = {
+            service: {
+                name: this.templateParameters.service["name"],
+                description: this.templateParameters.service["description"],
+                serviceInvariantUuid: this.templateParameters.service["serviceInvariantUuid"],
+                serviceUuid: this.templateParameters.service["serviceUuid"],
+                globalSubscriberId: globalCustomerId,  //customer.id
+                serviceType: globalServiceType,  //serviceType.value
+                parameters: {
+                    locationConstraints: [],
+                },
+                resources: [],
+                requestInputs: {
+                    sdwanvpnresource_list: [],
+                    sdwansiteresource_list: []
+                }
+            }
+        };
+        servicebody.service.requestInputs.sdwanvpnresource_list = servicebody.service.requestInputs.sdwanvpnresource_list.concat(this.sotnVpnTableData);
+        servicebody.service.requestInputs.sdwansiteresource_list = servicebody.service.requestInputs.sdwansiteresource_list.concat(this.siteTableData);
+        console.log(servicebody);
+        this.closeUpdate.emit(servicebody);
+    }
+
+    goback() {
         this.closeDetail.emit();
     }