]>
Commit | Line | Data |
---|---|---|
9f95a23c TL |
1 | <cd-alert-panel type="error" |
2 | *ngIf="loadingError" | |
3 | i18n>Failed to load data.</cd-alert-panel> | |
11fdf7f2 TL |
4 | |
5 | <div class="dataTables_wrapper"> | |
9f95a23c TL |
6 | |
7 | <div *ngIf="onlyActionHeader" | |
8 | class="dataTables_header clearfix"> | |
9 | <div class="cd-datatable-actions"> | |
10 | <ng-content select=".only-table-actions"></ng-content> | |
11 | </div> | |
12 | </div> | |
13 | <div class="dataTables_header clearfix" | |
11fdf7f2 TL |
14 | *ngIf="toolHeader"> |
15 | <!-- actions --> | |
9f95a23c | 16 | <div class="cd-datatable-actions"> |
11fdf7f2 TL |
17 | <ng-content select=".table-actions"></ng-content> |
18 | </div> | |
19 | <!-- end actions --> | |
20 | ||
21 | <!-- filters --> | |
22 | <ng-content select=".table-filters"></ng-content> | |
23 | <!-- end filters --> | |
24 | ||
9f95a23c TL |
25 | <!-- column filters --> |
26 | <div *ngIf="columnFilters.length !== 0" | |
27 | class="btn-group widget-toolbar"> | |
28 | <div dropdown | |
29 | class="btn-group tc_filter_name"> | |
30 | <a dropdownToggle | |
31 | class="btn btn-light dropdown-toggle" | |
32 | data-toggle="dropdown"> | |
33 | <i [ngClass]="[icons.large, icons.filter]"></i> | |
34 | {{ selectedFilter.column.name }} | |
35 | </a> | |
36 | <ul *dropdownMenu | |
37 | class="dropdown-menu px-1" | |
38 | role="menu"> | |
39 | <li *ngFor="let filter of columnFilters" | |
40 | role="menuitem"> | |
41 | <a href="" | |
42 | class="dropdown-item" | |
43 | (click)="onSelectFilter(filter); false">{{ filter.column.name }}</a> | |
44 | </li> | |
45 | </ul> | |
46 | </div> | |
47 | <div dropdown | |
48 | class="btn-group tc_filter_option"> | |
49 | <a dropdownToggle | |
50 | class="btn btn-light dropdown-toggle" | |
51 | [class.disabled]="selectedFilter.options.length === 0" | |
52 | data-toggle="dropdown"> | |
53 | {{ selectedFilter.value ? selectedFilter.value.formatted: 'Any' }} | |
54 | </a> | |
55 | <ul *dropdownMenu | |
56 | class="dropdown-menu px-1" | |
57 | role="menu"> | |
58 | <li *ngFor="let option of selectedFilter.options" | |
59 | role="menuitem"> | |
60 | <a href="" | |
61 | class="dropdown-item" | |
62 | (click)="onChangeFilter(selectedFilter, option); false">{{ option.formatted }} | |
63 | <i *ngIf="selectedFilter.value !== undefined && (selectedFilter.value.raw === option.raw)" | |
64 | [ngClass]="[icons.check]"></i> | |
65 | </a> | |
66 | </li> | |
67 | </ul> | |
68 | </div> | |
69 | </div> | |
70 | <!-- end column filters --> | |
71 | ||
11fdf7f2 | 72 | <!-- search --> |
9f95a23c TL |
73 | <div class="input-group search" |
74 | *ngIf="searchField"> | |
75 | <span class="input-group-prepend"> | |
76 | <span class="input-group-text"> | |
77 | <i [ngClass]="[icons.search]"></i> | |
78 | </span> | |
11fdf7f2 TL |
79 | </span> |
80 | <input class="form-control" | |
81 | type="text" | |
82 | [(ngModel)]="search" | |
83 | (keyup)="updateFilter()"> | |
9f95a23c | 84 | <div class="input-group-append"> |
11fdf7f2 | 85 | <button type="button" |
9f95a23c TL |
86 | class="btn btn-light" |
87 | (click)="onClearSearch()"> | |
88 | <i class="icon-prepend {{ icons.destroy }}"></i> | |
11fdf7f2 | 89 | </button> |
9f95a23c | 90 | </div> |
11fdf7f2 TL |
91 | </div> |
92 | <!-- end search --> | |
93 | ||
94 | <!-- pagination limit --> | |
95 | <div class="input-group dataTables_paginate"> | |
96 | <input class="form-control" | |
97 | type="number" | |
98 | min="1" | |
99 | max="9999" | |
100 | [value]="userConfig.limit" | |
101 | (click)="setLimit($event)" | |
102 | (keyup)="setLimit($event)" | |
103 | (blur)="setLimit($event)"> | |
104 | </div> | |
105 | <!-- end pagination limit--> | |
106 | ||
107 | <!-- show hide columns --> | |
108 | <div class="widget-toolbar"> | |
109 | <div dropdown | |
9f95a23c | 110 | [autoClose]="false" |
11fdf7f2 TL |
111 | class="dropdown tc_menuitem tc_menuitem_cluster"> |
112 | <a dropdownToggle | |
9f95a23c | 113 | class="btn btn-light dropdown-toggle tc_columnBtn" |
11fdf7f2 | 114 | data-toggle="dropdown"> |
9f95a23c | 115 | <i [ngClass]="[icons.large, icons.table]"></i> |
11fdf7f2 TL |
116 | </a> |
117 | <ul *dropdownMenu | |
9f95a23c | 118 | class="dropdown-menu px-3"> |
e306af50 TL |
119 | <ng-container *ngFor="let column of columns"> |
120 | <li *ngIf="column.name !== ''" > | |
121 | <div class="custom-control custom-checkbox"> | |
122 | <input class="custom-control-input" | |
123 | type="checkbox" | |
124 | (change)="toggleColumn($event)" | |
125 | [name]="column.prop" | |
126 | [id]="column.prop" | |
127 | [checked]="!column.isHidden"> | |
128 | <label class="custom-control-label" | |
129 | [for]="column.prop">{{ column.name }}</label> | |
130 | </div> | |
131 | </li> | |
132 | </ng-container> | |
11fdf7f2 TL |
133 | </ul> |
134 | </div> | |
135 | </div> | |
136 | <!-- end show hide columns --> | |
137 | ||
138 | <!-- refresh button --> | |
139 | <div class="widget-toolbar tc_refreshBtn" | |
140 | *ngIf="fetchData.observers.length > 0"> | |
9f95a23c TL |
141 | |
142 | <button type="button" | |
143 | class="btn btn-light" | |
144 | (click)="refreshBtn()"> | |
145 | <i [ngClass]="[icons.large, icons.refresh]" | |
11fdf7f2 | 146 | [class.fa-spin]="updating || loadingIndicator"></i> |
9f95a23c | 147 | </button> |
11fdf7f2 TL |
148 | </div> |
149 | <!-- end refresh button --> | |
150 | </div> | |
9f95a23c TL |
151 | <div class="dataTables_header clearfix" |
152 | *ngIf="toolHeader && columnFiltered"> | |
153 | <!-- filter chips for column filters --> | |
154 | <div class="filter-chips"> | |
155 | <span *ngFor="let filter of columnFilters"> | |
156 | <span *ngIf="filter.value" | |
157 | class="badge badge-info mr-2"> | |
158 | <span class="mr-2">{{ filter.column.name }}: {{ filter.value.formatted }}</span> | |
159 | <a class="badge-remove" | |
160 | (click)="onChangeFilter(filter); false"> | |
161 | <i [ngClass]="[icons.destroy]" | |
162 | aria-hidden="true"></i> | |
163 | </a> | |
164 | </span> | |
165 | </span> | |
166 | <a class="tc_clearSelections" | |
167 | href="" | |
168 | (click)="onClearFilters(); false"> | |
169 | <ng-container i18n>Clear filters</ng-container> | |
170 | </a> | |
171 | </div> | |
172 | <!-- end filter chips for column filters --> | |
173 | </div> | |
11fdf7f2 | 174 | <ngx-datatable #table |
9f95a23c | 175 | class="bootstrap cd-datatable" |
11fdf7f2 TL |
176 | [cssClasses]="paginationClasses" |
177 | [selectionType]="selectionType" | |
178 | [selected]="selection.selected" | |
9f95a23c | 179 | (select)="onSelect($event)" |
11fdf7f2 TL |
180 | [sorts]="userConfig.sorts" |
181 | (sort)="changeSorting($event)" | |
182 | [columns]="tableColumns" | |
183 | [columnMode]="columnMode" | |
184 | [rows]="rows" | |
185 | [rowClass]="getRowClass()" | |
186 | [headerHeight]="header ? 'auto' : 0" | |
187 | [footerHeight]="footer ? 'auto' : 0" | |
188 | [limit]="userConfig.limit > 0 ? userConfig.limit : undefined" | |
189 | [loadingIndicator]="loadingIndicator" | |
190 | [rowIdentity]="rowIdentity()" | |
191 | [rowHeight]="'auto'"> | |
e306af50 TL |
192 | |
193 | <!-- Row Detail Template --> | |
194 | <ngx-datatable-row-detail rowHeight="auto" | |
195 | #detailRow> | |
196 | <ng-template let-row="row" | |
197 | let-expanded="expanded" | |
198 | ngx-datatable-row-detail-template> | |
199 | <!-- Table Details --> | |
200 | <ng-content select="[cdTableDetail]"></ng-content> | |
201 | </ng-template> | |
202 | </ngx-datatable-row-detail> | |
203 | ||
11fdf7f2 TL |
204 | <ngx-datatable-footer> |
205 | <ng-template ngx-datatable-footer-template | |
206 | let-rowCount="rowCount" | |
207 | let-pageSize="pageSize" | |
208 | let-selectedCount="selectedCount" | |
209 | let-curPage="curPage" | |
210 | let-offset="offset" | |
211 | let-isVisible="isVisible"> | |
212 | <div class="page-count"> | |
213 | <span *ngIf="selectionType"> | |
214 | {{ selectedCount }} <ng-container i18n="X selected">selected</ng-container> / | |
215 | </span> | |
216 | <span *ngIf="rowCount != data?.length"> | |
217 | {{ rowCount }} <ng-container i18n="X found">found</ng-container> / | |
218 | </span> | |
219 | <span> | |
220 | {{ data?.length || 0 }} <ng-container i18n="X total">total</ng-container> | |
221 | </span> | |
222 | </div> | |
223 | <datatable-pager [pagerLeftArrowIcon]="paginationClasses.pagerLeftArrow" | |
224 | [pagerRightArrowIcon]="paginationClasses.pagerRightArrow" | |
225 | [pagerPreviousIcon]="paginationClasses.pagerPrevious" | |
226 | [pagerNextIcon]="paginationClasses.pagerNext" | |
227 | [page]="curPage" | |
228 | [size]="pageSize" | |
229 | [count]="rowCount" | |
230 | [hidden]="!((rowCount / pageSize) > 1)" | |
231 | (change)="table.onFooterPage($event)"> | |
232 | </datatable-pager> | |
233 | </ng-template> | |
234 | </ngx-datatable-footer> | |
235 | </ngx-datatable> | |
236 | </div> | |
237 | ||
11fdf7f2 TL |
238 | <!-- cell templates that can be accessed from outside --> |
239 | <ng-template #tableCellBoldTpl | |
240 | let-value="value"> | |
241 | <strong>{{ value }}</strong> | |
242 | </ng-template> | |
243 | ||
244 | <ng-template #sparklineTpl | |
245 | let-row="row" | |
246 | let-value="value"> | |
247 | <cd-sparkline [data]="value" | |
248 | [isBinary]="row.cdIsBinary"></cd-sparkline> | |
249 | </ng-template> | |
250 | ||
251 | <ng-template #routerLinkTpl | |
252 | let-row="row" | |
253 | let-value="value"> | |
254 | <a [routerLink]="[row.cdLink]" | |
255 | [queryParams]="row.cdParams">{{ value }}</a> | |
256 | </ng-template> | |
257 | ||
258 | <ng-template #checkIconTpl | |
259 | let-value="value"> | |
9f95a23c TL |
260 | <i [ngClass]="[icons.check]" |
261 | [hidden]="!(value | boolean)"></i> | |
11fdf7f2 TL |
262 | </ng-template> |
263 | ||
264 | <ng-template #perSecondTpl | |
265 | let-row="row" | |
266 | let-value="value"> | |
267 | {{ value }} /s | |
268 | </ng-template> | |
269 | ||
270 | <ng-template #executingTpl | |
271 | let-row="row" | |
272 | let-value="value"> | |
9f95a23c | 273 | <i [ngClass]="[icons.spinner, icons.spin]" |
11fdf7f2 TL |
274 | *ngIf="row.cdExecuting"></i> |
275 | {{ value }} | |
276 | <span *ngIf="row.cdExecuting" | |
eafe8130 | 277 | class="text-muted italic">({{ row.cdExecuting }})</span> |
11fdf7f2 TL |
278 | </ng-template> |
279 | ||
280 | <ng-template #classAddingTpl | |
281 | let-value="value"> | |
282 | <span class="{{useCustomClass(value)}}">{{ value }}</span> | |
283 | </ng-template> | |
9f95a23c TL |
284 | |
285 | <ng-template #badgeTpl | |
286 | let-column="column" | |
287 | let-value="value"> | |
288 | <span *ngFor="let item of (value | array); last as last"> | |
289 | <span class="badge" | |
290 | [ngClass]="(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.class) ? column.customTemplateConfig.map[item].class : (column?.customTemplateConfig?.class ? column.customTemplateConfig.class : 'badge-primary')" | |
291 | *ngIf="(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.value) ? column.customTemplateConfig.map[item].value : column?.customTemplateConfig?.prefix ? column.customTemplateConfig.prefix + item : item"> | |
292 | {{ (column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.value) ? column.customTemplateConfig.map[item].value : column?.customTemplateConfig?.prefix ? column.customTemplateConfig.prefix + item : item }} | |
293 | </span> | |
294 | <span *ngIf="!last"> </span> | |
295 | </span> | |
296 | </ng-template> | |
297 | ||
298 | <ng-template #mapTpl | |
299 | let-column="column" | |
300 | let-value="value"> | |
301 | <span>{{ value | map:column?.customTemplateConfig }}</span> | |
302 | </ng-template> | |
1911f103 TL |
303 | |
304 | <ng-template #truncateTpl | |
305 | let-column="column" | |
306 | let-value="value"> | |
307 | <span data-toggle="tooltip" | |
308 | [title]="value">{{ value | truncate:column?.customTemplateConfig?.length:column?.customTemplateConfig?.omission }}</span> | |
309 | </ng-template> | |
e306af50 TL |
310 | |
311 | <ng-template #rowDetailsTpl | |
312 | let-row="row" | |
313 | let-isExpanded="expanded" | |
314 | ngx-datatable-cell-template> | |
315 | <a href="javascript:void(0)" | |
316 | [class.expand-collapse-icon-right]="!isExpanded" | |
317 | [class.expand-collapse-icon-down]="isExpanded" | |
318 | class="expand-collapse-icon tc_expand-collapse" | |
319 | title="Expand/Collapse Row" | |
320 | i18n-title | |
321 | (click)="toggleExpandRow(row, isExpanded)"> | |
322 | </a> | |
323 | </ng-template> |