Merge from ecomp 718fd196 - Modern UI

Issue-ID: VID-378

Change-Id: I2736b98426e324ec3aa233b034229ba84d99839f
Signed-off-by: Ittay Stern <ittay.stern@att.com>

1 files changed, 64 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.html b/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.html
new file mode 100644
index 000000000..7e79ca6f1
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.html
@@ -0,0 +1,64 @@
+<div class="modal-search-member-content">
+  <div class="header">
+    <vid-svg-icon
+      [attr.data-tests-id]="'cancelBtn'"
+      (click)="backAction()"
+      class="navigation-arrow-back"
+      [mode]="'primary'"
+      [size]="'large'"
+      [name]="'navigation-arrow-back'"
+      [clickable]="true"
+      [fill]="'#FFFFFF'"
+      [widthViewBox]="'24'"
+      [heightViewBox]="'24'">
+    </vid-svg-icon>
+
+    <span class="title">
+      {{modalInformation.title}}
+    </span>
+    <button type="submit" data-tests-id="setMembersBtn" [disabled]="disableSetElements" (click)="doneAction()" class="sdc-button sdc-button__primary">{{modalInformation?.topButton?.text}}</button>
+  </div>
+  <div class="content-wrapper">
+    <div class="sidebar-left">
+      <div class="search-criteria-wrapper">
+        <div class="search-criteria-title">SEARCH CRITERIA</div>
+         <div class="search-item" *ngFor="let searchFieldItem of modalInformation?.searchFields">
+           <div>
+             <div><span class="label-item" >{{searchFieldItem.title}}</span></div>
+             <div><span attr.data-tests-id="{{searchFieldItem.dataTestId}}" class="text-item">{{searchFieldItem.value}}</span></div>
+           </div>
+         </div>
+        <div class="search-item" *ngFor="let criteria of modalInformation?.criteria">
+          <div *ngIf="criteria.type === 'DROPDOWN'">
+            <div><span class="label-item"  [ngClass]="{'required': criteria.isRequired}">{{criteria.label}}</span></div>
+            <div>
+              <select class="form-control input-text select-criteria"
+                      id="{{criteria?.dataTestId}}-select"
+                      [attr.data-tests-id]="criteria?.dataTestId"
+                      (change)="criteria.onChange(criteria, $event.target.value)">
+
+                <option *ngFor="let option of criteria.onInit() | async"
+                        class="{{option}} {{option}}-Option"
+                        [value]="option">{{option}}
+                </option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div class="search-button" *ngIf="modalInformation.criteria && modalInformation.criteria.length > 0">
+          <button type="submit"
+                  data-tests-id="searchByNetworkRole"
+                  [disabled]="disableSearchByNetworkRole"
+                  (click)="searchByCriteriaAction()"
+                  class="sdc-button sdc-button__primary">Search...</button>
+        </div>
+      </div>
+    </div>
+    <div class="sidebar-right">
+      <app-members-table
+        [data]="elementsData"
+        [modalInformation]="modalInformation"
+        (selectedMembersAmountChange)="selectedMembersAmountChange($event)"></app-members-table>
+    </div>
+  </div>
+</div>