vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.html

   1 <div class="modal-search-member-content">
   2   <div class="header">
   3     <vid-svg-icon
   4       [attr.data-tests-id]="'cancelBtn'"
   5       (click)="backAction()"
   6       class="navigation-arrow-back"
   7       [mode]="'primary'"
   8       [size]="'large'"
   9       [name]="'navigation-arrow-back'"
  10       [clickable]="true"
  11       [fill]="'#FFFFFF'"
  12       [widthViewBox]="'24'"
  13       [heightViewBox]="'24'">
  14     </vid-svg-icon>
  15
  16     <span class="title">
  17       {{modalInformation.title}}
  18     </span>
  19     <button type="submit" data-tests-id="setMembersBtn" [disabled]="disableSetElements" (click)="doneAction()" class="sdc-button sdc-button__primary">{{modalInformation?.topButton?.text}}</button>
  20   </div>
  21   <div class="content-wrapper">
  22     <div class="sidebar-left">
  23       <div class="search-criteria-wrapper">
  24         <div class="search-criteria-title">SEARCH CRITERIA</div>
  25          <div class="search-item" *ngFor="let searchFieldItem of modalInformation?.searchFields">
  26            <div>
  27              <div><span class="label-item" >{{searchFieldItem.title}}</span></div>
  28              <div><span attr.data-tests-id="{{searchFieldItem.dataTestId}}" class="text-item">{{searchFieldItem.value}}</span></div>
  29            </div>
  30          </div>
  31         <div class="search-item" *ngFor="let criteria of modalInformation?.criteria">
  32           <div *ngIf="criteria.type === 'DROPDOWN'">
  33             <div><span class="label-item"  [ngClass]="{'required': criteria.isRequired}">{{criteria.label}}</span></div>
  34             <div>
  35               <select class="form-control input-text select-criteria"
  36                       id="{{criteria?.dataTestId}}-select"
  37                       [attr.data-tests-id]="criteria?.dataTestId"
  38                       (change)="criteria.onChange(criteria, $event.target.value)">
  39
  40                 <option *ngFor="let option of criteria.onInit() | async"
  41                         class="{{option}} {{option}}-Option"
  42                         [value]="option">{{option}}
  43                 </option>
  44               </select>
  45             </div>
  46           </div>
  47         </div>
  48         <div class="search-button" *ngIf="modalInformation.criteria && modalInformation.criteria.length > 0">
  49           <button type="submit"
  50                   data-tests-id="searchByNetworkRole"
  51                   [disabled]="disableSearchByNetworkRole"
  52                   (click)="searchByCriteriaAction()"
  53                   class="sdc-button sdc-button__primary">Search...</button>
  54         </div>
  55       </div>
  56     </div>
  57     <div class="sidebar-right">
  58       <app-members-table
  59         [data]="elementsData"
  60         [modalInformation]="modalInformation"
  61         (selectedMembersAmountChange)="selectedMembersAmountChange($event)"></app-members-table>
  62     </div>
  63   </div>
  64 </div>