@eternalcodestudio/primeng-table 20.0.2 → 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 +375 -247
- package/fesm2022/eternalcodestudio-primeng-table.mjs.map +1 -1
- package/index.d.ts +336 -62
- package/package.json +3 -4
|
@@ -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,
|
|
@@ -587,19 +764,19 @@ class ColumnSelector {
|
|
|
587
764
|
visibleChange = new EventEmitter();
|
|
588
765
|
applyChanges = new EventEmitter();
|
|
589
766
|
cellOverflowBehaviourOptions = [
|
|
590
|
-
{ icon: 'pi pi-minus', val: CellOverflowBehaviour.Hidden },
|
|
591
|
-
{ icon: 'pi pi-equals', val: CellOverflowBehaviour.Wrap } /*,
|
|
592
|
-
{icon: 'pi pi-ellipsis-h', val: CellOverflowBehaviour.Ellipsis}*/
|
|
767
|
+
{ icon: 'pi pi-minus', val: CellOverflowBehaviour.Hidden, name: "Hidden" },
|
|
768
|
+
{ icon: 'pi pi-equals', val: CellOverflowBehaviour.Wrap, name: "Wrap" } /*,
|
|
769
|
+
{icon: 'pi pi-ellipsis-h', val: CellOverflowBehaviour.Ellipsis, name: "Ellipsis"}*/
|
|
593
770
|
];
|
|
594
771
|
dataAlignHorizontalOptions = [
|
|
595
|
-
{ icon: 'pi pi-align-left', val: DataAlignHorizontal.Left },
|
|
596
|
-
{ icon: 'pi pi-align-center', val: DataAlignHorizontal.Center },
|
|
597
|
-
{ icon: 'pi pi-align-right', val: DataAlignHorizontal.Right }
|
|
772
|
+
{ icon: 'pi pi-align-left', val: DataAlignHorizontal.Left, name: "Left" },
|
|
773
|
+
{ icon: 'pi pi-align-center', val: DataAlignHorizontal.Center, name: "Center" },
|
|
774
|
+
{ icon: 'pi pi-align-right', val: DataAlignHorizontal.Right, name: "Right" }
|
|
598
775
|
];
|
|
599
776
|
dataAlignVerticalOptions = [
|
|
600
|
-
{ icon: 'pi pi-angle-up', val: DataAlignVertical.Top },
|
|
601
|
-
{ icon: 'pi pi-align-justify', val: DataAlignVertical.Middle },
|
|
602
|
-
{ icon: 'pi pi-angle-down', val: DataAlignVertical.Bottom }
|
|
777
|
+
{ icon: 'pi pi-angle-up', val: DataAlignVertical.Top, name: "Top" },
|
|
778
|
+
{ icon: 'pi pi-align-justify', val: DataAlignVertical.Middle, name: "Middle" },
|
|
779
|
+
{ icon: 'pi pi-angle-down', val: DataAlignVertical.Bottom, name: "Bottom" }
|
|
603
780
|
];
|
|
604
781
|
globalSearchText = null; // The text used by the global search
|
|
605
782
|
globalSearchMaxLength = 50;
|
|
@@ -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;\"></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;\"></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;\"></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"] }] });
|
|
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,
|
|
@@ -656,8 +833,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
656
833
|
FormsModule,
|
|
657
834
|
InputIconModule,
|
|
658
835
|
IconFieldModule,
|
|
659
|
-
InputTextModule
|
|
660
|
-
|
|
836
|
+
InputTextModule,
|
|
837
|
+
TooltipModule
|
|
838
|
+
], standalone: true, 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>" }]
|
|
661
839
|
}], propDecorators: { dt_columnDialog: [{
|
|
662
840
|
type: ViewChild,
|
|
663
841
|
args: ['dt_columnDialog']
|
|
@@ -684,10 +862,10 @@ class ExportExcelService {
|
|
|
684
862
|
const seconds = String(now.getUTCSeconds()).padStart(2, '0');
|
|
685
863
|
return `_${year}${month}${day}_${hours}${minutes}${seconds}_UTC`;
|
|
686
864
|
}
|
|
687
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.
|
|
688
|
-
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' });
|
|
689
867
|
}
|
|
690
|
-
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: [{
|
|
691
869
|
type: Injectable,
|
|
692
870
|
args: [{
|
|
693
871
|
providedIn: 'root'
|
|
@@ -781,10 +959,10 @@ class ExportExcel {
|
|
|
781
959
|
closeModal() {
|
|
782
960
|
this.visibleChange.emit(false);
|
|
783
961
|
}
|
|
784
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.
|
|
785
|
-
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"] }] });
|
|
786
964
|
}
|
|
787
|
-
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: [{
|
|
788
966
|
type: Component,
|
|
789
967
|
args: [{ selector: 'ecs-export-excel', imports: [
|
|
790
968
|
DialogModule,
|
|
@@ -869,10 +1047,10 @@ class ViewsManagement {
|
|
|
869
1047
|
this.createView(this.newViewAlias);
|
|
870
1048
|
}
|
|
871
1049
|
}
|
|
872
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.
|
|
873
|
-
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"] }] });
|
|
874
1052
|
}
|
|
875
|
-
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: [{
|
|
876
1054
|
type: Component,
|
|
877
1055
|
args: [{ selector: 'ecs-views-management', imports: [
|
|
878
1056
|
DialogModule,
|
|
@@ -883,7 +1061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
883
1061
|
TooltipModule,
|
|
884
1062
|
InputTextModule,
|
|
885
1063
|
CheckboxModule
|
|
886
|
-
], standalone: true, 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>" }]
|
|
1064
|
+
], standalone: true, 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>" }]
|
|
887
1065
|
}], ctorParameters: () => [{ type: ECSPrimengTableNotificationService }], propDecorators: { visible: [{
|
|
888
1066
|
type: Input
|
|
889
1067
|
}], tableViews_menuItems: [{
|
|
@@ -911,46 +1089,11 @@ class ECSPrimengTable {
|
|
|
911
1089
|
this.tableService = tableService;
|
|
912
1090
|
this.notification = notification;
|
|
913
1091
|
}
|
|
914
|
-
|
|
915
|
-
data = []; // The array of data to be displayed
|
|
916
|
-
columnsToShow = []; // The combination of the non-selectable columns + selected columns that must be shown
|
|
917
|
-
computeScrollHeight = true; // If true, the table will try not to grow more than the total height of the window vertically
|
|
918
|
-
globalSearchEnabled = true; // Used to enable or disable the global search (by default enabled)
|
|
919
|
-
globalSearchMaxLength = 50; // The maximun number of characters that can be input in the global filter
|
|
920
|
-
globalSearchPlaceholder = "Search keyword"; // The placeholder text to show if global search is enabled
|
|
921
|
-
columnEditorEnabled = true; // If the user can modify the columns thorugh the column editor
|
|
922
|
-
urlColumnsSource; // The source URL to get data from columns
|
|
923
|
-
urlDataSource; // The URL to fetch data from
|
|
924
|
-
urlExcelReport = null;
|
|
925
|
-
predifinedFiltersCollection = {}; // Contains a collection of the values that need to be shown for predifined column filters
|
|
926
|
-
predifinedFiltersNoSelectionPlaceholder = "Any value"; // A text to be displayed in the dropdown if no value has been selected in a column that uses predifined filters
|
|
927
|
-
predifinedFiltersCollectionSelectedValuesText = "items selected"; // A text to display in the predifined filters dropdown footer indicating the number of items that have been selected
|
|
928
|
-
rowActionButtons = []; // A list that contains all buttons that will appear in the actions column
|
|
929
|
-
headerActionButtons = []; // A list that contains all buttons that will appear in the right side of the header of the table
|
|
930
|
-
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.
|
|
931
|
-
actionsColumnAligmentRight = true; // If actions column is put at the right end of the table (or false if its at the left)
|
|
932
|
-
actionsColumnWidth = 150; // The amount in pixels for the size of the actions column
|
|
933
|
-
actionsColumnFrozen = true; // If the actions column should be frozen
|
|
934
|
-
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.
|
|
935
|
-
rowSelectorColumName = "Selected"; // The title of the row selection column. By default is "Selected"
|
|
936
|
-
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).
|
|
937
|
-
rowSelectorColumnWidth = 150; // The amount in pixels for the size of the selector column
|
|
938
|
-
rowSelectorColumnFrozen = true; // By default true. If true, the row selector column will be frozen.
|
|
939
|
-
actionsColumnResizable = false; // If the action column can be resized by the user
|
|
940
|
-
actionColumnName = "Actions"; // The column name were the action buttons will appear
|
|
941
|
-
rowselectorColumnResizable = false;
|
|
942
|
-
noDataFoundText = "No data found for the current filter criteria."; // The text to be shown when no data has been returned
|
|
943
|
-
showClearSortAndFilters = true;
|
|
944
|
-
excelReportTitleDefault = "Report";
|
|
945
|
-
excelReportTitleAllowUserEdit = false;
|
|
946
|
-
tableViewSaveAs = TableViewSaveMode.noone; // How the table view will be saved
|
|
947
|
-
tableViewSaveKey = ""; // The key used to save the table views
|
|
948
|
-
viewsGetSourceURL = "";
|
|
949
|
-
viewsSaveSourceURL = "";
|
|
950
|
-
maxTableViews = 10; // The maximun number of views that can be saved
|
|
1092
|
+
tableOptions = DEFAULT_TABLE_OPTIONS;
|
|
951
1093
|
onRowCheckboxChange = new EventEmitter(); // Emitter that returns the column selected and if it was selected or unselected
|
|
952
1094
|
onRowSelect = new EventEmitter;
|
|
953
1095
|
onRowUnselect = new EventEmitter;
|
|
1096
|
+
onDataEndUpdate = new EventEmitter();
|
|
954
1097
|
viewsModalShow = false;
|
|
955
1098
|
tableViewCurrentSelectedAlias = null;
|
|
956
1099
|
tableViewsFirstFetchDone = false;
|
|
@@ -960,7 +1103,6 @@ class ECSPrimengTable {
|
|
|
960
1103
|
selectedRowsCheckbox = []; // An array to keep all the selected rows
|
|
961
1104
|
dt; // Get the reference to the object table
|
|
962
1105
|
showRefreshData = true;
|
|
963
|
-
scrollHeight = "0px"; // Used to get the table height
|
|
964
1106
|
globalSearchText = null; // The text used by the global search
|
|
965
1107
|
tableViewsList = [];
|
|
966
1108
|
tableViews_menuItems = [];
|
|
@@ -986,10 +1128,11 @@ class ECSPrimengTable {
|
|
|
986
1128
|
filteredColumnData = [];
|
|
987
1129
|
initialColumnWidths;
|
|
988
1130
|
initialTableWidth;
|
|
989
|
-
|
|
1131
|
+
predefinedFiltersSelectedValuesCollection = {}; // Contains a collection of the predefined column filters selection (possible values come from 'predefinedFiltersCollection')
|
|
990
1132
|
copyCellDataTimer; // A timer that handles the amount of time left to copy the cell data to the clipboard
|
|
991
1133
|
tableLazyLoadEventInformation = {}; // Data of the last lazy load event of the table
|
|
992
1134
|
initialConfigurationFetched = false;
|
|
1135
|
+
maxViews = 0;
|
|
993
1136
|
ngOnInit() {
|
|
994
1137
|
this.fetchTableConfiguration();
|
|
995
1138
|
}
|
|
@@ -1003,33 +1146,32 @@ class ECSPrimengTable {
|
|
|
1003
1146
|
this.calculateScrollHeight();
|
|
1004
1147
|
}
|
|
1005
1148
|
calculateScrollHeight() {
|
|
1006
|
-
if (this.
|
|
1007
|
-
/*const containerRect = this.tableContainer.nativeElement.getBoundingClientRect();
|
|
1008
|
-
const paginatorHeight = this.paginatorContainer.nativeElement.offsetHeight;
|
|
1009
|
-
const headerHeight = this.headerContainer.nativeElement.offsetHeight;
|
|
1010
|
-
|
|
1011
|
-
this.scrollHeight = `${containerRect.height - paginatorHeight - headerHeight}px`;*/
|
|
1149
|
+
if (this.tableOptions.verticalScroll.fitToContainer && this.tableContainer && this.paginatorContainer && this.headerContainer) {
|
|
1012
1150
|
const containerRect = this.tableContainer.nativeElement.getBoundingClientRect();
|
|
1013
1151
|
const paginatorHeight = this.paginatorContainer.nativeElement.offsetHeight;
|
|
1014
1152
|
const headerHeight = this.headerContainer.nativeElement.offsetHeight;
|
|
1015
1153
|
const viewportHeight = window.innerHeight;
|
|
1016
1154
|
const topOffset = containerRect.top + window.scrollY;
|
|
1017
|
-
this.
|
|
1018
|
-
/*const
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
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
|
+
}*/
|
|
1023
1163
|
}
|
|
1024
1164
|
}
|
|
1165
|
+
get scrollHeightValue() {
|
|
1166
|
+
const height = this.tableOptions.verticalScroll.height;
|
|
1167
|
+
return height && height > 0 ? `${height}px` : '';
|
|
1168
|
+
}
|
|
1025
1169
|
/**
|
|
1026
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
|
|
1027
1171
|
*
|
|
1028
|
-
* @param {(optionalData?: any) => void} [continueAction] - Optional action to execute after data retrieval if it succeeded.
|
|
1029
|
-
* @param {boolean} [uponContinueActionEndModalHttp=false] - Optional flag to set the loading indicator to inactive after data retrieval.
|
|
1030
1172
|
*/
|
|
1031
|
-
updateData(
|
|
1032
|
-
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
|
|
1033
1175
|
if (!this.initialConfigurationFetched) {
|
|
1034
1176
|
this.fetchTableConfiguration();
|
|
1035
1177
|
}
|
|
@@ -1037,11 +1179,14 @@ class ECSPrimengTable {
|
|
|
1037
1179
|
this.fetchTableData(this.tableLazyLoadEventInformation);
|
|
1038
1180
|
}
|
|
1039
1181
|
}
|
|
1182
|
+
canFetchData() {
|
|
1183
|
+
return this.tableOptions.isActive && this.tableOptions.urlTableConfiguration != null && this.tableOptions.urlTableData != null;
|
|
1184
|
+
}
|
|
1040
1185
|
fetchTableConfiguration(resetTableView = false) {
|
|
1041
|
-
if (!this.
|
|
1186
|
+
if (!this.canFetchData()) {
|
|
1042
1187
|
return;
|
|
1043
1188
|
}
|
|
1044
|
-
this.tableService.fetchTableConfiguration(this.
|
|
1189
|
+
this.tableService.fetchTableConfiguration(this.tableOptions.urlTableConfiguration).subscribe({
|
|
1045
1190
|
next: (response) => {
|
|
1046
1191
|
this.handleTableConfigurationResponse(response.body, resetTableView);
|
|
1047
1192
|
},
|
|
@@ -1054,21 +1199,22 @@ class ECSPrimengTable {
|
|
|
1054
1199
|
this.columns = body.columnsInfo; // Update columns with fetched data
|
|
1055
1200
|
this.columnsCantBeHidden = this.columns.filter((col) => !col.canBeHidden); // Filter columns that cannot be hidden
|
|
1056
1201
|
this.columnsSelected = this.columns.filter((col) => !col.startHidden && col.canBeHidden); // Selected columns that are not hidden by default
|
|
1057
|
-
this.
|
|
1202
|
+
this.tableOptions.columns.shown = this.tableService.orderColumnsWithFrozens(this.columnsCantBeHidden.concat(this.columnsSelected));
|
|
1058
1203
|
this.dateFormat = body.dateFormat;
|
|
1059
1204
|
this.dateTimezone = body.dateTimezone;
|
|
1060
1205
|
this.dateCulture = body.dateCulture;
|
|
1061
1206
|
this.currentPage = 0;
|
|
1062
1207
|
this.initialConfigurationFetched = true;
|
|
1208
|
+
this.maxViews = body.maxViews;
|
|
1063
1209
|
if (resetTableView) {
|
|
1064
|
-
this.isActive = false;
|
|
1210
|
+
this.tableOptions.isActive = false;
|
|
1065
1211
|
this.clearFilters(this.dt, true);
|
|
1066
1212
|
this.clearSorts(this.dt, true);
|
|
1067
1213
|
this.dt.tableWidthState = this.initialTableWidth;
|
|
1068
1214
|
this.dt.columnWidthsState = this.initialColumnWidths;
|
|
1069
1215
|
this.dt.restoreColumnWidths();
|
|
1070
1216
|
this.tableLazyLoadEventInformation.multiSortMeta = [];
|
|
1071
|
-
this.isActive = true;
|
|
1217
|
+
this.tableOptions.isActive = true;
|
|
1072
1218
|
}
|
|
1073
1219
|
else {
|
|
1074
1220
|
setTimeout(() => {
|
|
@@ -1082,15 +1228,29 @@ class ECSPrimengTable {
|
|
|
1082
1228
|
this.fetchTableData(this.tableLazyLoadEventInformation);
|
|
1083
1229
|
}
|
|
1084
1230
|
tableViewsEnabled() {
|
|
1085
|
-
|
|
1086
|
-
|
|
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
|
|
1087
1247
|
}
|
|
1088
1248
|
fetchTableViews() {
|
|
1089
1249
|
if (!this.tableViewsEnabled()) {
|
|
1090
1250
|
this.fetchTableData(this.tableLazyLoadEventInformation);
|
|
1091
1251
|
return;
|
|
1092
1252
|
}
|
|
1093
|
-
const tableViews = this.tableService.fetchTableViews(this.
|
|
1253
|
+
const tableViews = this.tableService.fetchTableViews(this.tableOptions.views.saveMode, this.tableOptions.views.urlGet, this.tableOptions.views.saveKey);
|
|
1094
1254
|
if (tableViews instanceof Observable) {
|
|
1095
1255
|
tableViews.subscribe({
|
|
1096
1256
|
next: (response) => {
|
|
@@ -1133,15 +1293,15 @@ class ECSPrimengTable {
|
|
|
1133
1293
|
.map(data => this.columns.find((col) => col.field === data.field))
|
|
1134
1294
|
.filter((col) => col !== undefined)
|
|
1135
1295
|
.filter(col => !this.columnsCantBeHidden.includes(col));
|
|
1136
|
-
this.
|
|
1296
|
+
this.tableOptions.columns.shown = this.tableService.orderColumnsWithFrozens(this.columnsCantBeHidden.concat(this.columnsSelected));
|
|
1137
1297
|
this.currentPage = viewData.currentPage;
|
|
1138
1298
|
this.currentRowsPerPage = viewData.currentRowsPerPage;
|
|
1139
1299
|
this.globalSearchText = viewData.globalSearchText;
|
|
1140
1300
|
this.tableLazyLoadEventInformation.multiSortMeta = [...(viewData.multiSortMeta ?? [])];
|
|
1141
1301
|
this.dt.multiSortMeta = [...(viewData.multiSortMeta ?? [])];
|
|
1142
|
-
this.isActive = false;
|
|
1302
|
+
this.tableOptions.isActive = false;
|
|
1143
1303
|
this.dt.sortMultiple();
|
|
1144
|
-
this.isActive = true;
|
|
1304
|
+
this.tableOptions.isActive = true;
|
|
1145
1305
|
this.tableLazyLoadEventInformation.filters = { ...viewData.filters };
|
|
1146
1306
|
this.dt.filters = { ...viewData.filters };
|
|
1147
1307
|
this.dt.tableWidthState = viewData.tableWidth;
|
|
@@ -1152,6 +1312,11 @@ class ECSPrimengTable {
|
|
|
1152
1312
|
this.fetchTableData(this.tableLazyLoadEventInformation);
|
|
1153
1313
|
}
|
|
1154
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
|
+
}
|
|
1155
1320
|
let viewData = this.tableService.viewGenerateData(this.dt, this.globalSearchText, this.currentPage, this.currentRowsPerPage, this.modifyFiltersWithoutGlobalAndSelectedRows.bind(this));
|
|
1156
1321
|
let newView = {
|
|
1157
1322
|
lastActive: false,
|
|
@@ -1210,19 +1375,20 @@ class ECSPrimengTable {
|
|
|
1210
1375
|
let newStatus = !this.tableViewsList[index].lastActive;
|
|
1211
1376
|
this.tableViewsList.forEach(v => v.lastActive = false);
|
|
1212
1377
|
this.tableViewsList[index].lastActive = newStatus;
|
|
1378
|
+
this.tableViews_menuItems = [...this.tableService.updateViewsMenuItems(this.tableViewsList)];
|
|
1213
1379
|
this.viewsSave(4);
|
|
1214
1380
|
}
|
|
1215
1381
|
viewsSave(endMessage) {
|
|
1216
1382
|
let tableView = JSON.stringify(this.tableViewsList);
|
|
1217
|
-
switch (this.
|
|
1218
|
-
case TableViewSaveMode.
|
|
1219
|
-
sessionStorage.setItem(this.
|
|
1383
|
+
switch (this.tableOptions.views.saveMode) {
|
|
1384
|
+
case TableViewSaveMode.SessionStorage:
|
|
1385
|
+
sessionStorage.setItem(this.tableOptions.views.saveKey, tableView);
|
|
1220
1386
|
break;
|
|
1221
|
-
case TableViewSaveMode.
|
|
1222
|
-
localStorage.setItem(this.
|
|
1387
|
+
case TableViewSaveMode.LocalStorage:
|
|
1388
|
+
localStorage.setItem(this.tableOptions.views.saveKey, tableView);
|
|
1223
1389
|
break;
|
|
1224
|
-
case TableViewSaveMode.
|
|
1225
|
-
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);
|
|
1226
1392
|
saveObsv.subscribe({
|
|
1227
1393
|
next: (response) => {
|
|
1228
1394
|
this.viewsSaveEnd(endMessage);
|
|
@@ -1257,7 +1423,7 @@ class ECSPrimengTable {
|
|
|
1257
1423
|
}
|
|
1258
1424
|
}
|
|
1259
1425
|
fetchTableData(event) {
|
|
1260
|
-
if (!this.
|
|
1426
|
+
if (!this.canFetchData()) {
|
|
1261
1427
|
return;
|
|
1262
1428
|
}
|
|
1263
1429
|
if (!this.initialConfigurationFetched) {
|
|
@@ -1278,12 +1444,16 @@ class ECSPrimengTable {
|
|
|
1278
1444
|
sort: this.tableLazyLoadEventInformation.multiSortMeta, // Set the sorting information
|
|
1279
1445
|
filter: filtersWithoutGlobalAndSelectedRows, // Set the filters excluding the global filter
|
|
1280
1446
|
globalFilter: this.globalSearchText, // Set the global filter text
|
|
1281
|
-
columns: this.
|
|
1447
|
+
columns: this.tableOptions.columns.shown.map(col => col.field), // Set the columns to show
|
|
1282
1448
|
dateFormat: this.dateFormat,
|
|
1283
1449
|
dateTimezone: this.dateTimezone,
|
|
1284
1450
|
dateCulture: this.dateCulture
|
|
1285
1451
|
};
|
|
1286
|
-
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({
|
|
1287
1457
|
next: (response) => this.handleTableDataResponse(response.body),
|
|
1288
1458
|
error: (err) => this.tableService.handleTableError(err, 'Columns Error')
|
|
1289
1459
|
});
|
|
@@ -1300,7 +1470,7 @@ class ECSPrimengTable {
|
|
|
1300
1470
|
return filtersWithoutGlobalAndSelectedRows; // Return the filters without global array
|
|
1301
1471
|
}
|
|
1302
1472
|
resetTableView() {
|
|
1303
|
-
this.tableViewCurrentSelectedAlias =
|
|
1473
|
+
this.tableViewCurrentSelectedAlias = '';
|
|
1304
1474
|
this.fetchTableConfiguration(true);
|
|
1305
1475
|
}
|
|
1306
1476
|
selectorRowFilterBuilder(filtersWithoutGlobalAndSelectedRows, overrideOption = -1) {
|
|
@@ -1349,7 +1519,7 @@ class ECSPrimengTable {
|
|
|
1349
1519
|
}
|
|
1350
1520
|
}
|
|
1351
1521
|
revertDateTimeZoneFilters(inputFilter) {
|
|
1352
|
-
this.
|
|
1522
|
+
this.tableOptions.columns.shown.forEach((column) => {
|
|
1353
1523
|
if (column.dataType === DataType.Date) { // If its date type
|
|
1354
1524
|
if (inputFilter.hasOwnProperty(column.field)) {
|
|
1355
1525
|
const originalDate = inputFilter[column.field][0].value;
|
|
@@ -1363,7 +1533,7 @@ class ECSPrimengTable {
|
|
|
1363
1533
|
return inputFilter;
|
|
1364
1534
|
}
|
|
1365
1535
|
handleTableDataResponse(body) {
|
|
1366
|
-
this.data = body.data; // Update the table data
|
|
1536
|
+
this.tableOptions.data = body.data; // Update the table data
|
|
1367
1537
|
this.totalRecords = body.totalRecords; // Update the total number of records
|
|
1368
1538
|
this.totalRecordsNotFiltered = body.totalRecordsNotFiltered; // Update the total records not filtered
|
|
1369
1539
|
this.currentPage = body.page; // Update the current page
|
|
@@ -1372,7 +1542,7 @@ class ECSPrimengTable {
|
|
|
1372
1542
|
let hasToClear = this.hasToClearFilters(dt, this.globalSearchText, force);
|
|
1373
1543
|
if (hasToClear) {
|
|
1374
1544
|
if (!onlyGlobalFilter) {
|
|
1375
|
-
this.
|
|
1545
|
+
this.predefinedFiltersSelectedValuesCollection = {};
|
|
1376
1546
|
for (const key in dt.filters) {
|
|
1377
1547
|
if (dt.filters.hasOwnProperty(key)) {
|
|
1378
1548
|
const filters = dt.filters[key];
|
|
@@ -1446,8 +1616,8 @@ class ECSPrimengTable {
|
|
|
1446
1616
|
getColumnStyle(col, headerCols = false) {
|
|
1447
1617
|
return this.tableService.getColumnStyle(col, headerCols);
|
|
1448
1618
|
}
|
|
1449
|
-
|
|
1450
|
-
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
|
|
1451
1621
|
}
|
|
1452
1622
|
getFrozenColumnAlignAsText(frozenColumnAlign) {
|
|
1453
1623
|
return frozenColumnAlignAsText(frozenColumnAlign);
|
|
@@ -1459,9 +1629,9 @@ class ECSPrimengTable {
|
|
|
1459
1629
|
* Updates the filters of a PrimeNG data table based on predefined filter changes.
|
|
1460
1630
|
*
|
|
1461
1631
|
* @param {string} filterName - The name of the filter to be updated.
|
|
1462
|
-
* @param {
|
|
1632
|
+
* @param {IPrimengPredefinedFilter[]} selectedValues - An array of selected predefined filter values.
|
|
1463
1633
|
*/
|
|
1464
|
-
|
|
1634
|
+
onPredefinedFilterChange(filterName, selectedValues) {
|
|
1465
1635
|
const filters = { ...this.dt.filters }; // Create a shallow copy of the current filters to avoid mutating the original filters directly
|
|
1466
1636
|
if (Array.isArray(filters[filterName])) { // Check if the filter for the given filterName is an array
|
|
1467
1637
|
filters[filterName].forEach(criteria => {
|
|
@@ -1484,12 +1654,12 @@ class ECSPrimengTable {
|
|
|
1484
1654
|
* @param {string} columnKeyName - The key name of the column for which to retrieve the number of selected values.
|
|
1485
1655
|
* @returns {string} A string indicating the number of selected values for the specified column.
|
|
1486
1656
|
*/
|
|
1487
|
-
|
|
1657
|
+
predefinedFiltersSelectedValuesText(columnKeyName) {
|
|
1488
1658
|
let numbItemsSelected = 0; // Initialize the count of selected items to zero
|
|
1489
|
-
if (this.
|
|
1490
|
-
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
|
|
1491
1661
|
}
|
|
1492
|
-
return `${numbItemsSelected}
|
|
1662
|
+
return `${numbItemsSelected} items selected`; // Return the number of selected items concatenated with the predefined text
|
|
1493
1663
|
}
|
|
1494
1664
|
handleButtonsClick(action, rowData = null) {
|
|
1495
1665
|
this.tableService.handleButtonsClick(action, rowData);
|
|
@@ -1503,14 +1673,14 @@ class ECSPrimengTable {
|
|
|
1503
1673
|
* @returns {any} The matching predefined filter value if found, otherwise null.
|
|
1504
1674
|
*/
|
|
1505
1675
|
getPredfinedFilterMatch(colMetadata, value) {
|
|
1506
|
-
if (colMetadata.
|
|
1507
|
-
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
|
|
1508
1678
|
return options.find(option => option.value === value); // Return the matching option if found
|
|
1509
1679
|
}
|
|
1510
1680
|
return null; // Return null if the column does not use predefined filter values
|
|
1511
1681
|
}
|
|
1512
1682
|
copyToClipboardStart(event) {
|
|
1513
|
-
if (this.
|
|
1683
|
+
if (this.tableOptions.copyToClipboardTime > 0) {
|
|
1514
1684
|
const cellContent = event.target.innerText;
|
|
1515
1685
|
this.copyCellDataTimer = setTimeout(() => {
|
|
1516
1686
|
navigator.clipboard.writeText(cellContent).then(() => {
|
|
@@ -1520,11 +1690,11 @@ class ECSPrimengTable {
|
|
|
1520
1690
|
this.notification.clearToasts();
|
|
1521
1691
|
this.notification.showToast("error", "CELL CONTENT COPIED", `The cell content failed to copy to your clipboard with error: ${err}`);
|
|
1522
1692
|
});
|
|
1523
|
-
}, this.
|
|
1693
|
+
}, this.tableOptions.copyToClipboardTime * 1000);
|
|
1524
1694
|
}
|
|
1525
1695
|
}
|
|
1526
1696
|
copyToClipboardCancel() {
|
|
1527
|
-
if (this.
|
|
1697
|
+
if (this.tableOptions.copyToClipboardTime > 0) {
|
|
1528
1698
|
clearTimeout(this.copyCellDataTimer);
|
|
1529
1699
|
}
|
|
1530
1700
|
}
|
|
@@ -1608,23 +1778,23 @@ class ECSPrimengTable {
|
|
|
1608
1778
|
finalColumns.push(matchingColumn);
|
|
1609
1779
|
}
|
|
1610
1780
|
});
|
|
1611
|
-
let prevColsToShow = this.
|
|
1612
|
-
this.
|
|
1613
|
-
let sameColumnsAsBefore = prevColsToShow.length === this.
|
|
1614
|
-
prevColsToShow.every((prevCol, index) => prevCol.field === this.
|
|
1615
|
-
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));
|
|
1616
1786
|
this.updateColumnsSpecialProperties(this.columnModalData);
|
|
1617
1787
|
if (!sameColumnsAsBefore) {
|
|
1618
|
-
this.isActive = false;
|
|
1788
|
+
this.tableOptions.isActive = false;
|
|
1619
1789
|
this.clearSorts(this.dt, true);
|
|
1620
1790
|
setTimeout(() => {
|
|
1621
|
-
this.isActive = true;
|
|
1791
|
+
this.tableOptions.isActive = true;
|
|
1622
1792
|
this.clearSorts(this.dt, true);
|
|
1623
1793
|
}, 1);
|
|
1624
1794
|
}
|
|
1625
1795
|
}
|
|
1626
1796
|
updateColumnsSpecialProperties(columnsSource) {
|
|
1627
|
-
const allColumns = [this.columns, this.
|
|
1797
|
+
const allColumns = [this.columns, this.tableOptions.columns.shown, this.columnsSelected, this.columnsCantBeHidden];
|
|
1628
1798
|
const columnModalDataMap = new Map(columnsSource.map((item) => [item.field, {
|
|
1629
1799
|
cellOverflowBehaviour: item.cellOverflowBehaviour,
|
|
1630
1800
|
dataAlignHorizontal: item.dataAlignHorizontal,
|
|
@@ -1649,12 +1819,15 @@ class ECSPrimengTable {
|
|
|
1649
1819
|
}
|
|
1650
1820
|
openExcelExport() {
|
|
1651
1821
|
this.excelReportTitle =
|
|
1652
|
-
(!this.
|
|
1822
|
+
(!this.tableOptions.excelReport.defaultTitle || this.tableOptions.excelReport.defaultTitle.trim().length === 0) && !this.tableOptions.excelReport.titleAllowUserEdit
|
|
1653
1823
|
? 'Report'
|
|
1654
|
-
: this.
|
|
1824
|
+
: this.tableOptions.excelReport.defaultTitle;
|
|
1655
1825
|
this.showExportModal = true;
|
|
1656
1826
|
}
|
|
1657
1827
|
generateExcelReport(event) {
|
|
1828
|
+
if (!this.tableOptions.excelReport.url?.trim()) {
|
|
1829
|
+
return;
|
|
1830
|
+
}
|
|
1658
1831
|
let filtersWithoutGlobalAndSelectedRows = this.modifyFiltersWithoutGlobalAndSelectedRows(this.tableLazyLoadEventInformation.filters, event.selectedRows); // Create filters excluding the global filter
|
|
1659
1832
|
filtersWithoutGlobalAndSelectedRows = this.revertDateTimeZoneFilters(filtersWithoutGlobalAndSelectedRows);
|
|
1660
1833
|
const filtersMustBeApplied = (event.selectedRows === 1 || event.selectedRows === 2)
|
|
@@ -1666,7 +1839,7 @@ class ECSPrimengTable {
|
|
|
1666
1839
|
sort: this.tableLazyLoadEventInformation.multiSortMeta, // Set the sorting information
|
|
1667
1840
|
filter: filtersWithoutGlobalAndSelectedRows, // Set the filters excluding the global filter
|
|
1668
1841
|
globalFilter: this.globalSearchText, // Set the global filter text
|
|
1669
|
-
columns: this.
|
|
1842
|
+
columns: this.tableOptions.columns.shown.map(col => col.field), // Set the columns to show
|
|
1670
1843
|
dateFormat: this.dateFormat,
|
|
1671
1844
|
dateTimezone: this.dateTimezone,
|
|
1672
1845
|
dateCulture: this.dateCulture,
|
|
@@ -1675,7 +1848,7 @@ class ECSPrimengTable {
|
|
|
1675
1848
|
applySorts: event.applySorts,
|
|
1676
1849
|
filename: event.filename
|
|
1677
1850
|
};
|
|
1678
|
-
this.tableService.fetchExcelReport(this.
|
|
1851
|
+
this.tableService.fetchExcelReport(this.tableOptions.excelReport.url, requestData).subscribe({
|
|
1679
1852
|
next: (response) => {
|
|
1680
1853
|
this.tableService.downloadFile(response.body, event.filename, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
|
|
1681
1854
|
this.showExportModal = false;
|
|
@@ -1683,10 +1856,35 @@ class ECSPrimengTable {
|
|
|
1683
1856
|
error: (err) => this.tableService.handleTableError(err, 'Excel export error')
|
|
1684
1857
|
});
|
|
1685
1858
|
}
|
|
1686
|
-
|
|
1687
|
-
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 });
|
|
1688
1886
|
}
|
|
1689
|
-
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: [{
|
|
1690
1888
|
type: Component,
|
|
1691
1889
|
args: [{ selector: 'ecs-primeng-table', imports: [
|
|
1692
1890
|
CommonModule,
|
|
@@ -1701,86 +1899,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
1701
1899
|
CheckboxModule,
|
|
1702
1900
|
PaginatorModule,
|
|
1703
1901
|
TableCell,
|
|
1704
|
-
|
|
1902
|
+
TablePredefinedFilters,
|
|
1705
1903
|
TableButton,
|
|
1706
1904
|
ColumnSelector,
|
|
1707
1905
|
ExportExcel,
|
|
1708
1906
|
ButtonGroupModule,
|
|
1709
1907
|
ViewsManagement
|
|
1710
|
-
], 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"] }]
|
|
1711
|
-
}], ctorParameters: () => [{ type: ECSPrimengTableService }, { type: ECSPrimengTableNotificationService }], propDecorators: {
|
|
1712
|
-
type: Input
|
|
1713
|
-
}], data: [{
|
|
1714
|
-
type: Input
|
|
1715
|
-
}], columnsToShow: [{
|
|
1716
|
-
type: Input
|
|
1717
|
-
}], computeScrollHeight: [{
|
|
1718
|
-
type: Input
|
|
1719
|
-
}], globalSearchEnabled: [{
|
|
1720
|
-
type: Input
|
|
1721
|
-
}], globalSearchMaxLength: [{
|
|
1722
|
-
type: Input
|
|
1723
|
-
}], globalSearchPlaceholder: [{
|
|
1724
|
-
type: Input
|
|
1725
|
-
}], columnEditorEnabled: [{
|
|
1726
|
-
type: Input
|
|
1727
|
-
}], urlColumnsSource: [{
|
|
1728
|
-
type: Input
|
|
1729
|
-
}], urlDataSource: [{
|
|
1730
|
-
type: Input
|
|
1731
|
-
}], urlExcelReport: [{
|
|
1732
|
-
type: Input
|
|
1733
|
-
}], predifinedFiltersCollection: [{
|
|
1734
|
-
type: Input
|
|
1735
|
-
}], predifinedFiltersNoSelectionPlaceholder: [{
|
|
1736
|
-
type: Input
|
|
1737
|
-
}], predifinedFiltersCollectionSelectedValuesText: [{
|
|
1738
|
-
type: Input
|
|
1739
|
-
}], rowActionButtons: [{
|
|
1740
|
-
type: Input
|
|
1741
|
-
}], headerActionButtons: [{
|
|
1742
|
-
type: Input
|
|
1743
|
-
}], copyCellDataToClipboardTimeSecs: [{
|
|
1744
|
-
type: Input
|
|
1745
|
-
}], actionsColumnAligmentRight: [{
|
|
1746
|
-
type: Input
|
|
1747
|
-
}], actionsColumnWidth: [{
|
|
1748
|
-
type: Input
|
|
1749
|
-
}], actionsColumnFrozen: [{
|
|
1750
|
-
type: Input
|
|
1751
|
-
}], rowSelectorColumnActive: [{
|
|
1752
|
-
type: Input
|
|
1753
|
-
}], rowSelectorColumName: [{
|
|
1754
|
-
type: Input
|
|
1755
|
-
}], rowSelectorColumnAligmentRight: [{
|
|
1756
|
-
type: Input
|
|
1757
|
-
}], rowSelectorColumnWidth: [{
|
|
1758
|
-
type: Input
|
|
1759
|
-
}], rowSelectorColumnFrozen: [{
|
|
1760
|
-
type: Input
|
|
1761
|
-
}], actionsColumnResizable: [{
|
|
1762
|
-
type: Input
|
|
1763
|
-
}], actionColumnName: [{
|
|
1764
|
-
type: Input
|
|
1765
|
-
}], rowselectorColumnResizable: [{
|
|
1766
|
-
type: Input
|
|
1767
|
-
}], noDataFoundText: [{
|
|
1768
|
-
type: Input
|
|
1769
|
-
}], showClearSortAndFilters: [{
|
|
1770
|
-
type: Input
|
|
1771
|
-
}], excelReportTitleDefault: [{
|
|
1772
|
-
type: Input
|
|
1773
|
-
}], excelReportTitleAllowUserEdit: [{
|
|
1774
|
-
type: Input
|
|
1775
|
-
}], tableViewSaveAs: [{
|
|
1776
|
-
type: Input
|
|
1777
|
-
}], tableViewSaveKey: [{
|
|
1778
|
-
type: Input
|
|
1779
|
-
}], viewsGetSourceURL: [{
|
|
1780
|
-
type: Input
|
|
1781
|
-
}], viewsSaveSourceURL: [{
|
|
1782
|
-
type: Input
|
|
1783
|
-
}], 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: [{
|
|
1784
1910
|
type: Input
|
|
1785
1911
|
}], onRowCheckboxChange: [{
|
|
1786
1912
|
type: Output
|
|
@@ -1788,6 +1914,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
1788
1914
|
type: Output
|
|
1789
1915
|
}], onRowUnselect: [{
|
|
1790
1916
|
type: Output
|
|
1917
|
+
}], onDataEndUpdate: [{
|
|
1918
|
+
type: Output
|
|
1791
1919
|
}], dt: [{
|
|
1792
1920
|
type: ViewChild,
|
|
1793
1921
|
args: ['dt']
|
|
@@ -1814,5 +1942,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
1814
1942
|
* Generated bundle index. Do not edit.
|
|
1815
1943
|
*/
|
|
1816
1944
|
|
|
1817
|
-
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 };
|
|
1818
1946
|
//# sourceMappingURL=eternalcodestudio-primeng-table.mjs.map
|