import { Component , Input , ChangeDetectionStrategy } from '@angular/core' ; import { KeyValuePair } from './types' ; @ Component ( { selector : 'app-row-view' , templateUrl : './row-view.component.html' , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class RowViewComponent { @ Input ( ) transposedData : KeyValuePair [ ] ; @ Input ( ) headerKeyMessage = 'Key' ; @ Input ( ) headerValueMessage = 'Value' ; order : string ; reverse = true ; private orderedData : KeyValuePair [ ] ; constructor ( ) { } setOrder ( name ) { if ( this . order === name ) { this . reverse = ! this . reverse ; } this . order = name ; this . orderedData = this . orderBy ( this . transposedData , this . order , this . reverse ) ; } isOrder ( name ) { return this . order === name && this . reverse ; } isOrderReverse ( name ) { return this . order === name && ! this . reverse ; } get viewData ( ) : KeyValuePair [ ] { return ( this . orderedData ) ? this . orderedData : this . transposedData ; } orderBy ( array , field , reverse ? ) { if ( ! array || ! field ) { return array ; } array . sort ( ( a , b ) => ( a [ field ] > b [ field ] ) ? 1 : ( a [ field ] < b [ field ] ) ? - 1 : 0 ) ; return ( reverse === false ) ? array . reverse ( ) : array ; } }