[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

lib/core/app-config/schema.json

@@ -599,6 +599,46 @@
                   }
                 }
               }
+            },
+            "sorting": {
+              "description": "Sorting options and defaults",
+              "required": ["options"],
+              "properties": {
+                "options": {
+                  "type": "array",
+                  "minItems": 1,
+                  "items": {
+                      "description": "Sorting options available for users to choose from",
+                      "type": "object",
+                      "required": ["key", "label", "type", "field", "ascending"],
+                      "properties": {
+                        "key": { "type": "string" },
+                        "label": { "type": "string" },
+                        "type": { "type": "string" },
+                        "field": { "type": "string" },
+                        "ascending": { "type": "boolean" }
+                      }
+                    }
+                },
+                "defaults": {
+                  "description": "Predefined sorting to execute by default",
+                  "options": {
+                    "type": "array",
+                    "minItems": 1,
+                    "items": {
+                      "type": "object",
+                      "required": ["key", "label", "type", "field", "ascending"],
+                      "properties": {
+                        "key": { "type": "string" },
+                        "label": { "type": "string" },
+                        "type": { "type": "string" },
+                        "field": { "type": "string" },
+                        "ascending": { "type": "boolean" }
+                      }
+                    }
+                  }
+                }
+              }
             }
           }
         }

lib/core/components/sorting-picker/sorting-picker.component.html

@@ -0,0 +1,12 @@
+<mat-form-field>
+    <mat-select [(value)]="selected" (selectionChange)="onChanged($event)">
+        <mat-option *ngFor="let option of options" [value]="option.key">
+            {{ option.label | translate }}
+        </mat-option>
+    </mat-select>
+</mat-form-field>
+
+<button *ngIf="selected" mat-icon-button (click)="toggleSortDirection()">
+    <mat-icon *ngIf="ascending">arrow_upward</mat-icon>
+    <mat-icon *ngIf="!ascending">arrow_downward</mat-icon>
+</button>

lib/core/components/sorting-picker/sorting-picker.component.spec.ts

@@ -0,0 +1,52 @@
+/*!
+ * @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 { SortingPickerComponent } from './sorting-picker.component';
+
+describe('SortingPickerComponent', () => {
+
+    let component: SortingPickerComponent;
+
+    beforeEach(() => {
+        component = new SortingPickerComponent();
+    });
+
+    it('should raise changed event on changing value', (done) => {
+        component.selected = 'key1';
+        component.ascending = false;
+
+        component.change.subscribe((event: { key: string, ascending: boolean }) =>  {
+            expect(event.key).toBe('key2');
+            expect(event.ascending).toBeFalsy();
+            done();
+        });
+        component.onChanged(<any> { value: 'key2' });
+    });
+
+    it('should raise changed event on changing direction', (done) => {
+        component.selected = 'key1';
+        component.ascending = false;
+
+        component.change.subscribe((event: { key: string, ascending: boolean }) =>  {
+            expect(event.key).toBe('key1');
+            expect(event.ascending).toBeTruthy();
+            done();
+        });
+        component.toggleSortDirection();
+    });
+
+});

lib/core/components/sorting-picker/sorting-picker.component.ts

@@ -0,0 +1,61 @@
+/*!
+ * @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, Input, EventEmitter, Output } from '@angular/core';
+import { MatSelectChange } from '@angular/material';
+
+@Component({
+    selector: 'adf-sorting-picker',
+    templateUrl: './sorting-picker.component.html',
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-sorting-picker' }
+})
+export class SortingPickerComponent {
+
+    /** Available sorting options */
+    @Input()
+    options: Array<{key: string, label: string}> = [];
+
+    /** Currently selected option key */
+    @Input()
+    selected: string;
+
+    /** Current sorting direction */
+    @Input()
+    ascending = true;
+
+    /** Raised each time sorting key or direction gets changed. */
+    @Output()
+    change = new EventEmitter<{ key: string, ascending: boolean }>();
+
+    onChanged(event: MatSelectChange) {
+        this.selected = event.value;
+        this.raiseChangedEvent();
+    }
+
+    toggleSortDirection() {
+        this.ascending = !this.ascending;
+        this.raiseChangedEvent();
+    }
+
+    private raiseChangedEvent() {
+        this.change.emit({
+            key: this.selected,
+            ascending: this.ascending
+        });
+    }
+}

lib/core/core.module.ts

@@ -81,6 +81,7 @@ import { UserPreferencesService } from './services/user-preferences.service';
 import { SearchConfigurationService } from './services/search-configuration.service';
 import { startupServiceFactory } from './services/startup-service-factory';
 import { EmptyContentComponent } from './components/empty-content/empty-content.component';
+import { SortingPickerComponent } from './components/sorting-picker/sorting-picker.component';
 
 export function createTranslateLoader(http: HttpClient, logService: LogService) {
     return new TranslateLoaderService(http, logService);
@@ -232,7 +233,8 @@ export class CoreModuleLazy {
         })
     ],
     declarations: [
-        EmptyContentComponent
+        EmptyContentComponent,
+        SortingPickerComponent
     ],
     exports: [
         AboutModule,
@@ -262,7 +264,8 @@ export class CoreModuleLazy {
         DataTableModule,
         TranslateModule,
         ButtonsMenuModule,
-        EmptyContentComponent
+        EmptyContentComponent,
+        SortingPickerComponent
     ],
     providers: [
         ...providers(),

lib/core/index.ts

@@ -36,6 +36,7 @@ export * from './comments/index';
 export * from './buttons-menu/index';
 
 export * from './components/empty-content/empty-content.component';
+export * from './components/sorting-picker/sorting-picker.component';
 
 export * from './pipes/index';
 export * from './services/index';