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