<div>
  <ngx-datatable
    #upcoming
    class="material"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'"
    [rows]="rows"
    [columns]="columns"
    [columnMode]="'flex'"
    [selected]="selected"
    [selectCheck]="selectUnselect"
    [selectionType]="'single'"
    [limit]="10"
    (select)='onSelect($event)'>
  </ngx-datatable>
</div>

@Component({
    selector: 'rmis-upcomingstudies',
    templateUrl: './upcoming-studies.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    styleUrls: ['./upcoming-studies.component.css']
})
export class UpcomingStudiesComponent implements OnInit, OnChanges {

    // ToDo: Check specific data types
    @Input() rows = [];
    @Input() temp = [];
 constructor(private studiesService: StudiesService,
                private exceptionService: ExceptionService,
                private cd: ChangeDetectorRef) {
        // Set up the column labels and properties for the upcoming study table
        this.columns = [
            {prop: 'protocol_number', name: 'Protocol Number', flexGrow: 1},
            {prop: 'start_date', name: 'Start Date', flexGrow: 1},
            {prop: 'end_date', name: 'End Date', flexGrow: 1},
            {prop: 'patient_count', name: 'Patient Count', flexGrow: 1},
            {prop: 'trial_country', name: 'Country', flexGrow: 1},
        ];
    }

    ngOnInit() {
        this.getUpcomingStudies();
    }



    /**
     * Get upcoming clinical trial studies data and assign to rows to be displayed on frontend.
     * @memberOf UpcomingStudiesComponent
     */
    getUpcomingStudies() {
        this.studiesService
            .getUpComingStudies()
            .subscribe(
                // the first argument is a function which runs on success
                (data) => {
                    console.log('Data from backend-upcoming', data);
                    this.temp = data['records'];
                    this.rows = this.studiesService.util_to_cal_time(data['records']);
                    // this.rows = data.records;

                },
                // the second argument is a function which runs on error
                (err: HttpErrorResponse) => {
                    this.exceptionService.errorResponse(err);
                },
                // the third argument is a function which runs on completion
                () => {
                    this.cd.markForCheck();
                }
            );
    }