Newer
Older
<div *ngIf="!requiredParams()" class="text-center">
<span class="fas fa-circle-notch fa-spin fa-3x"></span>
<span class="sr-only">Loading...</span>
</div>
<div *ngIf="requiredParams()">
<div *ngIf="dataset.selectable_row" class="mb-2">
<button [disabled]="noSelectedData() || processWip" (click)="executeProcess.emit('csv')"
class="btn btn-sm btn-outline-primary">
To CSV
</button>
<span *ngIf="processWip" class="float-right mr-2">
<span class="fas fa-circle-notch fa-spin fa-2x"></span>
</span>
<a *ngIf="processDone" href="http://0.0.0.0:8085/{{ processId }}.csv"
class="btn btn-sm btn-outline-secondary float-right">
Download your CSV
</a>
</div>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th *ngIf="dataset.selectable_row"></th>
<th *ngFor="let attribute of getOutputList()" scope="col" class="clickable" (click)="sort(attribute.id)">
{{ attribute.label }}
<span *ngIf="attribute.id === sortedCol" class="pl-2">
<span [ngClass]="{'active': sortedOrder === 'a', 'inactive': sortedOrder === 'd'}">
</span>
<span [ngClass]="{'active': sortedOrder === 'd', 'inactive': sortedOrder === 'a'}">
</span>
</span>
<span *ngIf="attribute.id !== sortedCol" class="pl-2">
<span class="unsorted">
</span>
</span>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let datum of data">
<td *ngIf="dataset.selectable_row" class="data-selected"
(click)="toggleSelection(datum)">
<button class="btn btn-block text-left p-0 m-0">
<span class="far fa-square fa-lg text-secondary"></span>
</span>
<span *ngIf="isSelected(datum)">
<span class="fas fa-check-square fa-lg theme-color"></span>
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
</button>
</td>
<td *ngFor="let attribute of getOutputList()" class="align-middle">
<div *ngIf="datum[attribute.label]" [ngSwitch]="attribute.renderer">
<div *ngSwitchCase="'detail'">
<app-detail
[value]="datum[attribute.label]"
[datasetName]="dataset.name"
[config]="attribute.renderer_config">
</app-detail>
</div>
<div *ngSwitchCase="'link'">
<app-link
[value]="datum[attribute.label]"
[datasetName]="dataset.name"
[config]="attribute.renderer_config">
</app-link>
</div>
<div *ngSwitchCase="'download'">
<app-download
[value]="datum[attribute.label]"
[datasetName]="dataset.name"
[config]="attribute.renderer_config">
</app-download>
</div>
<div *ngSwitchCase="'image'">
<app-image
[value]="datum[attribute.label]"
[datasetName]="dataset.name"
[config]="attribute.renderer_config">
</app-image>
</div>
<div *ngSwitchCase="'json'">
<app-json
[value]="datum[attribute.label]"
[attributeLabel]="attribute.label"
[config]="attribute.renderer_config">
</app-json>
</div>
<div *ngSwitchDefault>
{{ datum[attribute.label] }}
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row mt-3">
<div class="col">
Showing
<select class="custom-select" (change)="changeNbItems($event.target.value)">
<option value="10" selected="true">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
of {{ dataLength }} items
</div>
<div class="col-auto">
<pagination
[totalItems]="dataLength"
[boundaryLinks]="true"
[rotate]="true"
[maxSize]="5"
[itemsPerPage]="nbItems"
previousText="‹" nextText="›" firstText="«" lastText="»"
(pageChanged)="changePage($event.page)">
</pagination>
</div>
</div>
</div>