D-Net

import {Component, Input, Output, EventEmitter} from '@angular/core';

@Component({

    selector: 'search-sorting',

    template: `        

      <span class="uk-width-1-4"> Sort by:</span>

      <mat-select *ngIf="(entityType != 'community' && entityType != 'funder' )" 

              class="uk-select uk-width-auto uk-text-bold matSelection" 

              id="form-horizontal-select" name="select_results_per_page"

              [disableOptionCentering]="true"

              panelClass="matSelectionPanel"

              [(ngModel)]="sortBy" (ngModelChange)="sortByChanged()">

              <mat-option value="">Relevance</mat-option>

              <mat-option value="resultdateofacceptance,descending">Date (most recent)</mat-option>

              <mat-option value="resultdateofacceptance,ascending">Date (least recent)</mat-option>

      </mat-select>

      <mat-select *ngIf="(entityType == 'community' || entityType == 'funder')" 

              class="uk-select uk-width-auto uk-text-bold matSelection" 

              id="form-horizontal-select" name="select_results_per_page"

              [(ngModel)]="sortBy" (ngModelChange)="sortByChanged()"

              [disableOptionCentering]="true"

              panelClass="matSelectionPanel">

              <mat-option value="">Title</mat-option>

              <mat-option value="creationdate,descending">Creation Date (most recent)</mat-option>

              <mat-option value="creationdate,ascending">Creation Date (least recent)</mat-option>

      </mat-select>

    `

})

export class SearchSortingComponent {

    @Input() sortBy: string = '';

    @Input() entityType: string = '';

    @Output() sortByChange  = new EventEmitter();

    constructor () {}

    ngOnInit() {}

    sortByChanged() {

      this.sortByChange.emit({

          value: this.sortBy

      });

    }

}