HelpDesk search errors and messages added to table and card search views

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

@@ -27,15 +27,18 @@ import {isArray, isString, IPromise, IQService, IScope} from 'angular';
 import {IPerson} from '../models/person.model';
 import {IHelpDeskConfigService} from '../services/helpdesk-config.service';
 import LocalStorageService from '../services/local-storage.service';
+import PromiseService from '../services/promise.service';
 
 let verificationsDialogTemplateUrl = require('./verifications-dialog.template.html');
 let recentVerificationsDialogTemplateUrl = require('./recent-verifications-dialog.template.html');
 
 export default abstract class HelpDeskSearchBaseComponent {
     columnConfiguration: any;
+    errorMessage: string;
     protected pendingRequests: IPromise<any>[] = [];
     photosEnabled: boolean;
     query: string;
+    searchMessage: string;
     searchResult: SearchResult;
     searchTextLocalStorageKey: string;
     searchViewLocalStorageKey: string;
@@ -45,10 +48,12 @@ export default abstract class HelpDeskSearchBaseComponent {
     constructor(protected $q: IQService,
                 protected $scope: IScope,
                 protected $stateParams: angular.ui.IStateParamsService,
+                protected $translate: angular.translate.ITranslateService,
                 protected configService: IHelpDeskConfigService,
                 protected IasDialogService: any,
                 protected localStorageService: LocalStorageService,
-                protected peopleService: IPeopleService) {
+                protected peopleService: IPeopleService,
+                protected promiseService: PromiseService) {
         this.searchTextLocalStorageKey = this.localStorageService.keys.HELPDESK_SEARCH_TEXT;
         this.searchViewLocalStorageKey = this.localStorageService.keys.HELPDESK_SEARCH_VIEW;
 
@@ -65,6 +70,10 @@ export default abstract class HelpDeskSearchBaseComponent {
         });
     }
 
+    getMessage(): string {
+        return this.errorMessage || this.searchMessage;
+    }
+
     private getSearchText(): string {
         let param: string = this.$stateParams['query'];
         // If multiple query parameters are defined, use the first one
@@ -80,12 +89,20 @@ export default abstract class HelpDeskSearchBaseComponent {
 
     abstract fetchData(): void;
 
+    protected clearSearch(): void {
+        this.query = null;
+        this.searchResult = null;
+        this.clearErrorMessage();
+        this.clearSearchMessage();
+        this.abortPendingRequests();
+    }
+
     protected fetchSearchData(): IPromise<void | SearchResult> {
-        // this.abortPendingRequests();
+        this.abortPendingRequests();
         this.searchResult = null;
 
         if (!this.query) {
-            // this.clearSearch();
+            this.clearSearch();
             return null;
         }
 
@@ -94,9 +111,9 @@ export default abstract class HelpDeskSearchBaseComponent {
 
         return promise
             .then(
-                (searchResult: SearchResult) => {
-                    // self.clearErrorMessage();
-                    // self.clearSearchMessage();
+                function(searchResult: SearchResult) {
+                    this.clearErrorMessage();
+                    this.clearSearchMessage();
 
                     // Aborted request
                     if (!searchResult) {
@@ -104,24 +121,24 @@ export default abstract class HelpDeskSearchBaseComponent {
                     }
 
                     // Too many results returned
-                    // if (searchResult.sizeExceeded) {
-                    //     self.setSearchMessage('Display_SearchResultsExceeded');
-                    // }
+                    if (searchResult.sizeExceeded) {
+                        this.setSearchMessage('Display_SearchResultsExceeded');
+                    }
 
                     // No results returned. Not an else if statement so that the more important message is presented
-                    // if (!searchResult.people.length) {
-                    //     self.setSearchMessage('Display_SearchResultsNone');
-                    // }
+                    if (!searchResult.people.length) {
+                        this.setSearchMessage('Display_SearchResultsNone');
+                    }
 
                     return this.$q.resolve(searchResult);
-                },
-                (error) => {
-                    /*self.setErrorMessage(error);
-                    self.clearSearchMessage();*/
-                })
-            .finally(() => {
-                // self.removePendingRequest(promise);
-            });
+                }.bind(this),
+                function(error) {
+                    this.setErrorMessage(error);
+                    this.clearSearchMessage();
+                }.bind(this))
+            .finally(function() {
+                this.removePendingRequest(promise);
+            }.bind(this));
     }
 
     private onSearchTextChange(newValue: string, oldValue: string): void {
@@ -130,11 +147,55 @@ export default abstract class HelpDeskSearchBaseComponent {
         }
 
         this.storeSearchText();
-        // this.clearSearchMessage();
-        // this.clearErrorMessage();
+        this.clearSearchMessage();
+        this.clearErrorMessage();
         this.fetchData();
     }
 
+    protected abortPendingRequests() {
+        for (let index = 0; index < this.pendingRequests.length; index++) {
+            let pendingRequest = this.pendingRequests[index];
+            this.promiseService.abort(pendingRequest);
+        }
+
+        this.pendingRequests = [];
+    }
+
+    protected setErrorMessage(message: string) {
+        this.errorMessage = message;
+    }
+
+    protected clearErrorMessage() {
+        this.errorMessage = null;
+    }
+
+    // If message is a string it will be translated. If it is a promise it will assign the string from the resolved
+    // promise
+    protected setSearchMessage(translationKey: string) {
+        if (!translationKey) {
+            this.clearSearchMessage();
+            return;
+        }
+
+        const self = this;
+        this.$translate(translationKey.toString())
+            .then((translation: string) => {
+                self.searchMessage = translation;
+            });
+    }
+
+    protected clearSearchMessage(): void  {
+        this.searchMessage = null;
+    }
+
+    protected removePendingRequest(promise: IPromise<any>) {
+        let index = this.pendingRequests.indexOf(promise);
+
+        if (index > -1) {
+            this.pendingRequests.splice(index, 1);
+        }
+    }
+
     protected selectPerson(person: IPerson): void {
         this.IasDialogService
             .open({

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

@@ -40,10 +40,19 @@
     </ias-button>
 </div>
 
-<div class="people-search-component-content">
-    <ias-button class="verifications-button ias-cta" ng-if="$ctrl.verificationsEnabled"
-                ng-click="$ctrl.showVerifications()">{{ 'Button_Verifications' | translate }}</ias-button>
+<div class="search-info-container">
+    <div>
+        <ias-button class="verifications-button ias-cta" ng-if="$ctrl.verificationsEnabled"
+                    ng-click="$ctrl.showVerifications()">{{ 'Button_Verifications' | translate }}</ias-button>
+    </div>
+
+    <div class="search-info" ng-class="{'loading': !$ctrl.getMessage()}"
+         ng-if="$ctrl.loading || $ctrl.searchMessage || $ctrl.errorMessage"
+         ng-bind="$ctrl.getMessage() || ('Display_PleaseWait' | translate)">
+    </div>
+</div>
 
+<div class="people-search-component-content">
     <div class="ias-grid">
         <person-card person="person"
                      show-image="$ctrl.photosEnabled"

client/src/helpdesk/helpdesk-search-cards.component.ts

@@ -29,6 +29,7 @@ import LocalStorageService from '../services/local-storage.service';
 import HelpDeskSearchBaseComponent from './helpdesk-search-base.component';
 import SearchResult from '../models/search-result.model';
 import {IPerson} from '../models/person.model';
+import PromiseService from '../services/promise.service';
 
 @Component({
     stylesheetUrl: require('helpdesk/helpdesk-search.component.scss'),
@@ -40,20 +41,25 @@ export default class HelpDeskSearchCardsComponent extends HelpDeskSearchBaseComp
         '$scope',
         '$state',
         '$stateParams',
+        '$translate',
         'ConfigService',
         'IasDialogService',
         'LocalStorageService',
-        'PeopleService'
+        'PeopleService',
+        'PromiseService'
     ];
     constructor($q: IQService,
                 $scope: IScope,
                 private $state: angular.ui.IStateService,
                 $stateParams: angular.ui.IStateParamsService,
+                $translate: angular.translate.ITranslateService,
                 configService: IHelpDeskConfigService,
                 IasDialogService: any,
                 localStorageService: LocalStorageService,
-                peopleService: IPeopleService) {
-        super($q, $scope, $stateParams, configService, IasDialogService, localStorageService, peopleService);
+                peopleService: IPeopleService,
+                promiseService: PromiseService) {
+        super($q, $scope, $stateParams, $translate, configService, IasDialogService, localStorageService,
+            peopleService, promiseService);
     }
 
     $onInit() {
@@ -106,10 +112,10 @@ export default class HelpDeskSearchCardsComponent extends HelpDeskSearchBaseComp
                             }
                         }.bind(this),
                         (error) => {
-                            // self.setErrorMessage(error);
+                            this.setErrorMessage(error);
                         })
                     .finally(() => {
-                        // self.removePendingRequest(promise);
+                        this.removePendingRequest(promise);
                     });
 
                 return promise;

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

@@ -52,10 +52,19 @@
     </ias-menu>
 </div>
 
-<div class="people-search-component-content">
-    <ias-button class="verifications-button ias-cta" ng-if="$ctrl.verificationsEnabled"
-                ng-click="$ctrl.showVerifications()">{{ 'Button_Verifications' | translate }}</ias-button>
+<div class="search-info-container">
+    <div>
+        <ias-button class="verifications-button ias-cta" ng-if="$ctrl.verificationsEnabled"
+                    ng-click="$ctrl.showVerifications()">{{ 'Button_Verifications' | translate }}</ias-button>
+    </div>
+
+    <div class="search-info" ng-class="{'loading': !$ctrl.getMessage()}"
+         ng-if="$ctrl.loading || $ctrl.searchMessage || $ctrl.errorMessage"
+         ng-bind="$ctrl.getMessage() || ('Display_PleaseWait' | translate)">
+    </div>
+</div>
 
+<div class="people-search-component-content">
     <table class="ias-table" ias-sort="$ctrl.sort" ng-show="$ctrl.searchResult.people.length">
         <thead>
         <tr>

client/src/helpdesk/helpdesk-search-table.component.ts

@@ -28,6 +28,7 @@ import SearchResult from '../models/search-result.model';
 import {IPeopleService} from '../services/people.service';
 import {IHelpDeskConfigService} from '../services/helpdesk-config.service';
 import LocalStorageService from '../services/local-storage.service';
+import PromiseService from '../services/promise.service';
 
 @Component({
     stylesheetUrl: require('helpdesk/helpdesk-search.component.scss'),
@@ -41,20 +42,25 @@ export default class HelpDeskSearchTableComponent extends HelpDeskSearchBaseComp
         '$scope',
         '$state',
         '$stateParams',
+        '$translate',
         'ConfigService',
         'IasDialogService',
         'LocalStorageService',
-        'PeopleService'
+        'PeopleService',
+        'PromiseService'
     ];
     constructor($q: IQService,
                 $scope: IScope,
                 private $state: angular.ui.IStateService,
                 $stateParams: angular.ui.IStateParamsService,
+                $translate: angular.translate.ITranslateService,
                 configService: IHelpDeskConfigService,
                 IasDialogService: any,
                 localStorageService: LocalStorageService,
-                peopleService: IPeopleService) {
-        super($q, $scope, $stateParams, configService, IasDialogService, localStorageService, peopleService);
+                peopleService: IPeopleService,
+                 promiseService: PromiseService) {
+        super($q, $scope, $stateParams, $translate, configService, IasDialogService, localStorageService,
+            peopleService, promiseService);
     }
 
     $onInit() {
@@ -76,7 +82,7 @@ export default class HelpDeskSearchTableComponent extends HelpDeskSearchBaseComp
                     {});
             },
             (error) => {
-                // self.setErrorMessage(error);
+                this.setErrorMessage(error);
             });
     }
 

client/src/helpdesk/routes.ts

@@ -36,7 +36,7 @@ export default [
         $stateProvider.state('search', {
             url: '/search?query',
             abstract: true,
-            template: '<div><ui-view/></div>',
+            template: '<div class="help-desk-search-component"><ui-view/></div>',
         });
         $stateProvider.state('search.cards', { url: '/cards', component: 'helpDeskSearchCards' });
         $stateProvider.state('search.table', { url: '/table', component: 'helpDeskSearchTable' });

client/src/peoplesearch/peoplesearch-base.component.ts

@@ -75,14 +75,6 @@ abstract class PeopleSearchBaseComponent {
         this.$state.go(state, { query: this.query });
     }
 
-    // onSearchBoxKeyDown(event: KeyboardEvent): void {
-    //     switch (event.keyCode) {
-    //         case 27: // ESC
-    //             this.clearSearch();
-    //             break;
-    //     }
-    // }
-
     private onSearchTextChange(newValue: string, oldValue: string): void {
         if (newValue === oldValue) {
             return;

client/src/peoplesearch/peoplesearch.scss

@@ -36,6 +36,7 @@ body {
   }
 }
 
+.help-desk-search-component,
 .people-search-component {
   height: 100%;