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

   1 <nz-modal
   2   [(nzVisible)]="cloudLeasedLineShowFlag"
   3   nzTitle="Create Cloud Leased Line"
   4   (nzOnCancel)="cancel()"
   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                   *ngIf="item.type === 'input'"
  31                   [(ngModel)]="cloud_leased_line_info[item.key]"
  32                   [placeholder]="item.placeholder ? item.placeholder : ''"
  33                 />
  34               </nz-tooltip>
  35               <nz-select
  36                 [name]="item.key"
  37                 [(ngModel)]="cloud_leased_line_info[item.key]"
  38                 *ngIf="item.type === 'select'"
  39               >
  40                 <nz-option
  41                   [nzValue]="option"
  42                   [nzLabel]="option"
  43                   *ngFor="let option of cloudPointOptions"
  44                 >
  45                 </nz-option>
  46               </nz-select>
  47               <div *ngIf="item.type === 'node_select_one'">
  48                 <div>
  49                   <span>{{item.rateName}}:</span>
  50                   <input
  51                     nz-input
  52                     nz-tooltip
  53                     [id]="item.rateName"
  54                     [name]="item.rateName"
  55                     [(ngModel)]="cloud_leased_line_info[item.key].bandwidth"
  56                     [placeholder]="item.placeholder ? item.placeholder : ''"
  57                   />
  58                 </div>
  59                 <div>
  60                   <span>{{item.nodeName}}:</span>
  61                   <nz-select
  62                     [name]="item.nodeName"
  63                     [(ngModel)]="cloud_leased_line_info[item.key].name"
  64                   >
  65                     <nz-option
  66                       [nzValue]="option"
  67                       [nzLabel]="option"
  68                       *ngFor="let option of nodeLists"
  69                     >
  70                     </nz-option>
  71                   </nz-select>
  72                 </div>
  73               </div>
  74             </nz-form-control>
  75         </nz-form-item>
  76     </form>
  77   </div>
  78   <ng-template #modalFooter>
  79     <button nz-button nzType="default" (click)="cancel()">Cancel</button>
  80     <button nz-button nzType="primary" (click)="submit()" [nzLoading]="loading">OK</button>
  81   </ng-template>
  82 </nz-modal>