app.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { Record } from './models/Record';
import { AppService } from './app.service';
import { Observable } from 'rxjs';
import { Search } from './models/Search';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  records: Array<Record>;
  fetchedRecords: Array<Record>;
  sort = true;

  constructor(private appService: AppService) {}

  ngOnInit(): void {
    this.appService.getRecords().subscribe((data) => {
      this.fetchedRecords = data;
      this.records = data;
    });
  }

  searchRecords(event: Search) {
    this.doSearchRecords(event.value, event.type);
  }

  doSearchRecords(value, type) {
    if (!value) {
      this.records = this.fetchedRecords;
      return;
    }

    const search = new RegExp(value, 'gi');
    if (type === 'ccypair') {
      this.filterCcyPair(search);
    } else {
      this.filterStatus(search);
    }
  }

  filterCcyPair(filter) {
    this.records = this.fetchedRecords.filter(
      (record) => record['CcyPair'].search(filter) > -1
    );
  }

  filterStatus(filter) {
    this.records = this.fetchedRecords.filter(
      (record) => record['Status'].search(filter) > -1
    );
  }

  sortRecords() {
    if (this.sort) {
      this.records = this.records.sort(this.asc);
    } else {
      this.records = this.records.sort(this.desc);
    }
    this.sort = !this.sort;
  }

  asc(rec1, rec2) {
    if (rec1['Time'] > rec2['Time']) return 1;
    if (rec1['Time'] < rec2['Time']) return -1;
    return 0;
  }

  desc(rec1, rec2) {
    if (rec1['Time'] < rec2['Time']) return 1;
    if (rec1['Time'] > rec2['Time']) return -1;
    return 0;
  }
}