[ADF-2131] Search sorting (#3334)

* sorting configuration

* detect primary sorting and use with document list

* search results sorting

* docs update

* unit tests and code updates

* update code

* update code

* generic sorting picker, test updates

* ability to switch off client side sorting

* update docs for document list

demo-shell/src/app.config.json

@@ -55,6 +55,16 @@
     ],
     "search": {
       "include": ["path", "allowableOperations"],
+      "sorting": {
+        "options": [
+          { "key": "name", "label": "Name", "type": "FIELD", "field": "cm:name", "ascending": true },
+          { "key": "content.sizeInBytes", "label": "Size", "type": "FIELD", "field": "content.size", "ascending": true },
+          { "key": "description", "label": "Description", "type": "FIELD", "field": "cm:description", "ascending": true }
+        ],
+        "defaults": [
+          { "key": "name", "type": "FIELD", "field": "cm:name", "ascending": true }
+        ]
+      },
       "filterQueries": [
         { "query": "TYPE:'cm:folder' OR TYPE:'cm:content'" },
         { "query": "NOT cm:creator:System" }

demo-shell/src/app/components/files/files.component.html

@@ -1,6 +1,6 @@
 <div class="container">
 
-    <mat-accordion class="adf-container-recent">
+    <mat-accordion *ngIf="showRecentFiles" class="adf-container-recent">
         <mat-expansion-panel  hideToggle="true">
             <mat-expansion-panel-header >
                 <mat-panel-title>
@@ -28,7 +28,7 @@
         </mat-expansion-panel>
     </mat-accordion>
 
-    <div class="adf-site-container-style" id="site-container">
+    <div *ngIf="showSitePicker" class="adf-site-container-style" id="site-container">
         <adf-sites-dropdown (change)="onSiteChange($event)" [hideMyFiles]="false" [relations]="'members'">
         </adf-sites-dropdown>
     </div>
@@ -194,6 +194,9 @@
                 [display]="displayMode"
                 [node]="nodeResult"
                 [includeFields]="includeFields"
+                [sorting]="sorting"
+                [sortingMode]="sortingMode"
+                [showHeader]="showHeader"
                 (error)="onNavigationError($event)"
                 (success)="resetError()"
                 (ready)="emitReadyEvent($event)"
@@ -416,7 +419,7 @@
     </adf-start-process>
 </div>
 
-<div class="adf-content-service-settings">
+<div *ngIf="showSettingsPanel" class="adf-content-service-settings">
 
     <p>Current folder ID: {{ documentList.currentFolderId }}</p>
 

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

@@ -74,6 +74,24 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
 
     processId;
 
+    @Input()
+    sorting = ['name', 'asc'];
+
+    @Input()
+    sortingMode = 'client';
+
+    @Input()
+    showRecentFiles = true;
+
+    @Input()
+    showSitePicker = true;
+
+    @Input()
+    showSettingsPanel = true;
+
+    @Input()
+    showHeader = true;
+
     @Input()
     selectionMode = 'multiple';
 

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

@@ -14,17 +14,26 @@
     <adf-search-filter #searchFilter></adf-search-filter>
 
     <div class="adf-search-results__content">
+        <div class="adf-search-results__sorting">
+            <adf-search-sorting-picker></adf-search-sorting-picker>
+        </div>
         <app-files-component
-                [currentFolderId]="null"
-                [nodeResult]="resultNodePageList"
-                [disableDragArea]="true"
-                [pagination]="pagination"
-                (changedPageSize)="onRefreshPagination($event)"
-                (changedPageNumber)="onRefreshPagination($event)"
-                (turnedNextPage)="onRefreshPagination($event)"
-                (loadNext)="onRefreshPagination($event)"
-                (turnedPreviousPage)="onRefreshPagination($event)"
-                (deleteElementSuccess)="onDeleteElementSuccess($event)">
+            [showHeader]="false"
+            [sorting]="sorting"
+            [sortingMode]="'server'"
+            [showRecentFiles]="false"
+            [showSitePicker]="false"
+            [showSettingsPanel]="false"
+            [currentFolderId]="null"
+            [nodeResult]="resultNodePageList"
+            [disableDragArea]="true"
+            [pagination]="pagination"
+            (changedPageSize)="onRefreshPagination($event)"
+            (changedPageNumber)="onRefreshPagination($event)"
+            (turnedNextPage)="onRefreshPagination($event)"
+            (loadNext)="onRefreshPagination($event)"
+            (turnedPreviousPage)="onRefreshPagination($event)"
+            (deleteElementSuccess)="onDeleteElementSuccess($event)">
         </app-files-component>
     </div>
 </div>

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

@@ -14,6 +14,10 @@
     &__content {
         flex: 1;
     }
+
+    &__sorting {
+        text-align: right;
+    }
 }
 
 div.search-results-container {

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

@@ -39,6 +39,8 @@ export class SearchResultComponent implements OnInit {
     maxItems: number;
     skipCount = 0;
 
+    sorting = ['name', 'asc'];
+
     constructor(public router: Router,
                 private preferences: UserPreferencesService,
                 private queryBuilder: SearchQueryBuilderService,
@@ -51,6 +53,13 @@ export class SearchResultComponent implements OnInit {
     }
 
     ngOnInit() {
+
+        this.sorting = this.getSorting();
+
+        this.queryBuilder.updated.subscribe(() => {
+            this.sorting = this.getSorting();
+        });
+
         if (this.route) {
             this.route.params.forEach((params: Params) => {
                 this.searchedWord = params.hasOwnProperty(this.queryParamName) ? params[this.queryParamName] : null;
@@ -79,4 +88,14 @@ export class SearchResultComponent implements OnInit {
     onDeleteElementSuccess(element: any) {
         this.searchResult.reload();
     }
+
+    private getSorting(): string[] {
+        const primary = this.queryBuilder.getPrimarySorting();
+
+        if (primary) {
+            return [primary.key, primary.ascending ? 'asc' : 'desc'];
+        }
+
+        return ['name', 'asc'];
+    }
 }