git.apps.os.sepia.ceph.com Git - ceph.git/blob

   1 <cd-modal #modal
   2           [modalRef]="activeModal">
   3   <ng-container class="modal-title">
   4     <ng-container *ngTemplateOutlet="deletionHeading"></ng-container>
   5   </ng-container>
   6
   7   <ng-container class="modal-content">
   8     <form name="deletionForm"
   9           #formDir="ngForm"
  10           [formGroup]="deletionForm"
  11           novalidate>
  12       <div class="modal-body">
  13         <ng-container *ngTemplateOutlet="bodyTemplate; context: bodyContext"></ng-container>
  14         <div class="question">
  15           <span *ngIf="itemNames; else noNames">
  16             <p *ngIf="itemNames.length === 1; else manyNames"
  17                i18n>Are you sure that you want to {{ actionDescription | lowercase }} <strong>{{ itemNames[0] }}</strong>?</p>
  18             <ng-template #manyNames>
  19               <p i18n>Are you sure that you want to {{ actionDescription | lowercase }} the selected items?</p>
  20               <ul>
  21                 <li *ngFor="let itemName of itemNames"><strong>{{ itemName }}</strong></li>
  22               </ul>
  23             </ng-template >
  24           </span>
  25           <ng-template #noNames>
  26             <p i18n>Are you sure that you want to {{ actionDescription | lowercase }} the selected {{ itemDescription }}?</p>
  27           </ng-template>
  28           <ng-container *ngTemplateOutlet="childFormGroupTemplate; context:{form:deletionForm}"></ng-container>
  29           <div class="form-group">
  30             <div class="custom-control custom-checkbox">
  31               <input type="checkbox"
  32                      class="custom-control-input"
  33                      name="confirmation"
  34                      id="confirmation"
  35                      formControlName="confirmation"
  36                      autofocus>
  37               <label class="custom-control-label"
  38                      for="confirmation"
  39                      i18n>Yes, I am sure.</label>
  40             </div>
  41           </div>
  42         </div>
  43       </div>
  44       <div class="modal-footer">
  45         <cd-form-button-panel (submitActionEvent)="callSubmitAction()"
  46                               [form]="deletionForm"
  47                               [submitText]="(actionDescription | titlecase) + ' ' + itemDescription"></cd-form-button-panel>
  48       </div>
  49     </form>
  50   </ng-container>
  51 </cd-modal>
  52
  53 <ng-template #deletionHeading>
  54   {{ actionDescription | titlecase }} {{ itemDescription }}
  55 </ng-template>