itc-components-library20 0.0.2 → 0.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
CHANGED
|
@@ -40,6 +40,26 @@ Once the project is built, you can publish your library by following these steps
|
|
|
40
40
|
npm publish
|
|
41
41
|
```
|
|
42
42
|
|
|
43
|
+
## SortableTable selection mode
|
|
44
|
+
|
|
45
|
+
`lib-sortable-table` supports three selection behaviors through the `selectionMode` input:
|
|
46
|
+
|
|
47
|
+
- `none`: disables row selection and hides checkbox column
|
|
48
|
+
- `single`: enables single-row selection (row click), without checkbox column
|
|
49
|
+
- `multiple`: enables multi-row selection and shows checkbox column
|
|
50
|
+
|
|
51
|
+
Example:
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<lib-sortable-table
|
|
55
|
+
[columns]="columns"
|
|
56
|
+
[data]="data"
|
|
57
|
+
selectionMode="none"
|
|
58
|
+
></lib-sortable-table>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
If not specified, `selectionMode` defaults to `multiple`.
|
|
62
|
+
|
|
43
63
|
## Running unit tests
|
|
44
64
|
|
|
45
65
|
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
@@ -265,6 +265,7 @@ class SortableTable {
|
|
|
265
265
|
colorPicker = () => 'var(--primary-blue-color)';
|
|
266
266
|
selected = [];
|
|
267
267
|
tableCheckbox = '';
|
|
268
|
+
selectionMode = 'multiple';
|
|
268
269
|
selectionChange = new EventEmitter();
|
|
269
270
|
// @Output() unselect = new EventEmitter<any[]>();
|
|
270
271
|
resetData = new EventEmitter();
|
|
@@ -273,6 +274,15 @@ class SortableTable {
|
|
|
273
274
|
faStroopwafel = fas.faStroopwafel;
|
|
274
275
|
faMagnifyingGlass = fas.faMagnifyingGlass;
|
|
275
276
|
selectedData = [];
|
|
277
|
+
get primeSelectionMode() {
|
|
278
|
+
if (this.selectionMode === 'none') {
|
|
279
|
+
return null;
|
|
280
|
+
}
|
|
281
|
+
return this.selectionMode;
|
|
282
|
+
}
|
|
283
|
+
get showSelectionCheckboxes() {
|
|
284
|
+
return this.selectionMode === 'multiple';
|
|
285
|
+
}
|
|
276
286
|
isDateColumn(value) {
|
|
277
287
|
return value instanceof Date && !isNaN(value.getTime());
|
|
278
288
|
}
|
|
@@ -335,6 +345,11 @@ class SortableTable {
|
|
|
335
345
|
ngOnInit() {
|
|
336
346
|
this.initialValue = [...this.data];
|
|
337
347
|
}
|
|
348
|
+
ngOnChanges(changes) {
|
|
349
|
+
if (changes['selectionMode'] && this.selectionMode === 'none') {
|
|
350
|
+
this.clearSelection();
|
|
351
|
+
}
|
|
352
|
+
}
|
|
338
353
|
customSort(event) {
|
|
339
354
|
if (this.currentSortedField !== event.field) {
|
|
340
355
|
// Se si clicca su una colonna diversa, resetta lo stato e imposta ascendente
|
|
@@ -424,11 +439,11 @@ class SortableTable {
|
|
|
424
439
|
this.resetData.emit();
|
|
425
440
|
}
|
|
426
441
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SortableTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
427
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: SortableTable, isStandalone: true, selector: "lib-sortable-table", inputs: { columns: "columns", data: "data", rows: "rows", detailRoute: "detailRoute", actions: "actions", colorPicker: "colorPicker", selected: "selected", tableCheckbox: "tableCheckbox" }, outputs: { selectionChange: "selectionChange", resetData: "resetData" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<div class=\"card\">\r\n <p-table\r\n #dt\r\n [columns]=\"columns\"\r\n [value]=\"data\"\r\n [(selection)]=\"selectedData\"\r\n [paginator]=\"true\"\r\n [rows]=\"rows\"\r\n [first]=\"first\"\r\n [customSort]=\"true\"\r\n (onPage)=\"pageChange($event)\"\r\n (sortFunction)=\"customSort($event)\"\r\n (onRowSelect)=\"onRowSelect()\"\r\n (onRowUnselect)=\"onRowSelect()\"\r\n [selectionMode]=\"
|
|
442
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: SortableTable, isStandalone: true, selector: "lib-sortable-table", inputs: { columns: "columns", data: "data", rows: "rows", detailRoute: "detailRoute", actions: "actions", colorPicker: "colorPicker", selected: "selected", tableCheckbox: "tableCheckbox", selectionMode: "selectionMode" }, outputs: { selectionChange: "selectionChange", resetData: "resetData" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"card\">\r\n <p-table\r\n #dt\r\n [columns]=\"columns\"\r\n [value]=\"data\"\r\n [(selection)]=\"selectedData\"\r\n [paginator]=\"true\"\r\n [rows]=\"rows\"\r\n [first]=\"first\"\r\n [customSort]=\"true\"\r\n (onPage)=\"pageChange($event)\"\r\n (sortFunction)=\"customSort($event)\"\r\n (onRowSelect)=\"onRowSelect()\"\r\n (onRowUnselect)=\"onRowSelect()\"\r\n [selectionMode]=\"primeSelectionMode\"\r\n dataKey=\"id\"\r\n >\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @if(showSelectionCheckboxes) {\r\n <th style=\"width: 10px\"></th>\r\n }\r\n @for(column of columns; track $index) {\r\n <th class=\"column-header\" [ngStyle]=\"{ 'width': column.width }\" [pSortableColumn]=\"column.sortable === false ? null : column.field\">\r\n {{ column.header }}\r\n @if(column.sortable !== false) {\r\n <p-sortIcon [field]=\"column.field\"></p-sortIcon>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </ng-template>\r\n <ng-template\r\n pTemplate=\"body\" \r\n let-rowData \r\n let-columns=\"columns\"\r\n let-selected=\"selected\"\r\n >\r\n <tr [pSelectableRow]=\"primeSelectionMode ? rowData : null\" [attr.data-id]=\"rowData.id\">\r\n @if(showSelectionCheckboxes) {\r\n <td (click)=\"$event.stopPropagation()\">\r\n <p-tableCheckbox [value]=\"rowData\" [ngClass]=\"tableCheckbox\"/>\r\n </td>\r\n }\r\n @for (column of columns; track $index) {\r\n <td class=\"data-container\">\r\n <!-- Verifica il campo data -->\r\n @if (isDateColumn(rowData[column.field])) {\r\n <ng-container>\r\n {{ rowData[column.field] | date: 'dd/MM/yyyy - HH:mm' }}\r\n </ng-container>\r\n }\r\n <!-- Gestione speciale per la colonna priority -->\r\n @else if (column.field === 'priority' && rowData['priorityIcon']) {\r\n <ng-container>\r\n <fa-icon\r\n [icon]=\"rowData['priorityIcon']\"\r\n [ngStyle]=\"{ color: colorPicker(rowData, 'priority') }\"\r\n ></fa-icon>\r\n </ng-container>\r\n }\r\n <!-- Verifica se il campo della colonna \u00E8 uno di quelli che contiene un'icona -->\r\n @else if (isIconColumn(column.field)) {\r\n <ng-container>\r\n <fa-icon \r\n [icon]=\"rowData[column.field]\"\r\n [ngClass]=\"{ \r\n 'invisible-icon': rowData[column.field] === faStroopwafel, \r\n 'default-style': rowData[column.field] !== faStroopwafel,\r\n 'color-style': rowData[column.field] === faMagnifyingGlass\r\n }\"\r\n [ngStyle]=\"{ color: colorPicker(rowData, column.field) }\"\r\n (click)=\"$event.stopPropagation(); actions[column.field] ? actions[column.field](rowData) : null\"\r\n ></fa-icon>\r\n </ng-container>\r\n } @else {\r\n {{ rowData[column.field]?.label || rowData[column.field] }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n</div>", styles: [":host ::ng-deep .card{height:100%;width:100%}:is() p-table{height:100%}.column-header,.data-container{text-align:center;padding:0}.column-header{color:var(--primary-blue-color);font-weight:600;padding:1% 0}.data-container{padding:.1% 0;height:50px}.data-container>.default-style{color:var(--primary-blue-color);font-size:30px}.data-container>.color-style,.color-style{color:var(--primary-blue-color)!important}fa-icon{cursor:pointer}.invisible-icon{color:transparent}@media screen and (min-resolution: 1.25dppx){.data-container>.default-style{font-size:25px}}@media only screen and (max-width: 1366px){.column-header{font-size:14px}.data-container{font-size:13px;height:47px}.data-container>.default-style{font-size:25px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i3.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: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i3.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
428
443
|
}
|
|
429
444
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SortableTable, decorators: [{
|
|
430
445
|
type: Component,
|
|
431
|
-
args: [{ selector: 'lib-sortable-table', imports: [CommonModule, FontAwesomeModule, TableModule, FormsModule], template: "<div class=\"card\">\r\n <p-table\r\n #dt\r\n [columns]=\"columns\"\r\n [value]=\"data\"\r\n [(selection)]=\"selectedData\"\r\n [paginator]=\"true\"\r\n [rows]=\"rows\"\r\n [first]=\"first\"\r\n [customSort]=\"true\"\r\n (onPage)=\"pageChange($event)\"\r\n (sortFunction)=\"customSort($event)\"\r\n (onRowSelect)=\"onRowSelect()\"\r\n (onRowUnselect)=\"onRowSelect()\"\r\n [selectionMode]=\"
|
|
446
|
+
args: [{ selector: 'lib-sortable-table', imports: [CommonModule, FontAwesomeModule, TableModule, FormsModule], template: "<div class=\"card\">\r\n <p-table\r\n #dt\r\n [columns]=\"columns\"\r\n [value]=\"data\"\r\n [(selection)]=\"selectedData\"\r\n [paginator]=\"true\"\r\n [rows]=\"rows\"\r\n [first]=\"first\"\r\n [customSort]=\"true\"\r\n (onPage)=\"pageChange($event)\"\r\n (sortFunction)=\"customSort($event)\"\r\n (onRowSelect)=\"onRowSelect()\"\r\n (onRowUnselect)=\"onRowSelect()\"\r\n [selectionMode]=\"primeSelectionMode\"\r\n dataKey=\"id\"\r\n >\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @if(showSelectionCheckboxes) {\r\n <th style=\"width: 10px\"></th>\r\n }\r\n @for(column of columns; track $index) {\r\n <th class=\"column-header\" [ngStyle]=\"{ 'width': column.width }\" [pSortableColumn]=\"column.sortable === false ? null : column.field\">\r\n {{ column.header }}\r\n @if(column.sortable !== false) {\r\n <p-sortIcon [field]=\"column.field\"></p-sortIcon>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </ng-template>\r\n <ng-template\r\n pTemplate=\"body\" \r\n let-rowData \r\n let-columns=\"columns\"\r\n let-selected=\"selected\"\r\n >\r\n <tr [pSelectableRow]=\"primeSelectionMode ? rowData : null\" [attr.data-id]=\"rowData.id\">\r\n @if(showSelectionCheckboxes) {\r\n <td (click)=\"$event.stopPropagation()\">\r\n <p-tableCheckbox [value]=\"rowData\" [ngClass]=\"tableCheckbox\"/>\r\n </td>\r\n }\r\n @for (column of columns; track $index) {\r\n <td class=\"data-container\">\r\n <!-- Verifica il campo data -->\r\n @if (isDateColumn(rowData[column.field])) {\r\n <ng-container>\r\n {{ rowData[column.field] | date: 'dd/MM/yyyy - HH:mm' }}\r\n </ng-container>\r\n }\r\n <!-- Gestione speciale per la colonna priority -->\r\n @else if (column.field === 'priority' && rowData['priorityIcon']) {\r\n <ng-container>\r\n <fa-icon\r\n [icon]=\"rowData['priorityIcon']\"\r\n [ngStyle]=\"{ color: colorPicker(rowData, 'priority') }\"\r\n ></fa-icon>\r\n </ng-container>\r\n }\r\n <!-- Verifica se il campo della colonna \u00E8 uno di quelli che contiene un'icona -->\r\n @else if (isIconColumn(column.field)) {\r\n <ng-container>\r\n <fa-icon \r\n [icon]=\"rowData[column.field]\"\r\n [ngClass]=\"{ \r\n 'invisible-icon': rowData[column.field] === faStroopwafel, \r\n 'default-style': rowData[column.field] !== faStroopwafel,\r\n 'color-style': rowData[column.field] === faMagnifyingGlass\r\n }\"\r\n [ngStyle]=\"{ color: colorPicker(rowData, column.field) }\"\r\n (click)=\"$event.stopPropagation(); actions[column.field] ? actions[column.field](rowData) : null\"\r\n ></fa-icon>\r\n </ng-container>\r\n } @else {\r\n {{ rowData[column.field]?.label || rowData[column.field] }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n</div>", styles: [":host ::ng-deep .card{height:100%;width:100%}:is() p-table{height:100%}.column-header,.data-container{text-align:center;padding:0}.column-header{color:var(--primary-blue-color);font-weight:600;padding:1% 0}.data-container{padding:.1% 0;height:50px}.data-container>.default-style{color:var(--primary-blue-color);font-size:30px}.data-container>.color-style,.color-style{color:var(--primary-blue-color)!important}fa-icon{cursor:pointer}.invisible-icon{color:transparent}@media screen and (min-resolution: 1.25dppx){.data-container>.default-style{font-size:25px}}@media only screen and (max-width: 1366px){.column-header{font-size:14px}.data-container{font-size:13px;height:47px}.data-container>.default-style{font-size:25px}}\n"] }]
|
|
432
447
|
}], propDecorators: { columns: [{
|
|
433
448
|
type: Input
|
|
434
449
|
}], data: [{
|
|
@@ -445,6 +460,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
445
460
|
type: Input
|
|
446
461
|
}], tableCheckbox: [{
|
|
447
462
|
type: Input
|
|
463
|
+
}], selectionMode: [{
|
|
464
|
+
type: Input
|
|
448
465
|
}], selectionChange: [{
|
|
449
466
|
type: Output
|
|
450
467
|
}], resetData: [{
|
|
@@ -1832,6 +1849,15 @@ class ApiAccountDictionaryService {
|
|
|
1832
1849
|
params: params
|
|
1833
1850
|
});
|
|
1834
1851
|
}
|
|
1852
|
+
getLdaps() {
|
|
1853
|
+
return this.http.get(`${this.endpoint}Dictionary/Ldap`);
|
|
1854
|
+
}
|
|
1855
|
+
// getCompanyById(id: number): Observable<> {
|
|
1856
|
+
// const params = new HttpParams().set('id', id);
|
|
1857
|
+
// return this.http.get<>(`${this.endpoint}Dictionary/Company`, {
|
|
1858
|
+
// params: params
|
|
1859
|
+
// });
|
|
1860
|
+
// }
|
|
1835
1861
|
//##############
|
|
1836
1862
|
//#### POST ####
|
|
1837
1863
|
//##############
|