Summary Table
Categories |
Total Count |
PII |
0 |
URL |
0 |
DNS |
0 |
EKL |
0 |
IP |
0 |
PORT |
0 |
VsID |
0 |
CF |
0 |
AI |
0 |
VPD |
0 |
PL |
0 |
Other |
0 |
File Content
import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { QueryParams } from '../../models/patientModels';
import { GridElement } from '../../models/uiModels';
/**
* Generic grid display component for object arrays
*/
@Component({
selector: 'app-grid',
templateUrl: './grid.component.html',
styleUrls: ['./grid.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class GridComponent implements OnInit {
_format = 'default';
/**
* Whether column headers are targets(clickable)
*/
@Input() sortable = false;
/**
* The data array to display
*/
@Input() data: Array<object> = [];
/**
* Metadata about the object array, including object property names, grid header titles and tooltips
*/
@Input() dataDef: GridElement[] = [];
/**
* query parameters for displaying current sort/page/filter/pagesize information
*/
@Input() params: QueryParams;
/**
* event for notifying parent of a click on a column header
*/
@Output() headerClick = new EventEmitter<string>();
/**
* event for notifying parent a specific record was clicked
*/
@Output() rowClick = new EventEmitter<object>();
/**
* event for notifying parent of a paging request
*/
@Output() pagerClick = new EventEmitter<string>();
/**
* table styling
*/
@Input()
set format(value: string) {
this._format = value;
}
constructor() {}
ngOnInit() {}
/**
* Trigger event to notify parent a row was clicked
* @param row array object that was clicked
*/
clickRow(row: any) {
this.rowClick.emit(row);
}
/** Trigger event to notify parent a header was clicked */
clickHeader(itm: GridElement) {
this.headerClick.emit(itm.key);
}
clickPager(dest: string) {
this.pagerClick.emit(dest);
}
getPosition(o: object, key: string) {
if (o && key) {
return Object.keys(o).indexOf(key) + 1;
}
}
getLength(o: object) {
if (o) {
return Object.keys(o).length;
}
}
getPagerNumbers(len: number) {
return Array.from(Array(len), (x, i) => i + 1);
}
/**
* Create a row label for screenreaders that contains the first 2 column headers + values
* @param row datarow to create the label for
*/
getAriaRowLabel(row: object) {
let retVal = 'Datarow, ' + this.dataDef[0].header + ' is ';
if (row[this.dataDef[0].key]) {
retVal += (this.dataDef[0].format === 'date') ? new Date(row[this.dataDef[0].key]).toLocaleString() : row[this.dataDef[0].key];
} else {
retVal += 'Null';
}
retVal += ', ' + this.dataDef[1].header + ' is ';
if (row[this.dataDef[1].key]) {
retVal += (this.dataDef[1].format === 'date') ? new Date(row[this.dataDef[1].key]).toLocaleString() : row[this.dataDef[1].key];
} else {
retVal += 'Null';
}
retVal += '. Click for full record details';
return retVal;
}
getTooltip(itm: GridElement) {
let retVal = itm.tooltip;
if (this.params.sort) {
if (this.params.sort[itm.key] === 'asc') { retVal += '. Sorted in ascending order'; }
if (this.params.sort[itm.key] === 'desc') { retVal += '. Sorted in descending order'; }
if (this.params.sort[itm.key] && Object.keys(this.params.sort).length > 1) {
retVal += ', sort position ' + (Object.keys(this.params.sort).indexOf(itm.key) + 1);
}
}
return retVal;
}
}