[ADF-2045] Pagination is not working properly on Search Results Page (#2744)

demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.ts

@@ -23,7 +23,7 @@ import { Component, Input } from '@angular/core';
 export class OverlayViewerComponent {
 
     @Input()
-    showViewer: boolean = false;
+    showViewer = false;
 
     nodeId: string;
 

demo-shell/src/app/components/search/search-result.component.html

@@ -1,7 +1,7 @@
 <adf-search [searchTerm]="searchedWord"
             [maxResults]="maxItems"
             [skipResults]="skipCount"
-            (resultLoaded)="showSearchResult($event)"
+            (resultLoaded)="onSearchResultLoaded($event)"
             #search>
 </adf-search>
 
@@ -9,10 +9,11 @@
         [currentFolderId]="null"
         [nodeResult]="resultNodePageList"
         [disableDragArea]="true"
-        (documentListReady)="refreshResults($event)"
+        [pagination]="pagination"
-        (changedPageSize)="refreshPage($event)"
+        (documentListReady)="onDocumentListReady($event)"
-        (changedPageNumber)="refreshPage($event)"
+        (changedPageSize)="onRefreshPagination($event)"
-        (turnedNextPage)="refreshPage($event)"
+        (changedPageNumber)="onRefreshPagination($event)"
-        (loadNext)="refreshPage($event)"
+        (turnedNextPage)="onRefreshPagination($event)"
-        (turnedPreviousPage)="refreshPage($event)">
+        (loadNext)="onRefreshPagination($event)"
+        (turnedPreviousPage)="onRefreshPagination($event)">
 </app-files-component>

demo-shell/src/app/components/search/search-result.component.ts

@@ -31,15 +31,12 @@ export class SearchResultComponent implements OnInit {
     @ViewChild('search')
     search: SearchComponent;
 
-    fileNodeId: string;
     queryParamName = 'q';
     searchedWord = '';
-    fileShowed = false;
-    navigationMode = 'dblclick';
     resultNodePageList: NodePaging;
     maxItems: number;
     skipCount = 0;
-    paging: Pagination;
+    pagination: Pagination;
 
     constructor(public router: Router,
                 private preferences: UserPreferencesService,
@@ -56,17 +53,17 @@ export class SearchResultComponent implements OnInit {
         this.maxItems = this.preferences.paginationSize;
     }
 
-    showSearchResult(event: NodePaging) {
+    onSearchResultLoaded(nodePaging: NodePaging) {
-        this.resultNodePageList = event;
+        this.resultNodePageList = nodePaging;
-        this.paging = event.list.pagination;
+        this.pagination = nodePaging.list.pagination;
     }
 
-    refreshResults(event: any) {
+    onDocumentListReady() {
-        this.search.reload();
+       // this.search.reload();
     }
 
-    refreshPage(event: Pagination) {
+    onRefreshPagination(pagination: Pagination) {
-        this.maxItems = event.maxItems;
+         this.maxItems = pagination.maxItems;
-        this.skipCount = event.skipCount;
+         this.skipCount = pagination.skipCount;
     }
 }

demo-shell/src/app/components/webscript/webscript.component.ts

@@ -24,8 +24,6 @@ import { LogService } from '@alfresco/adf-core';
 })
 export class WebscriptComponent {
 
-    currentPath = '/';
-    host = 'http://127.0.0.1:8080';
     scriptPath = 'sample/folder/Company%20Home';
     contextRoot = 'alfresco';
     servicePath = 'service';

docs/search-control.component.md

@@ -39,7 +39,7 @@ Displays a input text which shows find-as-you-type suggestions.
 | expandable | boolean |  true  | Whether to use an expanding search control, if false then a regular input is used. |
 | liveSearchEnabled | boolean | true  | Whether find-as-you-type suggestions should be offered for matching content items. Set to false to disable. |
 | liveSearchMaxResults | number | 5 |  Maximum number of results to show in the live search. |
-| customSearchNode | [QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md) | | object which allow you to perform more elaborated query from the search api |
+| customQueryBody | [QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md) | | object which allow you to perform more elaborated query from the search api |
 
 ### Events
 

docs/search.component.md

@@ -32,7 +32,7 @@
 | maxResults | number  | 20 | Maximum number of results to show in the search. |
 | skipResults | number  | 0 | Number of results to skip from the results pagination. |
 | displayWith | function | | Function that maps an option's value to its display value in the trigger |
-| searchNode | [QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md) | | object which allow you to perform more elaborated query from the search api |
+| queryBody| [QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md) | | object which allow you to perform more elaborated query from the search api |
 
 ### Events
 

lib/content-services/document-list/components/document-list.component.ts

@@ -174,7 +174,6 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
     noPermission: boolean = false;
     selection = new Array<MinimalNodeEntity>();
 
-    // PaginatedComponent implementation
     pagination = new Subject<Pagination>();
 
     private layoutPresets = {};
@@ -282,6 +281,7 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
             if (changes.node && changes.node.currentValue) {
                 this.resetSelection();
                 this.data.loadPage(changes.node.currentValue);
+                this.pagination.next(changes.node.currentValue.list.pagination);
             } else if (changes.rowFilter) {
                 this.data.setFilter(changes.rowFilter.currentValue);
                 if (this.currentFolderId) {
@@ -862,7 +862,6 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
         }
     }
 
-    // PaginatedComponent implementation
     updatePagination(params: PaginationQueryParams) {
         const needsReload = this.maxItems !== params.maxItems || this.skipCount !== params.skipCount;
 
@@ -874,7 +873,6 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
         }
     }
 
-    // PaginatedComponent implementation
     get supportedPageSizes(): number[] {
         return this.appConfig.get('document-list.supportedPageSizes', [5, 10, 15, 25]);
     }

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

@@ -118,7 +118,7 @@ export let errorJson = {
 
 @Component({
     template: `
-    <adf-search [searchTerm]="searchedWord" [searchNode]="searchNode" [maxResults]="maxResults"
+    <adf-search [searchTerm]="searchedWord" [queryBody]="searchNode" [maxResults]="maxResults"
         (error)="showSearchResult('ERROR')"
         (success)="showSearchResult('success')" #search>
        <ng-template let-data>

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

@@ -28,7 +28,7 @@
 
 <adf-search #auto="searchAutocomplete"
             class="adf-search-result-autocomplete"
-            [searchNode]="customSearchNode"
+            [queryBody]="customSearchNode"
             [maxResults]="liveSearchMaxResults">
     <ng-template let-data>
         <mat-list *ngIf="isSearchBarActive()" id="autocomplete-search-result-list">

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

@@ -64,7 +64,7 @@ export class SearchControlComponent implements OnInit, OnDestroy {
     liveSearchMaxResults: number = 5;
 
     @Input()
-    customSearchNode: QueryBody;
+    customQueryBody: QueryBody;
 
     @Output()
     submit: EventEmitter<any> = new EventEmitter();

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

@@ -67,7 +67,7 @@ export class SearchComponent implements AfterContentInit, OnChanges {
     searchTerm: string = '';
 
     @Input()
-    searchNode: QueryBody;
+    queryBody: QueryBody;
 
     @Input('class')
     set classList(classList: string) {
@@ -100,14 +100,13 @@ export class SearchComponent implements AfterContentInit, OnChanges {
 
     _classList: { [key: string]: boolean } = {};
 
-    constructor(
+    constructor(private searchService: SearchService,
-        private searchService: SearchService,
+                private changeDetectorRef: ChangeDetectorRef,
-        private changeDetectorRef: ChangeDetectorRef,
+                private _elementRef: ElementRef) {
-        private _elementRef: ElementRef) {
         this.keyPressedStream.asObservable()
             .debounceTime(200)
             .subscribe((searchedWord: string) => {
-                this.displaySearchResults(searchedWord);
+                this.loadSearchResults(searchedWord);
             });
     }
 
@@ -117,11 +116,13 @@ export class SearchComponent implements AfterContentInit, OnChanges {
 
     ngOnChanges(changes) {
         this.resetResults();
+
         if (changes.searchTerm && changes.searchTerm.currentValue) {
-            this.displaySearchResults(changes.searchTerm.currentValue);
+            this.loadSearchResults(changes.searchTerm.currentValue);
-        }
+        } else if (changes.queryBody && changes.queryBody.currentValue) {
-        if (changes.searchNode && changes.searchNode.currentValue) {
+            this.loadSearchResults();
-            this.displaySearchResults();
+        } else {
+            this.loadSearchResults(this.searchTerm);
         }
     }
 
@@ -131,7 +132,7 @@ export class SearchComponent implements AfterContentInit, OnChanges {
     }
 
     reload() {
-        this.displaySearchResults(this.searchTerm);
+        this.loadSearchResults(this.searchTerm);
     }
 
     private cleanResults() {
@@ -144,43 +145,43 @@ export class SearchComponent implements AfterContentInit, OnChanges {
         return searchOpts && searchOpts.query && searchOpts.query.query;
     }
 
-    private displaySearchResults(searchTerm?: string) {
+    private loadSearchResults(searchTerm?: string) {
-        let searchOpts: QueryBody = this.getSearchNode(searchTerm);
+        let searchOpts: QueryBody = this.getQueryBody(searchTerm);
 
         if (this.hasValidSearchQuery(searchOpts)) {
             this.searchService
                 .search(searchOpts)
                 .subscribe(
-                results => {
+                    results => {
-                    this.results = <NodePaging> results;
+                        this.results = <NodePaging> results;
-                    this.resultLoaded.emit(this.results);
+                        this.resultLoaded.emit(this.results);
-                    this.isOpen = true;
+                        this.isOpen = true;
-                    this.setVisibility();
+                        this.setVisibility();
-                },
+                    },
-                error => {
+                    error => {
-                    if (error.status !== 400) {
+                        if (error.status !== 400) {
-                        this.results = null;
+                            this.results = null;
-                        this.error.emit(error);
+                            this.error.emit(error);
-                    }
+                        }
-                });
+                    });
         } else {
             this.cleanResults();
         }
     }
 
-    private getSearchNode(searchTerm: string): QueryBody {
+    private getQueryBody(searchTerm: string): QueryBody {
-        if (this.searchNode) {
+        if (this.queryBody) {
-            if (!this.searchNode.query.query && searchTerm) {
+            if (!this.queryBody.query.query && searchTerm) {
-                this.searchNode.query.query = searchTerm;
+                this.queryBody.query.query = searchTerm;
             }
-            return this.searchNode;
+            return this.queryBody;
         } else {
             return this.generateDefaultSearchNode(searchTerm);
         }
     }
 
     private generateDefaultSearchNode(searchTerm: string): QueryBody {
-        let defaultSearchNode: QueryBody = {
+        let defaultQueryBody: QueryBody = {
             query: {
                 query: searchTerm ? `${searchTerm}* OR name:${searchTerm}*` : searchTerm
             },
@@ -193,7 +194,8 @@ export class SearchComponent implements AfterContentInit, OnChanges {
                 { query: "TYPE:'cm:folder' OR TYPE:'cm:content'" },
                 { query: 'NOT cm:creator:System' }]
         };
-        return defaultSearchNode;
+
+        return defaultQueryBody;
     }
 
     hidePanel() {