@eternalcodestudio/primeng-table 20.0.3 → 20.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -0
- package/fesm2022/eternalcodestudio-primeng-table.mjs +361 -234
- package/fesm2022/eternalcodestudio-primeng-table.mjs.map +1 -1
- package/index.d.ts +336 -62
- package/package.json +3 -3
|
@@ -35,52 +35,212 @@ import { DialogModule } from 'primeng/dialog';
|
|
|
35
35
|
import * as i6 from 'primeng/selectbutton';
|
|
36
36
|
import { SelectButtonModule, SelectButton } from 'primeng/selectbutton';
|
|
37
37
|
import * as i2$1 from 'primeng/api';
|
|
38
|
-
import { Observable } from 'rxjs';
|
|
38
|
+
import { Observable, finalize } from 'rxjs';
|
|
39
39
|
|
|
40
|
+
/**
|
|
41
|
+
* Enum representing how content that overflows a table cell should be handled.
|
|
42
|
+
*
|
|
43
|
+
* @remarks
|
|
44
|
+
* Determines the visual behavior of cell content when it exceeds the cell's width.
|
|
45
|
+
*/
|
|
40
46
|
var CellOverflowBehaviour;
|
|
41
47
|
(function (CellOverflowBehaviour) {
|
|
48
|
+
/** Content that exceeds the cell's width is clipped and not visible. */
|
|
42
49
|
CellOverflowBehaviour[CellOverflowBehaviour["Hidden"] = 0] = "Hidden";
|
|
50
|
+
/** Content wraps onto multiple lines to fit within the cell. */
|
|
43
51
|
CellOverflowBehaviour[CellOverflowBehaviour["Wrap"] = 1] = "Wrap";
|
|
52
|
+
/** Content is truncated and an ellipsis (...) is shown at the end. */
|
|
44
53
|
CellOverflowBehaviour[CellOverflowBehaviour["Ellipsis"] = 2] = "Ellipsis";
|
|
45
54
|
})(CellOverflowBehaviour || (CellOverflowBehaviour = {}));
|
|
46
55
|
|
|
56
|
+
/**
|
|
57
|
+
* Enum representing the horizontal alignment of content within a table cell.
|
|
58
|
+
*
|
|
59
|
+
* @remarks
|
|
60
|
+
* Determines how the content inside a cell is positioned horizontally relative to the cell's width.
|
|
61
|
+
*/
|
|
47
62
|
var DataAlignHorizontal;
|
|
48
63
|
(function (DataAlignHorizontal) {
|
|
64
|
+
/** Align content to the left of the cell. */
|
|
49
65
|
DataAlignHorizontal[DataAlignHorizontal["Left"] = 0] = "Left";
|
|
66
|
+
/** Align content to the center of the cell. */
|
|
50
67
|
DataAlignHorizontal[DataAlignHorizontal["Center"] = 1] = "Center";
|
|
68
|
+
/** Align content to the right of the cell. */
|
|
51
69
|
DataAlignHorizontal[DataAlignHorizontal["Right"] = 2] = "Right";
|
|
52
70
|
})(DataAlignHorizontal || (DataAlignHorizontal = {}));
|
|
53
71
|
|
|
72
|
+
/**
|
|
73
|
+
* Enum representing the vertical alignment of content within a table cell.
|
|
74
|
+
*
|
|
75
|
+
* @remarks
|
|
76
|
+
* Determines how the content inside a cell is positioned vertically relative to the cell's height.
|
|
77
|
+
*/
|
|
54
78
|
var DataAlignVertical;
|
|
55
79
|
(function (DataAlignVertical) {
|
|
80
|
+
/** Align content to the top of the cell. */
|
|
56
81
|
DataAlignVertical[DataAlignVertical["Top"] = 0] = "Top";
|
|
82
|
+
/** Align content to the vertical middle of the cell. */
|
|
57
83
|
DataAlignVertical[DataAlignVertical["Middle"] = 1] = "Middle";
|
|
84
|
+
/** Align content to the bottom of the cell. */
|
|
58
85
|
DataAlignVertical[DataAlignVertical["Bottom"] = 2] = "Bottom";
|
|
59
86
|
})(DataAlignVertical || (DataAlignVertical = {}));
|
|
60
87
|
|
|
88
|
+
/**
|
|
89
|
+
* Enum representing the different types of data a table column can hold.
|
|
90
|
+
*
|
|
91
|
+
* @remarks
|
|
92
|
+
* This is used to determine how values should be rendered, formatted, and
|
|
93
|
+
* filtered in the table component.
|
|
94
|
+
*/
|
|
61
95
|
var DataType;
|
|
62
96
|
(function (DataType) {
|
|
97
|
+
/** Plain text string values. */
|
|
63
98
|
DataType[DataType["Text"] = 0] = "Text";
|
|
99
|
+
/** Numeric values, e.g., integers or decimals. */
|
|
64
100
|
DataType[DataType["Numeric"] = 1] = "Numeric";
|
|
101
|
+
/** Boolean values (true/false). */
|
|
65
102
|
DataType[DataType["Boolean"] = 2] = "Boolean";
|
|
103
|
+
/** Date or datetime values. */
|
|
66
104
|
DataType[DataType["Date"] = 3] = "Date";
|
|
105
|
+
/** List of values, stored as a string separated by a delimiter (";"). */
|
|
106
|
+
DataType[DataType["List"] = 4] = "List";
|
|
67
107
|
})(DataType || (DataType = {}));
|
|
68
108
|
|
|
109
|
+
/**
|
|
110
|
+
* Enum representing the alignment of frozen columns in a table.
|
|
111
|
+
*
|
|
112
|
+
* @remarks
|
|
113
|
+
* Used to determine if a column should be frozen, and if so, on which side
|
|
114
|
+
* of the table it should appear.
|
|
115
|
+
*/
|
|
69
116
|
var FrozenColumnAlign;
|
|
70
117
|
(function (FrozenColumnAlign) {
|
|
118
|
+
/** The column is not frozen. */
|
|
71
119
|
FrozenColumnAlign[FrozenColumnAlign["Noone"] = 0] = "Noone";
|
|
120
|
+
/** The column is frozen on the left side of the table. */
|
|
72
121
|
FrozenColumnAlign[FrozenColumnAlign["Left"] = 1] = "Left";
|
|
122
|
+
/** The column is frozen on the right side of the table. */
|
|
73
123
|
FrozenColumnAlign[FrozenColumnAlign["Right"] = 2] = "Right";
|
|
74
124
|
})(FrozenColumnAlign || (FrozenColumnAlign = {}));
|
|
75
125
|
|
|
126
|
+
/**
|
|
127
|
+
* Enum representing the mode used to save the state or configuration of a table view.
|
|
128
|
+
*
|
|
129
|
+
* @remarks
|
|
130
|
+
* Determines where and how the table's view settings (e.g., column order, filters,
|
|
131
|
+
* sorting) are persisted.
|
|
132
|
+
*/
|
|
76
133
|
var TableViewSaveMode;
|
|
77
134
|
(function (TableViewSaveMode) {
|
|
78
|
-
|
|
79
|
-
TableViewSaveMode[TableViewSaveMode["
|
|
80
|
-
|
|
81
|
-
TableViewSaveMode[TableViewSaveMode["
|
|
135
|
+
/** Do not save the table view state. */
|
|
136
|
+
TableViewSaveMode[TableViewSaveMode["None"] = 0] = "None";
|
|
137
|
+
/** Save the table view state in the browser's sessionStorage (cleared on tab close). */
|
|
138
|
+
TableViewSaveMode[TableViewSaveMode["SessionStorage"] = 1] = "SessionStorage";
|
|
139
|
+
/** Save the table view state in the browser's localStorage (persists across sessions). */
|
|
140
|
+
TableViewSaveMode[TableViewSaveMode["LocalStorage"] = 2] = "LocalStorage";
|
|
141
|
+
/** Save the table view state in a backend database (requires server support). */
|
|
142
|
+
TableViewSaveMode[TableViewSaveMode["DatabaseStorage"] = 3] = "DatabaseStorage";
|
|
82
143
|
})(TableViewSaveMode || (TableViewSaveMode = {}));
|
|
83
144
|
|
|
145
|
+
const DEFAULT_TABLE_OPTIONS = {
|
|
146
|
+
isActive: true,
|
|
147
|
+
data: [],
|
|
148
|
+
urlTableConfiguration: null,
|
|
149
|
+
urlTableData: null,
|
|
150
|
+
header: {
|
|
151
|
+
buttons: [],
|
|
152
|
+
clearSortsEnabled: true,
|
|
153
|
+
clearSortsIcon: "pi pi-sort-alt-slash",
|
|
154
|
+
clearFiltersEnabled: true,
|
|
155
|
+
clearFiltersIcon: "pi pi-filter-slash"
|
|
156
|
+
},
|
|
157
|
+
columns: {
|
|
158
|
+
selectorEnabled: true,
|
|
159
|
+
shown: []
|
|
160
|
+
},
|
|
161
|
+
rows: {
|
|
162
|
+
style: () => ({}),
|
|
163
|
+
class: () => ({}),
|
|
164
|
+
action: {
|
|
165
|
+
buttons: [],
|
|
166
|
+
header: "Actions",
|
|
167
|
+
alignmentRight: true,
|
|
168
|
+
width: 150,
|
|
169
|
+
frozen: true,
|
|
170
|
+
resizable: false
|
|
171
|
+
},
|
|
172
|
+
checkboxSelector: {
|
|
173
|
+
enabled: false,
|
|
174
|
+
header: "Selected",
|
|
175
|
+
alignmentRight: false,
|
|
176
|
+
width: 150,
|
|
177
|
+
frozen: true,
|
|
178
|
+
resizable: false
|
|
179
|
+
},
|
|
180
|
+
singleSelector: {
|
|
181
|
+
enabled: false,
|
|
182
|
+
metakey: true
|
|
183
|
+
}
|
|
184
|
+
},
|
|
185
|
+
verticalScroll: {
|
|
186
|
+
fitToContainer: true,
|
|
187
|
+
height: 0
|
|
188
|
+
},
|
|
189
|
+
globalSearch: {
|
|
190
|
+
enabled: true,
|
|
191
|
+
maxLength: 20
|
|
192
|
+
},
|
|
193
|
+
predefinedFilters: {},
|
|
194
|
+
views: {
|
|
195
|
+
saveMode: TableViewSaveMode.None,
|
|
196
|
+
saveKey: null,
|
|
197
|
+
urlGet: null,
|
|
198
|
+
urlSave: null
|
|
199
|
+
},
|
|
200
|
+
excelReport: {
|
|
201
|
+
url: null,
|
|
202
|
+
defaultTitle: "Report",
|
|
203
|
+
titleAllowUserEdit: true
|
|
204
|
+
},
|
|
205
|
+
copyToClipboardTime: 0.5
|
|
206
|
+
};
|
|
207
|
+
|
|
208
|
+
/**
|
|
209
|
+
* Deep merge two objects.
|
|
210
|
+
* Recursively copies properties from `source` into `target`.
|
|
211
|
+
*/
|
|
212
|
+
function deepMerge(target, source) {
|
|
213
|
+
for (const key in source) {
|
|
214
|
+
if (source[key] !== null &&
|
|
215
|
+
typeof source[key] === 'object' &&
|
|
216
|
+
!Array.isArray(source[key])) {
|
|
217
|
+
if (!target[key])
|
|
218
|
+
target[key] = {};
|
|
219
|
+
deepMerge(target[key], source[key]);
|
|
220
|
+
}
|
|
221
|
+
else {
|
|
222
|
+
target[key] = source[key];
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
return target;
|
|
226
|
+
}
|
|
227
|
+
/**
|
|
228
|
+
* Create table options based on defaults, with optional overrides.
|
|
229
|
+
*/
|
|
230
|
+
/*export function createTableOptions(overrides: Partial<ITableOptions> = {}): ITableOptions {
|
|
231
|
+
return deepMerge(structuredClone(DEFAULT_TABLE_OPTIONS), overrides);
|
|
232
|
+
}*/
|
|
233
|
+
function createTableOptions(overrides = {}) {
|
|
234
|
+
const defaultsCopy = JSON.parse(JSON.stringify(DEFAULT_TABLE_OPTIONS)); // clona solo datos
|
|
235
|
+
const merged = deepMerge(defaultsCopy, overrides);
|
|
236
|
+
// reasignar funciones si existen en overrides
|
|
237
|
+
if (overrides.rows?.style)
|
|
238
|
+
merged.rows.style = overrides.rows.style;
|
|
239
|
+
if (overrides.rows?.class)
|
|
240
|
+
merged.rows.class = overrides.rows.class;
|
|
241
|
+
return merged;
|
|
242
|
+
}
|
|
243
|
+
|
|
84
244
|
function dataAlignHorizontalAsText(dataAlignHorizontal) {
|
|
85
245
|
switch (dataAlignHorizontal) {
|
|
86
246
|
case DataAlignHorizontal.Left:
|
|
@@ -175,7 +335,7 @@ function highlightText(cellValue, colMetadata, globalSearchText) {
|
|
|
175
335
|
return cellValue; // Return the original cell value if it doesn't meet the highlighting conditions
|
|
176
336
|
}
|
|
177
337
|
|
|
178
|
-
class
|
|
338
|
+
class TablePredefinedFilters {
|
|
179
339
|
sanitizer;
|
|
180
340
|
constructor(sanitizer) {
|
|
181
341
|
this.sanitizer = sanitizer;
|
|
@@ -204,15 +364,15 @@ class TablePredifinedFilters {
|
|
|
204
364
|
let objectURL = `data:image/jpeg;base64,${blob}`; // Create a base64 encoded string from the blob data
|
|
205
365
|
return this.sanitizer.bypassSecurityTrustUrl(objectURL); // Bypass Angular's security mechanisms to create a SafeUrl
|
|
206
366
|
}
|
|
207
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.
|
|
208
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.
|
|
367
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TablePredefinedFilters, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
368
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: TablePredefinedFilters, isStandalone: true, selector: "ecs-table-predefined-filters", inputs: { option: "option", col: "col" }, ngImport: i0, template: "<div style=\"align-items: center; gap: 0.25rem;\">\r\n @if (option?.icon) {\r\n <i [class]=\"option.icon\"\r\n [style]=\"'vertical-align: middle; color: '+(option.iconColor || '') +';' +(option.iconStyle || '')\"></i>\r\n }\r\n @if (!option?.iconBlob && option?.iconBlobSourceEndpoint) {\r\n <p-skeleton size=\"28px\"\r\n style=\"vertical-align: middle;\"/>\r\n }\r\n @if (option?.iconBlob) {\r\n <img alt=\"iconBlob\"\r\n [src]=\"getBlobIconAsUrl(option.iconBlob)\"\r\n height=\"28\"\r\n style=\"vertical-align: middle;\"/>\r\n }\r\n @if (option?.iconURL) {\r\n <img alt=\"iconFromURL\"\r\n [src]=\"option.iconURL\"\r\n height=\"28\"\r\n style=\"vertical-align: middle;\"/>\r\n }\r\n @if (option?.displayTag === true) {\r\n <p-tag [style]=\"option.tagStyle\" style=\"vertical-align: middle;\" [value]=\"option.name\"/>\r\n }\r\n @if (option?.displayName === true) {\r\n <span>{{ option.name }}</span>\r\n }\r\n</div>", dependencies: [{ kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }] });
|
|
209
369
|
}
|
|
210
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.
|
|
370
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TablePredefinedFilters, decorators: [{
|
|
211
371
|
type: Component,
|
|
212
|
-
args: [{ selector: 'ecs-table-
|
|
372
|
+
args: [{ selector: 'ecs-table-predefined-filters', imports: [
|
|
213
373
|
SkeletonModule,
|
|
214
374
|
TagModule
|
|
215
|
-
], standalone: true, template: "@if (option?.icon) {\r\n
|
|
375
|
+
], standalone: true, template: "<div style=\"align-items: center; gap: 0.25rem;\">\r\n @if (option?.icon) {\r\n <i [class]=\"option.icon\"\r\n [style]=\"'vertical-align: middle; color: '+(option.iconColor || '') +';' +(option.iconStyle || '')\"></i>\r\n }\r\n @if (!option?.iconBlob && option?.iconBlobSourceEndpoint) {\r\n <p-skeleton size=\"28px\"\r\n style=\"vertical-align: middle;\"/>\r\n }\r\n @if (option?.iconBlob) {\r\n <img alt=\"iconBlob\"\r\n [src]=\"getBlobIconAsUrl(option.iconBlob)\"\r\n height=\"28\"\r\n style=\"vertical-align: middle;\"/>\r\n }\r\n @if (option?.iconURL) {\r\n <img alt=\"iconFromURL\"\r\n [src]=\"option.iconURL\"\r\n height=\"28\"\r\n style=\"vertical-align: middle;\"/>\r\n }\r\n @if (option?.displayTag === true) {\r\n <p-tag [style]=\"option.tagStyle\" style=\"vertical-align: middle;\" [value]=\"option.name\"/>\r\n }\r\n @if (option?.displayName === true) {\r\n <span>{{ option.name }}</span>\r\n }\r\n</div>" }]
|
|
216
376
|
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { option: [{
|
|
217
377
|
type: Input
|
|
218
378
|
}], col: [{
|
|
@@ -227,7 +387,7 @@ class TableCell {
|
|
|
227
387
|
col;
|
|
228
388
|
rowData;
|
|
229
389
|
globalSearchText = null;
|
|
230
|
-
|
|
390
|
+
predefinedFiltersCollection = {}; // Contains a collection of the values that need to be shown for predefined column filters
|
|
231
391
|
dateFormat = "dd-MMM-yyyy HH:mm:ss zzzz";
|
|
232
392
|
dateTimezone = "+00:00";
|
|
233
393
|
dateCulture = "en-US";
|
|
@@ -241,6 +401,10 @@ class TableCell {
|
|
|
241
401
|
}
|
|
242
402
|
return this.value;
|
|
243
403
|
}
|
|
404
|
+
getListValues(col, rowData) {
|
|
405
|
+
const value = rowData[col.field];
|
|
406
|
+
return value ? value.split(';').map((v) => v.trim()) : [];
|
|
407
|
+
}
|
|
244
408
|
getDataAlignHorizontalAsText(dataAlignHorizontal) {
|
|
245
409
|
dataAlignHorizontalAsText(dataAlignHorizontal);
|
|
246
410
|
}
|
|
@@ -269,6 +433,16 @@ class TableCell {
|
|
|
269
433
|
}
|
|
270
434
|
return formattedDate ?? ''; // Returns the date formatted, or as empty string if an issue was found (or value was undefined).
|
|
271
435
|
}
|
|
436
|
+
getPredefinedFilterTooltip(colMetadata, value) {
|
|
437
|
+
if (colMetadata.dataType == DataType.List) {
|
|
438
|
+
return value;
|
|
439
|
+
}
|
|
440
|
+
if (colMetadata.filterPredefinedValuesName && colMetadata.filterPredefinedValuesName.length > 0) {
|
|
441
|
+
const options = this.getPredefinedFilterValues(colMetadata.filterPredefinedValuesName);
|
|
442
|
+
return options.find(x => x.value == value)?.name;
|
|
443
|
+
}
|
|
444
|
+
return null;
|
|
445
|
+
}
|
|
272
446
|
/**
|
|
273
447
|
* Checks if the provided column metadata matches a specific style of the predefined filters
|
|
274
448
|
* that need to be applied to an item on a row.
|
|
@@ -278,35 +452,35 @@ class TableCell {
|
|
|
278
452
|
* @returns {any} The matching predefined filter value if found, otherwise null.
|
|
279
453
|
*/
|
|
280
454
|
getPredfinedFilterMatch(colMetadata, value) {
|
|
281
|
-
if (colMetadata.
|
|
282
|
-
const options = this.
|
|
455
|
+
if (colMetadata.filterPredefinedValuesName && colMetadata.filterPredefinedValuesName.length > 0) { // Check if the column uses predefined filter values
|
|
456
|
+
const options = this.getPredefinedFilterValues(colMetadata.filterPredefinedValuesName); // Get the predefined filter values based on the name
|
|
283
457
|
return options.find(option => option.value === value); // Return the matching option if found
|
|
284
458
|
}
|
|
285
459
|
return null; // Return null if the column does not use predefined filter values
|
|
286
460
|
}
|
|
287
|
-
|
|
288
|
-
return this.
|
|
461
|
+
getPredefinedFilterValues(columnKeyName) {
|
|
462
|
+
return this.predefinedFiltersCollection[columnKeyName] || []; // Return the predefined filter values or an empty array if the option name does not exist
|
|
289
463
|
}
|
|
290
464
|
highlightText(cellValue, colMetadata, globalSearchText) {
|
|
291
465
|
return highlightText(cellValue, colMetadata, globalSearchText);
|
|
292
466
|
}
|
|
293
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.
|
|
294
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.
|
|
467
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TableCell, deps: [{ token: i1$1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
468
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: TableCell, isStandalone: true, selector: "ecs-table-cell", inputs: { col: "col", rowData: "rowData", globalSearchText: "globalSearchText", predefinedFiltersCollection: "predefinedFiltersCollection", dateFormat: "dateFormat", dateTimezone: "dateTimezone", dateCulture: "dateCulture" }, ngImport: i0, template: "@if (value !== null) {\r\n @if (col.filterPredefinedValuesName && col.filterPredefinedValuesName.length > 0) {\r\n <div [ngStyle]=\"{\r\n 'justify-content': getDataAlignHorizontalAsText(col.dataAlignHorizontal),\r\n 'align-items': getDataAlignVerticalAsText(col.dataAlignVertical)\r\n }\">\r\n @if (col.dataType === DataType.List){\r\n @for (item of getListValues(col, rowData); track item) {\r\n @if (getPredfinedFilterMatch(col, item); as option) {\r\n <div style=\"display: inline-block; margin-right: 0.5rem;\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : item\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\"/>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @if (getPredfinedFilterMatch(col, value); as option) {\r\n <div \r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : value\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\"/>\r\n </div>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n @switch (col.dataType) {\r\n @case (DataType.Boolean) {\r\n <i class=\"pi\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : value\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow || !col.dataTooltipCustomColumnSource || col.dataTooltipCustomColumnSource.length === 0\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\"\r\n [style.color]=\"value ? 'green' : 'red'\"\r\n [ngClass]=\"{ 'pi-check-circle': value, 'pi-times-circle': !value }\">\r\n </i>\r\n }\r\n @case (DataType.Date) {\r\n <div \r\n [innerHtml]=\"highlightText(formatDate(value), col, globalSearchText)\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : formatDate(value)\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n {{ formatDate(value) }}\r\n </div>\r\n }\r\n @default {\r\n <div\r\n [innerHtml]=\"highlightText(value, col, globalSearchText)\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : value\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n {{ value }}\r\n </div>\r\n }\r\n }\r\n }\r\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: TablePredefinedFilters, selector: "ecs-table-predefined-filters", inputs: ["option", "col"] }] });
|
|
295
469
|
}
|
|
296
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.
|
|
470
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TableCell, decorators: [{
|
|
297
471
|
type: Component,
|
|
298
472
|
args: [{ selector: 'ecs-table-cell', imports: [
|
|
299
473
|
CommonModule,
|
|
300
474
|
TooltipModule,
|
|
301
|
-
|
|
302
|
-
], standalone: true, template: "
|
|
475
|
+
TablePredefinedFilters
|
|
476
|
+
], standalone: true, template: "@if (value !== null) {\r\n @if (col.filterPredefinedValuesName && col.filterPredefinedValuesName.length > 0) {\r\n <div [ngStyle]=\"{\r\n 'justify-content': getDataAlignHorizontalAsText(col.dataAlignHorizontal),\r\n 'align-items': getDataAlignVerticalAsText(col.dataAlignVertical)\r\n }\">\r\n @if (col.dataType === DataType.List){\r\n @for (item of getListValues(col, rowData); track item) {\r\n @if (getPredfinedFilterMatch(col, item); as option) {\r\n <div style=\"display: inline-block; margin-right: 0.5rem;\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : item\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\"/>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @if (getPredfinedFilterMatch(col, value); as option) {\r\n <div \r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : value\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\"/>\r\n </div>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n @switch (col.dataType) {\r\n @case (DataType.Boolean) {\r\n <i class=\"pi\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : value\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow || !col.dataTooltipCustomColumnSource || col.dataTooltipCustomColumnSource.length === 0\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\"\r\n [style.color]=\"value ? 'green' : 'red'\"\r\n [ngClass]=\"{ 'pi-check-circle': value, 'pi-times-circle': !value }\">\r\n </i>\r\n }\r\n @case (DataType.Date) {\r\n <div \r\n [innerHtml]=\"highlightText(formatDate(value), col, globalSearchText)\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : formatDate(value)\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n {{ formatDate(value) }}\r\n </div>\r\n }\r\n @default {\r\n <div\r\n [innerHtml]=\"highlightText(value, col, globalSearchText)\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : value\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n {{ value }}\r\n </div>\r\n }\r\n }\r\n }\r\n}" }]
|
|
303
477
|
}], ctorParameters: () => [{ type: i1$1.DatePipe }], propDecorators: { col: [{
|
|
304
478
|
type: Input
|
|
305
479
|
}], rowData: [{
|
|
306
480
|
type: Input
|
|
307
481
|
}], globalSearchText: [{
|
|
308
482
|
type: Input
|
|
309
|
-
}],
|
|
483
|
+
}], predefinedFiltersCollection: [{
|
|
310
484
|
type: Input
|
|
311
485
|
}], dateFormat: [{
|
|
312
486
|
type: Input
|
|
@@ -317,19 +491,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
317
491
|
}] } });
|
|
318
492
|
|
|
319
493
|
class ECSPrimengTableHttpService {
|
|
320
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.
|
|
321
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.
|
|
494
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ECSPrimengTableHttpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
495
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ECSPrimengTableHttpService, providedIn: 'root' });
|
|
322
496
|
}
|
|
323
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.
|
|
497
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ECSPrimengTableHttpService, decorators: [{
|
|
324
498
|
type: Injectable,
|
|
325
499
|
args: [{ providedIn: 'root' }]
|
|
326
500
|
}] });
|
|
327
501
|
|
|
328
502
|
class ECSPrimengTableNotificationService {
|
|
329
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.
|
|
330
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.
|
|
503
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ECSPrimengTableNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
504
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ECSPrimengTableNotificationService, providedIn: 'root' });
|
|
331
505
|
}
|
|
332
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.
|
|
506
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ECSPrimengTableNotificationService, decorators: [{
|
|
333
507
|
type: Injectable,
|
|
334
508
|
args: [{ providedIn: 'root' }]
|
|
335
509
|
}] });
|
|
@@ -352,7 +526,10 @@ class ECSPrimengTableService {
|
|
|
352
526
|
'accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
|
353
527
|
'Content-Type': 'application/json'
|
|
354
528
|
});
|
|
355
|
-
return this.http.handleHttpPostRequest(url, postData, httpOptions,
|
|
529
|
+
return this.http.handleHttpPostRequest(url, postData, httpOptions, "blob");
|
|
530
|
+
}
|
|
531
|
+
getIconBlob(url) {
|
|
532
|
+
return this.http.handleHttpGetRequest(url, "blob");
|
|
356
533
|
}
|
|
357
534
|
downloadFile(data, fileName, contentType) {
|
|
358
535
|
const blob = new Blob([data], { type: contentType });
|
|
@@ -451,16 +628,16 @@ class ECSPrimengTableService {
|
|
|
451
628
|
let tableViewNotParsed = null;
|
|
452
629
|
if (tableViewSaveKey !== "" && tableViewSaveKey !== '') {
|
|
453
630
|
switch (tableViewSaveAs) {
|
|
454
|
-
case TableViewSaveMode.
|
|
631
|
+
case TableViewSaveMode.None:
|
|
455
632
|
tableViewNotParsed = null;
|
|
456
633
|
break;
|
|
457
|
-
case TableViewSaveMode.
|
|
634
|
+
case TableViewSaveMode.SessionStorage:
|
|
458
635
|
tableViewNotParsed = sessionStorage.getItem(tableViewSaveKey);
|
|
459
636
|
break;
|
|
460
|
-
case TableViewSaveMode.
|
|
637
|
+
case TableViewSaveMode.LocalStorage:
|
|
461
638
|
tableViewNotParsed = localStorage.getItem(tableViewSaveKey);
|
|
462
639
|
break;
|
|
463
|
-
case TableViewSaveMode.
|
|
640
|
+
case TableViewSaveMode.DatabaseStorage:
|
|
464
641
|
const postData = {
|
|
465
642
|
tableViewSaveKey: tableViewSaveKey
|
|
466
643
|
};
|
|
@@ -529,10 +706,10 @@ class ECSPrimengTableService {
|
|
|
529
706
|
}
|
|
530
707
|
return tableWidth;
|
|
531
708
|
}
|
|
532
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.
|
|
533
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.
|
|
709
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ECSPrimengTableService, deps: [{ token: ECSPrimengTableHttpService }, { token: ECSPrimengTableNotificationService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
710
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ECSPrimengTableService, providedIn: 'root' });
|
|
534
711
|
}
|
|
535
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.
|
|
712
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ECSPrimengTableService, decorators: [{
|
|
536
713
|
type: Injectable,
|
|
537
714
|
args: [{
|
|
538
715
|
providedIn: 'root'
|
|
@@ -557,10 +734,10 @@ class TableButton {
|
|
|
557
734
|
this.tableService.handleButtonsClick(this.button.action, this.rowData);
|
|
558
735
|
}
|
|
559
736
|
}
|
|
560
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.
|
|
561
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.
|
|
737
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TableButton, deps: [{ token: ECSPrimengTableService }], target: i0.ɵɵFactoryTarget.Component });
|
|
738
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: TableButton, isStandalone: true, selector: "ecs-table-button", inputs: { button: "button", rowData: "rowData", isActionButton: "isActionButton", isLastActionButton: "isLastActionButton" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<p-button\r\n [disabled]=\"isDisabled()\"\r\n [pTooltip]=\"button.tooltip || ''\"\r\n [tooltipDisabled]=\"!button.tooltip || button.tooltip.length === 0\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\"\r\n [styleClass]=\"(button.color || 'p-button-outlined') + (isActionButton ? ' custom-small-btn' : '')\"\r\n [icon]=\"button.icon || ''\"\r\n [label]=\"button.label || ''\"\r\n [size]=\"isActionButton ? 'small': undefined\"\r\n [ngStyle]=\"isActionButton && !isLastActionButton ? {'margin-right':'10px'} : {}\"\r\n (onClick)=\"handleClick()\"/>", styles: [":host ::ng-deep .custom-small-btn.p-button{height:28px!important;line-height:28px;padding-top:0;padding-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] });
|
|
562
739
|
}
|
|
563
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.
|
|
740
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TableButton, decorators: [{
|
|
564
741
|
type: Component,
|
|
565
742
|
args: [{ selector: 'ecs-table-button', imports: [
|
|
566
743
|
CommonModule,
|
|
@@ -641,10 +818,10 @@ class ColumnSelector {
|
|
|
641
818
|
this.globalSearchText = null;
|
|
642
819
|
this.visibleChange.emit(false);
|
|
643
820
|
}
|
|
644
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.
|
|
645
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ColumnSelector, isStandalone: true, selector: "ecs-column-selector", inputs: { visible: "visible", columnModalData: "columnModalData", filteredColumnData: "filteredColumnData" }, outputs: { visibleChange: "visibleChange", applyChanges: "applyChanges" }, viewQueries: [{ propertyName: "dt_columnDialog", first: true, predicate: ["dt_columnDialog"], descendants: true }], ngImport: i0, template: "<!--COLUMN MODAL DIALOG-->\r\n<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [closeOnEscape]=\"false\" [closable]=\"false\" [maximizable]=\"false\" [style]=\"{'min-width': '65vw', 'max-width': '65vw'}\">\r\n <ng-template pTemplate=\"header\">\r\n <span class=\"white-space-nowrap\"><b>MODIFY COLUMNS</b></span>\r\n </ng-template>\r\n <div style=\"padding: 20px;\">\r\n <p-table #dt_columnDialog [value]=\"columnModalData\" [scrollable]=\"true\" size=\"small\" showGridlines stripedRows \r\n [globalFilterFields]=\"['header']\" scrollHeight=\"400px\" [tableStyle]=\"{'min-width': '25rem'}\" (onFilter)=\"onColumnModalFilter($event)\">\r\n <ng-template #caption>\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <div style=\"display: flex; align-items: center; gap: 10px\">\r\n <p-checkbox inputId=\"selectAll\" [binary]=\"true\" [ngModel]=\"allColumnsCheckboxActive()\" (onChange)=\"allColumnsCheckboxClick($event)\"></p-checkbox>\r\n <label for=\"selectAll\">Select all columns</label>\r\n </div>\r\n <div style=\"display: flex; align-items: center;\">\r\n <p-iconField iconPosition=\"left\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n <p-inputIcon>\r\n <i class=\"pi pi-search\"></i>\r\n </p-inputIcon>\r\n <input pInputText type=\"text\" \r\n (input)=\"filterColumnModal($event)\" autocomplete=\"off\" \r\n [maxlength]=\"globalSearchMaxLength\" placeholder=\"Search column name\" [(ngModel)]=\"globalSearchText\"\r\n style=\"width: 220px;\"/>\r\n <!-- Right icon (only if there is text) -->\r\n @if (globalSearchText) {\r\n <p-inputIcon position=\"right\">\r\n <i class=\"pi pi-times\" style=\"cursor: pointer;\" (click)=\"clearGlobalFilter(dt_columnDialog); $event.stopPropagation()\"></i>\r\n </p-inputIcon>\r\n }\r\n </p-iconField>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #header>\r\n <tr>\r\n <th pFrozenColumn style=\"max-width: 100px; min-width: 100px; width: 100px; text-align: center;\">Show column</th>\r\n <th pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px; text-align: center;\">Column name</th>\r\n <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">Cell overflow behaviour</th>\r\n <th style=\"max-width: 160px; min-width: 160px; width: 160px; text-align: center;\">Horizontal aligment</th>\r\n <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">Vertical aligment</th>\r\n </tr>\r\n </ng-template>\r\n <ng-template #body let-rowData>\r\n <tr>\r\n <td pFrozenColumn style=\"max-width: 100px; min-width: 100px; width: 100px; text-align: center;\">\r\n <p-checkbox \r\n [(ngModel)]=\"rowData.selected\" \r\n [binary]=\"true\"\r\n [disabled]=\"rowData.selectDisabled\"/>\r\n </td>\r\n <td pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px;\">{{rowData.header}}</td>\r\n <td style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">\r\n <p-selectButton [(ngModel)]=\"rowData.cellOverflowBehaviour\" [options]=\"cellOverflowBehaviourOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.cellOverflowBehaviourDisabled\" allowEmpty=\"false\">\r\n <ng-template #item let-item>\r\n <i [class]=\"item.icon\" style=\"margin: -20px;\" [pTooltip]=\"item.name\" [showDelay]=\"400\" tooltipPosition=\"top\"></i>\r\n </ng-template>\r\n </p-selectButton>\r\n </td>\r\n <td style=\"max-width: 160px; min-width: 160px; width: 160px; text-align: center;\">\r\n <p-selectButton [(ngModel)]=\"rowData.dataAlignHorizontal\" [options]=\"dataAlignHorizontalOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.dataAlignHorizontalDisabled\" allowEmpty=\"false\">\r\n <ng-template #item let-item>\r\n <i [class]=\"item.icon\" style=\"margin: -20px;\" [pTooltip]=\"item.name\" [showDelay]=\"400\" tooltipPosition=\"top\"></i>\r\n </ng-template>\r\n </p-selectButton>\r\n </td>\r\n <td style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">\r\n <p-selectButton [(ngModel)]=\"rowData.dataAlignVertical\" [options]=\"dataAlignVerticalOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.dataAlignVerticalDisabled\" allowEmpty=\"false\">\r\n <ng-template #item let-item>\r\n <i [class]=\"item.icon\" style=\"margin: -20px;\" [pTooltip]=\"item.name\" [showDelay]=\"400\" tooltipPosition=\"top\"></i>\r\n </ng-template>\r\n </p-selectButton>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"999\">There are no columns</td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n <div style=\"display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 10px;\">\r\n Showing {{filteredColumnData ? filteredColumnData.length : 0}} columns of {{columnModalData ? columnModalData.length : 0}} available columns\r\n </div>\r\n </div>\r\n <ng-template pTemplate=\"footer\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <p-button (click)=\"closeModal()\" label=\"Cancel changes\" severity=\"danger\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n <p-button (click)=\"applyColumnModalChanges()\" label=\"Save changes\" severity=\"success\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n </ng-template>\r\n</p-dialog>", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i6.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i9$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] });
|
|
821
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ColumnSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
822
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: ColumnSelector, isStandalone: true, selector: "ecs-column-selector", inputs: { visible: "visible", columnModalData: "columnModalData", filteredColumnData: "filteredColumnData" }, outputs: { visibleChange: "visibleChange", applyChanges: "applyChanges" }, viewQueries: [{ propertyName: "dt_columnDialog", first: true, predicate: ["dt_columnDialog"], descendants: true }], ngImport: i0, template: "<!--COLUMN MODAL DIALOG-->\r\n<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [closeOnEscape]=\"false\" [closable]=\"false\" [maximizable]=\"false\" [style]=\"{'min-width': '65vw', 'max-width': '65vw'}\">\r\n <ng-template pTemplate=\"header\">\r\n <span class=\"white-space-nowrap\"><b>MODIFY COLUMNS</b></span>\r\n </ng-template>\r\n <div style=\"padding: 20px;\">\r\n <p-table #dt_columnDialog [value]=\"columnModalData\" [scrollable]=\"true\" size=\"small\" showGridlines stripedRows \r\n [globalFilterFields]=\"['header']\" scrollHeight=\"400px\" [tableStyle]=\"{'min-width': '25rem'}\" (onFilter)=\"onColumnModalFilter($event)\">\r\n <ng-template #caption>\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <div style=\"display: flex; align-items: center; gap: 10px\">\r\n <p-checkbox inputId=\"selectAll\" [binary]=\"true\" [ngModel]=\"allColumnsCheckboxActive()\" (onChange)=\"allColumnsCheckboxClick($event)\"></p-checkbox>\r\n <label for=\"selectAll\">Select all columns</label>\r\n </div>\r\n <div style=\"display: flex; align-items: center;\">\r\n <p-iconField iconPosition=\"left\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n <p-inputIcon>\r\n <i class=\"pi pi-search\"></i>\r\n </p-inputIcon>\r\n <input pInputText type=\"text\" \r\n (input)=\"filterColumnModal($event)\" autocomplete=\"off\" \r\n [maxlength]=\"globalSearchMaxLength\" placeholder=\"Search column name\" [(ngModel)]=\"globalSearchText\"\r\n style=\"width: 220px;\"/>\r\n <!-- Right icon (only if there is text) -->\r\n @if (globalSearchText) {\r\n <p-inputIcon position=\"right\">\r\n <i class=\"pi pi-times\" style=\"cursor: pointer;\" (click)=\"clearGlobalFilter(dt_columnDialog); $event.stopPropagation()\"></i>\r\n </p-inputIcon>\r\n }\r\n </p-iconField>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #header>\r\n <tr>\r\n <th pFrozenColumn style=\"max-width: 100px; min-width: 100px; width: 100px; text-align: center;\">Show column</th>\r\n <th pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px; text-align: center;\">Column name</th>\r\n <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">Cell overflow behaviour</th>\r\n <th style=\"max-width: 160px; min-width: 160px; width: 160px; text-align: center;\">Horizontal aligment</th>\r\n <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">Vertical aligment</th>\r\n </tr>\r\n </ng-template>\r\n <ng-template #body let-rowData>\r\n <tr>\r\n <td pFrozenColumn style=\"max-width: 100px; min-width: 100px; width: 100px; text-align: center;\">\r\n <p-checkbox \r\n [(ngModel)]=\"rowData.selected\" \r\n [binary]=\"true\"\r\n [disabled]=\"rowData.selectDisabled\"/>\r\n </td>\r\n <td pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px;\">{{rowData.header}}</td>\r\n <td style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">\r\n <p-selectButton [(ngModel)]=\"rowData.cellOverflowBehaviour\" [options]=\"cellOverflowBehaviourOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.cellOverflowBehaviourDisabled\" allowEmpty=\"false\">\r\n <ng-template #item let-item>\r\n <i [class]=\"item.icon\" style=\"margin: -20px;\" [pTooltip]=\"item.name\" [showDelay]=\"400\" tooltipPosition=\"top\"></i>\r\n </ng-template>\r\n </p-selectButton>\r\n </td>\r\n <td style=\"max-width: 160px; min-width: 160px; width: 160px; text-align: center;\">\r\n <p-selectButton [(ngModel)]=\"rowData.dataAlignHorizontal\" [options]=\"dataAlignHorizontalOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.dataAlignHorizontalDisabled\" allowEmpty=\"false\">\r\n <ng-template #item let-item>\r\n <i [class]=\"item.icon\" style=\"margin: -20px;\" [pTooltip]=\"item.name\" [showDelay]=\"400\" tooltipPosition=\"top\"></i>\r\n </ng-template>\r\n </p-selectButton>\r\n </td>\r\n <td style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">\r\n <p-selectButton [(ngModel)]=\"rowData.dataAlignVertical\" [options]=\"dataAlignVerticalOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.dataAlignVerticalDisabled\" allowEmpty=\"false\">\r\n <ng-template #item let-item>\r\n <i [class]=\"item.icon\" style=\"margin: -20px;\" [pTooltip]=\"item.name\" [showDelay]=\"400\" tooltipPosition=\"top\"></i>\r\n </ng-template>\r\n </p-selectButton>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"999\">There are no columns</td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n <div style=\"display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 10px;\">\r\n Showing {{filteredColumnData ? filteredColumnData.length : 0}} columns of {{columnModalData ? columnModalData.length : 0}} available columns\r\n </div>\r\n </div>\r\n <ng-template pTemplate=\"footer\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <p-button (click)=\"closeModal()\" label=\"Cancel changes\" severity=\"danger\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n <p-button (click)=\"applyColumnModalChanges()\" label=\"Save changes\" severity=\"success\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n </ng-template>\r\n</p-dialog>", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i6.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i9$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] });
|
|
646
823
|
}
|
|
647
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.
|
|
824
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ColumnSelector, decorators: [{
|
|
648
825
|
type: Component,
|
|
649
826
|
args: [{ selector: 'ecs-column-selector', imports: [
|
|
650
827
|
DialogModule,
|
|
@@ -685,10 +862,10 @@ class ExportExcelService {
|
|
|
685
862
|
const seconds = String(now.getUTCSeconds()).padStart(2, '0');
|
|
686
863
|
return `_${year}${month}${day}_${hours}${minutes}${seconds}_UTC`;
|
|
687
864
|
}
|
|
688
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.
|
|
689
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.
|
|
865
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ExportExcelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
866
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ExportExcelService, providedIn: 'root' });
|
|
690
867
|
}
|
|
691
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.
|
|
868
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ExportExcelService, decorators: [{
|
|
692
869
|
type: Injectable,
|
|
693
870
|
args: [{
|
|
694
871
|
providedIn: 'root'
|
|
@@ -782,10 +959,10 @@ class ExportExcel {
|
|
|
782
959
|
closeModal() {
|
|
783
960
|
this.visibleChange.emit(false);
|
|
784
961
|
}
|
|
785
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.
|
|
786
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.
|
|
962
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ExportExcel, deps: [{ token: ECSPrimengTableNotificationService }, { token: ExportExcelService }], target: i0.ɵɵFactoryTarget.Component });
|
|
963
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: ExportExcel, isStandalone: true, selector: "ecs-export-excel", inputs: { visible: "visible", rowCheckboxSelectorActive: "rowCheckboxSelectorActive", excelReportTitle: "excelReportTitle", allowTitleUserEdit: "allowTitleUserEdit" }, outputs: { exportToExcel: "exportToExcel", visibleChange: "visibleChange" }, usesOnChanges: true, ngImport: i0, template: "<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\"\r\n [closable]=\"false\" [closeOnEscape]=\"false\" [maximizable]=\"false\" [style]=\"{'min-width': '70vw', 'max-width': '70vw'}\">\r\n <ng-template pTemplate=\"header\">\r\n <div>\r\n <span class=\"p-dialog-title\">Export data to Excel</span>\r\n </div>\r\n </ng-template>\r\n <div style=\"display: grid; grid-template-columns: 4fr 8fr; gap: 1rem; align-items: center;\">\r\n <div style=\"justify-self: end;\">\r\n Report filename\r\n </div>\r\n <div style=\"justify-self: stretch; width: 100%;\">\r\n <input pInputText id=\"reportTitle\" [(ngModel)]=\"excelReportTitle\" autocomplete=\"off\" style=\"width: 100%;\" [disabled]=\"!allowTitleUserEdit\" maxlength=\"100\"/>\r\n </div>\r\n\r\n <div style=\"justify-self: end;\">\r\n <i pTooltip=\"Activating this option will add the current '_{year}{month}{day}_{hours}{minutes}{seconds}_UTC' at the end of your filename\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n Include time in report filename\r\n </div>\r\n <div style=\"justify-self: stretch; width: 100%;\">\r\n <p-checkbox [binary]=\"true\" [(ngModel)]=\"includeTimeInTitle\"/>\r\n </div>\r\n \r\n <div style=\"justify-self: end;\">\r\n Export columns\r\n </div>\r\n <div style=\"justify-self: start;\">\r\n <p-selectButton [(ngModel)]=\"option_exportColumns_selected\" [options]=\"option_exportColumns\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\"/>\r\n </div>\r\n\r\n <div style=\"justify-self: end;\">\r\n @if(filterSelectorDisabled()){\r\n <i pTooltip=\"Sorts are active because you want to export selected rows following a filter criteria\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n }\r\n Filters to apply\r\n </div>\r\n <div style=\"justify-self: start;\">\r\n <p-selectButton [(ngModel)]=\"option_applyCurrentFilters_selected\" [options]=\"option_applyCurrentFilters\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\" [disabled]=\"filterSelectorDisabled()\"/>\r\n </div>\r\n\r\n <div style=\"justify-self: end;\">\r\n Sorts to apply\r\n </div>\r\n <div style=\"justify-self: start;\">\r\n <p-selectButton [(ngModel)]=\"option_applyCurrentSorts_selected\" [options]=\"option_applyCurrentSorts\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\"/>\r\n </div>\r\n\r\n @if(rowCheckboxSelectorActive){\r\n <div style=\"justify-self: end;\">\r\n Selected rows\r\n </div>\r\n <div style=\"justify-self: start;\">\r\n <p-selectButton [(ngModel)]=\"option_selectedRowsExport_selected\" [options]=\"option_selectedRowsExport\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\" (onChange)=\"onChangeExportRows($event)\"/>\r\n </div>\r\n }\r\n </div>\r\n <ng-template pTemplate=\"footer\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <p-button (click)=\"closeModal()\" label=\"Cancel export\" severity=\"danger\" [style]=\"{'margin-top': '20px'}\"/>\r\n <p-button (click)=\"getExcelReport()\" label=\"Export\" severity=\"success\" [style]=\"{'margin-top': '20px'}\"/>\r\n </ng-template>\r\n</p-dialog>", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }] });
|
|
787
964
|
}
|
|
788
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.
|
|
965
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ExportExcel, decorators: [{
|
|
789
966
|
type: Component,
|
|
790
967
|
args: [{ selector: 'ecs-export-excel', imports: [
|
|
791
968
|
DialogModule,
|
|
@@ -870,10 +1047,10 @@ class ViewsManagement {
|
|
|
870
1047
|
this.createView(this.newViewAlias);
|
|
871
1048
|
}
|
|
872
1049
|
}
|
|
873
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.
|
|
874
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: ViewsManagement, isStandalone: true, selector: "ecs-views-management", inputs: { visible: "visible", tableViews_menuItems: "tableViews_menuItems" }, outputs: { onViewSelect: "onViewSelect", onViewDelete: "onViewDelete", onViewUpdateData: "onViewUpdateData", onViewUpdateActiveStartup: "onViewUpdateActiveStartup", onViewEditAlias: "onViewEditAlias", onViewCreate: "onViewCreate", visibleChange: "visibleChange" }, ngImport: i0, template: "<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\"\r\n [closable]=\"true\" [closeOnEscape]=\"false\" [maximizable]=\"false\" [style]=\"{'min-width': '70vw', 'max-width': '70vw'}\" (onHide)=\"closeModal()\">\r\n <ng-template pTemplate=\"header\">\r\n <div>\r\n <span class=\"p-dialog-title\">Table views</span>\r\n </div>\r\n </ng-template>\r\n <div class=\"p-4 pt-0\">\r\n <p-table #dt_viewsDialog [value]=\"tableViews_menuItems\" [scrollable]=\"true\" size=\"small\" showGridlines stripedRows scrollHeight=\"400px\" [tableStyle]=\"{'min-width': '25rem'}\">\r\n <ng-template #caption>\r\n <div style=\"display: flex; justify-content: flex-end; align-items: center; width: 100%;\">\r\n <p-button icon=\"pi pi-plus\" label=\"New view\" severity=\"success\" (click)=\"showViewEditor()\" pTooltip=\"New view\" tooltipPosition=\"top\" [showDelay]=\"700\"/>\r\n </div>\r\n </ng-template>\r\n <ng-template #header>\r\n <tr>\r\n <th style=\"text-align: center;\">View name</th>\r\n <th style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">Load on startup</th>\r\n <th style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">Actions</th>\r\n </tr>\r\n </ng-template>\r\n <ng-template #body let-rowData>\r\n <tr>\r\n <td>\r\n {{rowData.label}}\r\n </td>\r\n <td style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">\r\n <p-checkbox [(ngModel)]=\"rowData.lastActive\" [binary]=\"true\" (onChange)=\"updateViewActiveStartup(rowData.label)\"/>\r\n </td>\r\n <td style=\"max-width: 220px; min-width: 220px; width: 220px; display: flex; justify-content: center; align-items: center; height: 100%;\">\r\n <button pButton icon=\"pi pi-upload\" (click)=\"loadView(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Restore\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n <button pButton icon=\"pi pi-save\" (click)=\"updateView(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Save\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n <button pButton icon=\"pi pi-pencil\" (click)=\"showViewEditor(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Edit\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n <button pButton icon=\"pi pi-trash\" (click)=\"deleteView(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Delete\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px;\"></button>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"999\">There are no views</td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n <div style=\"display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 10px;\">\r\n Showing {{tableViews_menuItems ? tableViews_menuItems.length : 0}} views\r\n </div>\r\n </div>\r\n</p-dialog>\r\n\r\n<!--TABLE VIEW SAVE-->\r\n<p-dialog [(visible)]=\"viewEditorShow\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [closeOnEscape]=\"false\" [closable]=\"false\" [maximizable]=\"false\" [style]=\"{'max-width': '60vw'}\">\r\n <ng-template pTemplate=\"header\">\r\n <div class=\"inline-flex align-items-center justify-content-center gap-2\">\r\n <span class=\"white-space-nowrap\"><b>{{ editingViewAlias !== '' ? 'UPDATE VIEW' : 'CREATE NEW VIEW' }}</b></span>\r\n </div>\r\n </ng-template>\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <label for=\"newtableviewname\"><strong>View alias<span style=\"color: red;\">*</span></strong></label>\r\n <input \r\n pInputText \r\n id=\"newtableviewname\" \r\n aria-describedby=\"newtableviewname-help\" \r\n style=\"width: 400px;\"\r\n maxlength=\"30\"\r\n [(ngModel)]=\"newViewAlias\"/>\r\n </div>\r\n <ng-template pTemplate=\"footer\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <p-button (click)=\"viewEditorShow = false\" label=\"Cancel\" severity=\"danger\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n <p-button (click)=\"createOrUpdateTableView()\" [label]=\"editingViewAlias !== '' ? 'Update' : 'Create'\" severity=\"success\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n </ng-template>\r\n</p-dialog>", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }] });
|
|
1050
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ViewsManagement, deps: [{ token: ECSPrimengTableNotificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1051
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: ViewsManagement, isStandalone: true, selector: "ecs-views-management", inputs: { visible: "visible", tableViews_menuItems: "tableViews_menuItems" }, outputs: { onViewSelect: "onViewSelect", onViewDelete: "onViewDelete", onViewUpdateData: "onViewUpdateData", onViewUpdateActiveStartup: "onViewUpdateActiveStartup", onViewEditAlias: "onViewEditAlias", onViewCreate: "onViewCreate", visibleChange: "visibleChange" }, ngImport: i0, template: "<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\"\r\n [closable]=\"true\" [closeOnEscape]=\"false\" [maximizable]=\"false\" [style]=\"{'min-width': '70vw', 'max-width': '70vw'}\" (onHide)=\"closeModal()\">\r\n <ng-template pTemplate=\"header\">\r\n <div>\r\n <span class=\"p-dialog-title\">Table views</span>\r\n </div>\r\n </ng-template>\r\n <div class=\"p-4 pt-0\">\r\n <p-table #dt_viewsDialog [value]=\"tableViews_menuItems\" [scrollable]=\"true\" size=\"small\" showGridlines stripedRows scrollHeight=\"400px\" [tableStyle]=\"{'min-width': '25rem'}\">\r\n <ng-template #caption>\r\n <div style=\"display: flex; justify-content: flex-end; align-items: center; width: 100%;\">\r\n <p-button icon=\"pi pi-plus\" label=\"New view\" severity=\"success\" (click)=\"showViewEditor()\" pTooltip=\"New view\" tooltipPosition=\"top\" [showDelay]=\"700\"/>\r\n </div>\r\n </ng-template>\r\n <ng-template #header>\r\n <tr>\r\n <th style=\"text-align: center;\">View name</th>\r\n <th style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">Load on startup</th>\r\n <th style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">Actions</th>\r\n </tr>\r\n </ng-template>\r\n <ng-template #body let-rowData>\r\n <tr>\r\n <td>\r\n {{rowData.label}}\r\n </td>\r\n <td style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">\r\n <p-checkbox [(ngModel)]=\"rowData.lastActive\" [binary]=\"true\" (onChange)=\"updateViewActiveStartup(rowData.label)\"/>\r\n </td>\r\n <td style=\"max-width: 220px; min-width: 220px; width: 220px; display: flex; justify-content: center; align-items: center; height: 100%;\">\r\n <button pButton icon=\"pi pi-upload\" (click)=\"loadView(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Restore\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n <button pButton icon=\"pi pi-save\" (click)=\"updateView(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Save\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n <button pButton icon=\"pi pi-pencil\" (click)=\"showViewEditor(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Edit\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n <button pButton icon=\"pi pi-trash\" (click)=\"deleteView(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Delete\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px;\"></button>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"999\">There are no views</td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n <div style=\"display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 10px;\">\r\n Showing {{tableViews_menuItems ? tableViews_menuItems.length : 0}} views\r\n </div>\r\n </div>\r\n</p-dialog>\r\n\r\n<!--TABLE VIEW SAVE-->\r\n<p-dialog [(visible)]=\"viewEditorShow\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [closeOnEscape]=\"false\" [closable]=\"false\" [maximizable]=\"false\" [style]=\"{'max-width': '60vw'}\">\r\n <ng-template pTemplate=\"header\">\r\n <div class=\"inline-flex align-items-center justify-content-center gap-2\">\r\n <span class=\"white-space-nowrap\"><b>{{ editingViewAlias !== '' ? 'UPDATE VIEW' : 'CREATE NEW VIEW' }}</b></span>\r\n </div>\r\n </ng-template>\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <label for=\"newtableviewname\"><strong>View alias<span style=\"color: red;\">*</span></strong></label>\r\n <input \r\n pInputText \r\n id=\"newtableviewname\" \r\n aria-describedby=\"newtableviewname-help\" \r\n style=\"width: 400px;\"\r\n maxlength=\"30\"\r\n [(ngModel)]=\"newViewAlias\"/>\r\n </div>\r\n <ng-template pTemplate=\"footer\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <p-button (click)=\"viewEditorShow = false\" label=\"Cancel\" severity=\"danger\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n <p-button (click)=\"createOrUpdateTableView()\" [label]=\"editingViewAlias !== '' ? 'Update' : 'Create'\" severity=\"success\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n </ng-template>\r\n</p-dialog>", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }] });
|
|
875
1052
|
}
|
|
876
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.
|
|
1053
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ViewsManagement, decorators: [{
|
|
877
1054
|
type: Component,
|
|
878
1055
|
args: [{ selector: 'ecs-views-management', imports: [
|
|
879
1056
|
DialogModule,
|
|
@@ -912,46 +1089,11 @@ class ECSPrimengTable {
|
|
|
912
1089
|
this.tableService = tableService;
|
|
913
1090
|
this.notification = notification;
|
|
914
1091
|
}
|
|
915
|
-
|
|
916
|
-
data = []; // The array of data to be displayed
|
|
917
|
-
columnsToShow = []; // The combination of the non-selectable columns + selected columns that must be shown
|
|
918
|
-
computeScrollHeight = true; // If true, the table will try not to grow more than the total height of the window vertically
|
|
919
|
-
globalSearchEnabled = true; // Used to enable or disable the global search (by default enabled)
|
|
920
|
-
globalSearchMaxLength = 50; // The maximun number of characters that can be input in the global filter
|
|
921
|
-
globalSearchPlaceholder = "Search keyword"; // The placeholder text to show if global search is enabled
|
|
922
|
-
columnEditorEnabled = true; // If the user can modify the columns thorugh the column editor
|
|
923
|
-
urlColumnsSource; // The source URL to get data from columns
|
|
924
|
-
urlDataSource; // The URL to fetch data from
|
|
925
|
-
urlExcelReport = null;
|
|
926
|
-
predifinedFiltersCollection = {}; // Contains a collection of the values that need to be shown for predifined column filters
|
|
927
|
-
predifinedFiltersNoSelectionPlaceholder = "Any value"; // A text to be displayed in the dropdown if no value has been selected in a column that uses predifined filters
|
|
928
|
-
predifinedFiltersCollectionSelectedValuesText = "items selected"; // A text to display in the predifined filters dropdown footer indicating the number of items that have been selected
|
|
929
|
-
rowActionButtons = []; // A list that contains all buttons that will appear in the actions column
|
|
930
|
-
headerActionButtons = []; // A list that contains all buttons that will appear in the right side of the header of the table
|
|
931
|
-
copyCellDataToClipboardTimeSecs = 0.5; // The amount of time since mouse down in a cell for its content to be copied to the clipboard. If you want to disable this functionality, put it to a value less than or equal to 0.
|
|
932
|
-
actionsColumnAligmentRight = true; // If actions column is put at the right end of the table (or false if its at the left)
|
|
933
|
-
actionsColumnWidth = 150; // The amount in pixels for the size of the actions column
|
|
934
|
-
actionsColumnFrozen = true; // If the actions column should be frozen
|
|
935
|
-
rowSelectorColumnActive = false; // By default false. If true, a column will be shown to the user that includes a checkbox per row. This selection and filtering that the user can do is all managed by the table component. You can fetch the selected rows through the output selectedRowsCheckbox.
|
|
936
|
-
rowSelectorColumName = "Selected"; // The title of the row selection column. By default is "Selected"
|
|
937
|
-
rowSelectorColumnAligmentRight = true; // By default true. If true, the row selector column is put at the right end of the table (or false if its at the left).
|
|
938
|
-
rowSelectorColumnWidth = 150; // The amount in pixels for the size of the selector column
|
|
939
|
-
rowSelectorColumnFrozen = true; // By default true. If true, the row selector column will be frozen.
|
|
940
|
-
actionsColumnResizable = false; // If the action column can be resized by the user
|
|
941
|
-
actionColumnName = "Actions"; // The column name were the action buttons will appear
|
|
942
|
-
rowselectorColumnResizable = false;
|
|
943
|
-
noDataFoundText = "No data found for the current filter criteria."; // The text to be shown when no data has been returned
|
|
944
|
-
showClearSortAndFilters = true;
|
|
945
|
-
excelReportTitleDefault = "Report";
|
|
946
|
-
excelReportTitleAllowUserEdit = false;
|
|
947
|
-
tableViewSaveAs = TableViewSaveMode.noone; // How the table view will be saved
|
|
948
|
-
tableViewSaveKey = ""; // The key used to save the table views
|
|
949
|
-
viewsGetSourceURL = "";
|
|
950
|
-
viewsSaveSourceURL = "";
|
|
951
|
-
maxTableViews = 10; // The maximun number of views that can be saved
|
|
1092
|
+
tableOptions = DEFAULT_TABLE_OPTIONS;
|
|
952
1093
|
onRowCheckboxChange = new EventEmitter(); // Emitter that returns the column selected and if it was selected or unselected
|
|
953
1094
|
onRowSelect = new EventEmitter;
|
|
954
1095
|
onRowUnselect = new EventEmitter;
|
|
1096
|
+
onDataEndUpdate = new EventEmitter();
|
|
955
1097
|
viewsModalShow = false;
|
|
956
1098
|
tableViewCurrentSelectedAlias = null;
|
|
957
1099
|
tableViewsFirstFetchDone = false;
|
|
@@ -961,7 +1103,6 @@ class ECSPrimengTable {
|
|
|
961
1103
|
selectedRowsCheckbox = []; // An array to keep all the selected rows
|
|
962
1104
|
dt; // Get the reference to the object table
|
|
963
1105
|
showRefreshData = true;
|
|
964
|
-
scrollHeight = "0px"; // Used to get the table height
|
|
965
1106
|
globalSearchText = null; // The text used by the global search
|
|
966
1107
|
tableViewsList = [];
|
|
967
1108
|
tableViews_menuItems = [];
|
|
@@ -987,10 +1128,11 @@ class ECSPrimengTable {
|
|
|
987
1128
|
filteredColumnData = [];
|
|
988
1129
|
initialColumnWidths;
|
|
989
1130
|
initialTableWidth;
|
|
990
|
-
|
|
1131
|
+
predefinedFiltersSelectedValuesCollection = {}; // Contains a collection of the predefined column filters selection (possible values come from 'predefinedFiltersCollection')
|
|
991
1132
|
copyCellDataTimer; // A timer that handles the amount of time left to copy the cell data to the clipboard
|
|
992
1133
|
tableLazyLoadEventInformation = {}; // Data of the last lazy load event of the table
|
|
993
1134
|
initialConfigurationFetched = false;
|
|
1135
|
+
maxViews = 0;
|
|
994
1136
|
ngOnInit() {
|
|
995
1137
|
this.fetchTableConfiguration();
|
|
996
1138
|
}
|
|
@@ -1004,33 +1146,32 @@ class ECSPrimengTable {
|
|
|
1004
1146
|
this.calculateScrollHeight();
|
|
1005
1147
|
}
|
|
1006
1148
|
calculateScrollHeight() {
|
|
1007
|
-
if (this.
|
|
1008
|
-
/*const containerRect = this.tableContainer.nativeElement.getBoundingClientRect();
|
|
1009
|
-
const paginatorHeight = this.paginatorContainer.nativeElement.offsetHeight;
|
|
1010
|
-
const headerHeight = this.headerContainer.nativeElement.offsetHeight;
|
|
1011
|
-
|
|
1012
|
-
this.scrollHeight = `${containerRect.height - paginatorHeight - headerHeight}px`;*/
|
|
1149
|
+
if (this.tableOptions.verticalScroll.fitToContainer && this.tableContainer && this.paginatorContainer && this.headerContainer) {
|
|
1013
1150
|
const containerRect = this.tableContainer.nativeElement.getBoundingClientRect();
|
|
1014
1151
|
const paginatorHeight = this.paginatorContainer.nativeElement.offsetHeight;
|
|
1015
1152
|
const headerHeight = this.headerContainer.nativeElement.offsetHeight;
|
|
1016
1153
|
const viewportHeight = window.innerHeight;
|
|
1017
1154
|
const topOffset = containerRect.top + window.scrollY;
|
|
1018
|
-
this.
|
|
1019
|
-
/*const
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1155
|
+
this.tableOptions.verticalScroll.height = (viewportHeight - topOffset - paginatorHeight - headerHeight) - 60;
|
|
1156
|
+
/* const containerRect = this.tableContainer.nativeElement.getBoundingClientRect(); // Get the bounding rectangle of the table container
|
|
1157
|
+
const paginatorHeight = this.paginatorContainer.nativeElement.offsetHeight; // Get the height of the paginator container
|
|
1158
|
+
const headerHeight = this.headerContainer.nativeElement.offsetHeight; // Get the height of the header container
|
|
1159
|
+
const viewportHeight = window.innerHeight; // Get the height of the viewport (visible part of the window)
|
|
1160
|
+
const topOffset = containerRect.top + window.scrollY; // Calculate the top offset of the table container relative to the viewport
|
|
1161
|
+
this.tableOptions.verticalScroll.height = `${(viewportHeight - topOffset - paginatorHeight - headerHeight) - 45}px`; // Calculate and set the scrollable height by subtracting offsets and container heights
|
|
1162
|
+
}*/
|
|
1024
1163
|
}
|
|
1025
1164
|
}
|
|
1165
|
+
get scrollHeightValue() {
|
|
1166
|
+
const height = this.tableOptions.verticalScroll.height;
|
|
1167
|
+
return height && height > 0 ? `${height}px` : '';
|
|
1168
|
+
}
|
|
1026
1169
|
/**
|
|
1027
1170
|
* Used to update the data of a table externally outside the component. Use this method instead of 'updateData' to force the data updata of a table
|
|
1028
1171
|
*
|
|
1029
|
-
* @param {(optionalData?: any) => void} [continueAction] - Optional action to execute after data retrieval if it succeeded.
|
|
1030
|
-
* @param {boolean} [uponContinueActionEndModalHttp=false] - Optional flag to set the loading indicator to inactive after data retrieval.
|
|
1031
1172
|
*/
|
|
1032
|
-
updateData(
|
|
1033
|
-
this.isActive = true; // Indicate that the table is now enabled to perform actions
|
|
1173
|
+
updateData() {
|
|
1174
|
+
this.tableOptions.isActive = true; // Indicate that the table is now enabled to perform actions
|
|
1034
1175
|
if (!this.initialConfigurationFetched) {
|
|
1035
1176
|
this.fetchTableConfiguration();
|
|
1036
1177
|
}
|
|
@@ -1038,11 +1179,14 @@ class ECSPrimengTable {
|
|
|
1038
1179
|
this.fetchTableData(this.tableLazyLoadEventInformation);
|
|
1039
1180
|
}
|
|
1040
1181
|
}
|
|
1182
|
+
canFetchData() {
|
|
1183
|
+
return this.tableOptions.isActive && this.tableOptions.urlTableConfiguration != null && this.tableOptions.urlTableData != null;
|
|
1184
|
+
}
|
|
1041
1185
|
fetchTableConfiguration(resetTableView = false) {
|
|
1042
|
-
if (!this.
|
|
1186
|
+
if (!this.canFetchData()) {
|
|
1043
1187
|
return;
|
|
1044
1188
|
}
|
|
1045
|
-
this.tableService.fetchTableConfiguration(this.
|
|
1189
|
+
this.tableService.fetchTableConfiguration(this.tableOptions.urlTableConfiguration).subscribe({
|
|
1046
1190
|
next: (response) => {
|
|
1047
1191
|
this.handleTableConfigurationResponse(response.body, resetTableView);
|
|
1048
1192
|
},
|
|
@@ -1055,21 +1199,22 @@ class ECSPrimengTable {
|
|
|
1055
1199
|
this.columns = body.columnsInfo; // Update columns with fetched data
|
|
1056
1200
|
this.columnsCantBeHidden = this.columns.filter((col) => !col.canBeHidden); // Filter columns that cannot be hidden
|
|
1057
1201
|
this.columnsSelected = this.columns.filter((col) => !col.startHidden && col.canBeHidden); // Selected columns that are not hidden by default
|
|
1058
|
-
this.
|
|
1202
|
+
this.tableOptions.columns.shown = this.tableService.orderColumnsWithFrozens(this.columnsCantBeHidden.concat(this.columnsSelected));
|
|
1059
1203
|
this.dateFormat = body.dateFormat;
|
|
1060
1204
|
this.dateTimezone = body.dateTimezone;
|
|
1061
1205
|
this.dateCulture = body.dateCulture;
|
|
1062
1206
|
this.currentPage = 0;
|
|
1063
1207
|
this.initialConfigurationFetched = true;
|
|
1208
|
+
this.maxViews = body.maxViews;
|
|
1064
1209
|
if (resetTableView) {
|
|
1065
|
-
this.isActive = false;
|
|
1210
|
+
this.tableOptions.isActive = false;
|
|
1066
1211
|
this.clearFilters(this.dt, true);
|
|
1067
1212
|
this.clearSorts(this.dt, true);
|
|
1068
1213
|
this.dt.tableWidthState = this.initialTableWidth;
|
|
1069
1214
|
this.dt.columnWidthsState = this.initialColumnWidths;
|
|
1070
1215
|
this.dt.restoreColumnWidths();
|
|
1071
1216
|
this.tableLazyLoadEventInformation.multiSortMeta = [];
|
|
1072
|
-
this.isActive = true;
|
|
1217
|
+
this.tableOptions.isActive = true;
|
|
1073
1218
|
}
|
|
1074
1219
|
else {
|
|
1075
1220
|
setTimeout(() => {
|
|
@@ -1083,15 +1228,29 @@ class ECSPrimengTable {
|
|
|
1083
1228
|
this.fetchTableData(this.tableLazyLoadEventInformation);
|
|
1084
1229
|
}
|
|
1085
1230
|
tableViewsEnabled() {
|
|
1086
|
-
|
|
1087
|
-
|
|
1231
|
+
const views = this.tableOptions.views;
|
|
1232
|
+
if (views.saveMode === TableViewSaveMode.None) { // saveMode must be different from noone
|
|
1233
|
+
return false;
|
|
1234
|
+
}
|
|
1235
|
+
if (!views.saveKey?.trim()) { // saveKey must exist and must not be empty after trim
|
|
1236
|
+
return false;
|
|
1237
|
+
}
|
|
1238
|
+
if (this.maxViews <= 0) { // maxViews must be greater than 0
|
|
1239
|
+
return false;
|
|
1240
|
+
}
|
|
1241
|
+
if (views.saveMode === TableViewSaveMode.DatabaseStorage) { // If saveMode is database, urlGet and urlSave must exist and must not be empty after trim
|
|
1242
|
+
if (!views.urlGet?.trim() || !views.urlSave?.trim()) {
|
|
1243
|
+
return false;
|
|
1244
|
+
}
|
|
1245
|
+
}
|
|
1246
|
+
return true; // All checks passed, views are enabled
|
|
1088
1247
|
}
|
|
1089
1248
|
fetchTableViews() {
|
|
1090
1249
|
if (!this.tableViewsEnabled()) {
|
|
1091
1250
|
this.fetchTableData(this.tableLazyLoadEventInformation);
|
|
1092
1251
|
return;
|
|
1093
1252
|
}
|
|
1094
|
-
const tableViews = this.tableService.fetchTableViews(this.
|
|
1253
|
+
const tableViews = this.tableService.fetchTableViews(this.tableOptions.views.saveMode, this.tableOptions.views.urlGet, this.tableOptions.views.saveKey);
|
|
1095
1254
|
if (tableViews instanceof Observable) {
|
|
1096
1255
|
tableViews.subscribe({
|
|
1097
1256
|
next: (response) => {
|
|
@@ -1134,15 +1293,15 @@ class ECSPrimengTable {
|
|
|
1134
1293
|
.map(data => this.columns.find((col) => col.field === data.field))
|
|
1135
1294
|
.filter((col) => col !== undefined)
|
|
1136
1295
|
.filter(col => !this.columnsCantBeHidden.includes(col));
|
|
1137
|
-
this.
|
|
1296
|
+
this.tableOptions.columns.shown = this.tableService.orderColumnsWithFrozens(this.columnsCantBeHidden.concat(this.columnsSelected));
|
|
1138
1297
|
this.currentPage = viewData.currentPage;
|
|
1139
1298
|
this.currentRowsPerPage = viewData.currentRowsPerPage;
|
|
1140
1299
|
this.globalSearchText = viewData.globalSearchText;
|
|
1141
1300
|
this.tableLazyLoadEventInformation.multiSortMeta = [...(viewData.multiSortMeta ?? [])];
|
|
1142
1301
|
this.dt.multiSortMeta = [...(viewData.multiSortMeta ?? [])];
|
|
1143
|
-
this.isActive = false;
|
|
1302
|
+
this.tableOptions.isActive = false;
|
|
1144
1303
|
this.dt.sortMultiple();
|
|
1145
|
-
this.isActive = true;
|
|
1304
|
+
this.tableOptions.isActive = true;
|
|
1146
1305
|
this.tableLazyLoadEventInformation.filters = { ...viewData.filters };
|
|
1147
1306
|
this.dt.filters = { ...viewData.filters };
|
|
1148
1307
|
this.dt.tableWidthState = viewData.tableWidth;
|
|
@@ -1153,6 +1312,11 @@ class ECSPrimengTable {
|
|
|
1153
1312
|
this.fetchTableData(this.tableLazyLoadEventInformation);
|
|
1154
1313
|
}
|
|
1155
1314
|
viewCreate(viewAlias) {
|
|
1315
|
+
console.log("length:", this.tableViewsList.length, "max:", this.maxViews);
|
|
1316
|
+
if (this.tableViewsList.length >= this.maxViews) {
|
|
1317
|
+
this.notification.showToast("error", "NO MORE VIEWS ALLOWED", "You have created the maximum number of allowed views for this table");
|
|
1318
|
+
return;
|
|
1319
|
+
}
|
|
1156
1320
|
let viewData = this.tableService.viewGenerateData(this.dt, this.globalSearchText, this.currentPage, this.currentRowsPerPage, this.modifyFiltersWithoutGlobalAndSelectedRows.bind(this));
|
|
1157
1321
|
let newView = {
|
|
1158
1322
|
lastActive: false,
|
|
@@ -1216,15 +1380,15 @@ class ECSPrimengTable {
|
|
|
1216
1380
|
}
|
|
1217
1381
|
viewsSave(endMessage) {
|
|
1218
1382
|
let tableView = JSON.stringify(this.tableViewsList);
|
|
1219
|
-
switch (this.
|
|
1220
|
-
case TableViewSaveMode.
|
|
1221
|
-
sessionStorage.setItem(this.
|
|
1383
|
+
switch (this.tableOptions.views.saveMode) {
|
|
1384
|
+
case TableViewSaveMode.SessionStorage:
|
|
1385
|
+
sessionStorage.setItem(this.tableOptions.views.saveKey, tableView);
|
|
1222
1386
|
break;
|
|
1223
|
-
case TableViewSaveMode.
|
|
1224
|
-
localStorage.setItem(this.
|
|
1387
|
+
case TableViewSaveMode.LocalStorage:
|
|
1388
|
+
localStorage.setItem(this.tableOptions.views.saveKey, tableView);
|
|
1225
1389
|
break;
|
|
1226
|
-
case TableViewSaveMode.
|
|
1227
|
-
const saveObsv = this.tableService.viewsSaveToDatabase(this.tableViewsList, this.
|
|
1390
|
+
case TableViewSaveMode.DatabaseStorage:
|
|
1391
|
+
const saveObsv = this.tableService.viewsSaveToDatabase(this.tableViewsList, this.tableOptions.views.urlSave, this.tableOptions.views.saveKey);
|
|
1228
1392
|
saveObsv.subscribe({
|
|
1229
1393
|
next: (response) => {
|
|
1230
1394
|
this.viewsSaveEnd(endMessage);
|
|
@@ -1259,7 +1423,7 @@ class ECSPrimengTable {
|
|
|
1259
1423
|
}
|
|
1260
1424
|
}
|
|
1261
1425
|
fetchTableData(event) {
|
|
1262
|
-
if (!this.
|
|
1426
|
+
if (!this.canFetchData()) {
|
|
1263
1427
|
return;
|
|
1264
1428
|
}
|
|
1265
1429
|
if (!this.initialConfigurationFetched) {
|
|
@@ -1280,12 +1444,16 @@ class ECSPrimengTable {
|
|
|
1280
1444
|
sort: this.tableLazyLoadEventInformation.multiSortMeta, // Set the sorting information
|
|
1281
1445
|
filter: filtersWithoutGlobalAndSelectedRows, // Set the filters excluding the global filter
|
|
1282
1446
|
globalFilter: this.globalSearchText, // Set the global filter text
|
|
1283
|
-
columns: this.
|
|
1447
|
+
columns: this.tableOptions.columns.shown.map(col => col.field), // Set the columns to show
|
|
1284
1448
|
dateFormat: this.dateFormat,
|
|
1285
1449
|
dateTimezone: this.dateTimezone,
|
|
1286
1450
|
dateCulture: this.dateCulture
|
|
1287
1451
|
};
|
|
1288
|
-
this.tableService.fetchTableData(this.
|
|
1452
|
+
this.tableService.fetchTableData(this.tableOptions.urlTableData, requestData)
|
|
1453
|
+
.pipe(finalize(() => {
|
|
1454
|
+
this.onDataEndUpdate.emit(); // Esto siempre se ejecuta
|
|
1455
|
+
}))
|
|
1456
|
+
.subscribe({
|
|
1289
1457
|
next: (response) => this.handleTableDataResponse(response.body),
|
|
1290
1458
|
error: (err) => this.tableService.handleTableError(err, 'Columns Error')
|
|
1291
1459
|
});
|
|
@@ -1302,6 +1470,7 @@ class ECSPrimengTable {
|
|
|
1302
1470
|
return filtersWithoutGlobalAndSelectedRows; // Return the filters without global array
|
|
1303
1471
|
}
|
|
1304
1472
|
resetTableView() {
|
|
1473
|
+
this.tableViewCurrentSelectedAlias = '';
|
|
1305
1474
|
this.fetchTableConfiguration(true);
|
|
1306
1475
|
}
|
|
1307
1476
|
selectorRowFilterBuilder(filtersWithoutGlobalAndSelectedRows, overrideOption = -1) {
|
|
@@ -1350,7 +1519,7 @@ class ECSPrimengTable {
|
|
|
1350
1519
|
}
|
|
1351
1520
|
}
|
|
1352
1521
|
revertDateTimeZoneFilters(inputFilter) {
|
|
1353
|
-
this.
|
|
1522
|
+
this.tableOptions.columns.shown.forEach((column) => {
|
|
1354
1523
|
if (column.dataType === DataType.Date) { // If its date type
|
|
1355
1524
|
if (inputFilter.hasOwnProperty(column.field)) {
|
|
1356
1525
|
const originalDate = inputFilter[column.field][0].value;
|
|
@@ -1364,7 +1533,7 @@ class ECSPrimengTable {
|
|
|
1364
1533
|
return inputFilter;
|
|
1365
1534
|
}
|
|
1366
1535
|
handleTableDataResponse(body) {
|
|
1367
|
-
this.data = body.data; // Update the table data
|
|
1536
|
+
this.tableOptions.data = body.data; // Update the table data
|
|
1368
1537
|
this.totalRecords = body.totalRecords; // Update the total number of records
|
|
1369
1538
|
this.totalRecordsNotFiltered = body.totalRecordsNotFiltered; // Update the total records not filtered
|
|
1370
1539
|
this.currentPage = body.page; // Update the current page
|
|
@@ -1373,7 +1542,7 @@ class ECSPrimengTable {
|
|
|
1373
1542
|
let hasToClear = this.hasToClearFilters(dt, this.globalSearchText, force);
|
|
1374
1543
|
if (hasToClear) {
|
|
1375
1544
|
if (!onlyGlobalFilter) {
|
|
1376
|
-
this.
|
|
1545
|
+
this.predefinedFiltersSelectedValuesCollection = {};
|
|
1377
1546
|
for (const key in dt.filters) {
|
|
1378
1547
|
if (dt.filters.hasOwnProperty(key)) {
|
|
1379
1548
|
const filters = dt.filters[key];
|
|
@@ -1447,8 +1616,8 @@ class ECSPrimengTable {
|
|
|
1447
1616
|
getColumnStyle(col, headerCols = false) {
|
|
1448
1617
|
return this.tableService.getColumnStyle(col, headerCols);
|
|
1449
1618
|
}
|
|
1450
|
-
|
|
1451
|
-
return this.
|
|
1619
|
+
getPredefinedFilterValues(columnKeyName) {
|
|
1620
|
+
return this.tableOptions.predefinedFilters[columnKeyName] || []; // Return the predefined filter values or an empty array if the option name does not exist
|
|
1452
1621
|
}
|
|
1453
1622
|
getFrozenColumnAlignAsText(frozenColumnAlign) {
|
|
1454
1623
|
return frozenColumnAlignAsText(frozenColumnAlign);
|
|
@@ -1460,9 +1629,9 @@ class ECSPrimengTable {
|
|
|
1460
1629
|
* Updates the filters of a PrimeNG data table based on predefined filter changes.
|
|
1461
1630
|
*
|
|
1462
1631
|
* @param {string} filterName - The name of the filter to be updated.
|
|
1463
|
-
* @param {
|
|
1632
|
+
* @param {IPrimengPredefinedFilter[]} selectedValues - An array of selected predefined filter values.
|
|
1464
1633
|
*/
|
|
1465
|
-
|
|
1634
|
+
onPredefinedFilterChange(filterName, selectedValues) {
|
|
1466
1635
|
const filters = { ...this.dt.filters }; // Create a shallow copy of the current filters to avoid mutating the original filters directly
|
|
1467
1636
|
if (Array.isArray(filters[filterName])) { // Check if the filter for the given filterName is an array
|
|
1468
1637
|
filters[filterName].forEach(criteria => {
|
|
@@ -1485,12 +1654,12 @@ class ECSPrimengTable {
|
|
|
1485
1654
|
* @param {string} columnKeyName - The key name of the column for which to retrieve the number of selected values.
|
|
1486
1655
|
* @returns {string} A string indicating the number of selected values for the specified column.
|
|
1487
1656
|
*/
|
|
1488
|
-
|
|
1657
|
+
predefinedFiltersSelectedValuesText(columnKeyName) {
|
|
1489
1658
|
let numbItemsSelected = 0; // Initialize the count of selected items to zero
|
|
1490
|
-
if (this.
|
|
1491
|
-
numbItemsSelected = this.
|
|
1659
|
+
if (this.predefinedFiltersSelectedValuesCollection[columnKeyName]) { // Check if there are selected values for the specified column key
|
|
1660
|
+
numbItemsSelected = this.predefinedFiltersSelectedValuesCollection[columnKeyName].length; // Get the number of selected items
|
|
1492
1661
|
}
|
|
1493
|
-
return `${numbItemsSelected}
|
|
1662
|
+
return `${numbItemsSelected} items selected`; // Return the number of selected items concatenated with the predefined text
|
|
1494
1663
|
}
|
|
1495
1664
|
handleButtonsClick(action, rowData = null) {
|
|
1496
1665
|
this.tableService.handleButtonsClick(action, rowData);
|
|
@@ -1504,14 +1673,14 @@ class ECSPrimengTable {
|
|
|
1504
1673
|
* @returns {any} The matching predefined filter value if found, otherwise null.
|
|
1505
1674
|
*/
|
|
1506
1675
|
getPredfinedFilterMatch(colMetadata, value) {
|
|
1507
|
-
if (colMetadata.
|
|
1508
|
-
const options = this.
|
|
1676
|
+
if (colMetadata.filterPredefinedValuesName && colMetadata.filterPredefinedValuesName.length > 0) { // Check if the column uses predefined filter values
|
|
1677
|
+
const options = this.getPredefinedFilterValues(colMetadata.filterPredefinedValuesName); // Get the predefined filter values based on the name
|
|
1509
1678
|
return options.find(option => option.value === value); // Return the matching option if found
|
|
1510
1679
|
}
|
|
1511
1680
|
return null; // Return null if the column does not use predefined filter values
|
|
1512
1681
|
}
|
|
1513
1682
|
copyToClipboardStart(event) {
|
|
1514
|
-
if (this.
|
|
1683
|
+
if (this.tableOptions.copyToClipboardTime > 0) {
|
|
1515
1684
|
const cellContent = event.target.innerText;
|
|
1516
1685
|
this.copyCellDataTimer = setTimeout(() => {
|
|
1517
1686
|
navigator.clipboard.writeText(cellContent).then(() => {
|
|
@@ -1521,11 +1690,11 @@ class ECSPrimengTable {
|
|
|
1521
1690
|
this.notification.clearToasts();
|
|
1522
1691
|
this.notification.showToast("error", "CELL CONTENT COPIED", `The cell content failed to copy to your clipboard with error: ${err}`);
|
|
1523
1692
|
});
|
|
1524
|
-
}, this.
|
|
1693
|
+
}, this.tableOptions.copyToClipboardTime * 1000);
|
|
1525
1694
|
}
|
|
1526
1695
|
}
|
|
1527
1696
|
copyToClipboardCancel() {
|
|
1528
|
-
if (this.
|
|
1697
|
+
if (this.tableOptions.copyToClipboardTime > 0) {
|
|
1529
1698
|
clearTimeout(this.copyCellDataTimer);
|
|
1530
1699
|
}
|
|
1531
1700
|
}
|
|
@@ -1609,23 +1778,23 @@ class ECSPrimengTable {
|
|
|
1609
1778
|
finalColumns.push(matchingColumn);
|
|
1610
1779
|
}
|
|
1611
1780
|
});
|
|
1612
|
-
let prevColsToShow = this.
|
|
1613
|
-
this.
|
|
1614
|
-
let sameColumnsAsBefore = prevColsToShow.length === this.
|
|
1615
|
-
prevColsToShow.every((prevCol, index) => prevCol.field === this.
|
|
1616
|
-
this.columnsSelected = this.
|
|
1781
|
+
let prevColsToShow = this.tableOptions.columns.shown;
|
|
1782
|
+
this.tableOptions.columns.shown = this.tableService.orderColumnsWithFrozens(finalColumns);
|
|
1783
|
+
let sameColumnsAsBefore = prevColsToShow.length === this.tableOptions.columns.shown.length &&
|
|
1784
|
+
prevColsToShow.every((prevCol, index) => prevCol.field === this.tableOptions.columns.shown[index].field);
|
|
1785
|
+
this.columnsSelected = this.tableOptions.columns.shown.filter(column => !this.columnsCantBeHidden.some(nonSelectable => nonSelectable.field === column.field));
|
|
1617
1786
|
this.updateColumnsSpecialProperties(this.columnModalData);
|
|
1618
1787
|
if (!sameColumnsAsBefore) {
|
|
1619
|
-
this.isActive = false;
|
|
1788
|
+
this.tableOptions.isActive = false;
|
|
1620
1789
|
this.clearSorts(this.dt, true);
|
|
1621
1790
|
setTimeout(() => {
|
|
1622
|
-
this.isActive = true;
|
|
1791
|
+
this.tableOptions.isActive = true;
|
|
1623
1792
|
this.clearSorts(this.dt, true);
|
|
1624
1793
|
}, 1);
|
|
1625
1794
|
}
|
|
1626
1795
|
}
|
|
1627
1796
|
updateColumnsSpecialProperties(columnsSource) {
|
|
1628
|
-
const allColumns = [this.columns, this.
|
|
1797
|
+
const allColumns = [this.columns, this.tableOptions.columns.shown, this.columnsSelected, this.columnsCantBeHidden];
|
|
1629
1798
|
const columnModalDataMap = new Map(columnsSource.map((item) => [item.field, {
|
|
1630
1799
|
cellOverflowBehaviour: item.cellOverflowBehaviour,
|
|
1631
1800
|
dataAlignHorizontal: item.dataAlignHorizontal,
|
|
@@ -1650,12 +1819,15 @@ class ECSPrimengTable {
|
|
|
1650
1819
|
}
|
|
1651
1820
|
openExcelExport() {
|
|
1652
1821
|
this.excelReportTitle =
|
|
1653
|
-
(!this.
|
|
1822
|
+
(!this.tableOptions.excelReport.defaultTitle || this.tableOptions.excelReport.defaultTitle.trim().length === 0) && !this.tableOptions.excelReport.titleAllowUserEdit
|
|
1654
1823
|
? 'Report'
|
|
1655
|
-
: this.
|
|
1824
|
+
: this.tableOptions.excelReport.defaultTitle;
|
|
1656
1825
|
this.showExportModal = true;
|
|
1657
1826
|
}
|
|
1658
1827
|
generateExcelReport(event) {
|
|
1828
|
+
if (!this.tableOptions.excelReport.url?.trim()) {
|
|
1829
|
+
return;
|
|
1830
|
+
}
|
|
1659
1831
|
let filtersWithoutGlobalAndSelectedRows = this.modifyFiltersWithoutGlobalAndSelectedRows(this.tableLazyLoadEventInformation.filters, event.selectedRows); // Create filters excluding the global filter
|
|
1660
1832
|
filtersWithoutGlobalAndSelectedRows = this.revertDateTimeZoneFilters(filtersWithoutGlobalAndSelectedRows);
|
|
1661
1833
|
const filtersMustBeApplied = (event.selectedRows === 1 || event.selectedRows === 2)
|
|
@@ -1667,7 +1839,7 @@ class ECSPrimengTable {
|
|
|
1667
1839
|
sort: this.tableLazyLoadEventInformation.multiSortMeta, // Set the sorting information
|
|
1668
1840
|
filter: filtersWithoutGlobalAndSelectedRows, // Set the filters excluding the global filter
|
|
1669
1841
|
globalFilter: this.globalSearchText, // Set the global filter text
|
|
1670
|
-
columns: this.
|
|
1842
|
+
columns: this.tableOptions.columns.shown.map(col => col.field), // Set the columns to show
|
|
1671
1843
|
dateFormat: this.dateFormat,
|
|
1672
1844
|
dateTimezone: this.dateTimezone,
|
|
1673
1845
|
dateCulture: this.dateCulture,
|
|
@@ -1676,7 +1848,7 @@ class ECSPrimengTable {
|
|
|
1676
1848
|
applySorts: event.applySorts,
|
|
1677
1849
|
filename: event.filename
|
|
1678
1850
|
};
|
|
1679
|
-
this.tableService.fetchExcelReport(this.
|
|
1851
|
+
this.tableService.fetchExcelReport(this.tableOptions.excelReport.url, requestData).subscribe({
|
|
1680
1852
|
next: (response) => {
|
|
1681
1853
|
this.tableService.downloadFile(response.body, event.filename, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
|
|
1682
1854
|
this.showExportModal = false;
|
|
@@ -1684,10 +1856,35 @@ class ECSPrimengTable {
|
|
|
1684
1856
|
error: (err) => this.tableService.handleTableError(err, 'Excel export error')
|
|
1685
1857
|
});
|
|
1686
1858
|
}
|
|
1687
|
-
|
|
1688
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ECSPrimengTable, isStandalone: true, selector: "ecs-primeng-table", inputs: { isActive: "isActive", data: "data", columnsToShow: "columnsToShow", computeScrollHeight: "computeScrollHeight", globalSearchEnabled: "globalSearchEnabled", globalSearchMaxLength: "globalSearchMaxLength", globalSearchPlaceholder: "globalSearchPlaceholder", columnEditorEnabled: "columnEditorEnabled", urlColumnsSource: "urlColumnsSource", urlDataSource: "urlDataSource", urlExcelReport: "urlExcelReport", predifinedFiltersCollection: "predifinedFiltersCollection", predifinedFiltersNoSelectionPlaceholder: "predifinedFiltersNoSelectionPlaceholder", predifinedFiltersCollectionSelectedValuesText: "predifinedFiltersCollectionSelectedValuesText", rowActionButtons: "rowActionButtons", headerActionButtons: "headerActionButtons", copyCellDataToClipboardTimeSecs: "copyCellDataToClipboardTimeSecs", actionsColumnAligmentRight: "actionsColumnAligmentRight", actionsColumnWidth: "actionsColumnWidth", actionsColumnFrozen: "actionsColumnFrozen", rowSelectorColumnActive: "rowSelectorColumnActive", rowSelectorColumName: "rowSelectorColumName", rowSelectorColumnAligmentRight: "rowSelectorColumnAligmentRight", rowSelectorColumnWidth: "rowSelectorColumnWidth", rowSelectorColumnFrozen: "rowSelectorColumnFrozen", actionsColumnResizable: "actionsColumnResizable", actionColumnName: "actionColumnName", rowselectorColumnResizable: "rowselectorColumnResizable", noDataFoundText: "noDataFoundText", showClearSortAndFilters: "showClearSortAndFilters", excelReportTitleDefault: "excelReportTitleDefault", excelReportTitleAllowUserEdit: "excelReportTitleAllowUserEdit", tableViewSaveAs: "tableViewSaveAs", tableViewSaveKey: "tableViewSaveKey", viewsGetSourceURL: "viewsGetSourceURL", viewsSaveSourceURL: "viewsSaveSourceURL", maxTableViews: "maxTableViews" }, outputs: { onRowCheckboxChange: "onRowCheckboxChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "paginatorContainer", first: true, predicate: ["paginatorContainer"], descendants: true }], ngImport: i0, template: "<div #tableContainer>\r\n <p-table #dt\r\n size=\"small\" showGridlines stripedRows \r\n sortMode=\"multiple\"\r\n [resizableColumns]=\"true\" columnResizeMode=\"expand\"\r\n [reorderableColumns]=\"true\"\r\n [scrollable]=\"true\" [scrollHeight]=\"computeScrollHeight ? scrollHeight : ''\"\r\n [columns]=\"columnsToShow\" [value]=\"data\" dataKey=\"rowID\" \r\n [paginator]=\"true\" [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n [rowsPerPageOptions]=\"allowedRowsPerPage\" [showCurrentPageReport]=\"false\" (onPage)=\"pageChange($event)\"\r\n [metaKeySelection]=\"true\" selectionMode=\"single\" [(selection)]=\"rowSelection\" (onRowSelect)=\"rowSelect($event)\" (onRowUnselect)=\"rowUnselect($event)\"\r\n [lazy]=\"true\" (onLazyLoad)=\"fetchTableData($event)\">\r\n\r\n <!--TEMPLATE FOR THE ACTIONS HEADER COLUMN-->\r\n <ng-template #actionColumnHeaderTemplate>\r\n @if (rowActionButtons.length > 0) {\r\n <th [ngStyle]=\"{'max-width': actionsColumnWidth + 'px','min-width': actionsColumnWidth + 'px','width': actionsColumnWidth + 'px'}\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!actionsColumnResizable\" pFrozenColumn [frozen]=\"actionsColumnFrozen\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(actionsColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n [attr.scope]=\"'col'\" style=\"text-align: center;\">\r\n {{ actionColumnName }}\r\n </th>\r\n }\r\n </ng-template>\r\n\r\n <!--TEMPLATE FOR THE ACTIONS ROW COLUMN-->\r\n <ng-template #actionColumnTemplate let-rowData=\"rowData\">\r\n @if (rowActionButtons.length > 0) {\r\n <td \r\n [ngStyle]=\"{'max-width': actionsColumnWidth + 'px','min-width': actionsColumnWidth + 'px','width': actionsColumnWidth + 'px'}\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"actionsColumnFrozen\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(actionsColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n @for (button of rowActionButtons; track button; let last = $last) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\" (clicked)=\"handleButtonsClick($event, rowData)\"/>\r\n }\r\n </td>\r\n }\r\n </ng-template>\r\n\r\n <!-- TEMPLATE FOR THE ROW CHECKBOX SELECTOR HEADER COLUMN -->\r\n <ng-template #rowSelectorColumnHeaderTemplate>\r\n <th \r\n [ngStyle]=\"{'max-width': rowSelectorColumnWidth + 'px','min-width': rowSelectorColumnWidth + 'px','width': rowSelectorColumnWidth + 'px'}\"\r\n id=\"rowSelector-header\" [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!rowselectorColumnResizable\" pFrozenColumn \r\n [frozen]=\"rowSelectorColumnFrozen\" [alignFrozen]=\"getFrozenColumnAlignAsText(rowSelectorColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\"\r\n style=\"text-align: center; vertical-align: middle;\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n {{ rowSelectorColumName }}\r\n <p-columnFilter type=\"boolean\" field=\"selector\" display=\"menu\" [showButtons]=\"false\"/>\r\n </div>\r\n </th>\r\n </ng-template>\r\n\r\n <!--TEMPLATE FOR THE ROW CHECKBOX SELECTOR COLUMN-->\r\n <ng-template #rowSelectorColumnTemplate let-rowData=\"rowData\">\r\n <td \r\n [ngStyle]=\"{\r\n 'max-width': rowSelectorColumnWidth + 'px', \r\n 'min-width': rowSelectorColumnWidth + 'px', \r\n 'width': rowSelectorColumnWidth + 'px'\r\n }\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"rowSelectorColumnFrozen\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(rowSelectorColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n <p-checkbox \r\n [binary]=\"true\"\r\n [ngModel]=\"isRowCheckboxSelected(rowData.rowID)\"\r\n (onChange)=\"onRowChekboxChange($event, rowData.rowID)\"/>\r\n </td>\r\n </ng-template>\r\n\r\n\r\n <!-- LOGIC FOR DRAWING TABLE ACTIONS ABOVE THE HEADER -->\r\n <ng-template #caption>\r\n <div #headerContainer style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <!--CHOOSE COLUMNS TO SHOW-->\r\n @if (columnEditorEnabled) {\r\n <p-button icon=\"pi pi-pen-to-square\" (onClick)=\"columnSelectorShow()\" pTooltip=\"Modify columns\"\r\n [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n <!--CLEAR SORTS AND FILTERS-->\r\n @if (showClearSortAndFilters) {\r\n <p-button icon=\"pi pi-sort-alt-slash\" (onClick)=\"clearSorts(dt)\" [disabled]=\"!hasToClearSorts(dt)\"\r\n pTooltip=\"Clear sorts\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n <p-button\r\n icon=\"pi pi-filter-slash\" (onClick)=\"clearFilters(dt)\" [disabled]=\"!hasToClearFilters(dt, globalSearchText)\"\r\n pTooltip=\"Clear filters\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n </div>\r\n\r\n <!--TABLE VIEWS-->\r\n @if(tableViewsEnabled()){\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <p-buttongroup>\r\n <p-button (click)=\"viewsModalShow=true;\" [label]=\"tableViewCurrentSelectedAlias ? tableViewCurrentSelectedAlias : '--- Select a view ---'\" class=\"viewButton\"/>\r\n <p-button icon=\"pi pi-refresh\" (click)=\"viewLoad(tableViewCurrentSelectedAlias!)\" [disabled]=\"!tableViewCurrentSelectedAlias\" pTooltip=\"Apply view again\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n <p-button icon=\"pi pi-eraser\" (click)=\"resetTableView()\" pTooltip=\"Reset table view\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n </p-buttongroup>\r\n </div>\r\n }\r\n\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <!--GLOBAL FILTER-->\r\n @if (globalSearchEnabled) {\r\n <p-iconField iconPosition=\"left\" class=\"ml-auto\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n <p-inputIcon>\r\n <i class=\"pi pi-search\"></i>\r\n </p-inputIcon>\r\n <input pInputText type=\"text\" \r\n (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\" autocomplete=\"off\" \r\n [maxlength]=\"globalSearchMaxLength\" [placeholder]=\"globalSearchPlaceholder\" [(ngModel)]=\"globalSearchText\"\r\n style=\"width: 220px;\"/>\r\n <!-- Right icon (only if there is text) -->\r\n @if (globalSearchText) {\r\n <p-inputIcon position=\"right\">\r\n <i class=\"pi pi-times\" style=\"cursor: pointer;\" (click)=\"clearFilters(dt, true, true); $event.stopPropagation()\"></i>\r\n </p-inputIcon>\r\n }\r\n </p-iconField>\r\n }\r\n\r\n <!--EXPORT DATA-->\r\n @if (urlExcelReport && urlExcelReport.trim().length > 0) {\r\n <p-button icon=\"pi pi-file-excel\" (onClick)=\"openExcelExport()\"\r\n pTooltip=\"Export to Excel\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n\r\n <!--REFRESH DATA-->\r\n @if (showRefreshData) {\r\n <p-button icon=\"pi pi-refresh\" (onClick)=\"refreshData($event)\" pTooltip=\"Refresh data\" [showDelay]=\"700\"\r\n tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n \r\n <!-- HEADER ACTION BUTTONS -->\r\n @if (headerActionButtons.length > 0) {\r\n <td style=\"display: flex; justify-content: center; align-items: center;\">\r\n @for (button of headerActionButtons; track $index) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"null\" (clicked)=\"handleButtonsClick($event, null)\"/>\r\n }\r\n </td>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE HEADERS -->\r\n <ng-template #header let-columns>\r\n <tr>\r\n @if (!actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (rowSelectorColumnActive && !rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @for (col of columns; track col.header) {\r\n <th [ngStyle]=\"getColumnStyle(col, true)\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!col.canBeResized ? true : false\"\r\n pReorderableColumn [pReorderableColumnDisabled]=\"!col.canBeReordered ? true : false\"\r\n pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\"\r\n [pSortableColumn]=\"col.field\" [pSortableColumnDisabled]=\"!col.canBeSorted ? true : false\"\r\n style=\"text-align: center;\"\r\n [id]=\"col.field + '-header'\" [attr.scope]=\"'col'\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%;\">\r\n <div style=\"margin-right: 15px;\">\r\n <span>{{ col.header }}</span>\r\n </div>\r\n <div style=\"display: flex; align-items: center; gap: 5px;\">\r\n @if (col.canBeSorted) {\r\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n }\r\n @if(col.canBeFiltered){\r\n @if (!col.filterPredifinedValuesName || col.filterPredifinedValuesName.length === 0) {\r\n <p-columnFilter [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\" [showButtons]=\"false\"/>\r\n } @else {\r\n <p-columnFilter\r\n type=\"{{getDataTypeAsText(col.dataType)}}\" field=\"{{col.field}}\" display=\"menu\"\r\n [showButtons]=\"false\" matchMode=\"in\" operator=\"or\" [showMatchModes]=\"false\"\r\n [showOperator]=\"false\" [showAddButton]=\"false\" [showClearButton]=\"false\" [showApplyButton]=\"false\">\r\n <ng-template #filter>\r\n <p-multiSelect\r\n [style]=\"{ minWidth: '400px' }\" [(ngModel)]=\"predifinedFiltersSelectedValuesCollection[col.filterPredifinedValuesName]\"\r\n [options]=\"getPredifinedFilterValues(col.filterPredifinedValuesName)\" [placeholder]=\"predifinedFiltersNoSelectionPlaceholder\"\r\n (onChange)=\"onPredifinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n <ng-template #selectedItems>\r\n @if (predifinedFiltersSelectedValuesCollection[col.filterPredifinedValuesName].length > 0) {\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\r\n <div>\r\n {{predifinedFiltersSelectedValuesText(col.filterPredifinedValuesName)}}\r\n </div>\r\n </div>\r\n } @else {\r\n <div>{{ predifinedFiltersNoSelectionPlaceholder }}</div>\r\n }\r\n </ng-template>\r\n <ng-template let-option pTemplate=\"item\">\r\n <div style=\"display: inline-block; vertical-align: middle;\">\r\n <ecs-table-predifined-filters [option]=\"option\" [col]=\"col\"/>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n </ng-template>\r\n </p-columnFilter>\r\n }\r\n }\r\n @if (col.columnDescription && col.columnDescription.length > 0) {\r\n <i [pTooltip]=\"col.columnDescription\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n }\r\n </div>\r\n </div>\r\n </th>\r\n }\r\n @if (rowSelectorColumnActive && rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS CONTENTS -->\r\n <ng-template #body let-rowData let-columns=\"columns\"> \r\n <tr [pSelectableRow]=\"rowData\">\r\n @if (!actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n @if (rowSelectorColumnActive && !rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @for (col of columns; track col.field) {\r\n <td (mousedown)=\"col.dataType !== DataType.Boolean && copyToClipboardStart($event)\" (mouseup)=\"copyToClipboardCancel()\"\r\n [ngStyle]=\"getColumnStyle(col)\" pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\" [style.text-align]=\"getDataAlignHorizontalAsText(col.dataAlignHorizontal)\" [style.vertical-align]=\"getDataAlignVerticalAsText(col.dataAlignVertical)\">\r\n <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\" \r\n [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n [predifinedFiltersCollection]=\"predifinedFiltersCollection\"/>\r\n </td>\r\n }\r\n @if (rowSelectorColumnActive && rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @if (actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS NO CONTENTS -->\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"999\">{{noDataFoundText}}</td>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- SHOW CUSTOM RECORDS REPORT -->\r\n <ng-template #paginatorleft>\r\n <div #paginatorContainer>\r\n Showing {{totalRecords}} records of {{totalRecordsNotFiltered}} available records\r\n </div>\r\n </ng-template>\r\n </p-table>\r\n</div>\r\n<ecs-column-selector [visible]=\"showColumnSelector\" [columnModalData]=\"columnModalData\" [filteredColumnData]=\"filteredColumnData\" (visibleChange)=\"showColumnSelector=false\" (applyChanges)=\"applyColumnModalChanges($event)\"/>\r\n<ecs-export-excel [visible]=\"showExportModal\" [rowCheckboxSelectorActive]=\"rowSelectorColumnActive\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"excelReportTitleAllowUserEdit\" (visibleChange)=\"showExportModal=false\" (exportToExcel)=\"generateExcelReport($event)\"/>\r\n<ecs-views-management [visible]=\"viewsModalShow\" [tableViews_menuItems]=\"tableViews_menuItems\" \r\n (onViewSelect)=\"viewLoad($event)\" (onViewCreate)=\"viewCreate($event)\" (onViewDelete)=\"viewDelete($event)\" (onViewEditAlias)=\"viewEditAlias($event)\" (onViewUpdateData)=\"viewUpdateData($event)\" (onViewUpdateActiveStartup)=\"viewUpdateActiveStartup($event)\"\r\n (visibleChange)=\"viewsModalShow=false\"/>", styles: [".highlighted-text{background-color:#ff0}.p-datatable-column-filter-button.p-button-icon-only.p-button-rounded,.p-datatable-column-filter-clear-button.p-button-icon-only.p-button-rounded{height:var(--p-icon-size)!important;width:var(--p-icon-size)!important}.viewButton{width:200px}.viewButton .p-button{width:100%;justify-content:center}.viewButton .p-button-label{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i5$1.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i5$1.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i5$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i5$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i5$1.ColumnFilter, selector: "p-columnFilter, p-column-filter, p-columnfilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "filterOn", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i9$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i12.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: TableCell, selector: "ecs-table-cell", inputs: ["col", "rowData", "globalSearchText", "predifinedFiltersCollection", "dateFormat", "dateTimezone", "dateCulture"] }, { kind: "component", type: TablePredifinedFilters, selector: "ecs-table-predifined-filters", inputs: ["option", "col"] }, { kind: "component", type: TableButton, selector: "ecs-table-button", inputs: ["button", "rowData", "isActionButton", "isLastActionButton"], outputs: ["clicked"] }, { kind: "component", type: ColumnSelector, selector: "ecs-column-selector", inputs: ["visible", "columnModalData", "filteredColumnData"], outputs: ["visibleChange", "applyChanges"] }, { kind: "component", type: ExportExcel, selector: "ecs-export-excel", inputs: ["visible", "rowCheckboxSelectorActive", "excelReportTitle", "allowTitleUserEdit"], outputs: ["exportToExcel", "visibleChange"] }, { kind: "ngmodule", type: ButtonGroupModule }, { kind: "component", type: i14.ButtonGroup, selector: "p-buttonGroup, p-buttongroup, p-button-group" }, { kind: "component", type: ViewsManagement, selector: "ecs-views-management", inputs: ["visible", "tableViews_menuItems"], outputs: ["onViewSelect", "onViewDelete", "onViewUpdateData", "onViewUpdateActiveStartup", "onViewEditAlias", "onViewCreate", "visibleChange"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1859
|
+
updateIconBlobsForCollections() {
|
|
1860
|
+
Object.keys(this.tableOptions.predefinedFilters).forEach(key => {
|
|
1861
|
+
const filters = this.tableOptions.predefinedFilters[key];
|
|
1862
|
+
if (Array.isArray(filters) && filters.length > 0) {
|
|
1863
|
+
filters.forEach(filter => {
|
|
1864
|
+
if (filter.iconBlobSourceEndpoint && !filter.iconBlob) {
|
|
1865
|
+
filter.iconBlob = undefined;
|
|
1866
|
+
filter.iconBlobSourceEndpointResponseError = false;
|
|
1867
|
+
this.tableService.getIconBlob(filter.iconBlobSourceEndpoint).subscribe({
|
|
1868
|
+
next: (response) => {
|
|
1869
|
+
filter.iconBlob = response.body;
|
|
1870
|
+
this.showExportModal = false;
|
|
1871
|
+
},
|
|
1872
|
+
error: () => {
|
|
1873
|
+
filter.iconBlobSourceEndpointResponseError = true;
|
|
1874
|
+
}
|
|
1875
|
+
});
|
|
1876
|
+
}
|
|
1877
|
+
});
|
|
1878
|
+
}
|
|
1879
|
+
else {
|
|
1880
|
+
console.warn(`Filters for key ${key} is not an array:`, filters);
|
|
1881
|
+
}
|
|
1882
|
+
});
|
|
1883
|
+
}
|
|
1884
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ECSPrimengTable, deps: [{ token: ECSPrimengTableService }, { token: ECSPrimengTableNotificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1885
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: ECSPrimengTable, isStandalone: true, selector: "ecs-primeng-table", inputs: { tableOptions: "tableOptions" }, outputs: { onRowCheckboxChange: "onRowCheckboxChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onDataEndUpdate: "onDataEndUpdate" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "paginatorContainer", first: true, predicate: ["paginatorContainer"], descendants: true }], ngImport: i0, template: "<div #tableContainer>\r\n <p-table #dt\r\n size=\"small\" showGridlines stripedRows \r\n sortMode=\"multiple\"\r\n [resizableColumns]=\"true\" columnResizeMode=\"expand\"\r\n [reorderableColumns]=\"true\"\r\n [scrollable]=\"true\" [scrollHeight]=\"scrollHeightValue\"\r\n [columns]=\"tableOptions.columns.shown\" [value]=\"tableOptions.data\" dataKey=\"rowID\" \r\n [paginator]=\"true\" [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n [rowsPerPageOptions]=\"allowedRowsPerPage\" [showCurrentPageReport]=\"false\" (onPage)=\"pageChange($event)\"\r\n [metaKeySelection]=\"true\" [selectionMode]=\"tableOptions.rows.singleSelector.enabled ? 'single' : null\" [metaKeySelection]=\"tableOptions.rows.singleSelector.metakey\" [(selection)]=\"rowSelection\" (onRowSelect)=\"rowSelect($event)\" (onRowUnselect)=\"rowUnselect($event)\"\r\n [lazy]=\"true\" (onLazyLoad)=\"fetchTableData($event)\">\r\n\r\n <!--TEMPLATE FOR THE ACTIONS HEADER COLUMN-->\r\n <ng-template #actionColumnHeaderTemplate>\r\n @if (tableOptions.rows.action.buttons.length > 0) {\r\n <th [ngStyle]=\"{'max-width': tableOptions.rows.action.width + 'px','min-width': tableOptions.rows.action.width + 'px','width': tableOptions.rows.action.width + 'px'}\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows.action.resizable\" pFrozenColumn [frozen]=\"tableOptions.rows.action.frozen\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows.action.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n [attr.scope]=\"'col'\" style=\"text-align: center;\">\r\n {{ tableOptions.rows.action.header }}\r\n </th>\r\n }\r\n </ng-template>\r\n\r\n <!--TEMPLATE FOR THE ACTIONS ROW COLUMN-->\r\n <ng-template #actionColumnTemplate let-rowData=\"rowData\">\r\n @if (tableOptions.rows.action.buttons.length > 0) {\r\n <td \r\n [ngStyle]=\"{'max-width': tableOptions.rows.action.width + 'px','min-width': tableOptions.rows.action.width + 'px','width': tableOptions.rows.action.width + 'px'}\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"tableOptions.rows.action.frozen\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows.action.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n @for (button of tableOptions.rows.action.buttons; track button; let last = $last) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\" (clicked)=\"handleButtonsClick($event, rowData)\"/>\r\n }\r\n </td>\r\n }\r\n </ng-template>\r\n\r\n <!-- TEMPLATE FOR THE ROW CHECKBOX SELECTOR HEADER COLUMN -->\r\n <ng-template #rowSelectorColumnHeaderTemplate>\r\n <th \r\n [ngStyle]=\"{'max-width': tableOptions.rows.checkboxSelector.width + 'px','min-width': tableOptions.rows.checkboxSelector.width + 'px','width': tableOptions.rows.checkboxSelector.width + 'px'}\"\r\n id=\"rowSelector-header\" [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows.checkboxSelector.resizable\" pFrozenColumn \r\n [frozen]=\"tableOptions.rows.checkboxSelector.frozen\" [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows.checkboxSelector.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\"\r\n style=\"text-align: center; vertical-align: middle;\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n {{ tableOptions.rows.checkboxSelector.header }}\r\n <p-columnFilter type=\"boolean\" field=\"selector\" display=\"menu\" [showButtons]=\"false\"/>\r\n </div>\r\n </th>\r\n </ng-template>\r\n\r\n <!--TEMPLATE FOR THE ROW CHECKBOX SELECTOR COLUMN-->\r\n <ng-template #rowSelectorColumnTemplate let-rowData=\"rowData\">\r\n <td \r\n [ngStyle]=\"{'max-width': tableOptions.rows.checkboxSelector.width + 'px', 'min-width': tableOptions.rows.checkboxSelector.width + 'px', 'width': tableOptions.rows.checkboxSelector.width + 'px'}\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"tableOptions.rows.checkboxSelector.frozen\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows.checkboxSelector.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n <p-checkbox \r\n [binary]=\"true\"\r\n [ngModel]=\"isRowCheckboxSelected(rowData.rowID)\"\r\n (onChange)=\"onRowChekboxChange($event, rowData.rowID)\"/>\r\n </td>\r\n </ng-template>\r\n\r\n\r\n <!-- LOGIC FOR DRAWING TABLE ACTIONS ABOVE THE HEADER -->\r\n <ng-template #caption>\r\n <div #headerContainer style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <!--CHOOSE COLUMNS TO SHOW-->\r\n @if (tableOptions.columns.selectorEnabled) {\r\n <p-button icon=\"pi pi-pen-to-square\" (onClick)=\"columnSelectorShow()\" pTooltip=\"Modify columns\"\r\n [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n <!--CLEAR SORTS AND FILTERS-->\r\n @if (tableOptions.header.clearSortsEnabled) {\r\n <p-button [icon]=\"tableOptions.header.clearSortsIcon\" (onClick)=\"clearSorts(dt)\" [disabled]=\"!hasToClearSorts(dt)\"\r\n pTooltip=\"Clear sorts\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n @if (tableOptions.header.clearFiltersEnabled) {\r\n <p-button\r\n [icon]=\"tableOptions.header.clearFiltersIcon\" (onClick)=\"clearFilters(dt)\" [disabled]=\"!hasToClearFilters(dt, globalSearchText)\"\r\n pTooltip=\"Clear filters\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n </div>\r\n\r\n <!--TABLE VIEWS-->\r\n @if(tableViewsEnabled()){\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <p-buttongroup>\r\n <p-button (click)=\"viewsModalShow=true;\" [label]=\"tableViewCurrentSelectedAlias ? tableViewCurrentSelectedAlias : '--- Select a view ---'\" class=\"viewButton\"/>\r\n <p-button icon=\"pi pi-refresh\" (click)=\"viewLoad(tableViewCurrentSelectedAlias!)\" [disabled]=\"!tableViewCurrentSelectedAlias\" pTooltip=\"Apply view again\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n <p-button icon=\"pi pi-eraser\" (click)=\"resetTableView()\" pTooltip=\"Reset table view\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n </p-buttongroup>\r\n </div>\r\n }\r\n\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <!--GLOBAL FILTER-->\r\n @if (tableOptions.globalSearch.enabled) {\r\n <p-iconField iconPosition=\"left\" class=\"ml-auto\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n <p-inputIcon>\r\n <i class=\"pi pi-search\"></i>\r\n </p-inputIcon>\r\n <input pInputText type=\"text\" \r\n (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\" autocomplete=\"off\" \r\n [maxlength]=\"tableOptions.globalSearch.maxLength\" placeholder='Search keyword' [(ngModel)]=\"globalSearchText\"\r\n style=\"width: 220px;\"/>\r\n <!-- Right icon (only if there is text) -->\r\n @if (globalSearchText) {\r\n <p-inputIcon position=\"right\">\r\n <i class=\"pi pi-times\" style=\"cursor: pointer;\" (click)=\"clearFilters(dt, true, true); $event.stopPropagation()\"></i>\r\n </p-inputIcon>\r\n }\r\n </p-iconField>\r\n }\r\n\r\n <!--EXPORT DATA-->\r\n @if (tableOptions.excelReport.url?.trim()) {\r\n <p-button icon=\"pi pi-file-excel\" (onClick)=\"openExcelExport()\"\r\n pTooltip=\"Export to Excel\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n\r\n <!--REFRESH DATA-->\r\n @if (showRefreshData) {\r\n <p-button icon=\"pi pi-refresh\" (onClick)=\"refreshData($event)\" pTooltip=\"Refresh data\" [showDelay]=\"700\"\r\n tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n \r\n <!-- HEADER ACTION BUTTONS -->\r\n @if (tableOptions.header.buttons.length > 0) {\r\n <td style=\"display: flex; justify-content: center; align-items: center;\">\r\n @for (button of tableOptions.header.buttons; track $index) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"null\" (clicked)=\"handleButtonsClick($event, null)\"/>\r\n }\r\n </td>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE HEADERS -->\r\n <ng-template #header let-columns>\r\n <tr>\r\n @if (!tableOptions.rows.action.alignmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (tableOptions.rows.checkboxSelector.enabled && !tableOptions.rows.checkboxSelector.alignmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @for (col of columns; track col.header) {\r\n <th [ngStyle]=\"getColumnStyle(col, true)\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!col.canBeResized ? true : false\"\r\n pReorderableColumn [pReorderableColumnDisabled]=\"!col.canBeReordered ? true : false\"\r\n pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\"\r\n [pSortableColumn]=\"col.field\" [pSortableColumnDisabled]=\"!col.canBeSorted ? true : false\"\r\n style=\"text-align: center;\"\r\n [id]=\"col.field + '-header'\" [attr.scope]=\"'col'\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%;\">\r\n <div style=\"margin-right: 15px;\">\r\n <span>{{ col.header }}</span>\r\n </div>\r\n <div style=\"display: flex; align-items: center; gap: 5px;\">\r\n @if (col.canBeSorted) {\r\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n }\r\n @if(col.canBeFiltered){\r\n @if (!col.filterPredefinedValuesName || col.filterPredefinedValuesName.length === 0) {\r\n <p-columnFilter [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\" [showButtons]=\"false\"/>\r\n } @else {\r\n <p-columnFilter\r\n type=\"{{getDataTypeAsText(col.dataType)}}\" field=\"{{col.field}}\" display=\"menu\"\r\n [showButtons]=\"false\" matchMode=\"in\" operator=\"or\" [showMatchModes]=\"false\"\r\n [showOperator]=\"false\" [showAddButton]=\"false\" [showClearButton]=\"false\" [showApplyButton]=\"false\">\r\n <ng-template #filter>\r\n <p-multiSelect\r\n [style]=\"{ minWidth: '400px' }\" [(ngModel)]=\"predefinedFiltersSelectedValuesCollection[col.filterPredefinedValuesName]\"\r\n [options]=\"getPredefinedFilterValues(col.filterPredefinedValuesName)\" placeholder=\"Any value\"\r\n (onChange)=\"onPredefinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n <ng-template #selectedItems>\r\n @if (predefinedFiltersSelectedValuesCollection[col.filterPredefinedValuesName].length > 0) {\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\r\n <div>\r\n {{predefinedFiltersSelectedValuesText(col.filterPredefinedValuesName)}}\r\n </div>\r\n </div>\r\n } @else {\r\n <div>Any value</div>\r\n }\r\n </ng-template>\r\n <ng-template let-option pTemplate=\"item\">\r\n <div style=\"display: inline-block; vertical-align: middle;\">\r\n <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\"/>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n </ng-template>\r\n </p-columnFilter>\r\n }\r\n }\r\n @if (col.columnDescription && col.columnDescription.length > 0) {\r\n <i [pTooltip]=\"col.columnDescription\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n }\r\n </div>\r\n </div>\r\n </th>\r\n }\r\n @if (tableOptions.rows.checkboxSelector.enabled && tableOptions.rows.checkboxSelector.alignmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (tableOptions.rows.action.alignmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS CONTENTS -->\r\n <ng-template #body let-rowData let-columns=\"columns\"> \r\n <tr [pSelectableRow]=\"rowData\" [ngClass]=\"tableOptions.rows.class(rowData)\" [ngStyle]=\"tableOptions.rows.style(rowData)\">\r\n @if (!tableOptions.rows.action.alignmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n @if (tableOptions.rows.checkboxSelector.enabled && !tableOptions.rows.checkboxSelector.alignmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @for (col of columns; track col.field) {\r\n <td (mousedown)=\"col.dataType !== DataType.Boolean && copyToClipboardStart($event)\" (mouseup)=\"copyToClipboardCancel()\"\r\n [ngStyle]=\"getColumnStyle(col)\" pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\" [style.text-align]=\"getDataAlignHorizontalAsText(col.dataAlignHorizontal)\" [style.vertical-align]=\"getDataAlignVerticalAsText(col.dataAlignVertical)\">\r\n <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\" \r\n [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n [predefinedFiltersCollection]=\"tableOptions.predefinedFilters\"/>\r\n </td>\r\n }\r\n @if (tableOptions.rows.checkboxSelector.enabled && tableOptions.rows.checkboxSelector.alignmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @if (tableOptions.rows.action.alignmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS NO CONTENTS -->\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"999\">No data found for the current filter criteria.</td>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- SHOW CUSTOM RECORDS REPORT -->\r\n <ng-template #paginatorleft>\r\n <div #paginatorContainer>\r\n Showing {{totalRecords}} records of {{totalRecordsNotFiltered}} available records\r\n </div>\r\n </ng-template>\r\n </p-table>\r\n</div>\r\n<ecs-column-selector [visible]=\"showColumnSelector\" [columnModalData]=\"columnModalData\" [filteredColumnData]=\"filteredColumnData\" (visibleChange)=\"showColumnSelector=false\" (applyChanges)=\"applyColumnModalChanges($event)\"/>\r\n<ecs-export-excel [visible]=\"showExportModal\" [rowCheckboxSelectorActive]=\"tableOptions.rows.checkboxSelector.enabled\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"tableOptions.excelReport.titleAllowUserEdit\" (visibleChange)=\"showExportModal=false\" (exportToExcel)=\"generateExcelReport($event)\"/>\r\n<ecs-views-management [visible]=\"viewsModalShow\" [tableViews_menuItems]=\"tableViews_menuItems\" \r\n (onViewSelect)=\"viewLoad($event)\" (onViewCreate)=\"viewCreate($event)\" (onViewDelete)=\"viewDelete($event)\" (onViewEditAlias)=\"viewEditAlias($event)\" (onViewUpdateData)=\"viewUpdateData($event)\" (onViewUpdateActiveStartup)=\"viewUpdateActiveStartup($event)\"\r\n (visibleChange)=\"viewsModalShow=false\"/>", styles: [".highlighted-text{background-color:#ff0}.p-datatable-column-filter-button.p-button-icon-only.p-button-rounded,.p-datatable-column-filter-clear-button.p-button-icon-only.p-button-rounded{height:var(--p-icon-size)!important;width:var(--p-icon-size)!important}.viewButton{width:200px}.viewButton .p-button{width:100%;justify-content:center}.viewButton .p-button-label{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i5$1.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i5$1.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i5$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i5$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i5$1.ColumnFilter, selector: "p-columnFilter, p-column-filter, p-columnfilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "filterOn", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i9$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i12.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: TableCell, selector: "ecs-table-cell", inputs: ["col", "rowData", "globalSearchText", "predefinedFiltersCollection", "dateFormat", "dateTimezone", "dateCulture"] }, { kind: "component", type: TablePredefinedFilters, selector: "ecs-table-predefined-filters", inputs: ["option", "col"] }, { kind: "component", type: TableButton, selector: "ecs-table-button", inputs: ["button", "rowData", "isActionButton", "isLastActionButton"], outputs: ["clicked"] }, { kind: "component", type: ColumnSelector, selector: "ecs-column-selector", inputs: ["visible", "columnModalData", "filteredColumnData"], outputs: ["visibleChange", "applyChanges"] }, { kind: "component", type: ExportExcel, selector: "ecs-export-excel", inputs: ["visible", "rowCheckboxSelectorActive", "excelReportTitle", "allowTitleUserEdit"], outputs: ["exportToExcel", "visibleChange"] }, { kind: "ngmodule", type: ButtonGroupModule }, { kind: "component", type: i14.ButtonGroup, selector: "p-buttonGroup, p-buttongroup, p-button-group" }, { kind: "component", type: ViewsManagement, selector: "ecs-views-management", inputs: ["visible", "tableViews_menuItems"], outputs: ["onViewSelect", "onViewDelete", "onViewUpdateData", "onViewUpdateActiveStartup", "onViewEditAlias", "onViewCreate", "visibleChange"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1689
1886
|
}
|
|
1690
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.
|
|
1887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ECSPrimengTable, decorators: [{
|
|
1691
1888
|
type: Component,
|
|
1692
1889
|
args: [{ selector: 'ecs-primeng-table', imports: [
|
|
1693
1890
|
CommonModule,
|
|
@@ -1702,86 +1899,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
1702
1899
|
CheckboxModule,
|
|
1703
1900
|
PaginatorModule,
|
|
1704
1901
|
TableCell,
|
|
1705
|
-
|
|
1902
|
+
TablePredefinedFilters,
|
|
1706
1903
|
TableButton,
|
|
1707
1904
|
ColumnSelector,
|
|
1708
1905
|
ExportExcel,
|
|
1709
1906
|
ButtonGroupModule,
|
|
1710
1907
|
ViewsManagement
|
|
1711
|
-
], standalone: true, encapsulation: ViewEncapsulation.None, template: "<div #tableContainer>\r\n <p-table #dt\r\n size=\"small\" showGridlines stripedRows \r\n sortMode=\"multiple\"\r\n [resizableColumns]=\"true\" columnResizeMode=\"expand\"\r\n [reorderableColumns]=\"true\"\r\n [scrollable]=\"true\" [scrollHeight]=\"computeScrollHeight ? scrollHeight : ''\"\r\n [columns]=\"columnsToShow\" [value]=\"data\" dataKey=\"rowID\" \r\n [paginator]=\"true\" [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n [rowsPerPageOptions]=\"allowedRowsPerPage\" [showCurrentPageReport]=\"false\" (onPage)=\"pageChange($event)\"\r\n [metaKeySelection]=\"true\" selectionMode=\"single\" [(selection)]=\"rowSelection\" (onRowSelect)=\"rowSelect($event)\" (onRowUnselect)=\"rowUnselect($event)\"\r\n [lazy]=\"true\" (onLazyLoad)=\"fetchTableData($event)\">\r\n\r\n <!--TEMPLATE FOR THE ACTIONS HEADER COLUMN-->\r\n <ng-template #actionColumnHeaderTemplate>\r\n @if (rowActionButtons.length > 0) {\r\n <th [ngStyle]=\"{'max-width': actionsColumnWidth + 'px','min-width': actionsColumnWidth + 'px','width': actionsColumnWidth + 'px'}\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!actionsColumnResizable\" pFrozenColumn [frozen]=\"actionsColumnFrozen\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(actionsColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n [attr.scope]=\"'col'\" style=\"text-align: center;\">\r\n {{ actionColumnName }}\r\n </th>\r\n }\r\n </ng-template>\r\n\r\n <!--TEMPLATE FOR THE ACTIONS ROW COLUMN-->\r\n <ng-template #actionColumnTemplate let-rowData=\"rowData\">\r\n @if (rowActionButtons.length > 0) {\r\n <td \r\n [ngStyle]=\"{'max-width': actionsColumnWidth + 'px','min-width': actionsColumnWidth + 'px','width': actionsColumnWidth + 'px'}\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"actionsColumnFrozen\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(actionsColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n @for (button of rowActionButtons; track button; let last = $last) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\" (clicked)=\"handleButtonsClick($event, rowData)\"/>\r\n }\r\n </td>\r\n }\r\n </ng-template>\r\n\r\n <!-- TEMPLATE FOR THE ROW CHECKBOX SELECTOR HEADER COLUMN -->\r\n <ng-template #rowSelectorColumnHeaderTemplate>\r\n <th \r\n [ngStyle]=\"{'max-width': rowSelectorColumnWidth + 'px','min-width': rowSelectorColumnWidth + 'px','width': rowSelectorColumnWidth + 'px'}\"\r\n id=\"rowSelector-header\" [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!rowselectorColumnResizable\" pFrozenColumn \r\n [frozen]=\"rowSelectorColumnFrozen\" [alignFrozen]=\"getFrozenColumnAlignAsText(rowSelectorColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\"\r\n style=\"text-align: center; vertical-align: middle;\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n {{ rowSelectorColumName }}\r\n <p-columnFilter type=\"boolean\" field=\"selector\" display=\"menu\" [showButtons]=\"false\"/>\r\n </div>\r\n </th>\r\n </ng-template>\r\n\r\n <!--TEMPLATE FOR THE ROW CHECKBOX SELECTOR COLUMN-->\r\n <ng-template #rowSelectorColumnTemplate let-rowData=\"rowData\">\r\n <td \r\n [ngStyle]=\"{\r\n 'max-width': rowSelectorColumnWidth + 'px', \r\n 'min-width': rowSelectorColumnWidth + 'px', \r\n 'width': rowSelectorColumnWidth + 'px'\r\n }\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"rowSelectorColumnFrozen\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(rowSelectorColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n <p-checkbox \r\n [binary]=\"true\"\r\n [ngModel]=\"isRowCheckboxSelected(rowData.rowID)\"\r\n (onChange)=\"onRowChekboxChange($event, rowData.rowID)\"/>\r\n </td>\r\n </ng-template>\r\n\r\n\r\n <!-- LOGIC FOR DRAWING TABLE ACTIONS ABOVE THE HEADER -->\r\n <ng-template #caption>\r\n <div #headerContainer style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <!--CHOOSE COLUMNS TO SHOW-->\r\n @if (columnEditorEnabled) {\r\n <p-button icon=\"pi pi-pen-to-square\" (onClick)=\"columnSelectorShow()\" pTooltip=\"Modify columns\"\r\n [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n <!--CLEAR SORTS AND FILTERS-->\r\n @if (showClearSortAndFilters) {\r\n <p-button icon=\"pi pi-sort-alt-slash\" (onClick)=\"clearSorts(dt)\" [disabled]=\"!hasToClearSorts(dt)\"\r\n pTooltip=\"Clear sorts\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n <p-button\r\n icon=\"pi pi-filter-slash\" (onClick)=\"clearFilters(dt)\" [disabled]=\"!hasToClearFilters(dt, globalSearchText)\"\r\n pTooltip=\"Clear filters\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n </div>\r\n\r\n <!--TABLE VIEWS-->\r\n @if(tableViewsEnabled()){\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <p-buttongroup>\r\n <p-button (click)=\"viewsModalShow=true;\" [label]=\"tableViewCurrentSelectedAlias ? tableViewCurrentSelectedAlias : '--- Select a view ---'\" class=\"viewButton\"/>\r\n <p-button icon=\"pi pi-refresh\" (click)=\"viewLoad(tableViewCurrentSelectedAlias!)\" [disabled]=\"!tableViewCurrentSelectedAlias\" pTooltip=\"Apply view again\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n <p-button icon=\"pi pi-eraser\" (click)=\"resetTableView()\" pTooltip=\"Reset table view\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n </p-buttongroup>\r\n </div>\r\n }\r\n\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <!--GLOBAL FILTER-->\r\n @if (globalSearchEnabled) {\r\n <p-iconField iconPosition=\"left\" class=\"ml-auto\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n <p-inputIcon>\r\n <i class=\"pi pi-search\"></i>\r\n </p-inputIcon>\r\n <input pInputText type=\"text\" \r\n (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\" autocomplete=\"off\" \r\n [maxlength]=\"globalSearchMaxLength\" [placeholder]=\"globalSearchPlaceholder\" [(ngModel)]=\"globalSearchText\"\r\n style=\"width: 220px;\"/>\r\n <!-- Right icon (only if there is text) -->\r\n @if (globalSearchText) {\r\n <p-inputIcon position=\"right\">\r\n <i class=\"pi pi-times\" style=\"cursor: pointer;\" (click)=\"clearFilters(dt, true, true); $event.stopPropagation()\"></i>\r\n </p-inputIcon>\r\n }\r\n </p-iconField>\r\n }\r\n\r\n <!--EXPORT DATA-->\r\n @if (urlExcelReport && urlExcelReport.trim().length > 0) {\r\n <p-button icon=\"pi pi-file-excel\" (onClick)=\"openExcelExport()\"\r\n pTooltip=\"Export to Excel\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n\r\n <!--REFRESH DATA-->\r\n @if (showRefreshData) {\r\n <p-button icon=\"pi pi-refresh\" (onClick)=\"refreshData($event)\" pTooltip=\"Refresh data\" [showDelay]=\"700\"\r\n tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n \r\n <!-- HEADER ACTION BUTTONS -->\r\n @if (headerActionButtons.length > 0) {\r\n <td style=\"display: flex; justify-content: center; align-items: center;\">\r\n @for (button of headerActionButtons; track $index) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"null\" (clicked)=\"handleButtonsClick($event, null)\"/>\r\n }\r\n </td>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE HEADERS -->\r\n <ng-template #header let-columns>\r\n <tr>\r\n @if (!actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (rowSelectorColumnActive && !rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @for (col of columns; track col.header) {\r\n <th [ngStyle]=\"getColumnStyle(col, true)\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!col.canBeResized ? true : false\"\r\n pReorderableColumn [pReorderableColumnDisabled]=\"!col.canBeReordered ? true : false\"\r\n pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\"\r\n [pSortableColumn]=\"col.field\" [pSortableColumnDisabled]=\"!col.canBeSorted ? true : false\"\r\n style=\"text-align: center;\"\r\n [id]=\"col.field + '-header'\" [attr.scope]=\"'col'\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%;\">\r\n <div style=\"margin-right: 15px;\">\r\n <span>{{ col.header }}</span>\r\n </div>\r\n <div style=\"display: flex; align-items: center; gap: 5px;\">\r\n @if (col.canBeSorted) {\r\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n }\r\n @if(col.canBeFiltered){\r\n @if (!col.filterPredifinedValuesName || col.filterPredifinedValuesName.length === 0) {\r\n <p-columnFilter [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\" [showButtons]=\"false\"/>\r\n } @else {\r\n <p-columnFilter\r\n type=\"{{getDataTypeAsText(col.dataType)}}\" field=\"{{col.field}}\" display=\"menu\"\r\n [showButtons]=\"false\" matchMode=\"in\" operator=\"or\" [showMatchModes]=\"false\"\r\n [showOperator]=\"false\" [showAddButton]=\"false\" [showClearButton]=\"false\" [showApplyButton]=\"false\">\r\n <ng-template #filter>\r\n <p-multiSelect\r\n [style]=\"{ minWidth: '400px' }\" [(ngModel)]=\"predifinedFiltersSelectedValuesCollection[col.filterPredifinedValuesName]\"\r\n [options]=\"getPredifinedFilterValues(col.filterPredifinedValuesName)\" [placeholder]=\"predifinedFiltersNoSelectionPlaceholder\"\r\n (onChange)=\"onPredifinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n <ng-template #selectedItems>\r\n @if (predifinedFiltersSelectedValuesCollection[col.filterPredifinedValuesName].length > 0) {\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\r\n <div>\r\n {{predifinedFiltersSelectedValuesText(col.filterPredifinedValuesName)}}\r\n </div>\r\n </div>\r\n } @else {\r\n <div>{{ predifinedFiltersNoSelectionPlaceholder }}</div>\r\n }\r\n </ng-template>\r\n <ng-template let-option pTemplate=\"item\">\r\n <div style=\"display: inline-block; vertical-align: middle;\">\r\n <ecs-table-predifined-filters [option]=\"option\" [col]=\"col\"/>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n </ng-template>\r\n </p-columnFilter>\r\n }\r\n }\r\n @if (col.columnDescription && col.columnDescription.length > 0) {\r\n <i [pTooltip]=\"col.columnDescription\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n }\r\n </div>\r\n </div>\r\n </th>\r\n }\r\n @if (rowSelectorColumnActive && rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS CONTENTS -->\r\n <ng-template #body let-rowData let-columns=\"columns\"> \r\n <tr [pSelectableRow]=\"rowData\">\r\n @if (!actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n @if (rowSelectorColumnActive && !rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @for (col of columns; track col.field) {\r\n <td (mousedown)=\"col.dataType !== DataType.Boolean && copyToClipboardStart($event)\" (mouseup)=\"copyToClipboardCancel()\"\r\n [ngStyle]=\"getColumnStyle(col)\" pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\" [style.text-align]=\"getDataAlignHorizontalAsText(col.dataAlignHorizontal)\" [style.vertical-align]=\"getDataAlignVerticalAsText(col.dataAlignVertical)\">\r\n <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\" \r\n [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n [predifinedFiltersCollection]=\"predifinedFiltersCollection\"/>\r\n </td>\r\n }\r\n @if (rowSelectorColumnActive && rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @if (actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS NO CONTENTS -->\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"999\">{{noDataFoundText}}</td>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- SHOW CUSTOM RECORDS REPORT -->\r\n <ng-template #paginatorleft>\r\n <div #paginatorContainer>\r\n Showing {{totalRecords}} records of {{totalRecordsNotFiltered}} available records\r\n </div>\r\n </ng-template>\r\n </p-table>\r\n</div>\r\n<ecs-column-selector [visible]=\"showColumnSelector\" [columnModalData]=\"columnModalData\" [filteredColumnData]=\"filteredColumnData\" (visibleChange)=\"showColumnSelector=false\" (applyChanges)=\"applyColumnModalChanges($event)\"/>\r\n<ecs-export-excel [visible]=\"showExportModal\" [rowCheckboxSelectorActive]=\"rowSelectorColumnActive\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"excelReportTitleAllowUserEdit\" (visibleChange)=\"showExportModal=false\" (exportToExcel)=\"generateExcelReport($event)\"/>\r\n<ecs-views-management [visible]=\"viewsModalShow\" [tableViews_menuItems]=\"tableViews_menuItems\" \r\n (onViewSelect)=\"viewLoad($event)\" (onViewCreate)=\"viewCreate($event)\" (onViewDelete)=\"viewDelete($event)\" (onViewEditAlias)=\"viewEditAlias($event)\" (onViewUpdateData)=\"viewUpdateData($event)\" (onViewUpdateActiveStartup)=\"viewUpdateActiveStartup($event)\"\r\n (visibleChange)=\"viewsModalShow=false\"/>", styles: [".highlighted-text{background-color:#ff0}.p-datatable-column-filter-button.p-button-icon-only.p-button-rounded,.p-datatable-column-filter-clear-button.p-button-icon-only.p-button-rounded{height:var(--p-icon-size)!important;width:var(--p-icon-size)!important}.viewButton{width:200px}.viewButton .p-button{width:100%;justify-content:center}.viewButton .p-button-label{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}\n"] }]
|
|
1712
|
-
}], ctorParameters: () => [{ type: ECSPrimengTableService }, { type: ECSPrimengTableNotificationService }], propDecorators: {
|
|
1713
|
-
type: Input
|
|
1714
|
-
}], data: [{
|
|
1715
|
-
type: Input
|
|
1716
|
-
}], columnsToShow: [{
|
|
1717
|
-
type: Input
|
|
1718
|
-
}], computeScrollHeight: [{
|
|
1719
|
-
type: Input
|
|
1720
|
-
}], globalSearchEnabled: [{
|
|
1721
|
-
type: Input
|
|
1722
|
-
}], globalSearchMaxLength: [{
|
|
1723
|
-
type: Input
|
|
1724
|
-
}], globalSearchPlaceholder: [{
|
|
1725
|
-
type: Input
|
|
1726
|
-
}], columnEditorEnabled: [{
|
|
1727
|
-
type: Input
|
|
1728
|
-
}], urlColumnsSource: [{
|
|
1729
|
-
type: Input
|
|
1730
|
-
}], urlDataSource: [{
|
|
1731
|
-
type: Input
|
|
1732
|
-
}], urlExcelReport: [{
|
|
1733
|
-
type: Input
|
|
1734
|
-
}], predifinedFiltersCollection: [{
|
|
1735
|
-
type: Input
|
|
1736
|
-
}], predifinedFiltersNoSelectionPlaceholder: [{
|
|
1737
|
-
type: Input
|
|
1738
|
-
}], predifinedFiltersCollectionSelectedValuesText: [{
|
|
1739
|
-
type: Input
|
|
1740
|
-
}], rowActionButtons: [{
|
|
1741
|
-
type: Input
|
|
1742
|
-
}], headerActionButtons: [{
|
|
1743
|
-
type: Input
|
|
1744
|
-
}], copyCellDataToClipboardTimeSecs: [{
|
|
1745
|
-
type: Input
|
|
1746
|
-
}], actionsColumnAligmentRight: [{
|
|
1747
|
-
type: Input
|
|
1748
|
-
}], actionsColumnWidth: [{
|
|
1749
|
-
type: Input
|
|
1750
|
-
}], actionsColumnFrozen: [{
|
|
1751
|
-
type: Input
|
|
1752
|
-
}], rowSelectorColumnActive: [{
|
|
1753
|
-
type: Input
|
|
1754
|
-
}], rowSelectorColumName: [{
|
|
1755
|
-
type: Input
|
|
1756
|
-
}], rowSelectorColumnAligmentRight: [{
|
|
1757
|
-
type: Input
|
|
1758
|
-
}], rowSelectorColumnWidth: [{
|
|
1759
|
-
type: Input
|
|
1760
|
-
}], rowSelectorColumnFrozen: [{
|
|
1761
|
-
type: Input
|
|
1762
|
-
}], actionsColumnResizable: [{
|
|
1763
|
-
type: Input
|
|
1764
|
-
}], actionColumnName: [{
|
|
1765
|
-
type: Input
|
|
1766
|
-
}], rowselectorColumnResizable: [{
|
|
1767
|
-
type: Input
|
|
1768
|
-
}], noDataFoundText: [{
|
|
1769
|
-
type: Input
|
|
1770
|
-
}], showClearSortAndFilters: [{
|
|
1771
|
-
type: Input
|
|
1772
|
-
}], excelReportTitleDefault: [{
|
|
1773
|
-
type: Input
|
|
1774
|
-
}], excelReportTitleAllowUserEdit: [{
|
|
1775
|
-
type: Input
|
|
1776
|
-
}], tableViewSaveAs: [{
|
|
1777
|
-
type: Input
|
|
1778
|
-
}], tableViewSaveKey: [{
|
|
1779
|
-
type: Input
|
|
1780
|
-
}], viewsGetSourceURL: [{
|
|
1781
|
-
type: Input
|
|
1782
|
-
}], viewsSaveSourceURL: [{
|
|
1783
|
-
type: Input
|
|
1784
|
-
}], maxTableViews: [{
|
|
1908
|
+
], standalone: true, encapsulation: ViewEncapsulation.None, template: "<div #tableContainer>\r\n <p-table #dt\r\n size=\"small\" showGridlines stripedRows \r\n sortMode=\"multiple\"\r\n [resizableColumns]=\"true\" columnResizeMode=\"expand\"\r\n [reorderableColumns]=\"true\"\r\n [scrollable]=\"true\" [scrollHeight]=\"scrollHeightValue\"\r\n [columns]=\"tableOptions.columns.shown\" [value]=\"tableOptions.data\" dataKey=\"rowID\" \r\n [paginator]=\"true\" [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n [rowsPerPageOptions]=\"allowedRowsPerPage\" [showCurrentPageReport]=\"false\" (onPage)=\"pageChange($event)\"\r\n [metaKeySelection]=\"true\" [selectionMode]=\"tableOptions.rows.singleSelector.enabled ? 'single' : null\" [metaKeySelection]=\"tableOptions.rows.singleSelector.metakey\" [(selection)]=\"rowSelection\" (onRowSelect)=\"rowSelect($event)\" (onRowUnselect)=\"rowUnselect($event)\"\r\n [lazy]=\"true\" (onLazyLoad)=\"fetchTableData($event)\">\r\n\r\n <!--TEMPLATE FOR THE ACTIONS HEADER COLUMN-->\r\n <ng-template #actionColumnHeaderTemplate>\r\n @if (tableOptions.rows.action.buttons.length > 0) {\r\n <th [ngStyle]=\"{'max-width': tableOptions.rows.action.width + 'px','min-width': tableOptions.rows.action.width + 'px','width': tableOptions.rows.action.width + 'px'}\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows.action.resizable\" pFrozenColumn [frozen]=\"tableOptions.rows.action.frozen\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows.action.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n [attr.scope]=\"'col'\" style=\"text-align: center;\">\r\n {{ tableOptions.rows.action.header }}\r\n </th>\r\n }\r\n </ng-template>\r\n\r\n <!--TEMPLATE FOR THE ACTIONS ROW COLUMN-->\r\n <ng-template #actionColumnTemplate let-rowData=\"rowData\">\r\n @if (tableOptions.rows.action.buttons.length > 0) {\r\n <td \r\n [ngStyle]=\"{'max-width': tableOptions.rows.action.width + 'px','min-width': tableOptions.rows.action.width + 'px','width': tableOptions.rows.action.width + 'px'}\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"tableOptions.rows.action.frozen\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows.action.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n @for (button of tableOptions.rows.action.buttons; track button; let last = $last) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\" (clicked)=\"handleButtonsClick($event, rowData)\"/>\r\n }\r\n </td>\r\n }\r\n </ng-template>\r\n\r\n <!-- TEMPLATE FOR THE ROW CHECKBOX SELECTOR HEADER COLUMN -->\r\n <ng-template #rowSelectorColumnHeaderTemplate>\r\n <th \r\n [ngStyle]=\"{'max-width': tableOptions.rows.checkboxSelector.width + 'px','min-width': tableOptions.rows.checkboxSelector.width + 'px','width': tableOptions.rows.checkboxSelector.width + 'px'}\"\r\n id=\"rowSelector-header\" [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows.checkboxSelector.resizable\" pFrozenColumn \r\n [frozen]=\"tableOptions.rows.checkboxSelector.frozen\" [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows.checkboxSelector.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\"\r\n style=\"text-align: center; vertical-align: middle;\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n {{ tableOptions.rows.checkboxSelector.header }}\r\n <p-columnFilter type=\"boolean\" field=\"selector\" display=\"menu\" [showButtons]=\"false\"/>\r\n </div>\r\n </th>\r\n </ng-template>\r\n\r\n <!--TEMPLATE FOR THE ROW CHECKBOX SELECTOR COLUMN-->\r\n <ng-template #rowSelectorColumnTemplate let-rowData=\"rowData\">\r\n <td \r\n [ngStyle]=\"{'max-width': tableOptions.rows.checkboxSelector.width + 'px', 'min-width': tableOptions.rows.checkboxSelector.width + 'px', 'width': tableOptions.rows.checkboxSelector.width + 'px'}\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"tableOptions.rows.checkboxSelector.frozen\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows.checkboxSelector.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n <p-checkbox \r\n [binary]=\"true\"\r\n [ngModel]=\"isRowCheckboxSelected(rowData.rowID)\"\r\n (onChange)=\"onRowChekboxChange($event, rowData.rowID)\"/>\r\n </td>\r\n </ng-template>\r\n\r\n\r\n <!-- LOGIC FOR DRAWING TABLE ACTIONS ABOVE THE HEADER -->\r\n <ng-template #caption>\r\n <div #headerContainer style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <!--CHOOSE COLUMNS TO SHOW-->\r\n @if (tableOptions.columns.selectorEnabled) {\r\n <p-button icon=\"pi pi-pen-to-square\" (onClick)=\"columnSelectorShow()\" pTooltip=\"Modify columns\"\r\n [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n <!--CLEAR SORTS AND FILTERS-->\r\n @if (tableOptions.header.clearSortsEnabled) {\r\n <p-button [icon]=\"tableOptions.header.clearSortsIcon\" (onClick)=\"clearSorts(dt)\" [disabled]=\"!hasToClearSorts(dt)\"\r\n pTooltip=\"Clear sorts\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n @if (tableOptions.header.clearFiltersEnabled) {\r\n <p-button\r\n [icon]=\"tableOptions.header.clearFiltersIcon\" (onClick)=\"clearFilters(dt)\" [disabled]=\"!hasToClearFilters(dt, globalSearchText)\"\r\n pTooltip=\"Clear filters\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n </div>\r\n\r\n <!--TABLE VIEWS-->\r\n @if(tableViewsEnabled()){\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <p-buttongroup>\r\n <p-button (click)=\"viewsModalShow=true;\" [label]=\"tableViewCurrentSelectedAlias ? tableViewCurrentSelectedAlias : '--- Select a view ---'\" class=\"viewButton\"/>\r\n <p-button icon=\"pi pi-refresh\" (click)=\"viewLoad(tableViewCurrentSelectedAlias!)\" [disabled]=\"!tableViewCurrentSelectedAlias\" pTooltip=\"Apply view again\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n <p-button icon=\"pi pi-eraser\" (click)=\"resetTableView()\" pTooltip=\"Reset table view\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n </p-buttongroup>\r\n </div>\r\n }\r\n\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <!--GLOBAL FILTER-->\r\n @if (tableOptions.globalSearch.enabled) {\r\n <p-iconField iconPosition=\"left\" class=\"ml-auto\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n <p-inputIcon>\r\n <i class=\"pi pi-search\"></i>\r\n </p-inputIcon>\r\n <input pInputText type=\"text\" \r\n (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\" autocomplete=\"off\" \r\n [maxlength]=\"tableOptions.globalSearch.maxLength\" placeholder='Search keyword' [(ngModel)]=\"globalSearchText\"\r\n style=\"width: 220px;\"/>\r\n <!-- Right icon (only if there is text) -->\r\n @if (globalSearchText) {\r\n <p-inputIcon position=\"right\">\r\n <i class=\"pi pi-times\" style=\"cursor: pointer;\" (click)=\"clearFilters(dt, true, true); $event.stopPropagation()\"></i>\r\n </p-inputIcon>\r\n }\r\n </p-iconField>\r\n }\r\n\r\n <!--EXPORT DATA-->\r\n @if (tableOptions.excelReport.url?.trim()) {\r\n <p-button icon=\"pi pi-file-excel\" (onClick)=\"openExcelExport()\"\r\n pTooltip=\"Export to Excel\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n\r\n <!--REFRESH DATA-->\r\n @if (showRefreshData) {\r\n <p-button icon=\"pi pi-refresh\" (onClick)=\"refreshData($event)\" pTooltip=\"Refresh data\" [showDelay]=\"700\"\r\n tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n \r\n <!-- HEADER ACTION BUTTONS -->\r\n @if (tableOptions.header.buttons.length > 0) {\r\n <td style=\"display: flex; justify-content: center; align-items: center;\">\r\n @for (button of tableOptions.header.buttons; track $index) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"null\" (clicked)=\"handleButtonsClick($event, null)\"/>\r\n }\r\n </td>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE HEADERS -->\r\n <ng-template #header let-columns>\r\n <tr>\r\n @if (!tableOptions.rows.action.alignmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (tableOptions.rows.checkboxSelector.enabled && !tableOptions.rows.checkboxSelector.alignmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @for (col of columns; track col.header) {\r\n <th [ngStyle]=\"getColumnStyle(col, true)\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!col.canBeResized ? true : false\"\r\n pReorderableColumn [pReorderableColumnDisabled]=\"!col.canBeReordered ? true : false\"\r\n pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\"\r\n [pSortableColumn]=\"col.field\" [pSortableColumnDisabled]=\"!col.canBeSorted ? true : false\"\r\n style=\"text-align: center;\"\r\n [id]=\"col.field + '-header'\" [attr.scope]=\"'col'\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%;\">\r\n <div style=\"margin-right: 15px;\">\r\n <span>{{ col.header }}</span>\r\n </div>\r\n <div style=\"display: flex; align-items: center; gap: 5px;\">\r\n @if (col.canBeSorted) {\r\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n }\r\n @if(col.canBeFiltered){\r\n @if (!col.filterPredefinedValuesName || col.filterPredefinedValuesName.length === 0) {\r\n <p-columnFilter [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\" [showButtons]=\"false\"/>\r\n } @else {\r\n <p-columnFilter\r\n type=\"{{getDataTypeAsText(col.dataType)}}\" field=\"{{col.field}}\" display=\"menu\"\r\n [showButtons]=\"false\" matchMode=\"in\" operator=\"or\" [showMatchModes]=\"false\"\r\n [showOperator]=\"false\" [showAddButton]=\"false\" [showClearButton]=\"false\" [showApplyButton]=\"false\">\r\n <ng-template #filter>\r\n <p-multiSelect\r\n [style]=\"{ minWidth: '400px' }\" [(ngModel)]=\"predefinedFiltersSelectedValuesCollection[col.filterPredefinedValuesName]\"\r\n [options]=\"getPredefinedFilterValues(col.filterPredefinedValuesName)\" placeholder=\"Any value\"\r\n (onChange)=\"onPredefinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n <ng-template #selectedItems>\r\n @if (predefinedFiltersSelectedValuesCollection[col.filterPredefinedValuesName].length > 0) {\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\r\n <div>\r\n {{predefinedFiltersSelectedValuesText(col.filterPredefinedValuesName)}}\r\n </div>\r\n </div>\r\n } @else {\r\n <div>Any value</div>\r\n }\r\n </ng-template>\r\n <ng-template let-option pTemplate=\"item\">\r\n <div style=\"display: inline-block; vertical-align: middle;\">\r\n <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\"/>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n </ng-template>\r\n </p-columnFilter>\r\n }\r\n }\r\n @if (col.columnDescription && col.columnDescription.length > 0) {\r\n <i [pTooltip]=\"col.columnDescription\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n }\r\n </div>\r\n </div>\r\n </th>\r\n }\r\n @if (tableOptions.rows.checkboxSelector.enabled && tableOptions.rows.checkboxSelector.alignmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (tableOptions.rows.action.alignmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS CONTENTS -->\r\n <ng-template #body let-rowData let-columns=\"columns\"> \r\n <tr [pSelectableRow]=\"rowData\" [ngClass]=\"tableOptions.rows.class(rowData)\" [ngStyle]=\"tableOptions.rows.style(rowData)\">\r\n @if (!tableOptions.rows.action.alignmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n @if (tableOptions.rows.checkboxSelector.enabled && !tableOptions.rows.checkboxSelector.alignmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @for (col of columns; track col.field) {\r\n <td (mousedown)=\"col.dataType !== DataType.Boolean && copyToClipboardStart($event)\" (mouseup)=\"copyToClipboardCancel()\"\r\n [ngStyle]=\"getColumnStyle(col)\" pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\" [style.text-align]=\"getDataAlignHorizontalAsText(col.dataAlignHorizontal)\" [style.vertical-align]=\"getDataAlignVerticalAsText(col.dataAlignVertical)\">\r\n <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\" \r\n [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n [predefinedFiltersCollection]=\"tableOptions.predefinedFilters\"/>\r\n </td>\r\n }\r\n @if (tableOptions.rows.checkboxSelector.enabled && tableOptions.rows.checkboxSelector.alignmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @if (tableOptions.rows.action.alignmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS NO CONTENTS -->\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"999\">No data found for the current filter criteria.</td>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- SHOW CUSTOM RECORDS REPORT -->\r\n <ng-template #paginatorleft>\r\n <div #paginatorContainer>\r\n Showing {{totalRecords}} records of {{totalRecordsNotFiltered}} available records\r\n </div>\r\n </ng-template>\r\n </p-table>\r\n</div>\r\n<ecs-column-selector [visible]=\"showColumnSelector\" [columnModalData]=\"columnModalData\" [filteredColumnData]=\"filteredColumnData\" (visibleChange)=\"showColumnSelector=false\" (applyChanges)=\"applyColumnModalChanges($event)\"/>\r\n<ecs-export-excel [visible]=\"showExportModal\" [rowCheckboxSelectorActive]=\"tableOptions.rows.checkboxSelector.enabled\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"tableOptions.excelReport.titleAllowUserEdit\" (visibleChange)=\"showExportModal=false\" (exportToExcel)=\"generateExcelReport($event)\"/>\r\n<ecs-views-management [visible]=\"viewsModalShow\" [tableViews_menuItems]=\"tableViews_menuItems\" \r\n (onViewSelect)=\"viewLoad($event)\" (onViewCreate)=\"viewCreate($event)\" (onViewDelete)=\"viewDelete($event)\" (onViewEditAlias)=\"viewEditAlias($event)\" (onViewUpdateData)=\"viewUpdateData($event)\" (onViewUpdateActiveStartup)=\"viewUpdateActiveStartup($event)\"\r\n (visibleChange)=\"viewsModalShow=false\"/>", styles: [".highlighted-text{background-color:#ff0}.p-datatable-column-filter-button.p-button-icon-only.p-button-rounded,.p-datatable-column-filter-clear-button.p-button-icon-only.p-button-rounded{height:var(--p-icon-size)!important;width:var(--p-icon-size)!important}.viewButton{width:200px}.viewButton .p-button{width:100%;justify-content:center}.viewButton .p-button-label{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}\n"] }]
|
|
1909
|
+
}], ctorParameters: () => [{ type: ECSPrimengTableService }, { type: ECSPrimengTableNotificationService }], propDecorators: { tableOptions: [{
|
|
1785
1910
|
type: Input
|
|
1786
1911
|
}], onRowCheckboxChange: [{
|
|
1787
1912
|
type: Output
|
|
@@ -1789,6 +1914,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
1789
1914
|
type: Output
|
|
1790
1915
|
}], onRowUnselect: [{
|
|
1791
1916
|
type: Output
|
|
1917
|
+
}], onDataEndUpdate: [{
|
|
1918
|
+
type: Output
|
|
1792
1919
|
}], dt: [{
|
|
1793
1920
|
type: ViewChild,
|
|
1794
1921
|
args: ['dt']
|
|
@@ -1815,5 +1942,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
1815
1942
|
* Generated bundle index. Do not edit.
|
|
1816
1943
|
*/
|
|
1817
1944
|
|
|
1818
|
-
export { CellOverflowBehaviour, DataAlignHorizontal, DataAlignVertical, DataType, ECSPrimengTable, ECSPrimengTableHttpService, ECSPrimengTableNotificationService, ECSPrimengTableService, FrozenColumnAlign, TableViewSaveMode };
|
|
1945
|
+
export { CellOverflowBehaviour, DEFAULT_TABLE_OPTIONS, DataAlignHorizontal, DataAlignVertical, DataType, ECSPrimengTable, ECSPrimengTableHttpService, ECSPrimengTableNotificationService, ECSPrimengTableService, FrozenColumnAlign, TableViewSaveMode, createTableOptions };
|
|
1819
1946
|
//# sourceMappingURL=eternalcodestudio-primeng-table.mjs.map
|