gerrit.onap Code Review - usecase-ui.git/blob

   1 <nz-modal [(nzVisible)]="showModel" [nzTitle]="title + 'Parameter'" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
   2         nzWidth="960px">
   3         <div class="subnet_params_container">
   4                 <form nz-form *ngIf="title === 'Tn'">
   5                         <nz-form-item *ngFor="let item of transferFormItems">
   6                                 <nz-form-label [nzSpan]="7" [nzRequired]="item.required" [nzFor]="item.key"
   7                                         [ngStyle]="labelStyle(item.required)">
   8                                         {{item.title}}
   9                                 </nz-form-label>
  10                                 <nz-form-control [nzSpan]="16">
  11                                         <input nz-input [(ngModel)]="formData[item.key]" [name]="item.key" [id]="item.key"
  12                                                 [readOnly]="item.title === 'S-NSSAI'" [disabled]="item.title === 'S-NSSAI'"
  13                                                 [placeholder]="inputHolder(item.title)" *ngIf="specialParaTN.indexOf(item.title)===-1" />
  14                                         <nz-radio-group [name]=" item.key" [(ngModel)]="formData[item.key]"
  15                                                 *ngIf="item.title==='Resource Sharing Level'" (ngModelChange)="changeResourceShare()">
  16                                                 <label nz-radio [nzValue]="option.key" *ngFor="let option of item.options">
  17                                                         {{ option.title }}
  18                                                 </label>
  19                                         </nz-radio-group>
  20                                         <nz-input-group *ngIf="(item.title === 'AN Endpoint') && EndpointEnable">
  21                                                 <div *ngFor="let option of item.options;let i=index">
  22                                                         <div class="tn_endpoint_input">
  23                                                                 <input nz-input [id]="option.key" [name]="option.key"
  24                                                                         [title]="ANEndpointInputs[option.key]" [(ngModel)]="ANEndpointInputs[option.key]"
  25                                                                         [placeholder]="option.holder" style="width:32%;margin-right:1%"
  26                                                                         [disabled]="item.disable" />
  27                                                                 <div class="end_alert_ip" *ngIf="option.title === 'ip_address'">
  28                                                                         {{validateEndPoint(option.title, ANEndpointInputs[option.key], item.required)}}
  29                                                                 </div>
  30                                                                 <div class="end_alert_logical" *ngIf="option.title === 'logical_link'">
  31                                                                         {{validateEndPoint(option.title, ANEndpointInputs[option.key], item.required)}}
  32                                                                 </div>
  33                                                                 <div class="end_alert_nexthop" *ngIf="option.title === 'nexthop_info'">
  34                                                                         {{validateEndPoint(option.title, ANEndpointInputs[option.key], item.required)}}
  35                                                                 </div>
  36                                                         </div>
  37                                                 </div>
  38                                         </nz-input-group>
  39                                         <nz-input-group *ngIf="(item.title === 'CN Endpoint') && EndpointEnable">
  40                                                 <div *ngFor="let option of item.options;let i=index">
  41                                                         <div class="tn_endpoint_input">
  42                                                                 <input nz-input [id]="option.key" [name]="option.key"
  43                                                                         [title]="CNEndpointInputs[option.key]" [(ngModel)]="CNEndpointInputs[option.key]"
  44                                                                         [placeholder]="option.holder" style="width:32%;margin-right:1%"
  45                                                                         [disabled]="item.disable" />
  46                                                                 <div class="end_alert_ip" *ngIf="option.title === 'ip_address'">
  47                                                                         {{validateEndPoint(option.title, CNEndpointInputs[option.key], item.required)}}
  48                                                                 </div>
  49                                                                 <div class="end_alert_logical" *ngIf="option.title === 'logical_link'">
  50                                                                         {{validateEndPoint(option.title, CNEndpointInputs[option.key], item.required)}}
  51                                                                 </div>
  52                                                                 <div class="end_alert_nexthop" *ngIf="option.title === 'nexthop_info'">
  53                                                                         {{validateEndPoint(option.title, CNEndpointInputs[option.key], item.required)}}
  54                                                                 </div>
  55                                                         </div>
  56                                                 </div>
  57                                         </nz-input-group>
  58                                         <!-- connection links table -->
  59                                         <div *ngIf="item.title === 'Connection Links'">
  60                                                 <nz-table #basicTable [nzData]="[{}]" nzShowPagination="false">
  61                                                         <thead>
  62                                                                 <tr>
  63                                                                         <th *ngFor="let val of item.header" class="subnet_td">{{val.title}}</th>
  64                                                                         <th class="subnet_td"> action </th>
  65                                                                 </tr>
  66                                                         </thead>
  67                                                         <tbody>
  68                                                                 <tr *ngFor="let t of formData[item.options.key]">
  69                                                                         <td *ngFor="let val of item.header" class="subnet_td">
  70                                                                                 {{t[val.key]}}
  71                                                                         </td>
  72                                                                         <td nzShowCheckbox="true" [nzChecked]="t.checked"
  73                                                                                 (nzCheckedChange)="changeLinkCheck(t.id, $event)" [nzDisabled]="item.disable"
  74                                                                                 class="subnet_td">
  75                                                                                 <!-- <input type="checkbox" ng-model="t.checked" ng-change="nzCheckedChange(t.id)"> -->
  76                                                                         </td>
  77                                                                 </tr>
  78                                                         </tbody>
  79                                                 </nz-table>
  80                                         </div>
  81                                         <div class="validation_alert" *ngIf="item.required">
  82                                                 {{Util.isEmpty(formData[item.key])? 'can not be empty!':' '}}</div>
  83                                 </nz-form-control>
  84                         </nz-form-item>
  85                 </form>
  86                 <form nz-form *ngIf="title === 'An' || title === 'Cn'">
  87                         <nz-form-item *ngFor="let item of coreFormItems">
  88                                 <nz-form-label [nzSpan]="(item.key === 'an_coverage_area_ta_list' || item.title === 'Endpoint')?7:13"
  89                                         [nzRequired]="item.required" *ngIf=" item.title !== 'Endpoint' || EndpointEnable "
  90                                         [ngStyle]="labelStyle(item.required)">
  91                                         {{ item.title }}
  92                                 </nz-form-label>
  93                                 <nz-form-control [nzSpan]="item.title === 'Endpoint'?14:8"
  94                                         *ngIf="item.key !== 'an_coverage_area_ta_list'">
  95                                         <input nz-input [id]="item.key" [name]="item.key" [(ngModel)]="formData[item.key]"
  96                                                 [readOnly]="item.title === 'S-NSSAI'" [disabled]="item.title === 'S-NSSAI'"
  97                                                 *ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Endpoint' "
  98                                                 [placeholder]="inputHolder(item.title)" />
  99                                         <nz-radio-group [name]="item.key" [(ngModel)]="formData[item.key]"
 100                                                 *ngIf="item.title === 'Resource Sharing Level'">
 101                                                 <label nz-radio [nzValue]="option.key" *ngFor="let option of item.options">
 102                                                         {{ option.title }}
 103                                                 </label>
 104                                         </nz-radio-group>
 105                                         <nz-select [name]="item.key" [(ngModel)]="formData[item.key]" *ngIf="item.title === 'Mobility'">
 106                                                 <nz-option [nzValue]="option.key" [nzLabel]="option.title" *ngFor="let option of item.options">
 107                                                 </nz-option>
 108                                         </nz-select>
 109                                         <div class="validation_alert" *ngIf="item.required">
 110                                                 {{Util.isEmpty(formData[item.key])? 'can not be empty!':' '}}</div>
 111                                         <!-- 2020.08.17  Add 3 parameters for Endpoint-->
 112                                         <!-- Comment: The following code-->
 113                                         <nz-input-group *ngIf="item.title === 'Endpoint' && EndpointEnable">
 114                                                 <div *ngFor="let option of item.options;let i=index">
 115                                                         <div class="endpoint_input">
 116                                                                 <input nz-input [id]="option.key" [name]="option.key"
 117                                                                         [title]="EndpointInputs[option.key]" [(ngModel)]="EndpointInputs[option.key]"
 118                                                                         [placeholder]="option.holder" style="width:32%;margin-right:1%" />
 119                                                                 <div class="end_alert_ip" *ngIf="option.title === 'ip_address'">
 120                                                                         {{validateEndPoint(option.title, EndpointInputs[option.key], item.required)}}</div>
 121                                                                 <div class="end_alert_logical" *ngIf="option.title === 'logical_link'">
 122                                                                         {{validateEndPoint(option.title, EndpointInputs[option.key], item.required)}}</div>
 123                                                                 <div class="end_alert_nexthop" *ngIf="option.title === 'nexthop_info'">
 124                                                                         {{validateEndPoint(option.title, EndpointInputs[option.key], item.required)}}</div>
 125                                                         </div>
 126                                                 </div>
 127                                         </nz-input-group>
 128                                         <!-- Comment: Above code-->
 129                                 </nz-form-control>
 130                                 <div *ngIf="title === 'An' && item.key === 'an_coverage_area_ta_list'">
 131                                         <div *ngFor="let area of areaList; let i = index">
 132                                                 <nz-form-control [nzSpan]="!ind ? 4 : 4" [nzOffset]="i && !ind ? 7 : 0"
 133                                                         class="subnet_params_area" *ngFor="let item of area; let ind = index">
 134                                                         <nz-select [(ngModel)]="item.selected" [name]="'area' + i + ind"
 135                                                                 (nzOpenChange)="handleChange(area, item)"
 136                                                                 (ngModelChange)=" handleChangeSelected(area, item) ">
 137                                                                 <nz-option [nzValue]="op.name" [nzLabel]="op.name" *ngFor="let op of item.options">
 138                                                                 </nz-option>
 139                                                         </nz-select>
 140                                                 </nz-form-control>
 141                                                 <nz-form-control [nzSpan]="1">
 142                                                         <div class="validation_alert_area">{{checkArea(area)}}</div>
 143                                                 </nz-form-control>
 144                                                 <nz-form-control [nzSpan]="1" [nzOffset]="2">
 145                                                         <button nz-button nzType="primary" type="button" nzSize="small" class="subnet_params_button"
 146                                                                 *ngIf="!i" (click)="creatAreaList()">
 147                                                                 <i nz-icon class="anticon anticon-plus subnet_params_icon"></i>
 148                                                         </button>
 149                                                         <button nz-button nzType="primary" type="button" nzSize="small" class="subnet_params_button"
 150                                                                 *ngIf="i" (click)="deleteAreaList(i)">
 151                                                                 <i nz-icon class="anticon anticon-minus subnet_params_icon"></i>
 152                                                         </button>
 153                                                 </nz-form-control>
 154                                         </div>
 155                                 </div>
 156                         </nz-form-item>
 157                 </form>
 158         </div>
 159 </nz-modal>