[ADF-3088] move sorting picker to a separate module (#3396)

* move sorting picker to a separate module

* update translation mock

lib/core/sorting-picker/index.ts

@@ -0,0 +1,18 @@
+/*!
+ * @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.
+ */
+
+export * from './public-api';

lib/core/sorting-picker/public-api.ts

@@ -0,0 +1,19 @@
+/*!
+ * @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.
+ */
+
+export * from './sorting-picker.component';
+export * from './sorting-picker.module';

lib/core/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/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/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/sorting-picker/sorting-picker.module.ts

@@ -0,0 +1,37 @@
+/*!
+ * @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 { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { MaterialModule } from '../material.module';
+import { SortingPickerComponent } from './sorting-picker.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        MaterialModule,
+        TranslateModule
+    ],
+    declarations: [
+        SortingPickerComponent
+    ],
+    exports: [
+        SortingPickerComponent
+    ]
+})
+export class SortingPickerModule {}