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

   1 <nz-modal
   2   [(nzVisible)]="cloudLeasedLineShowFlag"
   3   nzTitle="Create Cloud Leased Line"
   4   (nzOnCancel)="cancel(false)"
   5   nzWidth="70%"
   6   [nzFooter]="modalFooter"
   7 >
   8   <div class="subnet_params_container">
   9     <form nz-form>
  10         <nz-form-item *ngFor="let item of comunicationFormItems; let i = index">
  11             <nz-form-label
  12               [nzSpan]="7"
  13               [nzRequired]="item.required"
  14               [nzFor]=" item.key"
  15             >
  16                 {{ item.title }}
  17             </nz-form-label>
  18             <nz-form-control [nzSpan]="10">
  19               <div *ngIf="item.type === 'text'">{{cloud_leased_line_info[item.key]}}</div>
  20               <nz-tooltip
  21                 [nzTitle]="item.scoped && item.scopedText ? item.scopedText : ''"
  22                 [nzPlacement]="'right'"
  23                 [nzTrigger]="'focus'"
  24               >
  25                 <input
  26                   nz-input
  27                   nz-tooltip
  28                   [id]="item.key"
  29                   [name]="item.key"
  30                   [disabled]="isUpdateFlag"
  31                   *ngIf="item.type === 'input'"
  32                   [(ngModel)]="cloud_leased_line_info[item.key]"
  33                   [placeholder]="item.placeholder ? item.placeholder : ''"
  34                 />
  35               </nz-tooltip>
  36               <nz-select
  37                 [name]="item.key"
  38                 [disabled]="isUpdateFlag"
  39                 [(ngModel)]="cloud_leased_line_info[item.key]"
  40                 *ngIf="item.type === 'select'"
  41               >
  42                 <nz-option
  43                   [nzValue]="option"
  44                   [nzLabel]="option"
  45                   *ngFor="let option of cloudPointOptions"
  46                 >
  47                 </nz-option>
  48               </nz-select>
  49               <div *ngIf="item.type === 'node_select_one'">
  50                 <div>
  51                   <span>{{item.rateName}}:</span>
  52                   <input
  53                     nz-input
  54                     nz-tooltip
  55                     [id]="item.rateName"
  56                     [name]="item.rateName"
  57                     [(ngModel)]="cloud_leased_line_info[item.key].bandwidth"
  58                     [placeholder]="item.placeholder ? item.placeholder : ''"
  59                   />
  60                 </div>
  61                 <div>
  62                   <span>{{item.nodeName}}:</span>
  63                   <nz-select
  64                     [name]="item.nodeName"
  65                     [disabled]="isUpdateFlag"
  66                     [(ngModel)]="cloud_leased_line_info[item.key].name"
  67                   >
  68                     <nz-option
  69                       [nzValue]="option"
  70                       [nzLabel]="option"
  71                       *ngFor="let option of nodeLists"
  72                     >
  73                     </nz-option>
  74                   </nz-select>
  75                 </div>
  76               </div>
  77               <nz-radio-group
  78                 [name]="item.key"
  79                 [disabled]="isUpdateFlag"
  80                 [(ngModel)]="cloud_leased_line_info[item.key]"
  81                 *ngIf="item.type === 'radio'"
  82               >
  83                 <label
  84                   nz-radio
  85                   [nzValue]="option.key"
  86                   *ngFor="let option of item.options"
  87                 >
  88                   {{ option.title }}
  89                 </label>
  90               </nz-radio-group>
  91             </nz-form-control>
  92         </nz-form-item>
  93     </form>
  94   </div>
  95   <ng-template #modalFooter>
  96     <button nz-button nzType="default" (click)="cancel()">Cancel</button>
  97     <button nz-button nzType="primary" (click)="submit()" [nzLoading]="loading">OK</button>
  98   </ng-template>
  99 </nz-modal>