src/app/components/download-ftu/download-ftu.component.ts
Displays a table of FTU illustrations
| selector | ccf-download-ftu |
| styleUrls | ./download-ftu.component.scss |
| templateUrl | ./download-ftu.component.html |
Properties |
|
Methods |
Inputs |
Accessors |
| data | |
Type : FtuVersionData[]
|
|
|
Sets the ftu version data and updates selection |
|
| displayMetadata | |
Type : boolean
|
|
Default value : false
|
|
|
Flag to show/hide releaseVersion and digitalObjectType column |
|
| downloadIcon | |
Type : string
|
|
Default value : ''
|
|
|
Icon name for the icon to be displayed on download column |
|
| versions | |
Type : ChooseVersion[]
|
|
|
Sets the version and updates selection |
|
| updateSelection | ||||||
updateSelection(selectedVersion?: ChooseVersion)
|
||||||
|
Sets the table data according to the selected version
Parameters :
Returns :
void
|
| Readonly selectedData |
Default value : new MatTableDataSource<FtuData>([])
|
|
Current selected data to display in the table |
| Optional selectedVersion |
Type : ChooseVersion
|
|
Current selected version |
| sort | ||||||
setsort(value: MatSort)
|
||||||
|
Sorts the current selected data
Parameters :
Returns :
void
|
| versions | ||||||
getversions()
|
||||||
|
Gets the version data
Returns :
ChooseVersion[]
|
||||||
setversions(versions: ChooseVersion[])
|
||||||
|
Sets the version and updates selection
Parameters :
Returns :
void
|
| data | ||||||
getdata()
|
||||||
|
Gets the Ftu version data
Returns :
FtuVersionData[]
|
||||||
setdata(data: FtuVersionData[])
|
||||||
|
Sets the ftu version data and updates selection
Parameters :
Returns :
void
|
| displayedColumns |
getdisplayedColumns()
|
|
Gets the column definitions of columns to be displayed
Returns :
string[]
|
import { Component, Input, ViewChild } from '@angular/core';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { ChooseVersion } from '../choose-version/choose-version';
import { FtuData, FtuVersionData } from './download-ftu';
/** Displays a table of FTU illustrations */
@Component({
selector: 'ccf-download-ftu',
templateUrl: './download-ftu.component.html',
styleUrls: ['./download-ftu.component.scss'],
})
export class DownloadFtuComponent {
/** Sorts the current selected data */
@ViewChild(MatSort, { static: true })
set sort(value: MatSort) {
this.selectedData.sort = value;
}
/** Sets the version and updates selection */
@Input() set versions(versions: ChooseVersion[]) {
this._versions = versions;
this.updateSelection();
}
/** Gets the version data */
get versions(): ChooseVersion[] {
return this._versions;
}
/** Sets the ftu version data and updates selection */
@Input() set data(data: FtuVersionData[]) {
this._data = data;
this.updateSelection();
}
/** Gets the Ftu version data */
get data(): FtuVersionData[] {
return this._data;
}
/** Labels of the columns to be displayed */
@Input() columnLabels = {
type: 'Type',
download: 'Download',
releaseVersion: 'Release Version',
digitalObjectType: 'Digital Object Type',
};
/** Icon name for the icon to be displayed on download column */
@Input() downloadIcon = '';
/** Flag to show/hide releaseVersion and digitalObjectType column */
@Input() displayMetadata = false;
/** Gets the column definitions of columns to be displayed */
get displayedColumns(): string[] {
return ['label', 'links'].concat(this.displayMetadata ? ['releaseVersion', 'digitalObjectType'] : []);
}
/** Current selected version */
selectedVersion?: ChooseVersion;
/** Current selected data to display in the table */
readonly selectedData = new MatTableDataSource<FtuData>([]);
/** Stores version data */
private _versions: ChooseVersion[] = [];
/** Stores ftu version data */
private _data: FtuVersionData[] = [];
/** Sets the table data according to the selected version */
updateSelection(selectedVersion?: ChooseVersion): void {
if (this.versions.length === 0 || this.data.length === 0) {
return;
}
const { version } = (this.selectedVersion = selectedVersion ?? this.versions[0]);
const data = this.data.find((item) => `${item.version}` === `${version}`);
this.selectedData.data = data?.rows ?? [];
}
}
<ccf-choose-version
[releaseDate]="versions"
(selectedVersion)="updateSelection($event)"
[selectedDate]="selectedVersion"
class="mb-2r"
>
</ccf-choose-version>
<table mat-table [dataSource]="selectedData" class="mat-elevation-z8 download-table" matSort>
<ng-container matColumnDef="label">
<th mat-header-cell *matHeaderCellDef mat-sort-header="label">
{{ columnLabels.type }}
</th>
<td mat-cell *matCellDef="let row">
<ng-container *ngIf="row.url; else noLink">
<a class="organ-link" [href]="row.url" target="_blank">{{ row.label }}</a>
</ng-container>
<ng-template #noLink>
{{ row.label }}
</ng-template>
</td>
</ng-container>
<ng-container matColumnDef="links">
<th mat-header-cell *matHeaderCellDef>
{{ columnLabels.download }}
<span *ngIf="downloadIcon" class="material-symbols-outlined icon">{{ downloadIcon }}</span>
</th>
<td mat-cell *matCellDef="let row">
<ng-container *ngFor="let item of row.links; last as last">
<a class="download-link" [href]="item.link" target="_blank">{{ item.label }}</a>
<ng-container *ngIf="!last"> | </ng-container>
</ng-container>
</td>
</ng-container>
<ng-container *ngIf="displayMetadata" matColumnDef="releaseVersion">
<th mat-header-cell *matHeaderCellDef mat-sort-header="releaseVersion">
{{ columnLabels.releaseVersion }}
</th>
<td mat-cell *matCellDef="let row">
{{ row.releaseVersion }}
</td>
</ng-container>
<ng-container *ngIf="displayMetadata" matColumnDef="digitalObjectType">
<th mat-header-cell *matHeaderCellDef mat-sort-header="digitalObjectType">
{{ columnLabels.digitalObjectType }}
</th>
<td mat-cell *matCellDef="let row">
{{ row.dot }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
./download-ftu.component.scss
:host {
.download-table {
width: 100%;
box-shadow: none;
border: 1px solid #e0e0e0;
td {
font-weight: 300;
}
th {
font-weight: 500;
font-size: 0.875rem;
color: black;
}
}
.organ-link,
.download-link {
&:hover {
text-decoration: underline;
text-decoration-thickness: 2px;
color: #444c65;
}
}
}
::ng-deep {
.mat-sort-header-arrow {
color: #ebebeb !important;
opacity: 0.57 !important;
transform: rotate(180deg) !important;
}
.mat-sort-header-sorted .mat-sort-header-arrow {
color: #212121 !important;
}
}