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           </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           </tr>
 142           </tbody>
 143         </table>
 144       </div>
 145
 146     </div>
 147     <div class="modal-footer row" style="padding: 0">
 148       <div class="col-md-6">
 149       </div>
 150       <div class="col-md-6" style="padding: 15px;padding-right: 35px;">
 151         <button
 152           [disabled]="selectedInstantiation === null"
 153           [attr.data-tests-id]="'LoadTemplateButton'"
 154           type="button" class="btn btn-primary submit"
 155           (click)="loadTemplate()"><span>Load Template</span>
 156         </button>
 157         <button
 158           [attr.data-tests-id]="'startFromScratchButton'"
 159           type="button" class="btn btn-success submit startFromScratchButton"
 160           (click)="closeModalAndOpenNewServiceModal()"><span>Start from Scratch</span>
 161         </button>
 162       </div>
 163     </div>
 164   </div>
 165 </div>