[ADF-1876] added custom empty result tag for search result control (#2940)

* [ADF-1876] added custom empty template for no search result

* [ADF-1876] added custom empty result tag for search result control

* [ADF-1876] added custom no search result tag for search control component

* [ADF-1876] added documentation for template no result

lib/content-services/mock/public-api.ts

@@ -20,3 +20,4 @@ export * from './document-list.component.mock';
 export * from './document-list.service.mock';
 export * from './search.component.mock';
 export * from './search.service.mock';
+export * from './search-control.component.mock';

lib/content-services/mock/search-control.component.mock.ts

@@ -0,0 +1,41 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+    template: `
+        <adf-search-control [highlight]="true">
+                <adf-empty-search-result>
+                    <span id="custom-no-result">{{customMessage}}</span>
+                </adf-empty-search-result>
+        </adf-search-control>
+    `
+  })
+
+  export class SimpleSearchTestCustomEmptyComponent {
+
+    customMessage: string = '';
+
+    constructor() {
+    }
+
+    setCustomMessageForNoResult(message: string) {
+        this.customMessage = message;
+    }
+
+  }

lib/content-services/search/components/empty-search-result.component.html

@@ -0,0 +1,3 @@
+<div class="adf-empty-search-result">
+    <ng-content></ng-content>
+</div>

lib/content-services/search/components/empty-search-result.component.ts

@@ -0,0 +1,25 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'adf-empty-search-result',
+    templateUrl: './empty-search-result.component.html',
+    encapsulation: ViewEncapsulation.None
+})
+export class EmptySearchResultComponent {}

lib/content-services/search/components/search-control.component.html

@@ -57,11 +57,16 @@
                 </ng-template>
                 <p mat-line class="adf-search-fixed-text"> {{item?.entry.createdByUser.displayName}} </p>
             </mat-list-item>
-            <mat-list-item
-                id="search_no_result"
+            <mat-list-item id="search_no_result"
                 data-automation-id="search_no_result_found"
                 *ngIf="data?.list?.entries.length === 0">
-                <p mat-line class="adf-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchTerm} }}</p>
+                <ng-content
+                    selector="adf-empty-search-result"
+                    *ngIf="isNoSearchTemplatePresent() else defaultNoResult">
+                </ng-content>
+                <ng-template #defaultNoResult>
+                    <p mat-line class="adf-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchTerm} }}</p>
+                </ng-template>
             </mat-list-item>
         </mat-list>
     </ng-template>

lib/content-services/search/components/search-control.component.spec.ts

@@ -26,6 +26,9 @@ import { noResult, results } from '../../mock';
 import { SearchControlComponent } from './search-control.component';
 import { SearchTriggerDirective } from './search-trigger.directive';
 import { SearchComponent } from './search.component';
+import { EmptySearchResultComponent } from './empty-search-result.component';
+import { SimpleSearchTestCustomEmptyComponent } from '../../mock';
+import { SearchModule } from '../../index';
 
 describe('SearchControlComponent', () => {
 
@@ -44,7 +47,8 @@ describe('SearchControlComponent', () => {
             declarations: [
                 SearchControlComponent,
                 SearchComponent,
-                SearchTriggerDirective
+                SearchTriggerDirective,
+                EmptySearchResultComponent
             ],
             providers: [
                 ThumbnailService,
@@ -543,3 +547,55 @@ describe('SearchControlComponent', () => {
         }));
     });
 });
+
+describe('SearchControlComponent - No result custom', () => {
+
+    let fixtureCustom: ComponentFixture<SimpleSearchTestCustomEmptyComponent>;
+    let elementCustom: HTMLElement;
+    let componentCustom: SimpleSearchTestCustomEmptyComponent;
+    let authServiceCustom: AuthenticationService;
+    let searchServiceCustom: SearchService;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                SearchModule
+            ],
+            declarations: [
+                SimpleSearchTestCustomEmptyComponent
+            ]
+        }).compileComponents().then(() => {
+            fixtureCustom = TestBed.createComponent(SimpleSearchTestCustomEmptyComponent);
+            componentCustom = fixtureCustom.componentInstance;
+            elementCustom = fixtureCustom.nativeElement;
+            authServiceCustom = TestBed.get(AuthenticationService);
+            searchServiceCustom = TestBed.get(SearchService);
+        });
+    }));
+
+    beforeEach(async(() => {
+        spyOn(authServiceCustom, 'isEcmLoggedIn').and.returnValue(true);
+    }));
+
+    afterEach(async(() => {
+        fixtureCustom.destroy();
+        TestBed.resetTestingModule();
+    }));
+
+    it('should display the custom no results when it is configured', async(() => {
+        const noResultCustomMessage = 'BANDI IS NOTHING';
+        componentCustom.setCustomMessageForNoResult(noResultCustomMessage);
+        spyOn(searchServiceCustom, 'search').and.returnValue(Observable.of(noResult));
+        fixtureCustom.detectChanges();
+
+        let inputDebugElement = fixtureCustom.debugElement.query(By.css('#adf-control-input'));
+        inputDebugElement.nativeElement.value = 'BANDY NOTHING';
+        inputDebugElement.nativeElement.focus();
+        inputDebugElement.nativeElement.dispatchEvent(new Event('input'));
+        fixtureCustom.whenStable().then(() => {
+            fixtureCustom.detectChanges();
+            expect(elementCustom.querySelector('#custom-no-result').textContent).toBe(noResultCustomMessage);
+        });
+    }));
+
+});

lib/content-services/search/components/search-control.component.ts

@@ -18,12 +18,13 @@
 import { AuthenticationService, ThumbnailService } from '@alfresco/adf-core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output,
-         QueryList, ViewEncapsulation, ViewChild, ViewChildren, ElementRef } from '@angular/core';
+         QueryList, ViewEncapsulation, ViewChild, ViewChildren, ElementRef, TemplateRef, ContentChild } from '@angular/core';
 import { MinimalNodeEntity, QueryBody } from 'alfresco-js-api';
 import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
 import { SearchComponent } from './search.component';
 import { MatListItem } from '@angular/material';
+import { EmptySearchResultComponent } from './empty-search-result.component';
 
 @Component({
     selector: 'adf-search-control',
@@ -102,8 +103,12 @@ export class SearchControlComponent implements OnInit, OnDestroy {
     @ViewChildren(MatListItem)
     private listResultElement: QueryList<MatListItem>;
 
+    @ContentChild(EmptySearchResultComponent)
+    emptySearchTemplate: EmptySearchResultComponent;
+
     searchTerm: string = '';
     subscriptAnimationState: string;
+    noSearchResultTemplate: TemplateRef <any> = null;
 
     private toggleSearch = new Subject<any>();
     private focusSubject = new Subject<FocusEvent>();
@@ -137,6 +142,10 @@ export class SearchControlComponent implements OnInit, OnDestroy {
         this.setupFocusEventHandlers();
     }
 
+    isNoSearchTemplatePresent(): boolean {
+        return this.emptySearchTemplate ? true : false;
+    }
+
     ngOnDestroy(): void {
         if (this.focusSubject) {
             this.focusSubject.unsubscribe();

lib/content-services/search/public-api.ts

@@ -18,3 +18,4 @@
 export * from './components/search.component';
 export * from './components/search-control.component';
 export * from './components/search-trigger.directive';
+export * from './components/empty-search-result.component';

lib/content-services/search/search.module.ts

@@ -27,11 +27,13 @@ import { SearchTriggerDirective } from './components/search-trigger.directive';
 
 import { SearchControlComponent } from './components/search-control.component';
 import { SearchComponent } from './components/search.component';
+import { EmptySearchResultComponent } from './components/empty-search-result.component';
 
 export const ALFRESCO_SEARCH_DIRECTIVES: [any] = [
     SearchComponent,
     SearchControlComponent,
-    SearchTriggerDirective
+    SearchTriggerDirective,
+    EmptySearchResultComponent
 ];
 
 export const ALFRESCO_SEARCH_PROVIDERS: [any] = [