src/app/common/data-table/data-table.component.ts

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import {Component, EventEmitter, Input, Output} from '@angular/core';
import {Sort} from '../../services/domain/paging/sort.model';
import {Page} from '../../services/domain/paging/page.model';
import {IPageChangeEvent, ITdDataTableColumn, ITdDataTableSortChangeEvent, TdDataTableSortingOrder} from '@covalent/core';
import {TranslateService} from '@ngx-translate/core';

export interface TableData {
  data: any[];
  totalElements: number;
  totalPages: number;
}

export interface TableFetchRequest {
  page: Page;
  sort: Sort;
}

@Component({
  selector: 'fims-data-table',
  templateUrl: './data-table.component.html'
})
export class DataTableComponent {

  pageSizes: number[] = [10, 15, 20];

  private currentPage: Page = {
    pageIndex: 0,
    size: this.pageSizes[0]
  };

  private currentSort: Sort = {
    sortColumn: 'identifier',
    sortDirection: 'ASC'
  };

  _columns: any[];

  @Input('data') data: TableData = {
    totalElements: 0,
    totalPages: 0,
    data: []
  };

  @Input() set columns(columns: ITdDataTableColumn[]) {
    columns.forEach((column) => {
      this.translate.get(column.label)
        .subscribe((value) => {
          column.label = value;
          column.tooltip = value;
        });
    });
    this._columns = columns;
  };

  @Input() sortable = false;

  @Input() set sortBy(sortBy: string) {
    this.currentSort.sortColumn = sortBy;
  }

  @Input() pageable = false;

  @Input() actionColumn = true;

  @Input() actionColumnLabel = 'SHOW';

  @Input() loading = false;

  @Output() onFetch: EventEmitter<TableFetchRequest> = new EventEmitter<TableFetchRequest>();

  @Output() onActionCellClick: EventEmitter<any> = new EventEmitter<any>();

  constructor(private translate: TranslateService) {}

  page(pagingEvent: IPageChangeEvent): void {
    this.currentPage = {
      pageIndex: pagingEvent.page - 1,
      size: pagingEvent.pageSize
    };
    this.fetch();
  }

  sortChanged(event: ITdDataTableSortChangeEvent): void {
    this.currentSort = {
      sortDirection: event.order === TdDataTableSortingOrder.Ascending ? 'DESC' : 'ASC',
      sortColumn: event.name
    };
    this.fetch();
  }

  private fetch() {
    const fetchRequest: TableFetchRequest = {
      page: this.currentPage,
      sort: this.currentSort
    };
    this.onFetch.emit(fetchRequest);
  }

  actionCellClick(row): void {
    this.onActionCellClick.emit(row);
  }

  get hasData(): boolean {
    return this.data && this.data.data && this.data.data.length > 0;
  }

  isBoolean(value: any): boolean {
    return typeof(value) === 'boolean';
  }

}