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             <ng-container *ngIf="impact == impactEnum.medium; else highImpactDeletion">
  31               <div class="custom-control custom-checkbox">
  32                 <input type="checkbox"
  33                        class="custom-control-input"
  34                        name="confirmation"
  35                        id="confirmation"
  36                        formControlName="confirmation"
  37                        autofocus>
  38                 <label class="custom-control-label"
  39                        for="confirmation"
  40                        i18n>Yes, I am sure.</label>
  41               </div>
  42             </ng-container>
  43             <ng-template #highImpactDeletion>
  44               <label i18n
  45                      for="name">Resource Name</label>
  46               <div class="cd-col-form-input">
  47                 <input class="form-control"
  48                        type="text"
  49                        placeholder="Enter resource name to delete"
  50                        id="resource_name"
  51                        name="resource_name"
  52                        formControlName="confirmInput">
  53                 <span *ngIf="deletionForm.showError('confirmInput', formDir, 'required')"
  54                       class="invalid-feedback">
  55                   <ng-container i18n>This field is required.</ng-container>
  56                 </span>
  57                 <span *ngIf="deletionForm.showError('confirmInput', formDir, 'matchResource')"
  58                       class="invalid-feedback">
  59                   <ng-container i18n>Enter the correct resource name.</ng-container>
  60                 </span>
  61               </div>
  62             </ng-template>
  63           </div>
  64         </div>
  65       </div>
  66       <div class="modal-footer">
  67         <cd-form-button-panel (submitActionEvent)="callSubmitAction()"
  68                               (backActionEvent)="backAction ? callBackAction() : hideModal()"
  69                               [form]="deletionForm"
  70                               [submitText]="(actionDescription | titlecase) + ' ' + itemDescription"></cd-form-button-panel>
  71       </div>
  72     </form>
  73   </ng-container>
  74 </cd-modal>
  75
  76 <ng-template #deletionHeading>
  77   {{ actionDescription | titlecase }} {{ itemDescription }}
  78 </ng-template>