Implemented advanced search for the table view.

client/src/modules/peoplesearch/peoplesearch-cards.component.html

@@ -68,7 +68,7 @@
             <ias-icon icon="close_thin"></ias-icon>
         </ias-button>
     </div>
-    <ias-button id="advanced-search-icon" class="ias-icon-button" ng-click="$ctrl.addSearchTag()"
+    <ias-button id="add-attribute-row" class="ias-icon-button" ng-click="$ctrl.addSearchTag()"
                 ng-if="$ctrl.queries.length < $ctrl.advancedSearchMaxRows"
                 ng-attr-title="{{ 'Button_AddSearchAttribute' | translate }}">
         <ias-icon icon="new_thin"></ias-icon>

client/src/modules/peoplesearch/peoplesearch-table.component.html

@@ -21,11 +21,25 @@
   -->
 
 <div class="ias-header">
-    <h2 id="page-content-title" translate="Title_PeopleSearch">People Search</h2>
-    <ias-search-box id="input" ng-model="$ctrl.query" ng-model-options="{debounce: $ctrl.inputDebounce}"
+    <h2 id="page-content-title" ng-if="!$ctrl.advancedSearch" translate="Title_PeopleSearch">People Search</h2>
+    <h2 id="page-content-title" ng-if="$ctrl.advancedSearch">People Search Advanced Search</h2>
+
+    <ias-search-box id="input" ng-model="$ctrl.query"
+                    ng-if="!$ctrl.advancedSearch"
+                    ng-model-options="{debounce: $ctrl.inputDebounce}"
                     placeholder="{{'Placeholder_Search' | translate}}" auto-focus>
     </ias-search-box>
 
+    <ias-button id="advanced-search-icon" class="ias-icon-button" ng-click="$ctrl.toggleAdvancedSearch()"
+                ng-if="!$ctrl.advancedSearch && $ctrl.advancedSearchEnabled"
+                ng-attr-title="{{ 'Title_AdvancedSearch' | translate }}">
+        <ias-icon class="ias-selected" icon="search_advanced"></ias-icon>
+    </ias-button>
+    <ias-button id="close-advanced-search-icon" class="ias-icon-button" ng-click="$ctrl.toggleAdvancedSearch()"
+                ng-if="$ctrl.advancedSearch" ng-attr-title="{{ 'Button_Close' | translate }}">
+        <ias-icon class="ias-selected" icon="close_thin"></ias-icon>
+    </ias-button>
+
     <span class="ias-fill"></span>
 
     <ias-button id="view-title-button" class="ias-icon-button"
@@ -56,6 +70,28 @@
     </ias-menu>
 </div>
 
+<div class="advanced-search-container" ng-if="$ctrl.advancedSearch">
+    <div class="attribute-row" ng-repeat="query in $ctrl.queries">
+        <select ng-model="query.key">
+            <option value="" selected disabled>{{ 'Display_SelectAttribute' | translate }}</option>
+            <option ng-repeat="tag in $ctrl.advancedSearchTags" ng-attr-value="{{tag.attribute}}">{{tag.label}}</option>
+        </select>
+        <input ng-model="query.value" autocomplete="off">
+        <ias-button class="ias-icon-button" ng-click="$ctrl.removeSearchTag($index)" ng-if="$index > 0"
+                    ng-attr-title="{{ 'Button_Remove' | translate }}">
+            <ias-icon icon="close_thin"></ias-icon>
+        </ias-button>
+    </div>
+    <ias-button id="add-attribute-row" class="ias-icon-button" ng-click="$ctrl.addSearchTag()"
+                ng-if="$ctrl.queries.length < $ctrl.advancedSearchMaxRows"
+                ng-attr-title="{{ 'Button_AddSearchAttribute' | translate }}">
+        <ias-icon icon="new_thin"></ias-icon>
+    </ias-button>
+    <ias-button id="advanced-search-button" ng-click="$ctrl.initiateSearch()"
+                ng-bind="'Placeholder_Search' | translate">
+    </ias-button>
+</div>
+
 <div class="search-info-container">
     <div class="search-info" ng-class="{'loading': !$ctrl.getMessage()}"
          ng-if="$ctrl.loading || $ctrl.searchMessage || $ctrl.errorMessage"

client/src/modules/peoplesearch/peoplesearch-table.component.scss

@@ -30,6 +30,10 @@ people-search-table {
     flex-flow: column nowrap;
     height: 100%;
 
+    .ias-search {
+        margin-right: 10px;
+    }
+
     > .people-search-component-content {
         flex: 1 1;
         overflow: auto;
@@ -42,4 +46,18 @@ people-search-table {
             right: 0;
         }
     }
-}
+
+    .advanced-search-container {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+
+        > * + * {
+            margin-top: 5px;
+        }
+
+        &+ div {
+            margin-top: 15px;
+        }
+    }
+}