File
|
columns
|
Type : ExportColumnConfig[]
|
|
hasFetchedDataAnyValuesToExport
|
Type : boolean
|
|
previewTableData
|
Type : ExportData[]
|
|
isListPreview
|
Type : unknown
|
Default value : computed(() => {
const cols = this.columns();
return !!cols && cols.length > 0;
})
|
|
listHeaders
|
Type : unknown
|
Default value : computed(() => {
if (!this.isListPreview()) {
return [];
}
return [...this.columns()].sort((a, b) => a.order - b.order).map(col => col.label);
})
|
|
Readonly
MEASUREMENTS_PREVIEW_ITEMS_LIMIT
|
Type : unknown
|
Default value : MEASUREMENTS_PREVIEW_ITEMS_LIMIT
|
|
previewRows
|
Type : unknown
|
Default value : computed(() => {
const data = this.previewTableData();
if (!data) {
return [];
}
return data.map(row => ({
...row,
rowValues: row.fragment_series ? row.fragment_series.split(' | ') : []
}));
})
|
<div class="p-t-16 p-l-16 p-r-16 m-b-0">
<div class="d-flex a-i-center">
<label
class="m-b-0 d-flex a-i-center gap-4"
[title]="'Preview`of exported file`' | translate"
>
{{ 'Preview`of exported file`' | translate }}
<button
class="btn-help"
[attr.aria-label]="'Help' | translate"
[popover]="isListPreview() ? popoverListPreviewTemplate : popoverTablePreviewTemplate"
placement="right"
triggers="focus"
container="body"
type="button"
data-cy="preview--help"
[adaptivePosition]="true"
></button>
<ng-template #popoverTablePreviewTemplate>
<p translate>The preview shows the structure of the raw file from a single source.</p>
<p translate>If no data is available, only the column headers are visible.</p>
<p
translate
[translateParams]="{ count: MEASUREMENTS_PREVIEW_ITEMS_LIMIT }"
ngNonBindable
>
The preview is limited to <b>{{ count }}</b> records.
</p>
</ng-template>
<ng-template #popoverListPreviewTemplate>
<p translate>The preview shows the structure of the raw file from all sources.</p>
<p
translate
[translateParams]="{ count: MEASUREMENTS_PREVIEW_ITEMS_LIMIT }"
ngNonBindable
>
The preview is limited to <b>{{ count }}</b> records.
</p>
</ng-template>
</label>
</div>
<div
class="table-responsive"
style="min-height: 275px"
>
@if (isListPreview()) {
<table class="table">
<thead>
<tr>
@for (header of listHeaders(); track header) {
<th>{{ header | translate }}</th>
}
</tr>
</thead>
@if (hasFetchedDataAnyValuesToExport() || isPreviewLoading()) {
@if (!isPreviewLoading()) {
<tbody>
@for (row of previewRows(); track row.source) {
<tr>
@for (value of row.rowValues; track $index) {
<td>{{ value }}</td>
}
</tr>
}
</tbody>
} @else {
<tbody>
<tr>
<td [attr.colspan]="listHeaders().length">
<c8y-loading></c8y-loading>
</td>
</tr>
</tbody>
}
} @else {
<tbody>
<tr>
<td [attr.colspan]="listHeaders().length">
<div class="d-col a-i-center">
<c8y-ui-empty-state
[icon]="'search'"
[title]="'No data available.' | translate"
[horizontal]="true"
data-cy="datapoints-table-list--empty-state"
></c8y-ui-empty-state>
</div>
</td>
</tr>
</tbody>
}
</table>
} @else {
<table class="table">
<thead>
<tr>
<th>{{ 'Time' | translate }}</th>
<th>{{ 'Source' | translate }}</th>
<th>{{ 'Device name' | translate }}</th>
<th>
{{ 'Fragment and series' | translate }}
</th>
<th>{{ 'Value' | translate }}</th>
<th>{{ 'Unit' | translate }}</th>
</tr>
</thead>
@if (hasFetchedDataAnyValuesToExport() || isPreviewLoading()) {
@if (!isPreviewLoading()) {
<tbody>
@for (row of previewTableData(); track row.source) {
<tr>
<td>{{ row.time }}</td>
<td>{{ row.source }}</td>
<td>{{ row.device_name }}</td>
<td>
{{ row.fragment_series }}
</td>
<td>{{ row.value }}</td>
<td>{{ row.unit }}</td>
</tr>
}
</tbody>
} @else {
<tbody>
<tr>
<td colspan="8">
<c8y-loading></c8y-loading>
</td>
</tr>
</tbody>
}
} @else {
<tbody>
<tr>
<td colspan="8">
<div class="d-col a-i-center">
<c8y-ui-empty-state
[icon]="'search'"
[title]="'No data available.' | translate"
[horizontal]="true"
data-cy="datapoints-table-list--empty-state"
></c8y-ui-empty-state>
</div>
</td>
</tr>
</tbody>
}
</table>
}
</div>
</div>