vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.html

   1 <div id="template-popup" class="modal-dialog">
   2   <div class="modal-content">
   3     <div class="modal-header">
   4       <button type="button"
   5               class="close"
   6               (click)="closeModal()">&times;
   7       </button>
   8       <span [attr.data-tests-id]="'template-modal-title'"
   9             class="modal-title">Templates
  10       </span>
  11     </div>
  12     <div class="modal-body templateModalBody">
  13       <div class="row description-section">
  14         <div class="col-md-6">
  15           <div [attr.data-tests-id]="'description-part-1'">The following list presents previous instantiations done for
  16             this model in this version.
  17           </div>
  18           <div [attr.data-tests-id]="'description-part-2'">You may use one of them as a baseline for your instantiation
  19             or start from scratch.
  20           </div>
  21           <div [attr.data-tests-id]="'description-part-3'">Once you selecting one allows you to change the data before
  22             start instantiating.
  23           </div>
  24         </div>
  25         <div class="col-md-6">
  26           <div class="col-md-6">
  27           </div>
  28           <div class="col-md-6">
  29             <input
  30               class="filter-input form-control input-text"
  31               placeholder="Filter..."
  32               [(ngModel)]="filterText">
  33           </div>
  34         </div>
  35       </div>
  36       <div class="row" style="margin-left: 0;margin-right: 0;padding: 20px;">
  37         <table id="member-table" class="table table-bordered" style="table-layout: fixed">
  38           <thead class="thead-dark">
  39           <tr>
  40             <th class="header-title" id="header-userId">User ID</th>
  41             <th class="header-title" id="header-createDate" style="width: 21ch;">Date</th>
  42             <th class="header-title" id="header-instanceName" style="max-width: 50ch;">Instance Name</th>
  43             <th class="header-title" id="header-instantiationStatus" style="width: 30ch;">Instantiation Status</th>
  44             <th class="header-title" id="header-summary">Summary</th>
  45             <th class="header-title" id="header-region">Region</th>
  46             <th class="header-title" id="header-tenant">Tenant</th>
  47             <th class="header-title" id="header-aicZone">AIC Zone</th>
  48           </tr>
  49           </thead>
  50           <tbody>
  51           <tr class="member-table-row"
  52               *ngFor="let item of filterTableData | searchFilter: filterText ;"
  53               (click)="selectedInstantiation = item"
  54               [ngClass]="{'selected' : selectedInstantiation && selectedInstantiation.jobId === item.jobId}"
  55               [attr.data-tests-id]="'row-' + item.jobId">
  56             <td>
  57               <div>
  58                 <custom-ellipsis
  59                   [dataTestId]="'userId-' + item.jobId"
  60                   [id]="item.userId"
  61                   [value]="item.userId"
  62                   [breakWord]="true">
  63                 </custom-ellipsis>
  64               </div>
  65             </td>
  66             <td style="width: 21ch;">
  67               <div>
  68                 <custom-ellipsis
  69                   [dataTestId]="'createDate-' + item.jobId"
  70                   [id]="item.createDate"
  71                   [value]="item.createDate"
  72                   [breakWord]="true">
  73                 </custom-ellipsis>
  74               </div>
  75             </td>
  76             <td style="max-width: 50ch;">
  77               <div>
  78                 <custom-ellipsis
  79                   [showDots]="true"
  80                   [dataTestId]="'instanceName-' + item.jobId"
  81                   [id]="item.instanceName"
  82                   [value]="item.instanceName"
  83                   [breakWord]="true">
  84                 </custom-ellipsis>
  85               </div>
  86             </td>
  87             <td>
  88               <div>
  89                 <custom-ellipsis
  90                   [showDots]="true"
  91                   [dataTestId]="'instantiationStatus-' + item.jobId"
  92                   [id]="item.instantiationStatus"
  93                   [value]="item.instantiationStatus"
  94                   [breakWord]="true">
  95                 </custom-ellipsis>
  96               </div>
  97             </td>
  98             <td>
  99               <div>
 100                 <custom-ellipsis
 101                   [dataTestId]="'summary-' + item.jobId"
 102                   [id]="item.summary"
 103                   [value]="item.summary"
 104                   [breakWord]="true">
 105                 </custom-ellipsis>
 106               </div>
 107             </td>
 108             <td>
 109               <div>
 110                 <custom-ellipsis
 111                   [showDots]="true"
 112                   [dataTestId]="'region-' + item.jobId"
 113                   [id]="item.region"
 114                   [value]="item.region"
 115                   [breakWord]="true">
 116                 </custom-ellipsis>
 117               </div>
 118             </td>
 119             <td>
 120               <div>
 121                 <custom-ellipsis
 122                   [showDots]="true"
 123                   [dataTestId]="'tenant-' + item.jobId"
 124                   [id]="item.tenant"
 125                   [value]="item.tenant"
 126                   [breakWord]="true">
 127                 </custom-ellipsis>
 128               </div>
 129             </td>
 130             <td>
 131               <div>
 132                 <custom-ellipsis
 133                   [dataTestId]="'aicZone-' + item.jobId"
 134                   [id]="item.aicZone"
 135                   [value]="item.aicZone"
 136                   [breakWord]="true">
 137                 </custom-ellipsis>
 138               </div>
 139             </td>
 140           </tr>
 141           </tbody>
 142         </table>
 143       </div>
 144
 145     </div>
 146     <div class="modal-footer row" style="padding: 0">
 147       <div class="col-md-6">
 148       </div>
 149       <div class="col-md-6" style="padding: 15px;padding-right: 35px;">
 150         <button
 151           [disabled]="selectedInstantiation && selectedInstantiation.jobId === null"
 152           [attr.data-tests-id]="'LoadTemplateButton'"
 153           type="button" class="btn btn-primary submit"
 154           (click)="loadTemplate()"><span>Load Template</span>
 155         </button>
 156         <button
 157           [attr.data-tests-id]="'startFromScratchButton'"
 158           type="button" class="btn btn-success submit startFromScratchButton"
 159           (click)="closeModal()"><span>Start from Scratch</span>
 160         </button>
 161       </div>
 162     </div>
 163   </div>
 164 </div>