@elite.framework/ng.core 1.0.20 → 1.0.21
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.
|
@@ -25,7 +25,7 @@ import { HttpParams } from '@angular/common/http';
|
|
|
25
25
|
import * as i1$2 from 'primeng/api';
|
|
26
26
|
import { MessageService } from 'primeng/api';
|
|
27
27
|
import * as i4 from 'primeng/menu';
|
|
28
|
-
import { SafeHtmlPipe, MenuModule } from 'primeng/menu';
|
|
28
|
+
import { SafeHtmlPipe, MenuModule, Menu } from 'primeng/menu';
|
|
29
29
|
import * as i2$1 from 'primeng/fileupload';
|
|
30
30
|
import { FileUploadModule } from 'primeng/fileupload';
|
|
31
31
|
import * as i2$2 from '@angular/router';
|
|
@@ -3017,13 +3017,43 @@ class GenericTable {
|
|
|
3017
3017
|
/** فعّل اختيار الصفين single/multiple */
|
|
3018
3018
|
rowSelectable = true;
|
|
3019
3019
|
/** يحتفظ بالصف المحدد */
|
|
3020
|
-
selection = null;
|
|
3020
|
+
//@Input() selection: T | T[] | null = null;
|
|
3021
|
+
// هذا سيكون مرتبطًا بـ [(selection)] في p-table
|
|
3022
|
+
_selection = null;
|
|
3023
|
+
get selection() {
|
|
3024
|
+
return this._selection;
|
|
3025
|
+
}
|
|
3026
|
+
set selection(val) {
|
|
3027
|
+
this._selection = val;
|
|
3028
|
+
// لا تُصدر الحدث هنا، بل في onInternalSelectionChange فقط
|
|
3029
|
+
}
|
|
3021
3030
|
/** يصدر الصف المحدد عند النقر */
|
|
3022
3031
|
rowSelect = new EventEmitter();
|
|
3032
|
+
/** يصدر الصفوف المحددة عند التغيير (للربط الثنائي) */
|
|
3033
|
+
selectionChange = new EventEmitter();
|
|
3023
3034
|
/** جديد: التحكم بظهور الـ paginator */
|
|
3024
3035
|
paginator = true;
|
|
3025
3036
|
form = new FormGroup({});
|
|
3026
3037
|
options = {};
|
|
3038
|
+
// **جديد**: يتحكم بإظهار عمود اختيار الصفوف (checkboxes)
|
|
3039
|
+
/** يتحكم في إظهار عمود اختيار الصفوف المتعددة بواسطة checkboxes */
|
|
3040
|
+
showRowSelectionCheckbox = false;
|
|
3041
|
+
onInternalSelectionChange(event) {
|
|
3042
|
+
if ('data' in event) {
|
|
3043
|
+
// Row select/unselect (single أو multiple)
|
|
3044
|
+
if (Array.isArray(this._selection)) {
|
|
3045
|
+
this._selection = [...this._selection]; // تحديث نسخة المصفوفة عند متعدد
|
|
3046
|
+
}
|
|
3047
|
+
else {
|
|
3048
|
+
this._selection = event.data; // اختيار فردي
|
|
3049
|
+
}
|
|
3050
|
+
}
|
|
3051
|
+
else if ('checked' in event) {
|
|
3052
|
+
// Header checkbox toggle
|
|
3053
|
+
this._selection = event.checked ? [...this.data] : [];
|
|
3054
|
+
}
|
|
3055
|
+
this.selectionChange.emit(this._selection);
|
|
3056
|
+
}
|
|
3027
3057
|
customSort(event) {
|
|
3028
3058
|
event.data?.sort((data1, data2) => {
|
|
3029
3059
|
const value1 = this.resolveFieldData(data1, event.field ?? '');
|
|
@@ -3108,11 +3138,11 @@ class GenericTable {
|
|
|
3108
3138
|
}
|
|
3109
3139
|
}
|
|
3110
3140
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: GenericTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3111
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: GenericTable, isStandalone: true, selector: "lib-generic-table", inputs: { data: "data", columns: "columns", loading: "loading", actions: "actions", actionsMode: "actionsMode", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", globalFilterFields: "globalFilterFields", scrollHeight: "scrollHeight", rowSelectable: "rowSelectable", selection: "selection", paginator: "paginator" }, outputs: { action: "action", pageChange: "pageChange", rowSelect: "rowSelect" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "\n<div class=\"flex-1 last:[&>td]:border-0 rounded-lg border border-surface w-full overflow-auto\">\n <p-table #dt [value]=\"data\" [columns]=\"columns\" [lazy]=\"true\" [paginator]=\"paginator\" [rows]=\"rows\" [first]=\"first\"\n [totalRecords]=\"totalRecords\" [sortField]=\"sortField\" [sortOrder]=\"sortOrder\" (onLazyLoad)=\"onLazyLoad($event)\"\n [globalFilterFields]=\"globalFilterFields\" [loading]=\"loading\" [scrollable]=\"true\" [scrollHeight]=\"scrollHeight\"\n [selectionMode]=\"rowSelectable ? 'single' : undefined\" [(selection)]=\"selection\"\n (onRowSelect)=\"onRowSelect($event)\"\n [customSort]=\"false\"\n (sortFunction)=\"customSort($event)\"\n >\n\n <ng-template pTemplate=\"header\" let-columns>\n <tr>\n <!-- <th style=\"width: 1rem\">\n <p-tableHeaderCheckbox />\n </th> -->\n\n <ng-container *ngFor=\"let col of columns\" >\n <th *ngIf=\"col.props?.table?.props?.width; else templateName\" [pSortableColumn]=\"col.key\"\n class=\"px-4 py-2 text-sm font-medium text-white text-center\"\n [style.width]=\"col.props?.table?.props?.width\">\n {{ col.props?.label | translate }}\n <p-sortIcon [field]=\"col.key\"></p-sortIcon>\n </th>\n\n <ng-template #templateName>\n <th class=\"px-4 py-2 text-sm font-medium text-white text-center\">\n {{ col.props?.label | translate }}\n <p-sortIcon [field]=\"col.key\"></p-sortIcon>\n </th>\n </ng-template>\n</ng-container>\n\n\n <th class=\"px-4 py-2 text-sm font-medium text-white text-center\"> {{ 'OPERATIONS' | translate }}</th>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-i=\"rowIndex\">\n <tr class=\"even:bg-gray-50 hover:bg-gray-100\" (click)=\"rowSelect.emit(rowData)\">\n <!-- <td style=\"width: 1rem\">\n <p-tableCheckbox [value]=\"rowData\" />\n </td> -->\n <td *ngFor=\"let col of columns_ ; let colIndex = index\" class=\"border-t border-gray-200 px-4 py-2 text-center text-sm text-gray-700\">\n\n <!-- \u0625\u0630\u0627 \u0627\u0644\u0639\u0645\u0648\u062F \u0642\u0627\u0628\u0644 \u0644\u0644\u0646\u0642\u0631 -->\n\n <formly-form\n [model]=\"rowData\"\n [form]=\"getForm(i, colIndex)\"\n [fields]=\"[cloneField(col)]\"\n [options]=\"options\">\n </formly-form>\n\n </td>\n <td class=\"border-t border-gray-200 px-4 py-2 text-center align-middle\">\n <ng-container [ngSwitch]=\"actionsMode\">\n <!-- Render buttons -->\n <ng-container *ngSwitchCase=\"'buttons'\">\n <ng-container *ngFor=\"let act of actions\">\n <button\n *ngIf=\"act.icon || act.label\"\n pButton\n [icon]=\"act.icon || ''\"\n [label]=\"(act.label || '') | translate\"\n [class]=\"act.styleClass || ''\"\n class=\"p-button-sm mx-1\"\n (click)=\"onAction(act, rowData)\"\n ></button>\n </ng-container>\n </ng-container>\n\n <!-- Render menu -->\n <ng-container *ngSwitchCase=\"'menu'\">\n <p-menu #menu [model]=\"getMenuItems(rowData)\" [popup]=\"true\" appendTo=\"body\">\n <ng-template let-item pTemplate=\"item\">\n <div class=\"flex items-center gap-2 px-2 py-1\">\n <i [ngClass]=\"item.icon\" class=\"text-primary-600\" *ngIf=\"item.icon\"></i>\n <span class=\"font-medium\">{{ (item.label || '') | translate }}</span>\n\n <span *ngIf=\"item.badge\" class=\"ml-auto text-xs bg-red-500 text-white px-2 py-1 rounded\">\n {{ item.badge }}\n </span>\n\n <!-- <p-inputSwitch *ngIf=\"item.toggle\" [(ngModel)]=\"item.toggleValue\" class=\"ml-auto\" /> -->\n </div>\n </ng-template>\n </p-menu>\n\n <p-button\n outlined\n icon=\"pi pi-ellipsis-v\"\n class=\"p-button-text p-button-sm\"\n (onClick)=\"menu.toggle($event)\"\n ></p-button>\n </ng-container>\n </ng-container>\n\n </td>\n </tr>\n </ng-template>\n </p-table>\n\n</div>\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.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: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3$1.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: MenuModule }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
|
|
3141
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: GenericTable, isStandalone: true, selector: "lib-generic-table", inputs: { data: "data", columns: "columns", loading: "loading", actions: "actions", actionsMode: "actionsMode", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", globalFilterFields: "globalFilterFields", scrollHeight: "scrollHeight", rowSelectable: "rowSelectable", selection: "selection", paginator: "paginator", showRowSelectionCheckbox: "showRowSelectionCheckbox" }, outputs: { action: "action", pageChange: "pageChange", rowSelect: "rowSelect", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "\r\n<div class=\"flex-1 last:[&>td]:border-0 rounded-lg border border-surface w-full overflow-auto\">\r\n <p-table #dt\r\n [value]=\"data\"\r\n [columns]=\"columns\"\r\n [lazy]=\"true\"\r\n [paginator]=\"paginator\"\r\n [rows]=\"rows\"\r\n [first]=\"first\"\r\n [totalRecords]=\"totalRecords\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n [globalFilterFields]=\"globalFilterFields\"\r\n [loading]=\"loading\"\r\n [scrollable]=\"true\"\r\n [scrollHeight]=\"scrollHeight\"\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 >\r\n\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n <th *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n </th>\r\n <!-- <th style=\"width: 1rem\">\r\n <p-tableHeaderCheckbox />\r\n </th> -->\r\n\r\n <ng-container *ngFor=\"let col of columns\" >\r\n <th *ngIf=\"col.props?.table?.props?.width; else templateName\" [pSortableColumn]=\"col.key\"\r\n class=\"px-4 py-2 text-sm font-medium text-white text-center\"\r\n [style.width]=\"col.props?.table?.props?.width\">\r\n {{ col.props?.label | translate }}\r\n <p-sortIcon [field]=\"col.key\"></p-sortIcon>\r\n </th>\r\n\r\n <ng-template #templateName>\r\n <th class=\"px-4 py-2 text-sm font-medium text-white text-center\">\r\n {{ col.props?.label | translate }}\r\n <p-sortIcon [field]=\"col.key\"></p-sortIcon>\r\n </th>\r\n </ng-template>\r\n</ng-container>\r\n\r\n\r\n <th class=\"px-4 py-2 text-sm font-medium text-white text-center\"> {{ 'OPERATIONS' | translate }}</th>\r\n </tr>\r\n </ng-template>\r\n\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\" (click)=\"rowSelect.emit(rowData)\">\r\n <!-- <td style=\"width: 1rem\">\r\n <p-tableCheckbox [value]=\"rowData\" />\r\n </td> -->\r\n <td *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n <p-tableCheckbox [value]=\"rowData\"></p-tableCheckbox>\r\n </td>\r\n <td *ngFor=\"let col of columns_ ; let colIndex = index\"\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 && col.props['table']\r\n && col.props['table']['props'] && col.props['table']['props']['width']\"\r\n\r\n >\r\n\r\n\r\n <!-- \u0625\u0630\u0627 \u0627\u0644\u0639\u0645\u0648\u062F \u0642\u0627\u0628\u0644 \u0644\u0644\u0646\u0642\u0631 -->\r\n\r\n <formly-form\r\n [model]=\"rowData\"\r\n [form]=\"getForm(i, colIndex)\"\r\n [fields]=\"[cloneField(col)]\"\r\n [options]=\"options\">\r\n </formly-form>\r\n\r\n </td>\r\n <td class=\"border-t border-gray-200 px-4 py-2 text-center align-middle\">\r\n <ng-container [ngSwitch]=\"actionsMode\">\r\n <!-- Render buttons -->\r\n <ng-container *ngSwitchCase=\"'buttons'\">\r\n <ng-container *ngFor=\"let act of actions\">\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)\"\r\n ></button>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Render menu -->\r\n <ng-container *ngSwitchCase=\"'menu'\">\r\n <p-menu #menu [model]=\"getMenuItems(rowData)\" [popup]=\"true\" appendTo=\"body\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"flex items-center gap-2 px-2 py-1\">\r\n <i [ngClass]=\"item.icon\" class=\"text-primary-600\" *ngIf=\"item.icon\"></i>\r\n <span class=\"font-medium\">{{ (item.label || '') | translate }}</span>\r\n\r\n <span *ngIf=\"item.badge\" class=\"ml-auto text-xs bg-red-500 text-white px-2 py-1 rounded\">\r\n {{ item.badge }}\r\n </span>\r\n\r\n <!-- <p-inputSwitch *ngIf=\"item.toggle\" [(ngModel)]=\"item.toggleValue\" class=\"ml-auto\" /> -->\r\n </div>\r\n </ng-template>\r\n </p-menu>\r\n\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 </ng-container>\r\n\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n\r\n</div>\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.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: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3$1.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: MenuModule }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
|
|
3112
3142
|
}
|
|
3113
3143
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: GenericTable, decorators: [{
|
|
3114
3144
|
type: Component,
|
|
3115
|
-
args: [{ selector: 'lib-generic-table', imports: [CommonModule, TableModule, ButtonModule, MenuModule, NgForOf, TranslateModule, FormlyField, FormlyForm, NgIf], template: "\n<div class=\"flex-1 last:[&>td]:border-0 rounded-lg border border-surface w-full overflow-auto\">\n <p-table #dt
|
|
3145
|
+
args: [{ selector: 'lib-generic-table', imports: [CommonModule, TableModule, ButtonModule, MenuModule, NgForOf, TranslateModule, FormlyField, FormlyForm, NgIf, TranslatePipe, Menu, Button], template: "\r\n<div class=\"flex-1 last:[&>td]:border-0 rounded-lg border border-surface w-full overflow-auto\">\r\n <p-table #dt\r\n [value]=\"data\"\r\n [columns]=\"columns\"\r\n [lazy]=\"true\"\r\n [paginator]=\"paginator\"\r\n [rows]=\"rows\"\r\n [first]=\"first\"\r\n [totalRecords]=\"totalRecords\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n [globalFilterFields]=\"globalFilterFields\"\r\n [loading]=\"loading\"\r\n [scrollable]=\"true\"\r\n [scrollHeight]=\"scrollHeight\"\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 >\r\n\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n <th *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n </th>\r\n <!-- <th style=\"width: 1rem\">\r\n <p-tableHeaderCheckbox />\r\n </th> -->\r\n\r\n <ng-container *ngFor=\"let col of columns\" >\r\n <th *ngIf=\"col.props?.table?.props?.width; else templateName\" [pSortableColumn]=\"col.key\"\r\n class=\"px-4 py-2 text-sm font-medium text-white text-center\"\r\n [style.width]=\"col.props?.table?.props?.width\">\r\n {{ col.props?.label | translate }}\r\n <p-sortIcon [field]=\"col.key\"></p-sortIcon>\r\n </th>\r\n\r\n <ng-template #templateName>\r\n <th class=\"px-4 py-2 text-sm font-medium text-white text-center\">\r\n {{ col.props?.label | translate }}\r\n <p-sortIcon [field]=\"col.key\"></p-sortIcon>\r\n </th>\r\n </ng-template>\r\n</ng-container>\r\n\r\n\r\n <th class=\"px-4 py-2 text-sm font-medium text-white text-center\"> {{ 'OPERATIONS' | translate }}</th>\r\n </tr>\r\n </ng-template>\r\n\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\" (click)=\"rowSelect.emit(rowData)\">\r\n <!-- <td style=\"width: 1rem\">\r\n <p-tableCheckbox [value]=\"rowData\" />\r\n </td> -->\r\n <td *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n <p-tableCheckbox [value]=\"rowData\"></p-tableCheckbox>\r\n </td>\r\n <td *ngFor=\"let col of columns_ ; let colIndex = index\"\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 && col.props['table']\r\n && col.props['table']['props'] && col.props['table']['props']['width']\"\r\n\r\n >\r\n\r\n\r\n <!-- \u0625\u0630\u0627 \u0627\u0644\u0639\u0645\u0648\u062F \u0642\u0627\u0628\u0644 \u0644\u0644\u0646\u0642\u0631 -->\r\n\r\n <formly-form\r\n [model]=\"rowData\"\r\n [form]=\"getForm(i, colIndex)\"\r\n [fields]=\"[cloneField(col)]\"\r\n [options]=\"options\">\r\n </formly-form>\r\n\r\n </td>\r\n <td class=\"border-t border-gray-200 px-4 py-2 text-center align-middle\">\r\n <ng-container [ngSwitch]=\"actionsMode\">\r\n <!-- Render buttons -->\r\n <ng-container *ngSwitchCase=\"'buttons'\">\r\n <ng-container *ngFor=\"let act of actions\">\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)\"\r\n ></button>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Render menu -->\r\n <ng-container *ngSwitchCase=\"'menu'\">\r\n <p-menu #menu [model]=\"getMenuItems(rowData)\" [popup]=\"true\" appendTo=\"body\">\r\n <ng-template let-item pTemplate=\"item\">\r\n <div class=\"flex items-center gap-2 px-2 py-1\">\r\n <i [ngClass]=\"item.icon\" class=\"text-primary-600\" *ngIf=\"item.icon\"></i>\r\n <span class=\"font-medium\">{{ (item.label || '') | translate }}</span>\r\n\r\n <span *ngIf=\"item.badge\" class=\"ml-auto text-xs bg-red-500 text-white px-2 py-1 rounded\">\r\n {{ item.badge }}\r\n </span>\r\n\r\n <!-- <p-inputSwitch *ngIf=\"item.toggle\" [(ngModel)]=\"item.toggleValue\" class=\"ml-auto\" /> -->\r\n </div>\r\n </ng-template>\r\n </p-menu>\r\n\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 </ng-container>\r\n\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n\r\n</div>\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"] }]
|
|
3116
3146
|
}], propDecorators: { dt: [{
|
|
3117
3147
|
type: ViewChild,
|
|
3118
3148
|
args: ['dt']
|
|
@@ -3150,8 +3180,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
3150
3180
|
type: Input
|
|
3151
3181
|
}], rowSelect: [{
|
|
3152
3182
|
type: Output
|
|
3183
|
+
}], selectionChange: [{
|
|
3184
|
+
type: Output
|
|
3153
3185
|
}], paginator: [{
|
|
3154
3186
|
type: Input
|
|
3187
|
+
}], showRowSelectionCheckbox: [{
|
|
3188
|
+
type: Input
|
|
3155
3189
|
}] } });
|
|
3156
3190
|
|
|
3157
3191
|
class GenericCrudTableComponent {
|
|
@@ -3177,6 +3211,8 @@ class GenericCrudTableComponent {
|
|
|
3177
3211
|
/** تحدد طريقة العرض: 'buttons' أو 'menu' */
|
|
3178
3212
|
actionsMode = 'buttons';
|
|
3179
3213
|
action = new EventEmitter();
|
|
3214
|
+
bulkAction = new EventEmitter();
|
|
3215
|
+
singleAction = new EventEmitter();
|
|
3180
3216
|
// البحث
|
|
3181
3217
|
// Search
|
|
3182
3218
|
filters;
|
|
@@ -3206,6 +3242,19 @@ class GenericCrudTableComponent {
|
|
|
3206
3242
|
paginator = true;
|
|
3207
3243
|
service;
|
|
3208
3244
|
idField = 'id';
|
|
3245
|
+
showRowSelectionCheckbox = false;
|
|
3246
|
+
bulkActionButtons = [];
|
|
3247
|
+
singleActionButtons = [];
|
|
3248
|
+
_selectedRows = [];
|
|
3249
|
+
get isSingleItemSelected() {
|
|
3250
|
+
return this._selectedRows.length === 1;
|
|
3251
|
+
}
|
|
3252
|
+
get isMultipleItemSelected() {
|
|
3253
|
+
return this._selectedRows.length > 1;
|
|
3254
|
+
}
|
|
3255
|
+
get selectedItems() {
|
|
3256
|
+
return this._selectedRows;
|
|
3257
|
+
}
|
|
3209
3258
|
/** للتحكم بإظهار زر الإضافة */
|
|
3210
3259
|
showAddButton = true;
|
|
3211
3260
|
/** الأيقونة الافتراضية لزر الإضافة */
|
|
@@ -3316,8 +3365,25 @@ class GenericCrudTableComponent {
|
|
|
3316
3365
|
trackByIdx(index, item) {
|
|
3317
3366
|
return index;
|
|
3318
3367
|
}
|
|
3368
|
+
onSingleItemAction(btn) {
|
|
3369
|
+
if (!this.isSingleItemSelected)
|
|
3370
|
+
return;
|
|
3371
|
+
const selectedItem = this._selectedRows[0];
|
|
3372
|
+
this.singleAction.emit({
|
|
3373
|
+
name: btn.actionName ?? 'singleAction',
|
|
3374
|
+
item: selectedItem
|
|
3375
|
+
});
|
|
3376
|
+
}
|
|
3377
|
+
onInternalBulkAction(btn) {
|
|
3378
|
+
if (!this.isMultipleItemSelected)
|
|
3379
|
+
return;
|
|
3380
|
+
this.bulkAction.emit({
|
|
3381
|
+
name: btn.actionName ?? 'bulkAction',
|
|
3382
|
+
items: [...this._selectedRows] // نرسل نسخة من المصفوفة
|
|
3383
|
+
});
|
|
3384
|
+
}
|
|
3319
3385
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: GenericCrudTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3320
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: GenericCrudTableComponent, isStandalone: true, selector: "app-generic-crud-table", inputs: { data: "data", formFields: "formFields", columns: "columns", isViewMode: "isViewMode", isEditMode: "isEditMode", drawerVisible: "drawerVisible", dialogVisible: "dialogVisible", model: "model", loading: "loading", errorMsg: "errorMsg", errorMessage: "errorMessage", actions: "actions", actionsMode: "actionsMode", filters: "filters", filterModel: "filterModel", showSearch: "showSearch", first: "first", rows: "rows", totalRecords: "totalRecords", rowSelectable: "rowSelectable", scrollHeight: "scrollHeight", paginator: "paginator", service: "service", idField: "idField", showAddButton: "showAddButton", addButtonIcon: "addButtonIcon", addButtonLabel: "addButtonLabel", addButtonPosition: "addButtonPosition", addButtonConfigs: "addButtonConfigs", breadcrumb: "breadcrumb", beforeSave: "beforeSave" }, outputs: { action: "action", search: "search", pageChange: "pageChange", onSearch: "onSearch", visibleChange: "visibleChange", rowSelect: "rowSelect" }, host: { classAttribute: "h-full flex-1 flex flex-col overflow-hidden border border-surface rounded-2xl p-4 bg-white" }, viewQueries: [{ propertyName: "genericTable", first: true, predicate: ["genericTable"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n <div class=\"flex items-start gap-2 justify-between\">\r\n <div>\r\n <!-- <div class=\"text-2xl leading-8 font-medium bg-slate-800 p-4 rounded-md\">\r\n <p-breadcrumb\r\n [model]=\"breadcrumb_\"\r\n [home]=\"home\"\r\n styleClass=\"custom-breadcrumb\"\r\n ></p-breadcrumb>\r\n </div> -->\r\n\r\n<app-breadcrumb [breadcrumb]=\"breadcrumb_\"></app-breadcrumb>\r\n\r\n </div>\r\n\r\n\r\n <!-- <ng-container *ngIf=\"isSingleItemSelected\">\r\n\u00A0 \u00A0 \u00A0 <ng-container *ngFor=\"let btn of singleActionButtons; trackBy: trackByIdx\">\r\n\u00A0 \u00A0 \u00A0 \u00A0 <lib-generic-button\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [icon]=\"btn.icon\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [label]=\"btn.label | translate\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [variant]=\"btn.variant\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [size]=\"btn.size\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [permission]=\"btn.permission\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 (clicked)=\"onSingleItemAction(btn)\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 ></lib-generic-button>\r\n\u00A0 \u00A0 \u00A0 </ng-container>\r\n\u00A0 \u00A0 </ng-container>\r\n\r\n <ng-container *ngIf=\"selectedItems.length > 0\">\r\n <ng-container *ngFor=\"let btn of bulkActionButtons; trackBy: trackByIdx\">\r\n <lib-generic-button\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [size]=\"btn.size\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"onInternalBulkAction(btn)\"\r\n ></lib-generic-button>\r\n </ng-container>\r\n </ng-container> -->\r\n\r\n <ng-container *ngFor=\"let btn of addButtonConfigs; trackBy: trackByIdx\">\r\n <lib-generic-button\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [size]=\"btn.size\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\" this.action.emit({ name: btn.actionName ?? 'add', row: null! });\"\r\n ></lib-generic-button>\r\n </ng-container>\r\n\r\n <p-button\r\n icon=\"pi pi-circle-fill text-green-500\" *ngIf=\"showAddButton && addButtonConfigs.length == 0\"\r\n [label]=\"(addButtonLabel | translate)\r\n \"(onClick)=\"action.emit({ name: 'add', row: null! })\"\r\n outlined severity=\"secondary\" />\r\n </div>\r\n <div class=\"mt-2 mb-4 flex items-center justify-between\">\r\n\r\n <ng-container *ngIf=\"showSearch && filters; else emptySearch\">\r\n <lib-generic-search\r\n [model]=\"filterModel\"\r\n [fields]=\"filters\"\r\n (search)=\"applySearch($event)\"\r\n (reset)=\"applySearch('')\"\r\n ></lib-generic-search>\r\n </ng-container>\r\n\r\n <ng-template #emptySearch>\r\n <!-- Render a dummy div to preserve expected DOM shape -->\r\n <!-- <div class=\"min-h-[2.5rem] w-[12rem]\"></div> -->\r\n </ng-template>\r\n\r\n <div class=\"flex items-center gap-3\">\r\n\r\n <p-button icon=\"pi pi-refresh\" outlined severity=\"secondary\" (onClick)=\"applySearch('')\" />\r\n <p-divider layout=\"vertical\" class=\"m-0 p-0\" />\r\n <p-button icon=\"pi pi-sort\" outlined severity=\"secondary\" />\r\n <p-button label=\"1 of 15\" outlined severity=\"secondary\" />\r\n <p-button icon=\"pi pi-chevron-right\" outlined severity=\"secondary\" />\r\n <p-button icon=\"pi pi-chevron-left\" outlined severity=\"secondary\" />\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n<lib-generic-table\r\n [data]=\"data\"\r\n [columns]=\"columns\"\r\n [paginator]=\"paginator\"\r\n [loading]=\"loading\"\r\n [actions]=\"actions\"\r\n [actionsMode]=\"actionsMode\"\r\n [first]=\"first\"\r\n [rows]=\"rows\"\r\n [totalRecords]=\"totalRecords\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\"\r\n [globalFilterFields]=\"globalFilterFields\"\r\n [scrollHeight]=\"scrollHeight\"\r\n (action)=\"action.emit($event)\"\r\n (pageChange)=\"onLazyLoad($event)\"\r\n [rowSelectable]=\"rowSelectable\"\r\n (rowSelect)=\"onRowClick($event)\"\r\n #genericTable\r\n></lib-generic-table>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<p-drawer *ngIf=\"drawerVisible\"\r\n[(visible)]=\"drawerVisible\" [closable]=\"true\"\r\n[dismissible]=\"false\" [closeOnEscape]=\"true\"\r\n(visibleChange)=\"visibleChange.emit($event)\"\r\nstyleClass=\"!w-full md:!w-80 lg:!w-[40rem]\">\r\n <!-- Header -->\r\n <ng-template pTemplate=\"header\">\r\n <div class=\"flex items-center justify-between w-full\">\r\n <div class=\"flex items-center gap-2\">\r\n <i class=\"pi pi-arrow-left cursor-pointer text-xl\" (click)=\"visibleChange.emit(false)\"></i>\r\n <span class=\"font-bold text-lg\">{{ isEditMode ? '\u062A\u0639\u062F\u064A\u0644 ' : '\u0625\u0636\u0627\u0641\u0629' }}</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n<form *ngIf=\"form\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" class=\"p-4\">\r\n <formly-form [form]=\"form\" [fields]=\"formFields_\" [model]=\"model\" [options]=\"options\"></formly-form>\r\n </form>\r\n\r\n <!-- Footer -->\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"flex justify-end gap-2\">\r\n <button\r\n pButton\r\n [label]=\"isEditMode ? ('UPDATE' | translate) : ('SAVE' | translate)\"\r\n [disabled]=\"loading || form.invalid\"\r\n [loading]=\"loading\"\r\n size=\"large\"\r\n [attr.type]=\"'submit'\"\r\n (click)=\"onSubmit()\">\r\n </button>\r\n\r\n <button\r\n pButton\r\n label=\"{{ 'CANCEL' | translate }}\"\r\n severity=\"danger\"\r\n size=\"large\"\r\n (click)=\"visibleChange.emit(false)\">\r\n </button>\r\n </div>\r\n </ng-template>\r\n</p-drawer>\r\n\r\n<p-dialog\r\n *ngIf=\"dialogVisible\"\r\n [(visible)]=\"dialogVisible\"\r\n [modal]=\"true\"\r\n [closable]=\"true\"\r\n [dismissableMask]=\"true\"\r\n [closeOnEscape]=\"true\"\r\n (visibleChange)=\"visibleChange.emit($event)\"\r\n [style]=\"{ width: '95vw', maxWidth: '40rem' }\"\r\n [header]=\"viewHeaderTitle\"\r\n>\r\n<!-- backdrop-blur-sm -->\r\n <div class=\"relative\">\r\n <!-- Only visible in view mode: disables interaction and adds blur effect -->\r\n <div\r\n *ngIf=\"isViewMode\"\r\n class=\"absolute inset-0 z-10 bg-white/50 pointer-events-auto cursor-not-allowed rounded-md\">\r\n </div>\r\n\r\n <!-- Form -->\r\n <form *ngIf=\"form\" [formGroup]=\"form\" class=\"p-4\">\r\n <formly-form\r\n [form]=\"form\"\r\n [fields]=\"formFields_\"\r\n [model]=\"model\"\r\n [options]=\"options\">\r\n </formly-form>\r\n </form>\r\n </div>\r\n <!-- Footer -->\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"flex justify-end\">\r\n <button\r\n pButton\r\n label=\"{{ 'CLOSE' | translate }}\"\r\n severity=\"secondary\"\r\n size=\"large\"\r\n (click)=\"visibleChange.emit(false)\">\r\n </button>\r\n </div>\r\n </ng-template>\r\n</p-dialog>\r\n\r\n\r\n\r\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: "ngmodule", type: TableModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: ButtonModule }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3$1.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: GenericSearch, selector: "lib-generic-search", inputs: ["placeholder", "model", "fields"], outputs: ["search"] }, { kind: "component", type: GenericTable, selector: "lib-generic-table", inputs: ["data", "columns", "loading", "actions", "actionsMode", "first", "rows", "totalRecords", "sortField", "sortOrder", "globalFilterFields", "scrollHeight", "rowSelectable", "selection", "paginator"], outputs: ["action", "pageChange", "rowSelect"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4$2.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i5$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: BreadcrumbComponent, selector: "app-breadcrumb", inputs: ["breadcrumb"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i8.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: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
|
|
3386
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: GenericCrudTableComponent, isStandalone: true, selector: "app-generic-crud-table", inputs: { data: "data", formFields: "formFields", columns: "columns", isViewMode: "isViewMode", isEditMode: "isEditMode", drawerVisible: "drawerVisible", dialogVisible: "dialogVisible", model: "model", loading: "loading", errorMsg: "errorMsg", errorMessage: "errorMessage", actions: "actions", actionsMode: "actionsMode", filters: "filters", filterModel: "filterModel", showSearch: "showSearch", first: "first", rows: "rows", totalRecords: "totalRecords", rowSelectable: "rowSelectable", scrollHeight: "scrollHeight", paginator: "paginator", service: "service", idField: "idField", showRowSelectionCheckbox: "showRowSelectionCheckbox", bulkActionButtons: "bulkActionButtons", singleActionButtons: "singleActionButtons", showAddButton: "showAddButton", addButtonIcon: "addButtonIcon", addButtonLabel: "addButtonLabel", addButtonPosition: "addButtonPosition", addButtonConfigs: "addButtonConfigs", breadcrumb: "breadcrumb", beforeSave: "beforeSave" }, outputs: { action: "action", bulkAction: "bulkAction", singleAction: "singleAction", search: "search", pageChange: "pageChange", onSearch: "onSearch", visibleChange: "visibleChange", rowSelect: "rowSelect" }, host: { classAttribute: "h-full flex-1 flex flex-col overflow-hidden border border-surface rounded-2xl p-4 bg-white" }, viewQueries: [{ propertyName: "genericTable", first: true, predicate: ["genericTable"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n <div class=\"flex items-start gap-2 justify-between\">\r\n <div>\r\n <!-- <div class=\"text-2xl leading-8 font-medium bg-slate-800 p-4 rounded-md\">\r\n <p-breadcrumb\r\n [model]=\"breadcrumb_\"\r\n [home]=\"home\"\r\n styleClass=\"custom-breadcrumb\"\r\n ></p-breadcrumb>\r\n </div> -->\r\n\r\n<app-breadcrumb [breadcrumb]=\"breadcrumb_\"></app-breadcrumb>\r\n\r\n </div>\r\n\r\n\r\n <ng-container *ngIf=\"isSingleItemSelected\">\r\n\u00A0 \u00A0 \u00A0 <ng-container *ngFor=\"let btn of singleActionButtons; trackBy: trackByIdx\">\r\n\u00A0 \u00A0 \u00A0 \u00A0 <lib-generic-button\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [icon]=\"btn.icon\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [label]=\"btn.label | translate\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [variant]=\"btn.variant\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [size]=\"btn.size\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [permission]=\"btn.permission\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 (clicked)=\"onSingleItemAction(btn)\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 ></lib-generic-button>\r\n\u00A0 \u00A0 \u00A0 </ng-container>\r\n\u00A0 \u00A0 </ng-container>\r\n\r\n <ng-container *ngIf=\"selectedItems.length > 0\">\r\n <ng-container *ngFor=\"let btn of bulkActionButtons; trackBy: trackByIdx\">\r\n <lib-generic-button\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [size]=\"btn.size\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"onInternalBulkAction(btn)\"\r\n ></lib-generic-button>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let btn of addButtonConfigs; trackBy: trackByIdx\">\r\n <lib-generic-button\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [size]=\"btn.size\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\" this.action.emit({ name: btn.actionName ?? 'add', row: null! });\"\r\n ></lib-generic-button>\r\n </ng-container>\r\n\r\n <p-button\r\n icon=\"pi pi-circle-fill text-green-500\" *ngIf=\"showAddButton && addButtonConfigs.length == 0\"\r\n [label]=\"(addButtonLabel | translate)\r\n \"(onClick)=\"action.emit({ name: 'add', row: null! })\"\r\n outlined severity=\"secondary\" />\r\n </div>\r\n <div class=\"mt-2 mb-4 flex items-center justify-between\">\r\n\r\n <ng-container *ngIf=\"showSearch && filters; else emptySearch\">\r\n <lib-generic-search\r\n [model]=\"filterModel\"\r\n [fields]=\"filters\"\r\n (search)=\"applySearch($event)\"\r\n (reset)=\"applySearch('')\"\r\n ></lib-generic-search>\r\n </ng-container>\r\n\r\n <ng-template #emptySearch>\r\n <!-- Render a dummy div to preserve expected DOM shape -->\r\n <!-- <div class=\"min-h-[2.5rem] w-[12rem]\"></div> -->\r\n </ng-template>\r\n\r\n <div class=\"flex items-center gap-3\">\r\n\r\n <p-button icon=\"pi pi-refresh\" outlined severity=\"secondary\" (onClick)=\"applySearch('')\" />\r\n <p-divider layout=\"vertical\" class=\"m-0 p-0\" />\r\n <p-button icon=\"pi pi-sort\" outlined severity=\"secondary\" />\r\n <p-button label=\"1 of 15\" outlined severity=\"secondary\" />\r\n <p-button icon=\"pi pi-chevron-right\" outlined severity=\"secondary\" />\r\n <p-button icon=\"pi pi-chevron-left\" outlined severity=\"secondary\" />\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n<lib-generic-table\r\n [data]=\"data\"\r\n [columns]=\"columns\"\r\n [paginator]=\"paginator\"\r\n [loading]=\"loading\"\r\n [actions]=\"actions\"\r\n [actionsMode]=\"actionsMode\"\r\n [first]=\"first\"\r\n [rows]=\"rows\"\r\n [totalRecords]=\"totalRecords\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\"\r\n [globalFilterFields]=\"globalFilterFields\"\r\n [scrollHeight]=\"scrollHeight\"\r\n [showRowSelectionCheckbox]=\"showRowSelectionCheckbox\"\r\n (action)=\"action.emit($event)\"\r\n (pageChange)=\"onLazyLoad($event)\"\r\n [rowSelectable]=\"rowSelectable\"\r\n (rowSelect)=\"onRowClick($event)\"\r\n [(selection)]=\"_selectedRows\"\r\n #genericTable\r\n></lib-generic-table>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<p-drawer *ngIf=\"drawerVisible\"\r\n[(visible)]=\"drawerVisible\" [closable]=\"true\"\r\n[dismissible]=\"false\" [closeOnEscape]=\"true\"\r\n(visibleChange)=\"visibleChange.emit($event)\"\r\nstyleClass=\"!w-full md:!w-80 lg:!w-[40rem]\">\r\n <!-- Header -->\r\n <ng-template pTemplate=\"header\">\r\n <div class=\"flex items-center justify-between w-full\">\r\n <div class=\"flex items-center gap-2\">\r\n <i class=\"pi pi-arrow-left cursor-pointer text-xl\" (click)=\"visibleChange.emit(false)\"></i>\r\n <span class=\"font-bold text-lg\">{{ isEditMode ? '\u062A\u0639\u062F\u064A\u0644 ' : '\u0625\u0636\u0627\u0641\u0629' }}</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n<form *ngIf=\"form\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" class=\"p-4\">\r\n <formly-form [form]=\"form\" [fields]=\"formFields_\" [model]=\"model\" [options]=\"options\"></formly-form>\r\n </form>\r\n\r\n <!-- Footer -->\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"flex justify-end gap-2\">\r\n <button\r\n pButton\r\n [label]=\"isEditMode ? ('UPDATE' | translate) : ('SAVE' | translate)\"\r\n [disabled]=\"loading || form.invalid\"\r\n [loading]=\"loading\"\r\n size=\"large\"\r\n [attr.type]=\"'submit'\"\r\n (click)=\"onSubmit()\">\r\n </button>\r\n\r\n <button\r\n pButton\r\n label=\"{{ 'CANCEL' | translate }}\"\r\n severity=\"danger\"\r\n size=\"large\"\r\n (click)=\"visibleChange.emit(false)\">\r\n </button>\r\n </div>\r\n </ng-template>\r\n</p-drawer>\r\n\r\n<p-dialog\r\n *ngIf=\"dialogVisible\"\r\n [(visible)]=\"dialogVisible\"\r\n [modal]=\"true\"\r\n [closable]=\"true\"\r\n [dismissableMask]=\"true\"\r\n [closeOnEscape]=\"true\"\r\n (visibleChange)=\"visibleChange.emit($event)\"\r\n [style]=\"{ width: '95vw', maxWidth: '40rem' }\"\r\n [header]=\"viewHeaderTitle\"\r\n>\r\n<!-- backdrop-blur-sm -->\r\n <div class=\"relative\">\r\n <!-- Only visible in view mode: disables interaction and adds blur effect -->\r\n <div\r\n *ngIf=\"isViewMode\"\r\n class=\"absolute inset-0 z-10 bg-white/50 pointer-events-auto cursor-not-allowed rounded-md\">\r\n </div>\r\n\r\n <!-- Form -->\r\n <form *ngIf=\"form\" [formGroup]=\"form\" class=\"p-4\">\r\n <formly-form\r\n [form]=\"form\"\r\n [fields]=\"formFields_\"\r\n [model]=\"model\"\r\n [options]=\"options\">\r\n </formly-form>\r\n </form>\r\n </div>\r\n <!-- Footer -->\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"flex justify-end\">\r\n <button\r\n pButton\r\n label=\"{{ 'CLOSE' | translate }}\"\r\n severity=\"secondary\"\r\n size=\"large\"\r\n (click)=\"visibleChange.emit(false)\">\r\n </button>\r\n </div>\r\n </ng-template>\r\n</p-dialog>\r\n\r\n\r\n\r\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: "ngmodule", type: TableModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: ButtonModule }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3$1.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: GenericSearch, selector: "lib-generic-search", inputs: ["placeholder", "model", "fields"], outputs: ["search"] }, { kind: "component", type: GenericTable, selector: "lib-generic-table", inputs: ["data", "columns", "loading", "actions", "actionsMode", "first", "rows", "totalRecords", "sortField", "sortOrder", "globalFilterFields", "scrollHeight", "rowSelectable", "selection", "paginator", "showRowSelectionCheckbox"], outputs: ["action", "pageChange", "rowSelect", "selectionChange"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4$2.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i5$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: BreadcrumbComponent, selector: "app-breadcrumb", inputs: ["breadcrumb"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i8.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: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
|
|
3321
3387
|
}
|
|
3322
3388
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: GenericCrudTableComponent, decorators: [{
|
|
3323
3389
|
type: Component,
|
|
@@ -3342,10 +3408,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
3342
3408
|
BreadcrumbComponent,
|
|
3343
3409
|
DialogModule,
|
|
3344
3410
|
Button,
|
|
3345
|
-
Divider
|
|
3411
|
+
Divider,
|
|
3412
|
+
Drawer,
|
|
3413
|
+
TranslatePipe
|
|
3346
3414
|
], host: {
|
|
3347
3415
|
class: 'h-full flex-1 flex flex-col overflow-hidden border border-surface rounded-2xl p-4 bg-white'
|
|
3348
|
-
}, template: "\r\n <div class=\"flex items-start gap-2 justify-between\">\r\n <div>\r\n <!-- <div class=\"text-2xl leading-8 font-medium bg-slate-800 p-4 rounded-md\">\r\n <p-breadcrumb\r\n [model]=\"breadcrumb_\"\r\n [home]=\"home\"\r\n styleClass=\"custom-breadcrumb\"\r\n ></p-breadcrumb>\r\n </div> -->\r\n\r\n<app-breadcrumb [breadcrumb]=\"breadcrumb_\"></app-breadcrumb>\r\n\r\n </div>\r\n\r\n\r\n
|
|
3416
|
+
}, template: "\r\n <div class=\"flex items-start gap-2 justify-between\">\r\n <div>\r\n <!-- <div class=\"text-2xl leading-8 font-medium bg-slate-800 p-4 rounded-md\">\r\n <p-breadcrumb\r\n [model]=\"breadcrumb_\"\r\n [home]=\"home\"\r\n styleClass=\"custom-breadcrumb\"\r\n ></p-breadcrumb>\r\n </div> -->\r\n\r\n<app-breadcrumb [breadcrumb]=\"breadcrumb_\"></app-breadcrumb>\r\n\r\n </div>\r\n\r\n\r\n <ng-container *ngIf=\"isSingleItemSelected\">\r\n\u00A0 \u00A0 \u00A0 <ng-container *ngFor=\"let btn of singleActionButtons; trackBy: trackByIdx\">\r\n\u00A0 \u00A0 \u00A0 \u00A0 <lib-generic-button\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [icon]=\"btn.icon\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [label]=\"btn.label | translate\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [variant]=\"btn.variant\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [size]=\"btn.size\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [permission]=\"btn.permission\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 (clicked)=\"onSingleItemAction(btn)\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 ></lib-generic-button>\r\n\u00A0 \u00A0 \u00A0 </ng-container>\r\n\u00A0 \u00A0 </ng-container>\r\n\r\n <ng-container *ngIf=\"selectedItems.length > 0\">\r\n <ng-container *ngFor=\"let btn of bulkActionButtons; trackBy: trackByIdx\">\r\n <lib-generic-button\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [size]=\"btn.size\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"onInternalBulkAction(btn)\"\r\n ></lib-generic-button>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let btn of addButtonConfigs; trackBy: trackByIdx\">\r\n <lib-generic-button\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [size]=\"btn.size\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\" this.action.emit({ name: btn.actionName ?? 'add', row: null! });\"\r\n ></lib-generic-button>\r\n </ng-container>\r\n\r\n <p-button\r\n icon=\"pi pi-circle-fill text-green-500\" *ngIf=\"showAddButton && addButtonConfigs.length == 0\"\r\n [label]=\"(addButtonLabel | translate)\r\n \"(onClick)=\"action.emit({ name: 'add', row: null! })\"\r\n outlined severity=\"secondary\" />\r\n </div>\r\n <div class=\"mt-2 mb-4 flex items-center justify-between\">\r\n\r\n <ng-container *ngIf=\"showSearch && filters; else emptySearch\">\r\n <lib-generic-search\r\n [model]=\"filterModel\"\r\n [fields]=\"filters\"\r\n (search)=\"applySearch($event)\"\r\n (reset)=\"applySearch('')\"\r\n ></lib-generic-search>\r\n </ng-container>\r\n\r\n <ng-template #emptySearch>\r\n <!-- Render a dummy div to preserve expected DOM shape -->\r\n <!-- <div class=\"min-h-[2.5rem] w-[12rem]\"></div> -->\r\n </ng-template>\r\n\r\n <div class=\"flex items-center gap-3\">\r\n\r\n <p-button icon=\"pi pi-refresh\" outlined severity=\"secondary\" (onClick)=\"applySearch('')\" />\r\n <p-divider layout=\"vertical\" class=\"m-0 p-0\" />\r\n <p-button icon=\"pi pi-sort\" outlined severity=\"secondary\" />\r\n <p-button label=\"1 of 15\" outlined severity=\"secondary\" />\r\n <p-button icon=\"pi pi-chevron-right\" outlined severity=\"secondary\" />\r\n <p-button icon=\"pi pi-chevron-left\" outlined severity=\"secondary\" />\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n<lib-generic-table\r\n [data]=\"data\"\r\n [columns]=\"columns\"\r\n [paginator]=\"paginator\"\r\n [loading]=\"loading\"\r\n [actions]=\"actions\"\r\n [actionsMode]=\"actionsMode\"\r\n [first]=\"first\"\r\n [rows]=\"rows\"\r\n [totalRecords]=\"totalRecords\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\"\r\n [globalFilterFields]=\"globalFilterFields\"\r\n [scrollHeight]=\"scrollHeight\"\r\n [showRowSelectionCheckbox]=\"showRowSelectionCheckbox\"\r\n (action)=\"action.emit($event)\"\r\n (pageChange)=\"onLazyLoad($event)\"\r\n [rowSelectable]=\"rowSelectable\"\r\n (rowSelect)=\"onRowClick($event)\"\r\n [(selection)]=\"_selectedRows\"\r\n #genericTable\r\n></lib-generic-table>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<p-drawer *ngIf=\"drawerVisible\"\r\n[(visible)]=\"drawerVisible\" [closable]=\"true\"\r\n[dismissible]=\"false\" [closeOnEscape]=\"true\"\r\n(visibleChange)=\"visibleChange.emit($event)\"\r\nstyleClass=\"!w-full md:!w-80 lg:!w-[40rem]\">\r\n <!-- Header -->\r\n <ng-template pTemplate=\"header\">\r\n <div class=\"flex items-center justify-between w-full\">\r\n <div class=\"flex items-center gap-2\">\r\n <i class=\"pi pi-arrow-left cursor-pointer text-xl\" (click)=\"visibleChange.emit(false)\"></i>\r\n <span class=\"font-bold text-lg\">{{ isEditMode ? '\u062A\u0639\u062F\u064A\u0644 ' : '\u0625\u0636\u0627\u0641\u0629' }}</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n<form *ngIf=\"form\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" class=\"p-4\">\r\n <formly-form [form]=\"form\" [fields]=\"formFields_\" [model]=\"model\" [options]=\"options\"></formly-form>\r\n </form>\r\n\r\n <!-- Footer -->\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"flex justify-end gap-2\">\r\n <button\r\n pButton\r\n [label]=\"isEditMode ? ('UPDATE' | translate) : ('SAVE' | translate)\"\r\n [disabled]=\"loading || form.invalid\"\r\n [loading]=\"loading\"\r\n size=\"large\"\r\n [attr.type]=\"'submit'\"\r\n (click)=\"onSubmit()\">\r\n </button>\r\n\r\n <button\r\n pButton\r\n label=\"{{ 'CANCEL' | translate }}\"\r\n severity=\"danger\"\r\n size=\"large\"\r\n (click)=\"visibleChange.emit(false)\">\r\n </button>\r\n </div>\r\n </ng-template>\r\n</p-drawer>\r\n\r\n<p-dialog\r\n *ngIf=\"dialogVisible\"\r\n [(visible)]=\"dialogVisible\"\r\n [modal]=\"true\"\r\n [closable]=\"true\"\r\n [dismissableMask]=\"true\"\r\n [closeOnEscape]=\"true\"\r\n (visibleChange)=\"visibleChange.emit($event)\"\r\n [style]=\"{ width: '95vw', maxWidth: '40rem' }\"\r\n [header]=\"viewHeaderTitle\"\r\n>\r\n<!-- backdrop-blur-sm -->\r\n <div class=\"relative\">\r\n <!-- Only visible in view mode: disables interaction and adds blur effect -->\r\n <div\r\n *ngIf=\"isViewMode\"\r\n class=\"absolute inset-0 z-10 bg-white/50 pointer-events-auto cursor-not-allowed rounded-md\">\r\n </div>\r\n\r\n <!-- Form -->\r\n <form *ngIf=\"form\" [formGroup]=\"form\" class=\"p-4\">\r\n <formly-form\r\n [form]=\"form\"\r\n [fields]=\"formFields_\"\r\n [model]=\"model\"\r\n [options]=\"options\">\r\n </formly-form>\r\n </form>\r\n </div>\r\n <!-- Footer -->\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"flex justify-end\">\r\n <button\r\n pButton\r\n label=\"{{ 'CLOSE' | translate }}\"\r\n severity=\"secondary\"\r\n size=\"large\"\r\n (click)=\"visibleChange.emit(false)\">\r\n </button>\r\n </div>\r\n </ng-template>\r\n</p-dialog>\r\n\r\n\r\n\r\n" }]
|
|
3349
3417
|
}], propDecorators: { genericTable: [{
|
|
3350
3418
|
type: ViewChild,
|
|
3351
3419
|
args: ['genericTable']
|
|
@@ -3377,6 +3445,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
3377
3445
|
type: Input
|
|
3378
3446
|
}], action: [{
|
|
3379
3447
|
type: Output
|
|
3448
|
+
}], bulkAction: [{
|
|
3449
|
+
type: Output
|
|
3450
|
+
}], singleAction: [{
|
|
3451
|
+
type: Output
|
|
3380
3452
|
}], filters: [{
|
|
3381
3453
|
type: Input
|
|
3382
3454
|
}], filterModel: [{
|
|
@@ -3409,6 +3481,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
3409
3481
|
type: Input
|
|
3410
3482
|
}], idField: [{
|
|
3411
3483
|
type: Input
|
|
3484
|
+
}], showRowSelectionCheckbox: [{
|
|
3485
|
+
type: Input
|
|
3486
|
+
}], bulkActionButtons: [{
|
|
3487
|
+
type: Input
|
|
3488
|
+
}], singleActionButtons: [{
|
|
3489
|
+
type: Input
|
|
3412
3490
|
}], showAddButton: [{
|
|
3413
3491
|
type: Input
|
|
3414
3492
|
}], addButtonIcon: [{
|
|
@@ -5371,9 +5449,7 @@ class ClickableLabelTypeComponent extends FieldType {
|
|
|
5371
5449
|
}
|
|
5372
5450
|
handleCellClick(col, model, event) {
|
|
5373
5451
|
event.stopPropagation();
|
|
5374
|
-
|
|
5375
|
-
col.clickAction(model, event); // <--- تمرير الـ event
|
|
5376
|
-
}
|
|
5452
|
+
col?.clickAction?.(model, event);
|
|
5377
5453
|
}
|
|
5378
5454
|
getCellValue(col, model) {
|
|
5379
5455
|
const field = this.key;
|
|
@@ -5381,22 +5457,22 @@ class ClickableLabelTypeComponent extends FieldType {
|
|
|
5381
5457
|
return pipeFn ? pipeFn(model[col.key]) : model[field];
|
|
5382
5458
|
}
|
|
5383
5459
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ClickableLabelTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5384
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ClickableLabelTypeComponent, isStandalone: true, selector: "formly-clickable-label-type", usesInheritance: true, ngImport: i0, template: `
|
|
5385
|
-
|
|
5386
|
-
<span class="cursor-pointer hover:underline hover:text-blue-600 font-bold"
|
|
5387
|
-
(click)="handleCellClick(
|
|
5388
|
-
(mouseenter)="props['hoverable'] && onCellHover(props, model, $event)"
|
|
5389
|
-
(mouseleave)="props['hoverable'] && onCellLeave(props, model, $event)"
|
|
5390
|
-
>
|
|
5391
|
-
@if(props['formatter']){
|
|
5392
|
-
<span [innerHTML]="props['formatter'](model)"></span>
|
|
5393
|
-
}
|
|
5394
|
-
@else{
|
|
5395
|
-
{{ getCellValue(props, model) }}
|
|
5396
|
-
}
|
|
5397
|
-
|
|
5398
|
-
|
|
5399
|
-
</span>
|
|
5460
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ClickableLabelTypeComponent, isStandalone: true, selector: "formly-clickable-label-type", usesInheritance: true, ngImport: i0, template: `
|
|
5461
|
+
|
|
5462
|
+
<span class="cursor-pointer hover:underline hover:text-blue-600 font-bold"
|
|
5463
|
+
(click)="handleCellClick(props,model, $event)"
|
|
5464
|
+
(mouseenter)="props['hoverable'] && onCellHover(props, model, $event)"
|
|
5465
|
+
(mouseleave)="props['hoverable'] && onCellLeave(props, model, $event)"
|
|
5466
|
+
>
|
|
5467
|
+
@if(props['formatter']){
|
|
5468
|
+
<span [innerHTML]="props['formatter'](model)"></span>
|
|
5469
|
+
}
|
|
5470
|
+
@else{
|
|
5471
|
+
{{ getCellValue(props, model) }}
|
|
5472
|
+
}
|
|
5473
|
+
|
|
5474
|
+
|
|
5475
|
+
</span>
|
|
5400
5476
|
`, isInline: true });
|
|
5401
5477
|
}
|
|
5402
5478
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ClickableLabelTypeComponent, decorators: [{
|
|
@@ -5405,22 +5481,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
5405
5481
|
selector: 'formly-clickable-label-type',
|
|
5406
5482
|
standalone: true,
|
|
5407
5483
|
// imports:[NgIf],
|
|
5408
|
-
template: `
|
|
5409
|
-
|
|
5410
|
-
<span class="cursor-pointer hover:underline hover:text-blue-600 font-bold"
|
|
5411
|
-
(click)="handleCellClick(
|
|
5412
|
-
(mouseenter)="props['hoverable'] && onCellHover(props, model, $event)"
|
|
5413
|
-
(mouseleave)="props['hoverable'] && onCellLeave(props, model, $event)"
|
|
5414
|
-
>
|
|
5415
|
-
@if(props['formatter']){
|
|
5416
|
-
<span [innerHTML]="props['formatter'](model)"></span>
|
|
5417
|
-
}
|
|
5418
|
-
@else{
|
|
5419
|
-
{{ getCellValue(props, model) }}
|
|
5420
|
-
}
|
|
5421
|
-
|
|
5422
|
-
|
|
5423
|
-
</span>
|
|
5484
|
+
template: `
|
|
5485
|
+
|
|
5486
|
+
<span class="cursor-pointer hover:underline hover:text-blue-600 font-bold"
|
|
5487
|
+
(click)="handleCellClick(props,model, $event)"
|
|
5488
|
+
(mouseenter)="props['hoverable'] && onCellHover(props, model, $event)"
|
|
5489
|
+
(mouseleave)="props['hoverable'] && onCellLeave(props, model, $event)"
|
|
5490
|
+
>
|
|
5491
|
+
@if(props['formatter']){
|
|
5492
|
+
<span [innerHTML]="props['formatter'](model)"></span>
|
|
5493
|
+
}
|
|
5494
|
+
@else{
|
|
5495
|
+
{{ getCellValue(props, model) }}
|
|
5496
|
+
}
|
|
5497
|
+
|
|
5498
|
+
|
|
5499
|
+
</span>
|
|
5424
5500
|
`,
|
|
5425
5501
|
}]
|
|
5426
5502
|
}] });
|