From 05fc71b2f0612509c4da0ad74bf15f7001ea4e34 Mon Sep 17 00:00:00 2001
From: "Gangarajula, Uday Bhasker (ug0221)" <ug0221@att.com>
Date: Thu, 12 Apr 2018 22:08:59 -0400
Subject: Resolved the issues with multiple templates

Issue-ID: APPC-707
Change-Id: Ibdf18a021ea453842ddf4001f947f1f4de276997
Signed-off-by: Gangarajula, Uday Bhasker (ug0221) <ug0221@att.com>
---
 .../reference-dataform.component.html              | 89 ++++++++--------------
 1 file changed, 33 insertions(+), 56 deletions(-)

(limited to 'src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html')

diff --git a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html
index 5aeb7ff..491aea2 100644
--- a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html
+++ b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html
@@ -21,8 +21,7 @@ limitations under the License.
 -->
 
 <simple-notifications [options]="options"></simple-notifications>
-<ng-progress [positionUsing]="'marginLeft'" [minimum]="0.15" [maximum]="1" [speed]="200" [showSpinner]="false" [direction]="'leftToRightIncreased'"
-    [color]="'#6ab344'" [trickleSpeed]="250" [thick]="true" [ease]="'linear'"></ng-progress>
+<ng-progress [positionUsing]="'marginLeft'" [minimum]="0.15" [maximum]="1" [speed]="200" [showSpinner]="false" [direction]="'leftToRightIncreased'" [color]="'#6ab344'" [trickleSpeed]="250" [thick]="true" [ease]="'linear'"></ng-progress>
 <form class="" novalidate #userForm="ngForm" (ngSubmit)="save(userForm.value,userForm.valid)">
     <div class="card">
 
@@ -30,8 +29,7 @@ limitations under the License.
             <div class="row" style="padding: 15px 25px">
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                     <label>Action*</label>
-                    <select class="form-control" required id="cmbAction" [(ngModel)]="referenceDataObject.action" (ngModelChange)="updateSessionValues($event,'action');actionChange($event,content,userForm);"
-                        #action="ngModel" name="action">
+                    <select class="form-control" required id="cmbAction" [(ngModel)]="referenceDataObject.action" (ngModelChange)="updateSessionValues($event,'action');actionChange($event,content,userForm);" #action="ngModel" name="action">
                         <option [value]="actionType"
                                 [ngClass]="{'selectedAction':selectedActions.indexOf(actionType)>-1}"
                                 [selected]="referenceDataObject.action===actionType"
@@ -42,20 +40,16 @@ limitations under the License.
                 </div>
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                     <label>VNF Type* </label>
-                    <input type="text" readonly class="form-control" id="txtVnfType" required [(ngModel)]="referenceDataObject['scope']['vnf-type']"
-                        (ngModelChange)="updateSessionValues($event,'vnfType')" #vnftype="ngModel" name="vnftype">
+                    <input type="text" readonly class="form-control" id="txtVnfType" required [(ngModel)]="referenceDataObject['scope']['vnf-type']" (ngModelChange)="updateSessionValues($event,'vnfType')" #vnftype="ngModel" name="vnftype">
                     <span class="error-message" [hidden]="vnfParams?.vnfType || vnftype.valid || (vnftype.pristine && !userForm.submitted)">Required Field</span>
                 </div>
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                     <label>VNFC Type</label>
-                    <input type="text" class="form-control" readonly id="txtVnfcType" [(ngModel)]="referenceDataObject.scope['vnfc-type']" (blur)="setVnfcType($event.target.value)"
-                        (ngModelChange)="updateSessionValues($event,'vnfcType')" #vnfcType="ngModel" name="vnfcType">
+                    <input type="text" class="form-control" readonly id="txtVnfcType" [(ngModel)]="referenceDataObject.scope['vnfc-type']" (blur)="setVnfcType($event.target.value)" (ngModelChange)="updateSessionValues($event,'vnfcType')" #vnfcType="ngModel" name="vnfcType">
                 </div>
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                     <label>Device Protocol*</label>
-                    <select class="form-control" required id="txtDeviceProtocol" [(ngModel)]="referenceDataObject['device-protocol']" (ngModelChange)="deviceProtocolChange()"
-                        #deviceProtocol="ngModel" name="deviceProtocol">
-
+                    <select class="form-control" required id="txtDeviceProtocol" [(ngModel)]="referenceDataObject['device-protocol']" (ngModelChange)="deviceProtocolChange()" #deviceProtocol="ngModel" name="deviceProtocol">
                         <option [value]="device" [selected]="referenceDataObject.deviceProtocol===device"
                                 *ngFor="let device of deviceProtocols">{{device}}
                         </option>
@@ -64,8 +58,7 @@ limitations under the License.
                 </div>
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="isConfigScaleOut">
                     <label>Template Identifier</label>
-                    <select class="form-control" required id="tempIdentifier" (ngModelChange)="dataModified();idChange($event,content,userForm)"
-                        [(ngModel)]="templateIdentifier" #deviceProtocol="ngModel" name="templateIdentifier">
+                    <select class="form-control" required id="tempIdentifier" (ngModelChange)="dataModified();idChange($event,content,userForm)" [(ngModel)]="templateIdentifier" #deviceProtocol="ngModel" name="templateIdentifier">
                         <option [value]="val" *ngFor="let val of referenceDataObject['template-id-list']">{{val}}
                         </option>
                     </select>
@@ -82,20 +75,16 @@ limitations under the License.
             <div class="col-12" *ngIf="!(referenceDataObject.action === 'OpenStack Actions')">
                 <div class="input-group">
                     <input id="inputFile" class="file" #myInput type='file' (change)="fileChange($event)">
-                    <input [(ngModel)]="fileName" type="text" class="input-lg" disabled placeholder="Upload Reference File from PC" name="browse"
-                        style="width:80%">
-                    <button (click)="browseOption($event)" class="browse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary input-lg"
-                        type="button">Upload Reference File
+                    <input [(ngModel)]="fileName" type="text" class="input-lg" disabled placeholder="Upload Reference File from PC" name="browse" style="width:80%">
+                    <button (click)="browseOption($event)" class="browse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary input-lg" type="button">Upload Reference File
                     </button>
                 </div>
             </div>
             <div class="col-12" *ngIf="referenceDataObject.action === 'OpenStack Actions'">
                 <div class="input-group">
                     <input id="excelInputFile" #myInput1 class="file" type="file" (change)="upload($event)">
-                    <input [(ngModel)]="uploadFileName" type="text" class="input-lg" disabled placeholder="Upload VM Capabilities File" name="uploadFileName"
-                        style="width:80%">
-                    <button (click)="excelBrowseOption($event)" class="browse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary input-lg"
-                        type="button">Upload VM Capabilities File
+                    <input [(ngModel)]="uploadFileName" type="text" class="input-lg" disabled placeholder="Upload VM Capabilities File" name="uploadFileName" style="width:80%">
+                    <button (click)="excelBrowseOption($event)" class="browse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary input-lg" type="button">Upload VM Capabilities File
                     </button>
                 </div>
             </div>
@@ -110,8 +99,7 @@ limitations under the License.
                         <div class="text-right col-6">
                             <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="submit">Download All To PC
                             </button>&emsp;&emsp;
-                            <button id="saveToAppc" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="button"
-                                (click)="saveToAppc(userForm.valid, userForm)">Save All to APPC
+                            <button id="saveToAppc" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="button" (click)="saveToAppc(userForm.valid, userForm)">Save All to APPC
                             </button>&emsp;&emsp;
                         </div>
                     </div>
@@ -139,8 +127,7 @@ limitations under the License.
                                     <input type="text" class="form-control" id="txtIpaddress" [(ngModel)]="referenceDataObject['url']" name="contextUrl">
                                 </div>
                             </div>
-                            <div class="card-block" *ngIf="(referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action ==''  || referenceDataObject.action ==undefined)"
-                                style="border-top: 5px solid #6ab344;border-top-right-radius: 7px;border-top-left-radius: 7px;">
+                            <div class="card-block" *ngIf="(referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action ==''  || referenceDataObject.action ==undefined)" style="border-top: 5px solid #6ab344;border-top-right-radius: 7px;border-top-left-radius: 7px;">
                                 <div class="col-12">
                                     <h5 style="margin-top: 0.5rem;font-family: Roboto"> VNFC Information
                                         <span class="pull-right">
@@ -153,16 +140,15 @@ limitations under the License.
                             </div>
                             <div class="row" *ngIf="(( referenceDataObject.action =='ConfigScaleOut' ||referenceDataObject.action =='Configure'|| referenceDataObject.action =='' || referenceDataObject.action ==undefined ) && isCollapsedContent) ">
                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
-                                    <label style="font-size:12px;">VNFC Type</label>
+                                    <label style="font-size:12px;">VNFC Type*</label>
                                     <input type="text" class="form-control" id="txtVnfcTypeInColl" [(ngModel)]="Sample['vnfc-type']" #vnfcType="ngModel" name="samplevnfcType">
                                 </div>
                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
-                                    <label style="font-size:12px">VNFC Function Code</label>
-                                    <input type="text" class="form-control" id="txtVnfcFunctionCode" [(ngModel)]="Sample['vnfc-function-code']" #vnfcFunctionCode="ngModel"
-                                        name="samplevnfcFunctionCode">
+                                    <label style="font-size:12px">VNFC Function Code*</label>
+                                    <input type="text" class="form-control" id="txtVnfcFunctionCode" [(ngModel)]="Sample['vnfc-function-code']" #vnfcFunctionCode="ngModel" name="samplevnfcFunctionCode">
                                 </div>
                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
-                                    <label style="font-size:12px;">IPAddress V4 OAM VIP</label>
+                                    <label style="font-size:12px;">IPAddress V4</label>
                                     <select class="form-control" id="cmbIpAddedBoo" [(ngModel)]="Sample['ipaddress-v4-oam-vip']" name="sampleIpaddress">
                                         <option [value]="hasIp" *ngFor="let hasIp of ipAddressBoolean">{{hasIp}}
                                         </option>
@@ -176,42 +162,38 @@ limitations under the License.
                                 </div>
                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
                                     <label style="font-size:12px;">Group Notation Value</label>
-                                    <input type="text" class="form-control" [readonly]="disableGrpNotationValue" id="txtGroupValue" [(ngModel)]="Sample['group-notation-value']"
-                                        name="sampleGroupValue">
+                                    <input type="text" class="form-control" [readonly]="disableGrpNotationValue" id="txtGroupValue" [(ngModel)]="Sample['group-notation-value']" name="sampleGroupValue">
                                 </div>
                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
-                                    <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent clear-btn"
-                                        (click)="clearVnfcData()">Clear VNFC Info
+                                    <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent clear-btn" (click)="clearVnfcData()">Clear VNFC Info
                                     </button>
                                 </div>
                             </div>
                             <hr>
-                            <div *ngIf="(referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action =='' )"
-                                class="row">
+                            <div *ngIf="(referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action =='' )" class="row">
                                 <div class="col-lg-2 col-md-2 hdden-sm-down">
                                     <label style="margin-top: 17px;" class="headlinesInBold"> Number Of VM(s): </label>
+
                                 </div>
                                 <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6">
                                     <div class="form-group">
-                                        <input type="text" placeholder="Number of VM(s)" class="form-control" id="txtVmnumber22" [(ngModel)]="refernceScopeObj.from"
-                                            (ngModelChange)="numberValidation($event)" name="txtNumber23">
+                                        <input type="text" placeholder="Number of VM(s)" class="form-control" id="txtVmnumber22" [(ngModel)]="refernceScopeObj.from" (ngModelChange)="numberValidation($event)" name="txtNumber23">
                                     </div>
                                 </div>
                                 <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6 text-right">
                                     <div class="form-group">
-                                        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="button" [disabled]="!refernceScopeObj.from || !numberOfVmTest"
-                                            (click)="addVms()">Add VM Information
+                                        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="button" [disabled]="!refernceScopeObj.from || !numberOfVmTest" (click)="addVms()">Add VM Information
                                         </button>
                                     </div>
                                 </div>
                             </div>
                             <div *ngIf="referenceDataObject.vm?.length>0">
-                                <div class="row" *ngFor="let noOfvm of referenceDataObject.vm | vmFiltering:referenceDataObject?.action:templateIdentifier; let j=index">
-                                    <div *ngIf="((referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action =='' || referenceDataObject.action ==undefined ))"
-                                        class="col-12">
-                                        <div class="row" *ngFor="let item of noOfvm.vnfc; let i=index">
+                                <div class="row" *ngFor="let noOfvm of referenceDataObject.vm  | vmFiltering:referenceDataObject?.action:templateIdentifier; trackBy:trackByFn;let j=index">
+                                    <div *ngIf="((referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action =='' || referenceDataObject.action ==undefined ))" class="col-12">
+                                        <div class="row" *ngFor="let item of noOfvm.vnfc;trackBy:trackByFn, let i=index">
                                             <div class="col-md-12" *ngIf="i==0">
                                                 <h5 class="headlinesInBold">VM Number: {{j+1}}</h5>
+
                                             </div>
                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
                                                 <label style="font-size:12px;">VNFC Instance No.</label>
@@ -219,18 +201,16 @@ limitations under the License.
                                             </div>
                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
                                                 <label style="font-size:12px;">VNFC Type*</label>
-                                                <input type="text" class="form-control" id="txtVnfcTypeInColl" required [(ngModel)]="item['vnfc-type']" #vnfcType="ngModel"
-                                                    name="vnfcType{{j}}">
+                                                <input type="text" class="form-control" id="txtVnfcTypeInColl" required [(ngModel)]="item['vnfc-type']" #vnfcType{{j}}="ngModel" name="vnfcType{{j}}">
                                                 <span class="error-message" [hidden]="vnfcType.valid || (vnfcType.pristine && !userForm.submitted)">Required Field</span>
                                             </div>
                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
                                                 <label style="font-size:12px;">VNFC Function Code*</label>
-                                                <input type="text" class="form-control" id="txtVnfcFunctionCode" required [(ngModel)]="item['vnfc-function-code']" #vnfcFunctionCode="ngModel"
-                                                    name="vnfcFunctionCode{{j}}">
+                                                <input type="text" class="form-control" id="txtVnfcFunctionCode" required [(ngModel)]="item['vnfc-function-code']" #vnfcFunctionCode="ngModel" name="vnfcFunctionCode{{j}}">
                                                 <span class="error-message" [hidden]="vnfcFunctionCode.valid || (vnfcFunctionCode.pristine && !userForm.submitted)">Required Field</span>
                                             </div>
                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
-                                                <label style="font-size:12px;">IPAddress V4 OAM VIP</label>
+                                                <label style="font-size:12px;">IPAddress V4</label>
                                                 <select class="form-control" id="cmbIpAddress" [(ngModel)]="item['ipaddress-v4-oam-vip']" name="ipaddress{{j}}">
                                                     <option [value]="hasIP" [selected]="item.ipAddressBoolean===hasIP"
                                                             *ngFor="let hasIP of ipAddressBoolean">{{hasIP}}
@@ -247,12 +227,11 @@ limitations under the License.
                                             </div>
                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
                                                 <label style="font-size:12px;">Group Notation Value</label>
-                                                <input type="text" class="form-control" id="txtGroupValue" [(ngModel)]="item['group-notation-value']" name="selectedGroupValue{{j}}">
+                                                <input type="text" [readonly]="item['group-notation-type'] =='existing-group-name'" class="form-control" id="txtGroupValue" [(ngModel)]="item['group-notation-value']" name="selectedGroupValue{{j}}">
                                             </div>
                                             <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                                                 <div class="removevnfcClass" *ngIf="refernceScopeObj.sourceType !='vnfcType'">
-                                                    <a role="button" style="color: white" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
-                                                        (click)="removeFeature(j,i,templateIdentifier)">Remove Vm</a>
+                                                    <a role="button" style="color: white" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="removeFeature(j,i,templateIdentifier)">Remove Vm</a>
                                                 </div>
                                                 <div>
                                                     <a *ngIf="(referenceDataObject.vm[j].vnfc.length-1) == i " [hidden]="true" role="button" (click)="addVnfcData(j)">Add VNFC
@@ -337,10 +316,8 @@ limitations under the License.
             </div>
             <div class="modal-footer">
                 <div>
-                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" data-dismiss="modal"
-                        (click)="addToIdentDrp()">Add</button>
-                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="templateId=''"
-                        data-dismiss="modal">cancel</button>
+                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" data-dismiss="modal" (click)="addToIdentDrp()">Add</button>
+                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="templateId=''" data-dismiss="modal">cancel</button>
                 </div>
             </div>
         </div>
-- 
cgit 1.2.3-korg