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

   1 <nz-modal [(nzVisible)]="showModel" [nzTitle]="title + 'Parameter'" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
   2         nzWidth="700px">
   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" [ngStyle]="labelStyle(item.required)">
   7                                         {{item.title}}
   8                                 </nz-form-label>
   9                                 <nz-form-control [nzSpan]="12">
  10                                         <input nz-input
  11                                                    [(ngModel)]="formData[item.key]"
  12                                                    [name]="item.key"
  13                                                    [id]="item.key"
  14                                                    [readOnly]="item.title === 'S-NSSAI'"
  15                                                    [disabled]="item.title === 'S-NSSAI'"
  16                                                    [placeholder]="inputHolder(item.title)"
  17                                         />
  18                                         <div class="validation_alert" *ngIf="item.required">{{Util.isEmpty(formData[item.key])? 'can not be empty!':' '}}</div>
  19                                 </nz-form-control>
  20                         </nz-form-item>
  21                 </form>
  22                 <form nz-form *ngIf="title === 'An' || title === 'Cn'">
  23                         <nz-form-item *ngFor="let item of coreFormItems">
  24                                 <nz-form-label [nzSpan]="(item.key === 'an_coverage_area_ta_list' || item.title === 'Endpoint')?7:13" [nzRequired]="item.required" *ngIf=" item.title !== 'Endpoint' || EndpointEnable " [ngStyle]="labelStyle(item.required)">
  25                                         {{ item.title }}
  26                                 </nz-form-label>
  27                                 <nz-form-control [nzSpan]="item.title === 'Endpoint'?14:8" *ngIf="item.key !== 'an_coverage_area_ta_list'">
  28                                         <input nz-input [id]="item.key" [name]="item.key" [(ngModel)]="formData[item.key]"
  29                                                 [readOnly]="item.title === 'S-NSSAI'" [disabled]="item.title === 'S-NSSAI'"
  30                                                 *ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Endpoint' " [placeholder]="inputHolder(item.title)"/>
  31                                         <nz-radio-group [name]="item.key" [(ngModel)]="formData[item.key]"
  32                                                 *ngIf="item.title === 'Resource Sharing Level'">
  33                                                 <label nz-radio [nzValue]="option.key" *ngFor="let option of item.options">
  34                                                         {{ option.title }}
  35                                                 </label>
  36                                         </nz-radio-group>
  37                                         <nz-select [name]="item.key" [(ngModel)]="formData[item.key]" *ngIf="item.title === 'Mobility'">
  38                                                 <nz-option [nzValue]="option.key" [nzLabel]="option.title" *ngFor="let option of item.options">
  39                                                 </nz-option>
  40                                         </nz-select>
  41                                         <div class="validation_alert" *ngIf="item.required">{{Util.isEmpty(formData[item.key])? 'can not be empty!':' '}}</div>
  42                                         <!-- 2020.08.17  Add 3 parameters for Endpoint-->
  43                                         <!-- Comment: The following code-->
  44                                         <nz-input-group *ngIf="item.title === 'Endpoint' && EndpointEnable">
  45                                                 <div *ngFor="let option of item.options;let i=index">
  46                                                         <div class="endpoint_input">
  47                                                                 <input nz-input
  48                                                                    [id]="option.key"
  49                                                                    [name]="option.key"
  50                                                                    [title]="EndpointInputs[i][option.key]"
  51                                                                    [(ngModel)]="EndpointInputs[i][option.key]"
  52                                                                    [placeholder]="option.holder"
  53                                                                    (input)="onInput($event, option.title)"
  54                                                                    style="width:32%;margin-right:1%" />
  55                                                                 <div class="end_alert_ip" *ngIf="option.title === 'ip_address'">{{validateEndPoint(option.title, EndpointInputs[i][option.key])}}</div>
  56                                                                 <div class="end_alert_logical"  *ngIf="option.title === 'logical_link'">{{validateEndPoint(option.title, EndpointInputs[i][option.key])}}</div>
  57                                                                 <div class="end_alert_nexthop"  *ngIf="option.title === 'nexthop_info'">{{validateEndPoint(option.title, EndpointInputs[i][option.key])}}</div>
  58                                                         </div>
  59                                                 </div>
  60                                         </nz-input-group>
  61                                         <!-- Comment: Above code-->
  62                                 </nz-form-control>
  63                                 <div *ngIf="title === 'An' && item.key === 'an_coverage_area_ta_list'">
  64                                         <div *ngFor="let area of areaList; let i = index">
  65                                                 <nz-form-control [nzSpan]="!ind ? 4 : 4" [nzOffset]="i && !ind ? 7 : 0" class="subnet_params_area"
  66                                                                                  *ngFor="let item of area; let ind = index">
  67                                                         <nz-select [(ngModel)]="item.selected" [name]="'area' + i + ind"
  68                                                                            (nzOpenChange)="handleChange(area, item)"
  69                                                                            (ngModelChange)=" handleChangeSelected(area, item) ">
  70                                                                 <nz-option [nzValue]="op.name" [nzLabel]="op.name" *ngFor="let op of item.options">
  71                                                                 </nz-option>
  72                                                         </nz-select>
  73                                                 </nz-form-control>
  74                                                 <nz-form-control [nzSpan]="1">
  75                                                         <div class="validation_alert_area">{{checkArea(area)}}</div>
  76                                                 </nz-form-control>
  77                                                 <nz-form-control [nzSpan]="1" [nzOffset]="2">
  78                                                         <button nz-button nzType="primary" type="button" nzSize="small" class="subnet_params_button" *ngIf="!i"
  79                                                                         (click)="creatAreaList()">
  80                                                                 <i nz-icon class="anticon anticon-plus subnet_params_icon"></i>
  81                                                         </button>
  82                                                         <button nz-button nzType="primary" type="button" nzSize="small" class="subnet_params_button" *ngIf="i"
  83                                                                         (click)="deleteAreaList(i)">
  84                                                                 <i nz-icon class="anticon anticon-minus subnet_params_icon"></i>
  85                                                         </button>
  86                                                 </nz-form-control>
  87                                         </div>
  88                                 </div>
  89                         </nz-form-item>
  90                 </form>
  91         </div>
  92 </nz-modal>