@elite.framework/ng.ui.core 1.0.59 → 1.0.60
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/fesm2022/elite.framework-ng.ui.core-generic-crud-table.mjs +168 -124
- package/fesm2022/elite.framework-ng.ui.core-generic-crud-table.mjs.map +1 -1
- package/fesm2022/elite.framework-ng.ui.core-generic-dialog.mjs +292 -0
- package/fesm2022/elite.framework-ng.ui.core-generic-dialog.mjs.map +1 -0
- package/fesm2022/elite.framework-ng.ui.core-generic-selector.mjs +100 -16
- package/fesm2022/elite.framework-ng.ui.core-generic-selector.mjs.map +1 -1
- package/generic-crud-table/index.d.ts +48 -16
- package/generic-dialog/README.md +3 -0
- package/generic-dialog/index.d.ts +92 -0
- package/generic-selector/index.d.ts +15 -2
- package/package.json +24 -20
|
@@ -1,30 +1,26 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { NgModule,
|
|
2
|
+
import { NgModule, EventEmitter, Output, Input, Component, inject, ViewChild } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import { GenericButtonModule, GenericButton } from '@elite.framework/ng.ui.core/generic-button';
|
|
6
|
-
import * as
|
|
6
|
+
import * as i3 from 'primeng/divider';
|
|
7
7
|
import { DividerModule } from 'primeng/divider';
|
|
8
8
|
import { MessageModule } from 'primeng/message';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i2 from 'primeng/button';
|
|
10
10
|
import { ButtonModule } from 'primeng/button';
|
|
11
11
|
import { TableModule } from 'primeng/table';
|
|
12
12
|
import { ToolbarModule } from 'primeng/toolbar';
|
|
13
|
-
import * as
|
|
14
|
-
import {
|
|
15
|
-
import { FormlyForm } from '@ngx-formly/core';
|
|
13
|
+
import * as i4 from '@ngx-translate/core';
|
|
14
|
+
import { TranslateModule, TranslateService } from '@ngx-translate/core';
|
|
16
15
|
import { IconFieldModule } from 'primeng/iconfield';
|
|
17
|
-
import * as i5 from 'primeng/drawer';
|
|
18
16
|
import { DrawerModule } from 'primeng/drawer';
|
|
19
|
-
import * as i7 from 'primeng/dialog';
|
|
20
17
|
import { DialogModule } from 'primeng/dialog';
|
|
21
|
-
import * as i6 from '@angular/forms';
|
|
22
18
|
import { UntypedFormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
23
|
-
import { SwalService } from '@elite.framework/ng.core/services';
|
|
24
|
-
import { BreadcrumbComponent } from '@elite.framework/ng.ui.core/breadcrumb';
|
|
19
|
+
import { SwalService, BaseService } from '@elite.framework/ng.core/services';
|
|
25
20
|
import { GenericTable } from '@elite.framework/ng.ui.core/generic-table';
|
|
21
|
+
import { GenericDialogComponent } from '@elite.framework/ng.ui.core/generic-dialog';
|
|
22
|
+
import { BreadcrumbComponent } from '@elite.framework/ng.ui.core/breadcrumb';
|
|
26
23
|
import { GenericSearch } from '@elite.framework/ng.ui.core/generic-search';
|
|
27
|
-
import * as i2 from 'primeng/api';
|
|
28
24
|
|
|
29
25
|
class GenericCrudTableModule {
|
|
30
26
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericCrudTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -38,8 +34,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
|
|
|
38
34
|
}]
|
|
39
35
|
}] });
|
|
40
36
|
|
|
37
|
+
class GenericCrudHeaderComponent {
|
|
38
|
+
// 🟢 Inputs
|
|
39
|
+
mode = 'full';
|
|
40
|
+
breadcrumb;
|
|
41
|
+
isSingleItemSelected = false;
|
|
42
|
+
selectedItems = [];
|
|
43
|
+
singleActionButtons = [];
|
|
44
|
+
bulkActionButtons = [];
|
|
45
|
+
addButtonConfigs = [];
|
|
46
|
+
filters;
|
|
47
|
+
filterModel = {};
|
|
48
|
+
showSearch = true;
|
|
49
|
+
// 🟢 Outputs
|
|
50
|
+
singleItemAction = new EventEmitter();
|
|
51
|
+
bulkAction = new EventEmitter();
|
|
52
|
+
search = new EventEmitter();
|
|
53
|
+
resetSearch = new EventEmitter();
|
|
54
|
+
action = new EventEmitter();
|
|
55
|
+
// 🟢 Helpers
|
|
56
|
+
trackByIdx = (index) => index;
|
|
57
|
+
// 🟢 Actions
|
|
58
|
+
onSingleItemAction(btn) {
|
|
59
|
+
this.singleItemAction.emit(btn);
|
|
60
|
+
}
|
|
61
|
+
onInternalBulkAction(btn) {
|
|
62
|
+
this.bulkAction.emit(btn);
|
|
63
|
+
}
|
|
64
|
+
applySearch(value) {
|
|
65
|
+
this.search.emit(value);
|
|
66
|
+
}
|
|
67
|
+
reset() {
|
|
68
|
+
this.resetSearch.emit();
|
|
69
|
+
}
|
|
70
|
+
/**
|
|
71
|
+
* Handles button click in a unified way.
|
|
72
|
+
* - If btn.action is defined, execute it.
|
|
73
|
+
* - Otherwise, emit event with actionName or default 'add'.
|
|
74
|
+
*/
|
|
75
|
+
async handleButtonClick(btn) {
|
|
76
|
+
try {
|
|
77
|
+
if (btn.action) {
|
|
78
|
+
// Execute the provided action
|
|
79
|
+
await btn.action(null); // You can pass row or context here
|
|
80
|
+
}
|
|
81
|
+
else {
|
|
82
|
+
// Fallback to emitting event
|
|
83
|
+
this.action.emit({
|
|
84
|
+
name: btn.actionName ?? 'add',
|
|
85
|
+
row: null, // provide row if available
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
catch (err) {
|
|
90
|
+
console.error('Button action error', err);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericCrudHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
94
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: GenericCrudHeaderComponent, isStandalone: true, selector: "app-generic-crud-header", inputs: { mode: "mode", breadcrumb: "breadcrumb", isSingleItemSelected: "isSingleItemSelected", selectedItems: "selectedItems", singleActionButtons: "singleActionButtons", bulkActionButtons: "bulkActionButtons", addButtonConfigs: "addButtonConfigs", filters: "filters", filterModel: "filterModel", showSearch: "showSearch" }, outputs: { singleItemAction: "singleItemAction", bulkAction: "bulkAction", search: "search", resetSearch: "resetSearch", action: "action" }, ngImport: i0, template: "\r\n @if (mode !== 'form-only') {\r\n <div class=\"flex items-start gap-2 justify-between\">\r\n <div>\r\n <app-breadcrumb class=\"xs:block hidden\" [breadcrumb]=\"breadcrumb\"></app-breadcrumb>\r\n </div>\r\n\r\n <div class=\"flex items-center gap-2 justify-end flex-wrap\">\r\n @if (mode === 'full') {\r\n\r\n <!-- \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0645\u0641\u0631\u062F\u0629 -->\r\n <ng-container *ngIf=\"isSingleItemSelected\">\r\n <ng-container *ngFor=\"let btn of singleActionButtons; trackBy: trackByIdx\">\r\n @if (!btn.visible || (btn.visible && btn.visible === true)) {\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 [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"onSingleItemAction(btn)\"\r\n ></lib-generic-button>\r\n }\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- \u0623\u0632\u0631\u0627\u0631 \u0645\u062A\u0639\u062F\u062F\u0629 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 -->\r\n <ng-container *ngIf=\"selectedItems.length > 0\">\r\n <ng-container *ngFor=\"let btn of bulkActionButtons; trackBy: trackByIdx\">\r\n @if (!btn.visible || (btn.visible && btn.visible === true)) {\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 [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"onInternalBulkAction(btn)\"\r\n ></lib-generic-button>\r\n }\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0625\u0636\u0627\u0641\u0629 -->\r\n <ng-container *ngFor=\"let btn of addButtonConfigs; trackBy: trackByIdx\">\r\n @if (!btn.visible || (btn.visible && btn.visible === true)) {\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 [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"handleButtonClick(btn)\"\r\n ></lib-generic-button>\r\n }\r\n </ng-container>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (mode !== 'form-only') {\r\n <div class=\"mt-2 mb-4 flex items-center justify-between\">\r\n\r\n <!-- \u0627\u0644\u0628\u062D\u062B -->\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)=\"reset()\"\r\n ></lib-generic-search>\r\n </ng-container>\r\n <ng-template #emptySearch></ng-template>\r\n\r\n <!-- \u0623\u062F\u0648\u0627\u062A \u0625\u0636\u0627\u0641\u064A\u0629 -->\r\n <div class=\"flex items-center gap-3\">\r\n <p-button icon=\"pi pi-refresh\" outlined severity=\"secondary\" (onClick)=\"reset()\" />\r\n <p-divider layout=\"vertical\" class=\"m-0 p-0 xs:block hidden\" />\r\n <p-button icon=\"pi pi-sort\" outlined severity=\"secondary\" class=\"xs:block hidden\" />\r\n <p-button label=\"1 of 15\" outlined severity=\"secondary\" class=\"xs:block hidden\" />\r\n <p-button icon=\"pi pi-chevron-right\" outlined severity=\"secondary\" class=\"xs:block hidden\" />\r\n <p-button icon=\"pi pi-chevron-left\" outlined severity=\"secondary\" class=\"xs:block hidden\" />\r\n </div>\r\n </div>\r\n }\r\n\r\n", dependencies: [{ 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: TranslateModule }, { kind: "component", type: BreadcrumbComponent, selector: "app-breadcrumb", inputs: ["breadcrumb"] }, { 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: ButtonModule }, { kind: "component", type: i2.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: ["model", "fields"], outputs: ["search"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i3.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
|
|
95
|
+
}
|
|
96
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericCrudHeaderComponent, decorators: [{
|
|
97
|
+
type: Component,
|
|
98
|
+
args: [{ selector: 'app-generic-crud-header', standalone: true, imports: [
|
|
99
|
+
GenericButton,
|
|
100
|
+
TranslateModule,
|
|
101
|
+
BreadcrumbComponent,
|
|
102
|
+
CommonModule,
|
|
103
|
+
ButtonModule,
|
|
104
|
+
GenericSearch,
|
|
105
|
+
DividerModule
|
|
106
|
+
], template: "\r\n @if (mode !== 'form-only') {\r\n <div class=\"flex items-start gap-2 justify-between\">\r\n <div>\r\n <app-breadcrumb class=\"xs:block hidden\" [breadcrumb]=\"breadcrumb\"></app-breadcrumb>\r\n </div>\r\n\r\n <div class=\"flex items-center gap-2 justify-end flex-wrap\">\r\n @if (mode === 'full') {\r\n\r\n <!-- \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0645\u0641\u0631\u062F\u0629 -->\r\n <ng-container *ngIf=\"isSingleItemSelected\">\r\n <ng-container *ngFor=\"let btn of singleActionButtons; trackBy: trackByIdx\">\r\n @if (!btn.visible || (btn.visible && btn.visible === true)) {\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 [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"onSingleItemAction(btn)\"\r\n ></lib-generic-button>\r\n }\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- \u0623\u0632\u0631\u0627\u0631 \u0645\u062A\u0639\u062F\u062F\u0629 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 -->\r\n <ng-container *ngIf=\"selectedItems.length > 0\">\r\n <ng-container *ngFor=\"let btn of bulkActionButtons; trackBy: trackByIdx\">\r\n @if (!btn.visible || (btn.visible && btn.visible === true)) {\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 [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"onInternalBulkAction(btn)\"\r\n ></lib-generic-button>\r\n }\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0625\u0636\u0627\u0641\u0629 -->\r\n <ng-container *ngFor=\"let btn of addButtonConfigs; trackBy: trackByIdx\">\r\n @if (!btn.visible || (btn.visible && btn.visible === true)) {\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 [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"handleButtonClick(btn)\"\r\n ></lib-generic-button>\r\n }\r\n </ng-container>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (mode !== 'form-only') {\r\n <div class=\"mt-2 mb-4 flex items-center justify-between\">\r\n\r\n <!-- \u0627\u0644\u0628\u062D\u062B -->\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)=\"reset()\"\r\n ></lib-generic-search>\r\n </ng-container>\r\n <ng-template #emptySearch></ng-template>\r\n\r\n <!-- \u0623\u062F\u0648\u0627\u062A \u0625\u0636\u0627\u0641\u064A\u0629 -->\r\n <div class=\"flex items-center gap-3\">\r\n <p-button icon=\"pi pi-refresh\" outlined severity=\"secondary\" (onClick)=\"reset()\" />\r\n <p-divider layout=\"vertical\" class=\"m-0 p-0 xs:block hidden\" />\r\n <p-button icon=\"pi pi-sort\" outlined severity=\"secondary\" class=\"xs:block hidden\" />\r\n <p-button label=\"1 of 15\" outlined severity=\"secondary\" class=\"xs:block hidden\" />\r\n <p-button icon=\"pi pi-chevron-right\" outlined severity=\"secondary\" class=\"xs:block hidden\" />\r\n <p-button icon=\"pi pi-chevron-left\" outlined severity=\"secondary\" class=\"xs:block hidden\" />\r\n </div>\r\n </div>\r\n }\r\n\r\n" }]
|
|
107
|
+
}], propDecorators: { mode: [{
|
|
108
|
+
type: Input
|
|
109
|
+
}], breadcrumb: [{
|
|
110
|
+
type: Input
|
|
111
|
+
}], isSingleItemSelected: [{
|
|
112
|
+
type: Input
|
|
113
|
+
}], selectedItems: [{
|
|
114
|
+
type: Input
|
|
115
|
+
}], singleActionButtons: [{
|
|
116
|
+
type: Input
|
|
117
|
+
}], bulkActionButtons: [{
|
|
118
|
+
type: Input
|
|
119
|
+
}], addButtonConfigs: [{
|
|
120
|
+
type: Input
|
|
121
|
+
}], filters: [{
|
|
122
|
+
type: Input
|
|
123
|
+
}], filterModel: [{
|
|
124
|
+
type: Input
|
|
125
|
+
}], showSearch: [{
|
|
126
|
+
type: Input
|
|
127
|
+
}], singleItemAction: [{
|
|
128
|
+
type: Output
|
|
129
|
+
}], bulkAction: [{
|
|
130
|
+
type: Output
|
|
131
|
+
}], search: [{
|
|
132
|
+
type: Output
|
|
133
|
+
}], resetSearch: [{
|
|
134
|
+
type: Output
|
|
135
|
+
}], action: [{
|
|
136
|
+
type: Output
|
|
137
|
+
}] } });
|
|
138
|
+
|
|
139
|
+
/* eslint-disable @angular-eslint/no-output-on-prefix */
|
|
140
|
+
/* eslint-disable @angular-eslint/no-output-native */
|
|
141
|
+
/**
|
|
142
|
+
* مكون جدول CRUD عام يمكن إعادة استخدامه
|
|
143
|
+
* يدعم العمليات الأساسية: إنشاء، قراءة، تحديث، حذف
|
|
144
|
+
* مع إمكانية التخصيص عبر عدة أوضاع وعرض
|
|
145
|
+
*/
|
|
41
146
|
class GenericCrudTableComponent {
|
|
42
147
|
genericTable;
|
|
148
|
+
dialog;
|
|
43
149
|
translate = inject(TranslateService);
|
|
44
150
|
swalService = inject(SwalService);
|
|
45
151
|
home = { icon: 'pi pi-home', routerLink: '/' };
|
|
@@ -67,6 +173,16 @@ class GenericCrudTableComponent {
|
|
|
67
173
|
action = new EventEmitter();
|
|
68
174
|
bulkAction = new EventEmitter();
|
|
69
175
|
singleAction = new EventEmitter();
|
|
176
|
+
beforeSaveTransform; // ⚡ دوال مخصصة قبل الحفظ
|
|
177
|
+
afterSave = new EventEmitter();
|
|
178
|
+
afterDelete = new EventEmitter();
|
|
179
|
+
beforeSave = new EventEmitter();
|
|
180
|
+
beforeDelete = new EventEmitter();
|
|
181
|
+
formCancel = new EventEmitter();
|
|
182
|
+
formInit = new EventEmitter();
|
|
183
|
+
dataLoaded = new EventEmitter();
|
|
184
|
+
selectionChange = new EventEmitter();
|
|
185
|
+
error = new EventEmitter();
|
|
70
186
|
// البحث
|
|
71
187
|
// Search
|
|
72
188
|
filters;
|
|
@@ -83,7 +199,6 @@ class GenericCrudTableComponent {
|
|
|
83
199
|
visibleChange = new EventEmitter();
|
|
84
200
|
;
|
|
85
201
|
// @Output() visibleChange = new EventEmitter<boolean>();
|
|
86
|
-
viewHeaderTitle = 'عرض التفاصيل';
|
|
87
202
|
/** لجعل الجدول قابل لاختيار الصفوف (افتراضي false) */
|
|
88
203
|
rowSelectable = false;
|
|
89
204
|
/** حدث يخرج الصف المحدّد */
|
|
@@ -94,7 +209,8 @@ class GenericCrudTableComponent {
|
|
|
94
209
|
sortOrder = 1;
|
|
95
210
|
scrollHeight = '400px';
|
|
96
211
|
paginator = true;
|
|
97
|
-
service;
|
|
212
|
+
service = inject(BaseService);
|
|
213
|
+
apiName = '';
|
|
98
214
|
idField = 'id';
|
|
99
215
|
showRowSelectionCheckbox = false;
|
|
100
216
|
showAddButton = true;
|
|
@@ -155,74 +271,15 @@ class GenericCrudTableComponent {
|
|
|
155
271
|
get autoShowForm() {
|
|
156
272
|
return this.mode === 'form-only' && !!this.forceState;
|
|
157
273
|
}
|
|
274
|
+
tableClass = 'h-full flex-1 flex flex-col overflow-hidden border border-surface rounded-2xl xs:rounded-2xl p-4 bg-white';
|
|
158
275
|
ngOnInit() {
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
this.initializeFormState();
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
ngOnChanges(changes) {
|
|
165
|
-
if (changes['forceState'] || changes['mode']) {
|
|
166
|
-
this.initializeFormState();
|
|
167
|
-
}
|
|
168
|
-
if (changes['formFields']) {
|
|
169
|
-
this.formFields_ = this.formFields;
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
initializeFormState() {
|
|
173
|
-
if (this.forceState && this.mode === 'form-only') {
|
|
174
|
-
switch (this.forceState) {
|
|
175
|
-
case 'create':
|
|
176
|
-
this.isEditMode = false;
|
|
177
|
-
this.isViewMode = false;
|
|
178
|
-
this.model = {};
|
|
179
|
-
break;
|
|
180
|
-
case 'edit':
|
|
181
|
-
this.isEditMode = true;
|
|
182
|
-
this.isViewMode = false;
|
|
183
|
-
break;
|
|
184
|
-
case 'view':
|
|
185
|
-
this.isEditMode = false;
|
|
186
|
-
this.isViewMode = true;
|
|
187
|
-
break;
|
|
188
|
-
}
|
|
189
|
-
// Auto-show the form
|
|
190
|
-
if (this.displayMode === 'drawer') {
|
|
191
|
-
this.drawerVisible = true;
|
|
192
|
-
}
|
|
193
|
-
else if (this.displayMode === 'dialog') {
|
|
194
|
-
this.dialogVisible = true;
|
|
195
|
-
}
|
|
276
|
+
if (this.apiName && this.apiName != '') {
|
|
277
|
+
this.service.apiName = this.apiName;
|
|
196
278
|
}
|
|
197
279
|
}
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
this.
|
|
201
|
-
// Emit cancel event for parent component to handle navigation
|
|
202
|
-
this.action.emit({ name: 'cancel', row: null });
|
|
203
|
-
}
|
|
204
|
-
/**
|
|
205
|
-
* Handles button click in a unified way.
|
|
206
|
-
* - If btn.action is defined, execute it.
|
|
207
|
-
* - Otherwise, emit event with actionName or default 'add'.
|
|
208
|
-
*/
|
|
209
|
-
async handleButtonClick(btn) {
|
|
210
|
-
try {
|
|
211
|
-
if (btn.action) {
|
|
212
|
-
// Execute the provided action
|
|
213
|
-
await btn.action(null); // You can pass row or context here
|
|
214
|
-
}
|
|
215
|
-
else {
|
|
216
|
-
// Fallback to emitting event
|
|
217
|
-
this.action.emit({
|
|
218
|
-
name: btn.actionName ?? 'add',
|
|
219
|
-
row: null, // provide row if available
|
|
220
|
-
});
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
catch (err) {
|
|
224
|
-
console.error('Button action error', err);
|
|
225
|
-
}
|
|
280
|
+
// Helper method to open form programmatically
|
|
281
|
+
openForm(mode, model) {
|
|
282
|
+
this.dialog.openForm(mode, model);
|
|
226
283
|
}
|
|
227
284
|
// private destroy$ = new Subject<void>();
|
|
228
285
|
/** الآن يتلقّى pagination + sort في حدث واحد */
|
|
@@ -275,43 +332,9 @@ class GenericCrudTableComponent {
|
|
|
275
332
|
this.rowSelect.emit(row);
|
|
276
333
|
}
|
|
277
334
|
}
|
|
278
|
-
beforeSave = (record) => record;
|
|
279
335
|
onSubmit() {
|
|
280
|
-
if (this.form
|
|
281
|
-
|
|
282
|
-
const save = () => {
|
|
283
|
-
this.loading = true;
|
|
284
|
-
this.errorMessage = null;
|
|
285
|
-
const id = this.isEditMode ? this.model[this.idField] : null;
|
|
286
|
-
const recordToSave = this.beforeSave({ ...this.model });
|
|
287
|
-
const operation$ = this.isEditMode
|
|
288
|
-
? this.service.update(id, recordToSave)
|
|
289
|
-
: this.service.create(recordToSave);
|
|
290
|
-
operation$.subscribe({
|
|
291
|
-
next: () => {
|
|
292
|
-
this.loading = false;
|
|
293
|
-
// ✅ رسالة نجاح
|
|
294
|
-
this.swalService.success(this.isEditMode ? 'تم التعديل بنجاح' : 'تم الحفظ بنجاح');
|
|
295
|
-
this.visibleChange.emit(false);
|
|
296
|
-
this.applySearch('');
|
|
297
|
-
},
|
|
298
|
-
error: () => {
|
|
299
|
-
// ❌ ما نعرض رسالة خطأ هنا لأن الـ interceptor يتكفل فيها
|
|
300
|
-
this.loading = false;
|
|
301
|
-
}
|
|
302
|
-
});
|
|
303
|
-
};
|
|
304
|
-
if (this.useConfirmOnSave) {
|
|
305
|
-
this.swalService.confirm(this.isEditMode ? 'تأكيد التعديل' : 'تأكيد الحفظ', this.isEditMode
|
|
306
|
-
? 'هل تريد حفظ التعديلات على هذا السجل؟'
|
|
307
|
-
: 'هل تريد حفظ هذا السجل؟', 'نعم', 'إلغاء').then(result => {
|
|
308
|
-
if (result.isConfirmed) {
|
|
309
|
-
save();
|
|
310
|
-
}
|
|
311
|
-
});
|
|
312
|
-
}
|
|
313
|
-
else {
|
|
314
|
-
save();
|
|
336
|
+
if (this.mode != 'form-only') {
|
|
337
|
+
this.applySearch('');
|
|
315
338
|
}
|
|
316
339
|
}
|
|
317
340
|
trackByIdx(index, item) {
|
|
@@ -335,34 +358,35 @@ class GenericCrudTableComponent {
|
|
|
335
358
|
});
|
|
336
359
|
}
|
|
337
360
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericCrudTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
338
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: GenericCrudTableComponent, isStandalone: true, selector: "app-generic-crud-table", inputs: { data: "data", formFields: "formFields", columns: "columns", dialogMaxWidth: "dialogMaxWidth", isViewMode: "isViewMode", displayMode: "displayMode", useConfirmOnSave: "useConfirmOnSave", 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", showAddButton: "showAddButton", addPermissionName: "addPermissionName", addButtonConfigs: "addButtonConfigs", bulkActionButtons: "bulkActionButtons", singleActionButtons: "singleActionButtons", breadcrumb: "breadcrumb", mode: "mode", forceState: "forceState", hideTable: "hideTable", autoShowForm: "autoShowForm", 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 xs:rounded-2xl p-4 bg-white" }, viewQueries: [{ propertyName: "genericTable", first: true, predicate: ["genericTable"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n\r\n@if (mode !== 'form-only') {\r\n <div class=\"flex items-start gap-2 justify-between\">\r\n <div>\r\n\r\n<app-breadcrumb class=\"xs:block hidden\" [breadcrumb]=\"breadcrumb_\"></app-breadcrumb>\r\n\r\n </div>\r\n\r\n<div class=\"flex items-center gap-2 justify-end flex-wrap\">\r\n @if (mode === 'full') {\r\n\r\n <ng-container *ngIf=\"isSingleItemSelected\">\r\n <ng-container *ngFor=\"let btn of singleActionButtons; trackBy: trackByIdx\">\r\n @if (!btn.visible || ( btn.visible && btn.visible === true)) {\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 [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"onSingleItemAction(btn)\"\r\n ></lib-generic-button>\r\n }\r\n</ng-container>\r\n </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 @if (!btn.visible || ( btn.visible && btn.visible === true)) {\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 [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"onInternalBulkAction(btn)\"\r\n ></lib-generic-button>\r\n }\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let btn of addButtonConfigs; trackBy: trackByIdx\">\r\n @if (!btn.visible || ( btn.visible && btn.visible === true)) {\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 [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"handleButtonClick(btn)\"\r\n ></lib-generic-button>\r\n }\r\n </ng-container>\r\n\r\n\r\n }\r\n\r\n </div>\r\n </div>\r\n}\r\n\r\n\r\n @if (mode !== 'form-only') {\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 </ng-template>\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 xs:block hidden\" />\r\n <p-button icon=\"pi pi-sort\" outlined severity=\"secondary\" class=\"xs:block hidden\" />\r\n <p-button label=\"1 of 15\" outlined severity=\"secondary\" class=\"xs:block hidden\" />\r\n <p-button icon=\"pi pi-chevron-right\" outlined severity=\"secondary\" class=\"xs:block hidden\" />\r\n <p-button icon=\"pi pi-chevron-left\" outlined severity=\"secondary\" class=\"xs:block hidden\" />\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (!hideTable) {\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[addButtonConfigs]=\"addButtonConfigs\"\r\n [globalFilterFields]=\"globalFilterFields\"\r\n [scrollHeight]=\"scrollHeight\"\r\n [showRowSelectionCheckbox]=\"showRowSelectionCheckbox\"\r\n (action)=\"action.emit($event)\"\r\n (onAddNew)=\"action.emit({ name: 'add', row: null! })\"\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<!-- Drawer -->\r\n @if (((typeof displayMode === 'string' ? displayMode : isEditMode ? displayMode['edit'] : isViewMode === false ? displayMode['add'] : displayMode['view']) === 'drawer') &&\r\n (drawerVisible || (autoShowForm && displayMode === 'drawer'))) {\r\n<p-drawer\r\n [(visible)]=\"drawerVisible\"\r\n [closable]=\"true\"\r\n [dismissible]=\"false\"\r\n [closeOnEscape]=\"true\"\r\n (visibleChange)=\"visibleChange.emit($event)\"\r\n [styleClass]=\"mode === 'form-only' ? '!w-full md:!w-80 lg:!w-[40rem] !static !h-full' : '!w-full md:!w-80 lg:!w-[40rem]'\"\r\n [modal]=\"mode !== 'form-only'\"\r\n [blockScroll]=\"mode !== 'form-only'\"\r\n >\r\n\r\n <ng-template pTemplate=\"header\">\r\n <span class=\"font-bold text-lg\">\r\n {{ isEditMode ? ('UPDATE' | translate): isViewMode === false ? ('ADD' | translate): ('VIEW' | translate) }}\r\n </span>\r\n </ng-template>\r\n<!-- (ngSubmit)=\"onSubmit()\" -->\r\n <form *ngIf=\"form\" [formGroup]=\"form\" class=\"p-4\">\r\n <formly-form [form]=\"form\" [fields]=\"formFields_\" [model]=\"model\" [options]=\"options\"></formly-form>\r\n </form>\r\n\r\n <ng-template pTemplate=\"footer\" *ngIf=\"!isViewMode\">\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 type=\"button\"\r\n (click)=\"onSubmit()\"\r\n [disabled]=\"loading || form.invalid\"\r\n [loading]=\"loading\">\r\n </button>\r\n <button\r\n pButton\r\n label=\"{{ 'CANCEL' | translate }}\"\r\n severity=\"danger\"\r\n (click)=\"visibleChange.emit(false)\">\r\n </button>\r\n </div>\r\n </ng-template>\r\n</p-drawer>\r\n }\r\n<!-- Dialog -->\r\n @if (((typeof displayMode === 'string' ? displayMode : isEditMode ? displayMode['edit'] : isViewMode === false ? displayMode['add'] : displayMode['view']) === 'dialog') &&\r\n (dialogVisible || (autoShowForm && displayMode === 'dialog'))) {\r\n<p-dialog\r\n [(visible)]=\"dialogVisible\"\r\n [closeOnEscape]=\"true\"\r\n (visibleChange)=\"visibleChange.emit($event)\"\r\n [header]=\"isEditMode ? ('UPDATE' | translate) : isViewMode === false ? ('ADD'| translate) : viewHeaderTitle\"\r\n [modal]=\"mode !== 'form-only'\"\r\n [style]=\"mode === 'form-only' ? { width: '100vw', height: '100vh', maxWidth: 'none' } : { width: '95vw', maxWidth: dialogMaxWidth }\"\r\n [closable]=\"mode !== 'form-only'\"\r\n [dismissableMask]=\"mode !== 'form-only'\"\r\n\r\n >\r\n<!-- [breakpoints]=\"{ '1200px': '50vw', '768px': '70vw', '560px': '95vw' }\" -->\r\n <div class=\"relative\">\r\n <div *ngIf=\"isViewMode\" class=\"absolute inset-0 z-10 bg-white/50 pointer-events-auto rounded-md\"></div>\r\n <form *ngIf=\"form\" [formGroup]=\"form\" class=\"p-4\">\r\n <formly-form [form]=\"form\" [fields]=\"formFields_\" [model]=\"model\" [options]=\"options\"></formly-form>\r\n </form>\r\n </div>\r\n\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"flex justify-end gap-2\">\r\n <button *ngIf=\"!isViewMode\"\r\n pButton\r\n [label]=\"isEditMode ? ('UPDATE' | translate) : ('SAVE' | translate)\"\r\n type=\"button\"\r\n [disabled]=\"loading || form.invalid\"\r\n [loading]=\"loading\"\r\n (click)=\"onSubmit()\">\r\n </button>\r\n <button\r\n pButton\r\n label=\"{{ isViewMode ? ('CLOSE' | translate) : ('CANCEL' | translate) }}\"\r\n severity=\"secondary\"\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\r\n <!-- Inline Form for form-only mode -->\r\n @if (mode === 'form-only' && displayMode === 'inline'){\r\n<div class=\"w-full\">\r\n <form *ngIf=\"form\" [formGroup]=\"form\" class=\"p-4\">\r\n <formly-form [form]=\"form\" [fields]=\"formFields_\" [model]=\"model\" [options]=\"options\"></formly-form>\r\n </form>\r\n\r\n <div *ngIf=\"!isViewMode\" class=\"flex justify-end gap-2 mt-4\">\r\n <button\r\n pButton\r\n [label]=\"isEditMode ? ('UPDATE' | translate) : ('SAVE' | translate)\"\r\n type=\"button\"\r\n (click)=\"onSubmit()\"\r\n [disabled]=\"loading || form.invalid\"\r\n [loading]=\"loading\">\r\n </button>\r\n <button\r\n pButton\r\n label=\"{{ 'CANCEL' | translate }}\"\r\n severity=\"danger\"\r\n (click)=\"onCancel()\">\r\n </button>\r\n </div>\r\n</div>\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: i2.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.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3.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: ["model", "fields"], outputs: ["search"] }, { kind: "component", type: GenericTable, selector: "lib-generic-table", inputs: ["data", "columns", "loading", "actions", "actionsMode", "first", "rows", "totalRecords", "sortField", "sortOrder", "globalFilterFields", "addButtonConfigs", "scrollHeight", "rowSelectable", "selection", "paginator", "showRowSelectionCheckbox"], outputs: ["action", "pageChange", "onAddNew", "rowSelect", "selectionChange"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i5.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: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.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: i7.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: i8.TranslatePipe, name: "translate" }] });
|
|
361
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: GenericCrudTableComponent, isStandalone: true, selector: "app-generic-crud-table", inputs: { data: "data", formFields: "formFields", columns: "columns", dialogMaxWidth: "dialogMaxWidth", isViewMode: "isViewMode", displayMode: "displayMode", useConfirmOnSave: "useConfirmOnSave", isEditMode: "isEditMode", drawerVisible: "drawerVisible", dialogVisible: "dialogVisible", model: "model", loading: "loading", errorMsg: "errorMsg", errorMessage: "errorMessage", actions: "actions", actionsMode: "actionsMode", beforeSaveTransform: "beforeSaveTransform", filters: "filters", filterModel: "filterModel", showSearch: "showSearch", first: "first", rows: "rows", totalRecords: "totalRecords", rowSelectable: "rowSelectable", scrollHeight: "scrollHeight", paginator: "paginator", service: "service", apiName: "apiName", idField: "idField", showRowSelectionCheckbox: "showRowSelectionCheckbox", showAddButton: "showAddButton", addPermissionName: "addPermissionName", addButtonConfigs: "addButtonConfigs", bulkActionButtons: "bulkActionButtons", singleActionButtons: "singleActionButtons", breadcrumb: "breadcrumb", mode: "mode", forceState: "forceState", hideTable: "hideTable", autoShowForm: "autoShowForm" }, outputs: { action: "action", bulkAction: "bulkAction", singleAction: "singleAction", afterSave: "afterSave", afterDelete: "afterDelete", beforeSave: "beforeSave", beforeDelete: "beforeDelete", formCancel: "formCancel", formInit: "formInit", dataLoaded: "dataLoaded", selectionChange: "selectionChange", error: "error", search: "search", pageChange: "pageChange", onSearch: "onSearch", visibleChange: "visibleChange", rowSelect: "rowSelect" }, viewQueries: [{ propertyName: "genericTable", first: true, predicate: ["genericTable"], descendants: true }, { propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<div\r\n [class]=\"mode !== 'form-only' ? tableClass : ''\"\r\n>\r\n <app-generic-crud-header\r\n [mode]=\"mode\"\r\n [breadcrumb]=\"breadcrumb_\"\r\n [isSingleItemSelected]=\"isSingleItemSelected\"\r\n [selectedItems]=\"_selectedRows\"\r\n [singleActionButtons]=\"singleActionButtons\"\r\n [bulkActionButtons]=\"bulkActionButtons\"\r\n [addButtonConfigs]=\"addButtonConfigs\"\r\n [filters]=\"filters\"\r\n [filterModel]=\"filterModel\"\r\n [showSearch]=\"showSearch\"\r\n (singleItemAction)=\"onSingleItemAction($event)\"\r\n (bulkAction)=\"onInternalBulkAction($event)\"\r\n (action)=\"action.emit($event)\"\r\n (search)=\"applySearch($event)\"\r\n (resetSearch)=\"applySearch('')\"\r\n/>\r\n\r\n @if (!hideTable) {\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 [addButtonConfigs]=\"addButtonConfigs\"\r\n [globalFilterFields]=\"globalFilterFields\"\r\n [scrollHeight]=\"scrollHeight\"\r\n [showRowSelectionCheckbox]=\"showRowSelectionCheckbox\"\r\n (action)=\"action.emit($event)\"\r\n (onAddNew)=\"action.emit({ name: 'add', row: null! })\"\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 <app-generic-dialog\r\n #dialog\r\n [service]=\"service\"\r\n [formFields]=\"formFields\"\r\n [model]=\"model\"\r\n [apiName]=\"apiName\"\r\n [idField]=\"idField\"\r\n [dialogMaxWidth]=\"dialogMaxWidth\"\r\n [displayMode]=\"displayMode\"\r\n [mode]=\"mode\"\r\n [forceState]=\"forceState\"\r\n [drawerVisible]=\"drawerVisible\"\r\n [dialogVisible]=\"dialogVisible\"\r\n [isViewMode]=\"isViewMode\"\r\n [isEditMode]=\"isEditMode\"\r\n [useConfirmOnSave]=\"useConfirmOnSave\"\r\n [loading]=\"loading\"\r\n [errorMsg]=\"errorMsg\"\r\n [errorMessage]=\"errorMessage\"\r\n [beforeSaveTransform]=\"beforeSaveTransform\"\r\n (action)=\"action.emit($event)\"\r\n (afterSave)=\"afterSave.emit($event);onSubmit();\"\r\n (afterDelete)=\"afterDelete.emit($event)\"\r\n (beforeSave)=\"beforeSave.emit($event)\"\r\n (beforeDelete)=\"beforeDelete.emit($event)\"\r\n (formCancel)=\"formCancel.emit()\"\r\n (formInit)=\"formInit.emit($event)\"\r\n (dataLoaded)=\"dataLoaded.emit($event)\"\r\n (selectionChange)=\"selectionChange.emit($event)\"\r\n (error)=\"error.emit($event)\"\r\n (visibleChange)=\"visibleChange.emit($event)\"\r\n >\r\n </app-generic-dialog>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: GenericTable, selector: "lib-generic-table", inputs: ["data", "columns", "loading", "actions", "actionsMode", "first", "rows", "totalRecords", "sortField", "sortOrder", "globalFilterFields", "addButtonConfigs", "scrollHeight", "rowSelectable", "selection", "paginator", "showRowSelectionCheckbox"], outputs: ["action", "pageChange", "onAddNew", "rowSelect", "selectionChange"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MessageModule }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: GenericDialogComponent, selector: "app-generic-dialog", inputs: ["service", "formFields", "model", "apiName", "idField", "dialogMaxWidth", "displayMode", "mode", "forceState", "drawerVisible", "dialogVisible", "isViewMode", "isEditMode", "useConfirmOnSave", "loading", "errorMsg", "errorMessage", "beforeSaveTransform", "hideTable", "autoShowForm"], outputs: ["action", "afterSave", "afterDelete", "beforeSave", "beforeDelete", "formCancel", "formInit", "dataLoaded", "selectionChange", "error", "visibleChange"] }, { kind: "component", type: GenericCrudHeaderComponent, selector: "app-generic-crud-header", inputs: ["mode", "breadcrumb", "isSingleItemSelected", "selectedItems", "singleActionButtons", "bulkActionButtons", "addButtonConfigs", "filters", "filterModel", "showSearch"], outputs: ["singleItemAction", "bulkAction", "search", "resetSearch", "action"] }] });
|
|
339
362
|
}
|
|
340
363
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericCrudTableComponent, decorators: [{
|
|
341
364
|
type: Component,
|
|
342
365
|
args: [{ selector: 'app-generic-crud-table', standalone: true, imports: [
|
|
343
366
|
CommonModule,
|
|
344
367
|
TableModule,
|
|
345
|
-
GenericButton,
|
|
346
368
|
ButtonModule,
|
|
347
|
-
GenericSearch,
|
|
348
369
|
GenericTable,
|
|
349
370
|
ToolbarModule,
|
|
350
371
|
TranslateModule,
|
|
351
372
|
DividerModule,
|
|
352
373
|
IconFieldModule,
|
|
353
374
|
DrawerModule,
|
|
354
|
-
FormlyForm,
|
|
355
375
|
ReactiveFormsModule,
|
|
356
376
|
FormsModule,
|
|
357
377
|
MessageModule,
|
|
358
|
-
BreadcrumbComponent,
|
|
359
378
|
DialogModule,
|
|
379
|
+
GenericDialogComponent,
|
|
380
|
+
GenericCrudHeaderComponent
|
|
360
381
|
], host: {
|
|
361
|
-
class: '
|
|
362
|
-
}, template: "\r\n
|
|
382
|
+
class: ''
|
|
383
|
+
}, template: "<div\r\n [class]=\"mode !== 'form-only' ? tableClass : ''\"\r\n>\r\n <app-generic-crud-header\r\n [mode]=\"mode\"\r\n [breadcrumb]=\"breadcrumb_\"\r\n [isSingleItemSelected]=\"isSingleItemSelected\"\r\n [selectedItems]=\"_selectedRows\"\r\n [singleActionButtons]=\"singleActionButtons\"\r\n [bulkActionButtons]=\"bulkActionButtons\"\r\n [addButtonConfigs]=\"addButtonConfigs\"\r\n [filters]=\"filters\"\r\n [filterModel]=\"filterModel\"\r\n [showSearch]=\"showSearch\"\r\n (singleItemAction)=\"onSingleItemAction($event)\"\r\n (bulkAction)=\"onInternalBulkAction($event)\"\r\n (action)=\"action.emit($event)\"\r\n (search)=\"applySearch($event)\"\r\n (resetSearch)=\"applySearch('')\"\r\n/>\r\n\r\n @if (!hideTable) {\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 [addButtonConfigs]=\"addButtonConfigs\"\r\n [globalFilterFields]=\"globalFilterFields\"\r\n [scrollHeight]=\"scrollHeight\"\r\n [showRowSelectionCheckbox]=\"showRowSelectionCheckbox\"\r\n (action)=\"action.emit($event)\"\r\n (onAddNew)=\"action.emit({ name: 'add', row: null! })\"\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 <app-generic-dialog\r\n #dialog\r\n [service]=\"service\"\r\n [formFields]=\"formFields\"\r\n [model]=\"model\"\r\n [apiName]=\"apiName\"\r\n [idField]=\"idField\"\r\n [dialogMaxWidth]=\"dialogMaxWidth\"\r\n [displayMode]=\"displayMode\"\r\n [mode]=\"mode\"\r\n [forceState]=\"forceState\"\r\n [drawerVisible]=\"drawerVisible\"\r\n [dialogVisible]=\"dialogVisible\"\r\n [isViewMode]=\"isViewMode\"\r\n [isEditMode]=\"isEditMode\"\r\n [useConfirmOnSave]=\"useConfirmOnSave\"\r\n [loading]=\"loading\"\r\n [errorMsg]=\"errorMsg\"\r\n [errorMessage]=\"errorMessage\"\r\n [beforeSaveTransform]=\"beforeSaveTransform\"\r\n (action)=\"action.emit($event)\"\r\n (afterSave)=\"afterSave.emit($event);onSubmit();\"\r\n (afterDelete)=\"afterDelete.emit($event)\"\r\n (beforeSave)=\"beforeSave.emit($event)\"\r\n (beforeDelete)=\"beforeDelete.emit($event)\"\r\n (formCancel)=\"formCancel.emit()\"\r\n (formInit)=\"formInit.emit($event)\"\r\n (dataLoaded)=\"dataLoaded.emit($event)\"\r\n (selectionChange)=\"selectionChange.emit($event)\"\r\n (error)=\"error.emit($event)\"\r\n (visibleChange)=\"visibleChange.emit($event)\"\r\n >\r\n </app-generic-dialog>\r\n</div>\r\n" }]
|
|
363
384
|
}], propDecorators: { genericTable: [{
|
|
364
385
|
type: ViewChild,
|
|
365
386
|
args: ['genericTable']
|
|
387
|
+
}], dialog: [{
|
|
388
|
+
type: ViewChild,
|
|
389
|
+
args: ['dialog']
|
|
366
390
|
}], data: [{
|
|
367
391
|
type: Input
|
|
368
392
|
}], formFields: [{
|
|
@@ -401,6 +425,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
|
|
|
401
425
|
type: Output
|
|
402
426
|
}], singleAction: [{
|
|
403
427
|
type: Output
|
|
428
|
+
}], beforeSaveTransform: [{
|
|
429
|
+
type: Input
|
|
430
|
+
}], afterSave: [{
|
|
431
|
+
type: Output
|
|
432
|
+
}], afterDelete: [{
|
|
433
|
+
type: Output
|
|
434
|
+
}], beforeSave: [{
|
|
435
|
+
type: Output
|
|
436
|
+
}], beforeDelete: [{
|
|
437
|
+
type: Output
|
|
438
|
+
}], formCancel: [{
|
|
439
|
+
type: Output
|
|
440
|
+
}], formInit: [{
|
|
441
|
+
type: Output
|
|
442
|
+
}], dataLoaded: [{
|
|
443
|
+
type: Output
|
|
444
|
+
}], selectionChange: [{
|
|
445
|
+
type: Output
|
|
446
|
+
}], error: [{
|
|
447
|
+
type: Output
|
|
404
448
|
}], filters: [{
|
|
405
449
|
type: Input
|
|
406
450
|
}], filterModel: [{
|
|
@@ -431,6 +475,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
|
|
|
431
475
|
type: Input
|
|
432
476
|
}], service: [{
|
|
433
477
|
type: Input
|
|
478
|
+
}], apiName: [{
|
|
479
|
+
type: Input
|
|
434
480
|
}], idField: [{
|
|
435
481
|
type: Input
|
|
436
482
|
}], showRowSelectionCheckbox: [{
|
|
@@ -455,8 +501,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
|
|
|
455
501
|
type: Input
|
|
456
502
|
}], autoShowForm: [{
|
|
457
503
|
type: Input
|
|
458
|
-
}], beforeSave: [{
|
|
459
|
-
type: Input
|
|
460
504
|
}] } });
|
|
461
505
|
|
|
462
506
|
/**
|