Changing the rest of the places using advanced search so they match the behavior of the people search card view.

client/src/modules/helpdesk/helpdesk-search-base.component.ts

@@ -242,7 +242,13 @@ export default abstract class HelpDeskSearchBaseComponent {
 
     removeSearchTag(tagIndex: number): void {
         this.queries.splice(tagIndex, 1);
+
+        if (this.queries.length === 0) {
+            this.clearSearch();
+            this.advancedSearch = false;
+        }
     }
+
     addSearchTag(): void {
         this.queries.push({key: null, value: ''});
     }
@@ -271,9 +277,9 @@ export default abstract class HelpDeskSearchBaseComponent {
         this.localStorageService.setItem(this.searchTextLocalStorageKey, this.query || '');
     }
 
-    toggleAdvancedSearch(): void {
+    enableAdvancedSearch(): void {
         this.clearSearch();
-        this.advancedSearch = !this.advancedSearch;
+        this.advancedSearch = true;
     }
 
     protected toggleView(state: string): void {

client/src/modules/helpdesk/helpdesk-search-cards.component.html

@@ -28,15 +28,11 @@
                     ng-if="!$ctrl.advancedSearch"
                     placeholder="{{'Placeholder_Search' | translate}}">
     </ias-search-box>
-    <ias-button id="advanced-search-icon" class="ias-icon-button" ng-click="$ctrl.toggleAdvancedSearch()"
+    <ias-button id="advanced-search-icon" class="ias-icon-button" ng-click="$ctrl.enableAdvancedSearch()"
                 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>
     <ias-button class="verifications-button ias-cta" ng-if="$ctrl.verificationsEnabled"
                 ng-click="$ctrl.showVerifications()">{{ 'Button_Verifications' | translate }}</ias-button>
 
@@ -61,7 +57,7 @@
             <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"
+        <ias-button class="ias-icon-button" ng-click="$ctrl.removeSearchTag($index)"
                     ng-attr-title="{{ 'Button_Remove' | translate }}">
             <ias-icon icon="close_thin"></ias-icon>
         </ias-button>

client/src/modules/helpdesk/helpdesk-search-table.component.html

@@ -28,15 +28,11 @@
                     ng-if="!$ctrl.advancedSearch"
                     placeholder="{{'Placeholder_Search' | translate}}">
     </ias-search-box>
-    <ias-button id="advanced-search-icon" class="ias-icon-button" ng-click="$ctrl.toggleAdvancedSearch()"
+    <ias-button id="advanced-search-icon" class="ias-icon-button" ng-click="$ctrl.enableAdvancedSearch()"
                 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>
     <ias-button class="verifications-button ias-cta" ng-if="$ctrl.verificationsEnabled"
                 ng-click="$ctrl.showVerifications()">{{ 'Button_Verifications' | translate }}</ias-button>
 
@@ -73,7 +69,7 @@
             <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"
+        <ias-button class="ias-icon-button" ng-click="$ctrl.removeSearchTag($index)"
                     ng-attr-title="{{ 'Button_Remove' | translate }}">
             <ias-icon icon="close_thin"></ias-icon>
         </ias-button>

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

@@ -30,15 +30,11 @@
                     placeholder="{{'Placeholder_Search' | translate}}" auto-focus>
     </ias-search-box>
 
-    <ias-button id="advanced-search-icon" class="ias-icon-button" ng-click="$ctrl.toggleAdvancedSearch()"
+    <ias-button id="advanced-search-icon" class="ias-icon-button" ng-click="$ctrl.enableAdvancedSearch()"
                 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>
 
@@ -77,7 +73,7 @@
             <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"
+        <ias-button class="ias-icon-button" ng-click="$ctrl.removeSearchTag($index)"
                     ng-attr-title="{{ 'Button_Remove' | translate }}">
             <ias-icon icon="close_thin"></ias-icon>
         </ias-button>