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