D-Net

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

import {CountryOverview} from '../../domain/overview-data';

@Component({

  selector: 'app-countries-table',

  templateUrl: './countries-table.component.html',

  // styleUrls: ['./top-menu.component.css'],

  encapsulation: ViewEncapsulation.None

})

export class CountriesTableComponent {

  @Input() isPercentage: boolean;

  @Input() type: string;

  @Input() countries: CountryOverview[];

  isSortedBy: string;

  isDescending: boolean = true;

  constructor() {}

  sortBy(field: string) {

    if (field === this.isSortedBy) {

      this.isDescending = !this.isDescending;

    } else {

      this.isDescending = true;

    }

    this.isSortedBy = field;

    if (field !== 'country') {

      if (this.isPercentage) {

        if (this.isDescending) {

          this.countries.sort((a, b) => b[field].percentage - a[field].percentage);

        } else {

          this.countries.sort((a, b) => a[field].percentage - b[field].percentage);

        }

      } else {

        if (this.isDescending) {

          this.countries.sort((a, b) => b[field].oa - a[field].oa);

        } else {

          this.countries.sort((a, b) => a[field].oa - b[field].oa);

        }

      }

    } else {

      if (this.isDescending) {

        this.countries.sort((a, b) => (a[field] < b[field]) ? 1 : -1);

      } else {

        this.countries.sort((a, b) => (a[field] > b[field]) ? 1 : -1);

      }

    }

  }

}