patient-list.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { Router, ActivatedRoute } from '@angular/router';

import { DatatableComponent } from '@swimlane/ngx-datatable/src/components/datatable.component';

import { PatientService } from '../../patient.service';

@Component({
  selector: 'app-patient-list',
  templateUrl: './patient-list.component.html',
  styleUrls: ['./patient-list.component.css']
})
export class PatientListComponent implements OnInit {

  @ViewChild('table') table: DatatableComponent;

  patients: any[];
  columns: any[];
  rows: any[];
  selected: any[];
  filter: string;
  filters: string[];


  constructor(
    private _router: Router,
    private _patientService: PatientService,
    private _route: ActivatedRoute
  ) {
    this.rows = [];
    this.patients = [];
    this.selected = [];
    this.columns = [
      { name: 'id' },
      { name: 'First' },
      { name: 'Last' },
      { name: 'DOB' },
      { name: 'Phone' },
      { name: 'Email' },
    ];
    this.filters = [
      'First',
      'Last'
    ];
  }

  ngOnInit() {
    this._patientService.getPatients()
      .subscribe(
        rows => this.rows = rows,
        err => console.log(err)
      );

    this._patientService.getPatients()
      .subscribe(
        patients => this.patients = patients,
        err => console.log(err)
      );
  }

  onSelect({ selected }): void {
    this.selected = selected;
    this.gotoChart(selected);
  }

  filterBy(a) {
    if (a._selected) {
      this.filter = a.value.toLowerCase();
    }
  }

  gotoChart(selected): void {
    this._router.navigate(['../patient-chart', this.selected[0].id], { relativeTo: this._route });
  }

  onActivate(event) {
    console.log('Activate Event', event);
  }

  updateFilter(event) {
    const filterText = event.target.value.toLowerCase();

    // filter our data
    const patients = this.patients.filter((d) => d[this.filter].toLowerCase().includes(filterText) || !filterText);

    // update the rows
    this.rows = patients;
    // Whenever the filter changes, always go back to the first page
    this.table.offset = 0;
  }

  download() {
    let csvData = this.ConvertToCSV(this.rows);
    let blob = new Blob([csvData], { type: 'text/csv' });
    let url = window.URL.createObjectURL(blob);
    window.open(url);
  }

  ConvertToCSV(rows) {
    let array = typeof rows !== 'object' ? JSON.parse(rows) : rows;
    let str = '';
    let row = '';

    for (let index in rows[0]) {
      // Now convert each value to string and comma-separated
      row += index + ',';
    }
    row = row.slice(0, -1);
    // append Label row with line break
    str += row + '\r\n';

    for (let i = 0; i < array.length; i++) {
      let line = '';
      for (let index in array[i]) {
        if (line != '') line += ','

        line += array[i][index];
      }
      str += line + '\r\n';
    }
    return str;
  }

}