File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Methods
|
downloadCSV
|
downloadCSV()
|
|
|
|
|
|
DashletRowData
|
Type : object
|
Default value : { values: [] }
|
|
|
|
lib
|
Type : any
|
Decorators :
@ViewChild('lib', {static: false})
|
|
|
import { Component, OnInit, Input, ViewChild, Output, EventEmitter } from '@angular/core';
import { GroupsService } from '@sunbird/groups';
import { ToasterService, ResourceService } from '@sunbird/shared';
import 'datatables.net';
export interface IColumnConfig {
columnConfig: [{
title: string;
data: string;
}];
}
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
@Input() lastUpdatedOn: string;
@Input() dashletData: any;
@Input() fileName: string;
DashletRowData = { values: [] };
columnConfig: IColumnConfig;
@ViewChild('lib', { static: false }) lib: any;
@Output() downloadCsv: EventEmitter<{}> = new EventEmitter(); // emit the event once the download csv button click
constructor(
private toasterService: ToasterService,
public groupService: GroupsService,
public resourceService: ResourceService
) { }
ngOnInit(): void {
// Initialize the data for dashlet library
this.DashletRowData.values = this.dashletData.rows;
this.columnConfig = { columnConfig: this.dashletData.columns };
}
/**
*
* @description- Download CSV file.
*/
downloadCSV() {
this.downloadCsv.emit(); // emit the event to parent component to generate telemetry events
const fileName = this.fileName + '.csv';
this.lib.instance.exportCsv({ 'strict': true }).then((csvData) => {
const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.setAttribute('href', url);
link.setAttribute('download', fileName);
link.click();
}).catch((err) => {
this.toasterService.error(this.resourceService.messages.fmsg.m0085);
});
}
}
<sb-dashlet [type]="'table'" [data]="DashletRowData" [config]="columnConfig" #lib>
<ng-template sbTemplateRef="header" let-config>
<div role="alert" class="datatable-update">
<div *ngIf="lastUpdatedOn">
<label class="last-update-label px-8">
{{ resourceService?.frmelmnts?.lbl?.lastupdate}} : {{lastUpdatedOn | date:'MMM d, y, h:mm a'}}
</label>
</div>
<button class="download-csv" (click)="downloadCSV($event)">
{{ resourceService?.frmelmnts?.lbl?.downloadAsCSV }}<img src="assets/images/download-icon.svg"
class="download-icon"></button>
</div>
</ng-template>
</sb-dashlet>
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.group-name {
font-family: Noto Sans Regular;
line-height: 1.5rem;
color: var(--primary-color);
font-size: 1.25rem;
}
::ng-deep {
.dataTables_wrapper {
white-space: nowrap;
display: block;
overflow: inherit;
}
table.dataTable.no-footer {
display: table;
overflow: hidden;
width: 100% !important;
margin: 0 auto 1rem auto;
clear: both;
border-collapse: separate;
border-spacing: 0;
font-size: .875rem;
box-shadow: 0.375rem 0.375rem 0.125rem 0 rgb(0 0 0 / 10%);
border-bottom: 0px !important;
background:var(--white);
border: calculateRem(1px) solid var(--rc-dddddd);
cursor:pointer;
}
table.dataTable thead .sorting {
background-image: url(../../../../../assets/images/sort.svg) !important;
background-size: 1.5rem 1rem;
}
table.dataTable tbody td {
padding: 0.5rem 2.5rem;
}
thead tr th {
text-align: left;
}
table.dataTable thead th {
padding: 0.5rem 1.5rem !important;
border-bottom: none !important;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
cursor: pointer;
background-repeat: no-repeat !important;
background-position: center left !important;
position: relative !important;
left: 1rem !important;
right: 1rem !important;
}
table.dataTable.row-border tbody th,
table.dataTable.row-border tbody td,
table.dataTable.display tbody th,
table.dataTable.display tbody td {
border-top: none !important;
}
table.dataTable tbody tr:nth-child(odd) {
background-color: var(--gray-0) !important;
}
table.dataTable.display tbody tr:hover,
table.dataTable.hover tbody tr:hover {
background-color: transparent;
}
}
.datatable-update {
display: flex;
align-items: center;
justify-content: space-between;
margin: 1rem 0rem;
.last-update-label {
font-size: 0.87rem;
color: var(--gray-300);
margin-bottom: 0;
}
.download-csv {
color: var(--primary-color);
font-size: 0.87rem;
font-weight: bold;
border: none;
background: transparent;
outline: none !important;
cursor: pointer;
.download-icon{
margin:0 0.5rem;
width: 1rem;
height: 1rem;
}
}
}
Legend
Html element with directive