From 9b7c41cc4a49bc1980ed48d6a29fc28f1b291417 Mon Sep 17 00:00:00 2001
From: guochuyicmri <guochuyi@chinamobile.com>
Date: Wed, 3 Apr 2019 18:11:44 +0800
Subject: Fix instance instantiation for CCVPN

Change-Id: I6c902286db6730192c3127754b5f452258c12ee2
Issue-ID: USECASEUI-220
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>
---
 .../ccvpn-creation/ccvpn-creation.component.html   | 42 +++++++++---------
 .../app/ccvpn-creation/ccvpn-creation.component.ts | 50 ++++++++++------------
 2 files changed, 43 insertions(+), 49 deletions(-)

(limited to 'usecaseui-portal/src/app/ccvpn-creation')

diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
index f64e1237..2f0469c2 100644
--- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
@@ -284,17 +284,17 @@
                     <tr *ngFor="let item of siteModalTable.data; let i = index;">
                         <td>{{i+1}}</td>
                         <td>
-                            <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_name}}</span>
-                            <input nz-input [(ngModel)]="siteWanParams.sitewanport_name" *ngIf="wanPortEditNum==(i+1) && wanPortModal">
+                            <span *ngIf="!item.tabInputShow">{{item.sitewanport_name}}</span>
+                            <input nz-input [(ngModel)]="item.sitewanport_name" *ngIf="item.tabInputShow">
                         </td>
                         <td>
-                            <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_description}}</span>
-                            <input nz-input [(ngModel)]="siteWanParams.sitewanport_description" *ngIf="wanPortEditNum==(i+1) && wanPortModal">
+                            <span *ngIf="!item.tabInputShow">{{item.sitewanport_description}}</span>
+                            <input nz-input [(ngModel)]="item.sitewanport_description" *ngIf="item.tabInputShow">
                         </td>
                         <td>
-                            <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_portType}}</span>
-                            <nz-select style="width: 100px;" [(ngModel)]="siteWanParams.sitewanport_portType" nzAllowClear
-                                       nzPlaceHolder="Choose" *ngIf="wanPortEditNum==(i+1) && wanPortModal">
+                            <span *ngIf="!item.tabInputShow">{{item.sitewanport_portType}}</span>
+                            <nz-select style="width: 100px;" [(ngModel)]="item.sitewanport_portType" nzAllowClear
+                                       nzPlaceHolder="Choose" *ngIf="item.tabInputShow">
                                 <nz-option nzValue="GE" nzLabel="GE"></nz-option>
                                 <nz-option nzValue="FE" nzLabel="FE"></nz-option>
                                 <nz-option nzValue="XGE" nzLabel="XGE"></nz-option>
@@ -304,32 +304,32 @@
                             </nz-select>
                         </td>
                         <td>
-                            <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_portNumber}}</span>
-                            <input nz-input [(ngModel)]="siteWanParams.sitewanport_portNumber" *ngIf="wanPortEditNum==(i+1) && wanPortModal">
+                            <span *ngIf="!item.tabInputShow">{{item.sitewanport_portNumber}}</span>
+                            <input nz-input [(ngModel)]="item.sitewanport_portNumber" *ngIf="item.tabInputShow">
                         </td>
                         <td>
-                            <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_ipAddress}}</span>
-                            <input nz-input [(ngModel)]="siteWanParams.sitewanport_ipAddress" *ngIf="wanPortEditNum==(i+1) && wanPortModal">
+                            <span *ngIf="!item.tabInputShow">{{item.sitewanport_ipAddress}}</span>
+                            <input nz-input [(ngModel)]="item.sitewanport_ipAddress" *ngIf="item.tabInputShow">
                         </td>
                         <td>
-                              <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_providerIpAddress}}</span>
-                            <input nz-input [(ngModel)]="siteWanParams.sitewanport_providerIpAddress" *ngIf="wanPortEditNum==(i+1) && wanPortModal">
+                              <span *ngIf="!item.tabInputShow">{{item.sitewanport_providerIpAddress}}</span>
+                            <input nz-input [(ngModel)]="item.sitewanport_providerIpAddress" *ngIf="item.tabInputShow">
                         </td>
                         <td>
-                              <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_transportNetworkName}}</span>
-                            <input nz-input [(ngModel)]="siteWanParams.sitewanport_transportNetworkName" *ngIf="wanPortEditNum==(i+1) && wanPortModal">
+                              <span *ngIf="!item.tabInputShow">{{item.sitewanport_transportNetworkName}}</span>
+                            <input nz-input [(ngModel)]="item.sitewanport_transportNetworkName" *ngIf="item.tabInputShow">
                         </td>
                         <td>
-                              <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_inputBandwidth}}</span>
-                            <input nz-input [(ngModel)]="siteWanParams.sitewanport_inputBandwidth" *ngIf="wanPortEditNum==(i+1) && wanPortModal">
+                              <span *ngIf="!item.tabInputShow">{{item.sitewanport_inputBandwidth}}</span>
+                            <input nz-input [(ngModel)]="item.sitewanport_inputBandwidth" *ngIf="item.tabInputShow">
                         </td>
                         <td>
-                              <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_outputBandwidth}}</span>
-                            <input nz-input [(ngModel)]="siteWanParams.sitewanport_outputBandwidth" *ngIf="wanPortEditNum==(i+1) && wanPortModal">
+                              <span *ngIf="!item.tabInputShow">{{item.sitewanport_outputBandwidth}}</span>
+                            <input nz-input [(ngModel)]="item.sitewanport_outputBandwidth" *ngIf="item.tabInputShow">
                         </td>
                         <td>
-                            <span class="action" (click)="editWanPort(i+1)"><i class="anticon anticon-edit" style="margin: 0 5px"></i></span>
-                            <span class="action" (click)="deleteModel(i+1)"><i class="anticon anticon-delete"></i></span>
+                            <span class="action" (click)="editWanPort(i+1,item,siteWanData)"><i class="anticon anticon-edit" style="margin: 0 5px"></i></span>
+                            <span class="action" (click)="deleteModel(i+1,item,siteWanData)"><i class="anticon anticon-delete"></i></span>
                         </td>
                     </tr>
                     <!-- </ng-template> -->
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts
index 40ea977d..8ea51321 100644
--- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts
@@ -75,8 +75,12 @@ export class CcvpnCreationComponent implements OnInit {
             })
             this.siteWanNames = Object.values(wanportnames);
             this.siteWanNames.forEach((item)=>{
-              this.siteWanData.push(this.siteWanParams);  //Add a table according to the wanport group
+              this.siteWanData.push(Object.assign({},this.siteWanParams));  //Add a table according to the wanport group
             })
+                        this.siteWanData.forEach((item,index) => {
+                            item.indexs=index;
+                        });
+                        console.log(this.siteWanData)
             // console.log(this.sotnNames)
             // console.log(this.siteNames)
             // console.log(this.siteBaseNames)
@@ -163,39 +167,29 @@ export class CcvpnCreationComponent implements OnInit {
     sitewanport_providerIpAddress:null,
     sitewanport_transportNetworkName:null,
     sitewanport_inputBandwidth:null,
-    sitewanport_outputBandwidth:null
+        sitewanport_outputBandwidth: null,
+        tabInputShow:false,
+        indexs:null,
   };
   siteWanNames = [] //Real name
-  wanPortModal = false;  //Modal box display hidden
   wanPortEditNum = 0;//Which line to edit
-    editWanPort(num) {
-        // if(){
+    editWanPort(num,item,siteWanData) {     
         console.log(this)
-        console.log(num)
-        if (!this.wanPortModal) {
-            console.log(11111)
-            console.log(this.wanPortModal)
-            this.wanPortModal = true;
-            this.wanPortEditNum = num;
-            this.siteWanParams = Object.assign({}, this.siteWanData[num - 1]);
-        } else {
-            console.log(22222)
-            let inputsData = Object.assign({}, this.siteWanParams); //Create a new object, disconnect the original reference, because you want to empty the modal box later
-            inputsData.sitewanport_deviceName = this.siteCpeData.device_name;
-            this.siteWanData[this.wanPortEditNum - 1] = inputsData;
-            this.siteWanData = [...this.siteWanData]; //Table refresh
-            Object.keys(this.siteWanParams).forEach((item) => { //Clear modal box
-                this.siteWanParams[item] = null;
-            })
-            this.wanPortModal = false;
-            console.log(this.siteWanData)
-        }
-        // }
+        console.log(siteWanData)
+        console.log(item)      
+        siteWanData.map((its) => {
+            if(its.indexs==item.indexs){
+                if (its.tabInputShow==false) {
+                       this.wanPortEditNum = num;                   
+                    item.tabInputShow=true;
+                } else {                   
+                    item.tabInputShow=false;
+                    console.log(this.siteWanData)
+                }
+            }
+        })
 
     }
-  wanPortModal_Cancel(){
-    this.wanPortModal = false;
-  }
 
 
   // Get the site address, manual file
-- 
cgit 1.2.3-korg