ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.html

   1 <ng-template #popTemplate>
   2   <form name="form"
   3         #formDir="ngForm"
   4         [formGroup]="form"
   5         novalidate>
   6     <div>
   7       <input type="text"
   8              formControlName="filter"
   9              i18n-placeholder
  10              [placeholder]="messages.filter"
  11              (keyup)="$event.keyCode == 13 ? selectOption() : updateFilter()"
  12              class="form-control text-center" />
  13       <ng-container *ngFor="let error of Object.keys(messages.customValidations)">
  14         <span class="invalid-feedback text-center d-block"
  15               *ngIf="form.showError('filter', formDir) && filter.hasError(error)">
  16           {{ messages.customValidations[error] }}
  17         </span>
  18       </ng-container>
  19     </div>
  20   </form>
  21   <div *ngFor="let option of filteredOptions"
  22        class="select-menu-item"
  23        [ngClass]="{'help-block disabled': (data.length === selectionLimit || !option.enabled) && !option.selected}"
  24        (click)="triggerSelection(option)">
  25     <div class="select-menu-item-icon">
  26       <i [ngClass]="[icons.check]"
  27          aria-hidden="true"
  28          *ngIf="option.selected"></i>
  29       &nbsp;
  30     </div>
  31     <div class="select-menu-item-content">
  32       {{ option.name }}
  33       <ng-container *ngIf="option.description">
  34         <br>
  35         <small class="form-text text-muted">
  36           {{ option.description }}&nbsp;
  37         </small>
  38       </ng-container>
  39     </div>
  40   </div>
  41   <div *ngIf="isCreatable()"
  42        class="select-menu-item"
  43        (click)="addCustomOption()">
  44     <div class="select-menu-item-icon">
  45       <i [ngClass]="[icons.tag]"
  46          aria-hidden="true"></i>
  47       &nbsp;
  48     </div>
  49     <div class="select-menu-item-content">
  50       {{ messages.add }} '{{ filter.value }}'
  51     </div>
  52   </div>
  53   <div class="is-invalid"
  54        *ngIf="data.length === selectionLimit">
  55     <span class="form-text text-muted text-center text-warning"
  56           [ngbTooltip]="messages.selectionLimit.tooltip"
  57           *ngIf="data.length === selectionLimit">
  58       {{ messages.selectionLimit.text }}
  59     </span>
  60   </div>
  61 </ng-template>
  62
  63 <a class="select-menu-edit float-left"
  64    [ngClass]="elemClass"
  65    [ngbPopover]="popTemplate"
  66    data-testid="select-menu-edit"
  67    *ngIf="customBadges || options.length > 0">
  68   <ng-content></ng-content>
  69 </a>
  70
  71 <span class="form-text text-muted float-left"
  72       *ngIf="data.length === 0 && !(!customBadges && options.length === 0)">
  73   {{ messages.empty }}
  74 </span>
  75
  76 <span class="form-text text-muted  float-left"
  77       *ngIf="!customBadges && options.length === 0">
  78   {{ messages.noOptions }}
  79 </span>