src/app/components/table-version/table-version.component.ts
Displays the table data according to the selected version
OnInit
selector | table-version |
styleUrls | ./table-version.component.scss |
templateUrl | ./table-version.component.html |
Properties |
Methods |
Inputs |
HostBindings |
Accessors |
constructor(dataService: TableDataService, zone: NgZone)
|
|||||||||
Initializes TableDataServuce and NgZone
Parameters :
|
additionalHeaders | |
Type : [] | undefined
|
|
Sets the additional header information and their column definitions |
cellHeaders | |
Type : [] | undefined
|
|
Sets the cell header information and their column definitions |
headerInfo | |
Type : HeaderData[]
|
|
Sets the header information and column definitions |
isDownload | |
Type : boolean
|
|
Default value : false
|
|
Flag to display/hide Download CSV button |
isTotal | |
Type : boolean
|
|
Default value : false
|
|
Flag to display/hide total below the table |
versionChooserDisabled | |
Type : boolean
|
|
Default value : false
|
|
Flag to enable/disable version selector |
versionData | |
Type : ChooseVersion[]
|
|
Default value : []
|
|
Details of release and version |
class.scroll-end |
Type : boolean
|
Default value : false
|
Adds class scroll-end to the host element when table is scrolled to the right |
setData | ||||||
setData(version: ChooseVersion)
|
||||||
Sets the table data according to the selected version
Parameters :
Returns :
void
|
additionalColumnsData |
Type : string[]
|
Default value : []
|
Column definitions of the additional columns to be displayed |
cellHeadersData |
Type : string[]
|
Default value : []
|
Column definitions of the cell columns to be displayed |
columns |
Type : Observable<string[]>
|
Default value : EMPTY
|
Column definitions of the columns to be displayed |
displayedColumnsData |
Type : string[]
|
Default value : []
|
Column definitions of the columns |
release |
Type : ChooseVersion
|
Release and Version data |
tableData |
Type : Observable<TableData[]>
|
Default value : EMPTY
|
Data to be displayed in the table |
tableScrollAtEnd |
Default value : false
|
Decorators :
@HostBinding('class.scroll-end')
|
Adds class scroll-end to the host element when table is scrolled to the right |
tableScroller | ||||||
settableScroller(scrollable: CdkScrollable)
|
||||||
Maintains horizontal scrolling of the table
Parameters :
Returns :
void
|
headerInfo | ||||||
getheaderInfo()
|
||||||
Gets the header information
Returns :
HeaderData[]
|
||||||
setheaderInfo(items: HeaderData[])
|
||||||
Sets the header information and column definitions
Parameters :
Returns :
void
|
additionalHeaders | ||||||
getadditionalHeaders()
|
||||||
Gets the additional header information
Returns :
ExtraHeader[]
|
||||||
setadditionalHeaders(items: ExtraHeader[] | undefined)
|
||||||
Sets the additional header information and their column definitions
Parameters :
Returns :
void
|
cellHeaders | ||||||
getcellHeaders()
|
||||||
Gets the cell header information
Returns :
ExtraHeader[]
|
||||||
setcellHeaders(items: ExtraHeader[] | undefined)
|
||||||
Sets the cell header information and their column definitions
Parameters :
Returns :
void
|
import { CdkScrollable } from '@angular/cdk/scrolling';
import { Component, HostBinding, Input, NgZone, OnInit, ViewChild } from '@angular/core';
import { delay, distinctUntilChanged, EMPTY, map, mergeWith, Observable, of, startWith } from 'rxjs';
import { TableDataService } from '../../services/table-data/tabledata.service';
import { runInZone } from '../../shared/run-in-zone';
import { ChooseVersion } from '../choose-version/choose-version';
import { ExtraHeader, HeaderData } from '../table/header';
import { TableData } from '../table/table';
/** Margin to be left when scrolling the table */
const TABLE_SCROLL_END_MARGIN = 10;
/** Displays the table data according to the selected version */
@Component({
selector: 'table-version',
templateUrl: './table-version.component.html',
styleUrls: ['./table-version.component.scss'],
})
export class TableVersionComponent implements OnInit {
/** Maintains horizontal scrolling of the table */
@ViewChild('table', { static: true, read: CdkScrollable })
set tableScroller(scrollable: CdkScrollable) {
const isAtEnd = () => scrollable.measureScrollOffset('end') <= TABLE_SCROLL_END_MARGIN;
const initialAtEnd = of(undefined).pipe(delay(100), map(isAtEnd));
const obs = scrollable
.elementScrolled()
.pipe(map(isAtEnd), mergeWith(initialAtEnd), startWith(true), distinctUntilChanged(), runInZone(this.zone));
obs.subscribe((val) => (this.tableScrollAtEnd = val));
}
/** Adds class scroll-end to the host element when table is scrolled to the right */
@HostBinding('class.scroll-end') tableScrollAtEnd = false;
/** Details of release and version */
@Input() versionData: ChooseVersion[] = [];
/** Flag to enable/disable version selector */
@Input() versionChooserDisabled = false;
/** Flag to display/hide total below the table */
@Input() isTotal = false;
/** Flag to display/hide Download CSV button */
@Input() isDownload = false;
/** Sets the header information and column definitions */
@Input() set headerInfo(items: HeaderData[]) {
this._headerInfo = this.createCellFunctions(items);
this.displayedColumnsData = this.getColumnDefs(items);
}
/** Gets the header information */
get headerInfo(): HeaderData[] {
return this._headerInfo;
}
/** Sets the additional header information and their column definitions */
@Input() set additionalHeaders(items: ExtraHeader[] | undefined) {
this._additionalHeaders = items ?? [];
this.additionalColumnsData = this.getColumnDefs(items);
}
/** Gets the additional header information */
get additionalHeaders(): ExtraHeader[] {
return this._additionalHeaders;
}
/** Sets the cell header information and their column definitions */
@Input() set cellHeaders(items: ExtraHeader[] | undefined) {
this._cellHeaders = items ?? [];
this.cellHeadersData = this.getColumnDefs(items);
}
/** Gets the cell header information */
get cellHeaders(): ExtraHeader[] {
return this._cellHeaders;
}
/** Release and Version data */
release!: ChooseVersion;
/** Column definitions of the columns */
displayedColumnsData: string[] = [];
/** Column definitions of the additional columns to be displayed */
additionalColumnsData: string[] = [];
/** Column definitions of the cell columns to be displayed */
cellHeadersData: string[] = [];
/** Data to be displayed in the table */
tableData: Observable<TableData[]> = EMPTY;
/** Column definitions of the columns to be displayed */
columns: Observable<string[]> = EMPTY;
/** Stores header info */
private _headerInfo: HeaderData[] = [];
/** Stores additional headers */
private _additionalHeaders: ExtraHeader[] = [];
/** Stores cell headers */
private _cellHeaders: ExtraHeader[] = [];
/** Initializes TableDataServuce and NgZone */
constructor(
private readonly dataService: TableDataService,
private readonly zone: NgZone,
) {}
/** Sets the table data with default data */
ngOnInit(): void {
this.release = this.versionData[0];
this.setData(this.release);
}
/** Sets the table data according to the selected version */
setData(version: ChooseVersion): void {
const data = this.dataService.getData(version.file, this.displayedColumnsData);
this.release = version;
this.tableData = data.pipe(map((result) => result.data));
this.columns = data.pipe(map((result) => result.columns));
}
/** Creates a cell function and adds it to headerdata */
private createCellFunctions(items: HeaderData[]): HeaderData[] {
return items.map((item) => ({
...item,
cell: new Function('element', `return ${item.cell}`) as HeaderData['cell'],
}));
}
/** Returns the column definition of all the columns */
private getColumnDefs(items: HeaderData[] | ExtraHeader[] | undefined): string[] {
return items?.map((item) => item.columnDef) ?? [];
}
}
<div class="download-csv-xlsx">
<ccf-choose-version
*ngIf="!versionChooserDisabled"
[releaseDate]="versionData"
[selectedDate]="release"
(selectedVersion)="setData($event)"
class="mb-2r"
></ccf-choose-version>
<div style="flex-grow: 1"></div>
<a *ngIf="isDownload" mat-raised-button [href]="'assets/table-data/' + release.file" download class="download-btn">
<span class="material-symbols-outlined">download</span>Download CSV</a
>
</div>
<ccf-table
cdkScrollable
[typeCount]="(tableData | async) ?? []"
[displayedColumns]="(columns | async) ?? []"
[columns]="headerInfo"
[isTotal]="isTotal"
[isOrgan]="true"
[additionalHeaders]="additionalHeaders"
[additionalColumnsData]="additionalColumnsData"
[cellHeaders]="cellHeaders"
[cellHeadersData]="cellHeadersData"
class="table"
#table
></ccf-table>
./table-version.component.scss
:host {
position: relative;
.version,
.table {
margin-bottom: 5rem;
}
&:not(.scroll-end)::after {
position: absolute;
content: '';
width: 50px;
top: 5rem;
bottom: 0;
right: 0;
pointer-events: none;
background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* Gradient for blur effect */
}
.download-csv-xlsx {
display: flex;
}
.download-btn {
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 0.875rem;
padding: 0rem 1.5rem;
margin-left: 1px;
min-width: 124px;
color: #444c65;
border-radius: 6.25rem;
height: 40px;
background-color: #f7f2fa;
box-shadow:
0px 1px 2px rgba(0, 0, 0, 0.3),
0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}
.download-btn:hover {
background: rgba(103, 80, 164, 0.08);
}
.download-btn:focus,
.download-btn:active {
background: rgba(103, 80, 164, 0.12);
}
.download-btn:disabled {
background: rgba(29, 27, 32, 0.12);
}
.margin {
margin-right: 1rem;
}
@media (max-width: 26.75rem) {
&:not(.scroll-end)::after {
top: 8rem;
}
.download-csv-xlsx {
flex-wrap: wrap;
}
.version {
margin-bottom: 2rem;
}
.download-btn {
margin-bottom: 1rem;
width: 100%;
}
}
}