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,
EventEmitter,
Output,
ViewChild,
ElementRef
} from '@angular/core';
import { TableColumnModel, TableSettings } from './table.component.model';

import { PaginationSettings } from './pagination/pagination-settings';

@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss']
})
export class TableComponent implements OnInit {
@Input()
tabIdx = '0';
@Input()
paginationSettings: PaginationSettings;
@Input()
tableSettings: TableSettings;
@Input()
columns: TableColumnModel[];
@Input()
rows: any[] = [];
@Input()
loading = true;
@Input()
imgProperty: string = null;
@Output()
notify = new EventEmitter();
@Output()
linkNotify = new EventEmitter();
@Output()
btnNotify = new EventEmitter();
@Output()
imgNotify = new EventEmitter();
@Output()
extNotify = new EventEmitter();
@Output()
sortNotify = new EventEmitter();
@ViewChild('rowVal')
rowVal: ElementRef;
@Input()
tempColumn = '';
sortState = ''; // This will amend the ALT tag for the sort controls // ascending="Sort Descending", descending or unsorted="Sort Ascending"
pageSizes = [10, 25, 50, 100];
currentPage = 1;
selectAll = false;
metaData: TableColumnModel[];
data;
@ViewChild('noRows')
noRows: ElementRef = new ElementRef('');
currentColumnSortState = '';
constructor() {}

ngOnInit() {}

linkButton(value) {
this.linkNotify.emit(value);
}

// Translate our multi-arg event handlers into notify.emit() calls

btnClicked(row, btnCol) {
this.btnNotify.emit({ row, btnCol }); // surprise! it works like { "row": row, "btnCol": btnCol}
// console.log('{ row, btnCol } ', JSON.stringify({ row, btnCol }));
// console.log('{ row, btnCol }.row ', JSON.stringify({ row, btnCol }.row));
// console.log('{ row, btnCol }.btnCol ', JSON.stringify({ row, btnCol }.btnCol));
}

imgClicked(row, imgIndex) {
// imgIndex refers to tableSettings.imgUrls[imgIndex] which are displayed in different columns
// The receiver of the emit() determines the meaning: i.e., what clicking on each image does
this.imgNotify.emit({ data: row, index: imgIndex });
}

extClicked(row) {
// imgIndex refers to tableSettings.imgUrls[imgIndex] which are displayed in different columns
// The receiver of the emit() determines the meaning: i.e., what clicking on each image does
this.extNotify.emit({ data: row });
// console.log('row ', JSON.stringify(row));
}

alignCol(val) {
// align based on appearance: does it look like a number or date?
const align = this.isNum_or_MM_DD_YYYY(val) ? 'right' : 'left';
return { 'text-align': align }; // return object, not string
}

isNum_or_MM_DD_YYYY(val) {
const regMM_DD_YYYY = /^\d{2}\/\d{2}\/\d{4}$/;
return !isNaN(+val) || regMM_DD_YYYY.test(val);
}

selectItems(bool) {
this.selectAll = bool;
this.rows.forEach(val => (val.row_selected = bool));
return this.selectAll;
}

sortImg(property) {
let img = '../../../assets/images/ic_sort_arrows_black_12px.svg';
this.currentColumnSortState = 'None';
this.sortState = ' Ascending';
if (this.paginationSettings.sortColumn === property) {
// we're currently sorting on this column. So use paginationSettings.descending
this.paginationSettings.descending
? (this.sortState = ' Ascending', this.currentColumnSortState = 'Descending')
: (this.sortState = ' Descending', this.currentColumnSortState = 'Ascending');
img = this.paginationSettings.descending
? '../../../assets/images/ic_sort_arrows_descend_black_12px.svg'
: '../../../assets/images/ic_sort_arrows_ascend_black_12px.svg';
}
return img;
}

sortTable(column, event?) {
event.preventDefault();
this.paginationSettings.sortColumn = column;
if (this.tempColumn === '' || this.tempColumn !== column) {
this.tempColumn = column;
this.paginationSettings.descending = false;
} else {
this.paginationSettings.descending = !this.paginationSettings.descending;
}

this.notify.emit();
// this.sortNotify.emit();
}
}