@elite.framework/ng.ui.core 1.0.80 → 1.0.82
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/base-crud/index.d.ts +1 -0
- package/fesm2022/elite.framework-ng.ui.core-base-crud.mjs +16 -2
- package/fesm2022/elite.framework-ng.ui.core-base-crud.mjs.map +1 -1
- package/fesm2022/elite.framework-ng.ui.core-generic-crud-table.mjs +29 -18
- package/fesm2022/elite.framework-ng.ui.core-generic-crud-table.mjs.map +1 -1
- package/fesm2022/elite.framework-ng.ui.core-generic-report.mjs +354 -286
- package/fesm2022/elite.framework-ng.ui.core-generic-report.mjs.map +1 -1
- package/fesm2022/elite.framework-ng.ui.core-generic-search-advanced.mjs +1307 -123
- package/fesm2022/elite.framework-ng.ui.core-generic-search-advanced.mjs.map +1 -1
- package/fesm2022/elite.framework-ng.ui.core-generic-table.mjs +18 -2
- package/fesm2022/elite.framework-ng.ui.core-generic-table.mjs.map +1 -1
- package/fesm2022/elite.framework-ng.ui.core-text-editor.mjs +16 -14
- package/fesm2022/elite.framework-ng.ui.core-text-editor.mjs.map +1 -1
- package/generic-crud-table/index.d.ts +1 -0
- package/generic-report/index.d.ts +50 -26
- package/generic-search-advanced/index.d.ts +127 -25
- package/generic-table/index.d.ts +4 -1
- package/package.json +5 -5
|
@@ -153,6 +153,12 @@ class GenericTable {
|
|
|
153
153
|
//@Input() selection: T | T[] | null = null;
|
|
154
154
|
// هذا سيكون مرتبطًا بـ [(selection)] في p-table
|
|
155
155
|
_selection = null;
|
|
156
|
+
//لتغيير لون صف معيّن
|
|
157
|
+
rowStyleFn;
|
|
158
|
+
// ✅ لتعيين كلاس CSS أو Tailwind على الصف
|
|
159
|
+
rowClassFn;
|
|
160
|
+
//آخر لتجميد / تعطيل checkbox الاختيار
|
|
161
|
+
disableRowCheckboxFn;
|
|
156
162
|
get selection() {
|
|
157
163
|
return this._selection;
|
|
158
164
|
}
|
|
@@ -189,6 +195,10 @@ class GenericTable {
|
|
|
189
195
|
this._selection = event.checked ? [...this.data] : [];
|
|
190
196
|
}
|
|
191
197
|
this.selectionChange.emit(this._selection);
|
|
198
|
+
// إذا ما عاد فيه أي تحديد، أصدر حدث خاص للتفريغ
|
|
199
|
+
if (!this._selection || (Array.isArray(this._selection) && this._selection.length === 0)) {
|
|
200
|
+
this.rowSelect.emit(undefined); // يرسل null عشان يخفي الأزرار بالأب
|
|
201
|
+
}
|
|
192
202
|
}
|
|
193
203
|
customSort(event) {
|
|
194
204
|
event.data?.sort((data1, data2) => {
|
|
@@ -325,11 +335,11 @@ class GenericTable {
|
|
|
325
335
|
}
|
|
326
336
|
}
|
|
327
337
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
328
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: GenericTable, isStandalone: true, selector: "lib-generic-table", inputs: { data: "data", columns: "columns", loading: "loading", actions: "actions", actionsPosition: "actionsPosition", actionsMode: "actionsMode", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", globalFilterFields: "globalFilterFields", addButtonConfigs: "addButtonConfigs", scrollHeight: "scrollHeight", rowSelectable: "rowSelectable", selection: "selection", paginator: "paginator", showRowSelectionCheckbox: "showRowSelectionCheckbox" }, outputs: { action: "action", pageChange: "pageChange", onAddNew: "onAddNew", rowSelect: "rowSelect", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col h-screen\" style=\" height: 60vh;\">\r\n <div class=\"flex-1 border rounded-lg overflow-hidden flex flex-col\">\r\n\r\n <!-- PrimeNG Table -->\r\n <p-table #dt\r\n [value]=\"data_\"\r\n [columns]=\"columns\"\r\n [lazy]=\"true\"\r\n [paginator]=\"false\"\r\n [rows]=\"rows\"\r\n [first]=\"first\"\r\n [totalRecords]=\"totalRecords\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\"\r\n (onLazyLoad)=\"onLazyLoad($event)\"\r\n [globalFilterFields]=\"globalFilterFields\"\r\n [loading]=\"loading\"\r\n [scrollable]=\"true\"\r\n scrollHeight=\"flex\"\r\n [selectionMode]=\"showRowSelectionCheckbox ? 'multiple' : (rowSelectable ? 'single' : undefined)\"\r\n [(selection)]=\"_selection\"\r\n (onRowSelect)=\"onInternalSelectionChange($event)\"\r\n (onRowUnselect)=\"onInternalSelectionChange($event)\"\r\n (onHeaderCheckboxToggle)=\"onInternalSelectionChange($event)\"\r\n tableLayout=\"fixed\"\r\n [customSort]=\"false\"\r\n (sortFunction)=\"customSort($event)\"\r\n class=\"flex-1 overflow-auto\"\r\n >\r\n\r\n <!-- Empty message -->\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td colspan=\"10\">\r\n <div class=\"flex flex-col items-center justify-center py-10 text-center w-full\">\r\n <i class=\"pi pi-inbox text-4xl text-gray-400 mb-4\"></i>\r\n <p class=\"text-gray-500 mb-4\">{{ 'NO_DATA_FOUND' | translate }}</p>\r\n\r\n <ng-container *ngFor=\"let btn of addButtonConfigs; trackBy: trackByIdx\">\r\n <lib-generic-button\r\n *ngIf=\"!btn.visible || btn.visible === true\"\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [size]=\"btn.size\"\r\n [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"onAddNew.emit()\"\r\n class=\"mb-2\"\r\n ></lib-generic-button>\r\n </ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- Table header -->\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr class=\"bg-gray-200 sticky top-0 z-10\">\r\n <th *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n </th>\r\n <th *ngIf=\"actions.length > 0 && actionsPosition === 'start'\" class=\"px-4 py-2 text-sm font-medium text-center sticky right-0\">\r\n {{ '*' | translate }}\r\n </th>\r\n <ng-container *ngFor=\"let col of columns; trackBy: trackByFn\">\r\n <th\r\n [pSortableColumn]=\"col.key\"\r\n class=\"px-4 py-2 text-sm font-medium text-center\"\r\n [style.min-width]=\"col.props?.table?.props?.width || '150px'\"\r\n >\r\n {{ col.props?.label | translate }}\r\n <p-sortIcon [field]=\"col.key\"></p-sortIcon>\r\n </th>\r\n </ng-container>\r\n\r\n <th *ngIf=\"actions.length > 0 && actionsPosition === 'end'\" class=\"px-4 py-2 text-sm font-medium text-center sticky left-0\">\r\n {{ '*' | translate }}\r\n </th>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- Table body -->\r\n <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-i=\"rowIndex\">\r\n <tr class=\"even:bg-gray-50 hover:bg-gray-100 cursor-pointer\" (click)=\"rowSelect.emit(rowData)\">\r\n <td *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n <p-tableCheckbox [value]=\"rowData\"></p-tableCheckbox>\r\n </td>\r\n <td *ngIf=\"actions.length > 0 && actionsPosition === 'start'\" class=\"border-t border-gray-200 px-4 py-2 text-center sticky right-0 bg-gray-50\">\r\n <ng-container\r\n *ngTemplateOutlet=\"actionsTemplate; context: {$implicit: rowData}\">\r\n </ng-container>\r\n\r\n </td>\r\n\r\n <td\r\n *ngFor=\"let col of rowData.rowFields; let colIndex = index; trackBy: trackByFn\"\r\n class=\"border-t border-gray-200 px-4 py-2 text-center text-sm text-gray-700\"\r\n [style.width]=\"col.props?.table?.props?.width\"\r\n >\r\n <formly-form\r\n [model]=\"rowData\"\r\n [form]=\"getForm(i, colIndex)\"\r\n [fields]=\"[col]\"\r\n [options]=\"options\"\r\n ></formly-form>\r\n </td>\r\n\r\n <td *ngIf=\"actions.length > 0 && actionsPosition === 'end'\" class=\"border-t border-gray-200 px-4 py-2 text-center sticky left-0 bg-gray-50\">\r\n <ng-container\r\n *ngTemplateOutlet=\"actionsTemplate; context: {$implicit: rowData}\">\r\n </ng-container>\r\n\r\n </td>\r\n </tr>\r\n\r\n </ng-template>\r\n\r\n\r\n </p-table>\r\n </div>\r\n</div>\r\n\r\n<ng-template #actionsTemplate let-rowData>\r\n <ng-container [ngSwitch]=\"actionsMode\">\r\n\r\n <ng-container *ngSwitchCase=\"'buttons'\">\r\n <ng-container *ngFor=\"let act of sortedActions\">\r\n <button\r\n *ngIf=\"act.icon || act.label\"\r\n pButton\r\n [icon]=\"act.icon || ''\"\r\n [label]=\"(act.label ?? '') | translate\"\r\n [class]=\"act.styleClass || ''\"\r\n class=\"p-button-sm mx-1\"\r\n (click)=\"onAction(act, rowData)\" ></button>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'menu'\">\r\n <app-action-menu [items]=\"getMenuItems(rowData) || []\"></app-action-menu>\r\n <!-- <p-menu #menu [model]=\"getMenuItems(rowData)\" [popup]=\"true\" appendTo=\"body\"></p-menu>\r\n <p-button\r\n outlined\r\n icon=\"pi pi-ellipsis-v\"\r\n class=\"p-button-text p-button-sm\"\r\n (onClick)=\"menu.toggle($event)\"\r\n ></p-button> -->\r\n </ng-container>\r\n\r\n </ng-container>\r\n</ng-template>\r\n\r\n", styles: [".custom-button-medium{font-size:1.1rem;width:2.5rem;height:2.5rem;line-height:2.5rem;padding:0}.custom-button-gray{color:#333;background-color:transparent;border:none}.custom-button-gray:hover{background-color:#eee;color:#000}.icon-delete{color:red!important}.icon-edit{color:#333}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$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: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: MenuModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: GenericButton, selector: "lib-generic-button", inputs: ["model", "type", "icon", "label", "variant", "severity", "size", "iconPosition", "disabled", "loading", "ariaLabel", "extraClasses", "permission"], outputs: ["clicked", "itemClick"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: ActionMenuComponent, selector: "app-action-menu", inputs: ["items"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
|
|
338
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: GenericTable, isStandalone: true, selector: "lib-generic-table", inputs: { data: "data", columns: "columns", loading: "loading", actions: "actions", actionsPosition: "actionsPosition", actionsMode: "actionsMode", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", globalFilterFields: "globalFilterFields", addButtonConfigs: "addButtonConfigs", scrollHeight: "scrollHeight", rowSelectable: "rowSelectable", rowStyleFn: "rowStyleFn", rowClassFn: "rowClassFn", disableRowCheckboxFn: "disableRowCheckboxFn", selection: "selection", paginator: "paginator", showRowSelectionCheckbox: "showRowSelectionCheckbox" }, outputs: { action: "action", pageChange: "pageChange", onAddNew: "onAddNew", rowSelect: "rowSelect", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col h-screen\" style=\" height: 60vh;\">\r\n <div class=\"flex-1 border rounded-lg overflow-hidden flex flex-col\">\r\n\r\n <!-- PrimeNG Table -->\r\n <p-table #dt\r\n [value]=\"data_\"\r\n [columns]=\"columns\"\r\n [lazy]=\"true\"\r\n [paginator]=\"false\"\r\n [rows]=\"rows\"\r\n [first]=\"first\"\r\n [totalRecords]=\"totalRecords\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\"\r\n (onLazyLoad)=\"onLazyLoad($event)\"\r\n [globalFilterFields]=\"globalFilterFields\"\r\n [loading]=\"loading\"\r\n [scrollable]=\"true\"\r\n scrollHeight=\"flex\"\r\n [selectionMode]=\"showRowSelectionCheckbox ? 'multiple' : (rowSelectable ? 'single' : undefined)\"\r\n [(selection)]=\"_selection\"\r\n (onRowSelect)=\"onInternalSelectionChange($event)\"\r\n (onRowUnselect)=\"onInternalSelectionChange($event)\"\r\n (onHeaderCheckboxToggle)=\"onInternalSelectionChange($event)\"\r\n tableLayout=\"fixed\"\r\n [customSort]=\"false\"\r\n (sortFunction)=\"customSort($event)\"\r\n class=\"flex-1 overflow-auto\"\r\n >\r\n\r\n <!-- Empty message -->\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td colspan=\"10\">\r\n <div class=\"flex flex-col items-center justify-center py-10 text-center w-full\">\r\n <i class=\"pi pi-inbox text-4xl text-gray-400 mb-4\"></i>\r\n <p class=\"text-gray-500 mb-4\">{{ 'NO_DATA_FOUND' | translate }}</p>\r\n\r\n <ng-container *ngFor=\"let btn of addButtonConfigs; trackBy: trackByIdx\">\r\n <lib-generic-button\r\n *ngIf=\"!btn.visible || btn.visible === true\"\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [size]=\"btn.size\"\r\n [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"onAddNew.emit()\"\r\n class=\"mb-2\"\r\n ></lib-generic-button>\r\n </ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- Table header -->\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr class=\"bg-gray-200 sticky top-0 z-10\">\r\n <th *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n </th>\r\n <th *ngIf=\"actions.length > 0 && actionsPosition === 'start'\" class=\"px-4 py-2 text-sm font-medium text-center sticky right-0\">\r\n {{ '*' | translate }}\r\n </th>\r\n <ng-container *ngFor=\"let col of columns; trackBy: trackByFn\">\r\n <th\r\n [pSortableColumn]=\"col.key\"\r\n class=\"px-4 py-2 text-sm font-medium text-center\"\r\n [style.min-width]=\"col.props?.table?.props?.width || '150px'\"\r\n >\r\n {{ col.props?.label | translate }}\r\n <p-sortIcon [field]=\"col.key\"></p-sortIcon>\r\n </th>\r\n </ng-container>\r\n\r\n <th *ngIf=\"actions.length > 0 && actionsPosition === 'end'\" class=\"px-4 py-2 text-sm font-medium text-center sticky left-0\">\r\n {{ '*' | translate }}\r\n </th>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- Table body -->\r\n <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-i=\"rowIndex\">\r\n <tr class=\"even:bg-gray-50 hover:bg-gray-100 cursor-pointer\"\r\n (click)=\"rowSelect.emit(rowData)\"\r\n [ngClass]=\"rowClassFn ? rowClassFn(rowData) : null\"\r\n [ngStyle]=\"rowStyleFn ? rowStyleFn(rowData) : null\">\r\n <td *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n <p-tableCheckbox\r\n [value]=\"rowData\"\r\n [disabled]=\"disableRowCheckboxFn ? disableRowCheckboxFn(rowData) : false\"\r\n ></p-tableCheckbox>\r\n </td>\r\n <td *ngIf=\"actions.length > 0 && actionsPosition === 'start'\"\r\n class=\"border-t border-gray-200 px-4 py-2 text-center sticky right-0 bg-gray-50\">\r\n <ng-container\r\n *ngTemplateOutlet=\"actionsTemplate; context: {$implicit: rowData}\">\r\n </ng-container>\r\n\r\n </td>\r\n\r\n <td\r\n *ngFor=\"let col of rowData.rowFields; let colIndex = index; trackBy: trackByFn\"\r\n class=\"border-t border-gray-200 px-4 py-2 text-center text-sm text-gray-700\"\r\n [style.width]=\"col.props?.table?.props?.width\"\r\n >\r\n <formly-form\r\n [model]=\"rowData\"\r\n [form]=\"getForm(i, colIndex)\"\r\n [fields]=\"[col]\"\r\n [options]=\"options\"\r\n ></formly-form>\r\n </td>\r\n\r\n <td *ngIf=\"actions.length > 0 && actionsPosition === 'end'\" class=\"border-t border-gray-200 px-4 py-2 text-center sticky left-0 bg-gray-50\">\r\n <ng-container\r\n *ngTemplateOutlet=\"actionsTemplate; context: {$implicit: rowData}\">\r\n </ng-container>\r\n\r\n </td>\r\n </tr>\r\n\r\n </ng-template>\r\n\r\n\r\n </p-table>\r\n </div>\r\n</div>\r\n\r\n<ng-template #actionsTemplate let-rowData>\r\n <ng-container [ngSwitch]=\"actionsMode\">\r\n\r\n <ng-container *ngSwitchCase=\"'buttons'\">\r\n <ng-container *ngFor=\"let act of sortedActions\">\r\n <button\r\n *ngIf=\"act.icon || act.label\"\r\n pButton\r\n [icon]=\"act.icon || ''\"\r\n [label]=\"(act.label ?? '') | translate\"\r\n [class]=\"act.styleClass || ''\"\r\n class=\"p-button-sm mx-1\"\r\n (click)=\"onAction(act, rowData)\" ></button>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'menu'\">\r\n <app-action-menu [items]=\"getMenuItems(rowData) || []\"></app-action-menu>\r\n <!-- <p-menu #menu [model]=\"getMenuItems(rowData)\" [popup]=\"true\" appendTo=\"body\"></p-menu>\r\n <p-button\r\n outlined\r\n icon=\"pi pi-ellipsis-v\"\r\n class=\"p-button-text p-button-sm\"\r\n (onClick)=\"menu.toggle($event)\"\r\n ></p-button> -->\r\n </ng-container>\r\n\r\n </ng-container>\r\n</ng-template>\r\n\r\n", styles: [".custom-button-medium{font-size:1.1rem;width:2.5rem;height:2.5rem;line-height:2.5rem;padding:0}.custom-button-gray{color:#333;background-color:transparent;border:none}.custom-button-gray:hover{background-color:#eee;color:#000}.icon-delete{color:red!important}.icon-edit{color:#333}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$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: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: MenuModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: GenericButton, selector: "lib-generic-button", inputs: ["model", "type", "icon", "label", "variant", "severity", "size", "iconPosition", "disabled", "loading", "ariaLabel", "extraClasses", "permission"], outputs: ["clicked", "itemClick"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: ActionMenuComponent, selector: "app-action-menu", inputs: ["items"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
|
|
329
339
|
}
|
|
330
340
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericTable, decorators: [{
|
|
331
341
|
type: Component,
|
|
332
|
-
args: [{ selector: 'lib-generic-table', imports: [CommonModule, TableModule, ButtonModule, MenuModule, NgForOf, TranslateModule, FormlyField, FormlyForm, NgIf, TranslatePipe, Menu, Button, GenericButton, PaginatorModule, ActionMenuComponent], template: "<div class=\"flex flex-col h-screen\" style=\" height: 60vh;\">\r\n <div class=\"flex-1 border rounded-lg overflow-hidden flex flex-col\">\r\n\r\n <!-- PrimeNG Table -->\r\n <p-table #dt\r\n [value]=\"data_\"\r\n [columns]=\"columns\"\r\n [lazy]=\"true\"\r\n [paginator]=\"false\"\r\n [rows]=\"rows\"\r\n [first]=\"first\"\r\n [totalRecords]=\"totalRecords\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\"\r\n (onLazyLoad)=\"onLazyLoad($event)\"\r\n [globalFilterFields]=\"globalFilterFields\"\r\n [loading]=\"loading\"\r\n [scrollable]=\"true\"\r\n scrollHeight=\"flex\"\r\n [selectionMode]=\"showRowSelectionCheckbox ? 'multiple' : (rowSelectable ? 'single' : undefined)\"\r\n [(selection)]=\"_selection\"\r\n (onRowSelect)=\"onInternalSelectionChange($event)\"\r\n (onRowUnselect)=\"onInternalSelectionChange($event)\"\r\n (onHeaderCheckboxToggle)=\"onInternalSelectionChange($event)\"\r\n tableLayout=\"fixed\"\r\n [customSort]=\"false\"\r\n (sortFunction)=\"customSort($event)\"\r\n class=\"flex-1 overflow-auto\"\r\n >\r\n\r\n <!-- Empty message -->\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td colspan=\"10\">\r\n <div class=\"flex flex-col items-center justify-center py-10 text-center w-full\">\r\n <i class=\"pi pi-inbox text-4xl text-gray-400 mb-4\"></i>\r\n <p class=\"text-gray-500 mb-4\">{{ 'NO_DATA_FOUND' | translate }}</p>\r\n\r\n <ng-container *ngFor=\"let btn of addButtonConfigs; trackBy: trackByIdx\">\r\n <lib-generic-button\r\n *ngIf=\"!btn.visible || btn.visible === true\"\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [size]=\"btn.size\"\r\n [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"onAddNew.emit()\"\r\n class=\"mb-2\"\r\n ></lib-generic-button>\r\n </ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- Table header -->\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr class=\"bg-gray-200 sticky top-0 z-10\">\r\n <th *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n </th>\r\n <th *ngIf=\"actions.length > 0 && actionsPosition === 'start'\" class=\"px-4 py-2 text-sm font-medium text-center sticky right-0\">\r\n {{ '*' | translate }}\r\n </th>\r\n <ng-container *ngFor=\"let col of columns; trackBy: trackByFn\">\r\n <th\r\n [pSortableColumn]=\"col.key\"\r\n class=\"px-4 py-2 text-sm font-medium text-center\"\r\n [style.min-width]=\"col.props?.table?.props?.width || '150px'\"\r\n >\r\n {{ col.props?.label | translate }}\r\n <p-sortIcon [field]=\"col.key\"></p-sortIcon>\r\n </th>\r\n </ng-container>\r\n\r\n <th *ngIf=\"actions.length > 0 && actionsPosition === 'end'\" class=\"px-4 py-2 text-sm font-medium text-center sticky left-0\">\r\n {{ '*' | translate }}\r\n </th>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- Table body -->\r\n <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-i=\"rowIndex\">\r\n <tr class=\"even:bg-gray-50 hover:bg-gray-100 cursor-pointer\"
|
|
342
|
+
args: [{ selector: 'lib-generic-table', imports: [CommonModule, TableModule, ButtonModule, MenuModule, NgForOf, TranslateModule, FormlyField, FormlyForm, NgIf, TranslatePipe, Menu, Button, GenericButton, PaginatorModule, ActionMenuComponent], template: "<div class=\"flex flex-col h-screen\" style=\" height: 60vh;\">\r\n <div class=\"flex-1 border rounded-lg overflow-hidden flex flex-col\">\r\n\r\n <!-- PrimeNG Table -->\r\n <p-table #dt\r\n [value]=\"data_\"\r\n [columns]=\"columns\"\r\n [lazy]=\"true\"\r\n [paginator]=\"false\"\r\n [rows]=\"rows\"\r\n [first]=\"first\"\r\n [totalRecords]=\"totalRecords\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\"\r\n (onLazyLoad)=\"onLazyLoad($event)\"\r\n [globalFilterFields]=\"globalFilterFields\"\r\n [loading]=\"loading\"\r\n [scrollable]=\"true\"\r\n scrollHeight=\"flex\"\r\n [selectionMode]=\"showRowSelectionCheckbox ? 'multiple' : (rowSelectable ? 'single' : undefined)\"\r\n [(selection)]=\"_selection\"\r\n (onRowSelect)=\"onInternalSelectionChange($event)\"\r\n (onRowUnselect)=\"onInternalSelectionChange($event)\"\r\n (onHeaderCheckboxToggle)=\"onInternalSelectionChange($event)\"\r\n tableLayout=\"fixed\"\r\n [customSort]=\"false\"\r\n (sortFunction)=\"customSort($event)\"\r\n class=\"flex-1 overflow-auto\"\r\n >\r\n\r\n <!-- Empty message -->\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td colspan=\"10\">\r\n <div class=\"flex flex-col items-center justify-center py-10 text-center w-full\">\r\n <i class=\"pi pi-inbox text-4xl text-gray-400 mb-4\"></i>\r\n <p class=\"text-gray-500 mb-4\">{{ 'NO_DATA_FOUND' | translate }}</p>\r\n\r\n <ng-container *ngFor=\"let btn of addButtonConfigs; trackBy: trackByIdx\">\r\n <lib-generic-button\r\n *ngIf=\"!btn.visible || btn.visible === true\"\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [size]=\"btn.size\"\r\n [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"onAddNew.emit()\"\r\n class=\"mb-2\"\r\n ></lib-generic-button>\r\n </ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- Table header -->\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr class=\"bg-gray-200 sticky top-0 z-10\">\r\n <th *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n </th>\r\n <th *ngIf=\"actions.length > 0 && actionsPosition === 'start'\" class=\"px-4 py-2 text-sm font-medium text-center sticky right-0\">\r\n {{ '*' | translate }}\r\n </th>\r\n <ng-container *ngFor=\"let col of columns; trackBy: trackByFn\">\r\n <th\r\n [pSortableColumn]=\"col.key\"\r\n class=\"px-4 py-2 text-sm font-medium text-center\"\r\n [style.min-width]=\"col.props?.table?.props?.width || '150px'\"\r\n >\r\n {{ col.props?.label | translate }}\r\n <p-sortIcon [field]=\"col.key\"></p-sortIcon>\r\n </th>\r\n </ng-container>\r\n\r\n <th *ngIf=\"actions.length > 0 && actionsPosition === 'end'\" class=\"px-4 py-2 text-sm font-medium text-center sticky left-0\">\r\n {{ '*' | translate }}\r\n </th>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- Table body -->\r\n <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-i=\"rowIndex\">\r\n <tr class=\"even:bg-gray-50 hover:bg-gray-100 cursor-pointer\"\r\n (click)=\"rowSelect.emit(rowData)\"\r\n [ngClass]=\"rowClassFn ? rowClassFn(rowData) : null\"\r\n [ngStyle]=\"rowStyleFn ? rowStyleFn(rowData) : null\">\r\n <td *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n <p-tableCheckbox\r\n [value]=\"rowData\"\r\n [disabled]=\"disableRowCheckboxFn ? disableRowCheckboxFn(rowData) : false\"\r\n ></p-tableCheckbox>\r\n </td>\r\n <td *ngIf=\"actions.length > 0 && actionsPosition === 'start'\"\r\n class=\"border-t border-gray-200 px-4 py-2 text-center sticky right-0 bg-gray-50\">\r\n <ng-container\r\n *ngTemplateOutlet=\"actionsTemplate; context: {$implicit: rowData}\">\r\n </ng-container>\r\n\r\n </td>\r\n\r\n <td\r\n *ngFor=\"let col of rowData.rowFields; let colIndex = index; trackBy: trackByFn\"\r\n class=\"border-t border-gray-200 px-4 py-2 text-center text-sm text-gray-700\"\r\n [style.width]=\"col.props?.table?.props?.width\"\r\n >\r\n <formly-form\r\n [model]=\"rowData\"\r\n [form]=\"getForm(i, colIndex)\"\r\n [fields]=\"[col]\"\r\n [options]=\"options\"\r\n ></formly-form>\r\n </td>\r\n\r\n <td *ngIf=\"actions.length > 0 && actionsPosition === 'end'\" class=\"border-t border-gray-200 px-4 py-2 text-center sticky left-0 bg-gray-50\">\r\n <ng-container\r\n *ngTemplateOutlet=\"actionsTemplate; context: {$implicit: rowData}\">\r\n </ng-container>\r\n\r\n </td>\r\n </tr>\r\n\r\n </ng-template>\r\n\r\n\r\n </p-table>\r\n </div>\r\n</div>\r\n\r\n<ng-template #actionsTemplate let-rowData>\r\n <ng-container [ngSwitch]=\"actionsMode\">\r\n\r\n <ng-container *ngSwitchCase=\"'buttons'\">\r\n <ng-container *ngFor=\"let act of sortedActions\">\r\n <button\r\n *ngIf=\"act.icon || act.label\"\r\n pButton\r\n [icon]=\"act.icon || ''\"\r\n [label]=\"(act.label ?? '') | translate\"\r\n [class]=\"act.styleClass || ''\"\r\n class=\"p-button-sm mx-1\"\r\n (click)=\"onAction(act, rowData)\" ></button>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'menu'\">\r\n <app-action-menu [items]=\"getMenuItems(rowData) || []\"></app-action-menu>\r\n <!-- <p-menu #menu [model]=\"getMenuItems(rowData)\" [popup]=\"true\" appendTo=\"body\"></p-menu>\r\n <p-button\r\n outlined\r\n icon=\"pi pi-ellipsis-v\"\r\n class=\"p-button-text p-button-sm\"\r\n (onClick)=\"menu.toggle($event)\"\r\n ></p-button> -->\r\n </ng-container>\r\n\r\n </ng-container>\r\n</ng-template>\r\n\r\n", styles: [".custom-button-medium{font-size:1.1rem;width:2.5rem;height:2.5rem;line-height:2.5rem;padding:0}.custom-button-gray{color:#333;background-color:transparent;border:none}.custom-button-gray:hover{background-color:#eee;color:#000}.icon-delete{color:red!important}.icon-edit{color:#333}\n"] }]
|
|
333
343
|
}], propDecorators: { dt: [{
|
|
334
344
|
type: ViewChild,
|
|
335
345
|
args: ['dt']
|
|
@@ -369,6 +379,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
|
|
|
369
379
|
type: Input
|
|
370
380
|
}], rowSelectable: [{
|
|
371
381
|
type: Input
|
|
382
|
+
}], rowStyleFn: [{
|
|
383
|
+
type: Input
|
|
384
|
+
}], rowClassFn: [{
|
|
385
|
+
type: Input
|
|
386
|
+
}], disableRowCheckboxFn: [{
|
|
387
|
+
type: Input
|
|
372
388
|
}], selection: [{
|
|
373
389
|
type: Input
|
|
374
390
|
}], rowSelect: [{
|