@elite.framework/ng.ui.core 1.0.57 → 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 +192 -77
- 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-search-advanced.mjs +808 -0
- package/fesm2022/elite.framework-ng.ui.core-generic-search-advanced.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 +61 -11
- package/generic-dialog/README.md +3 -0
- package/generic-dialog/index.d.ts +92 -0
- package/generic-search-advanced/README.md +3 -0
- package/generic-search-advanced/index.d.ts +114 -0
- package/generic-selector/index.d.ts +15 -2
- package/package.json +34 -26
|
@@ -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;
|
|
@@ -139,28 +255,32 @@ class GenericCrudTableComponent {
|
|
|
139
255
|
}
|
|
140
256
|
}
|
|
141
257
|
/**
|
|
142
|
-
*
|
|
143
|
-
* -
|
|
144
|
-
* -
|
|
258
|
+
* Modes to control what parts of the component are visible
|
|
259
|
+
* - 'full': Table + CRUD operations (default)
|
|
260
|
+
* - 'form-only': Only show form (for create/edit/view)
|
|
261
|
+
* - 'table-only': Only show table (read-only mode)
|
|
145
262
|
*/
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
console.error('Button action error', err);
|
|
263
|
+
mode = 'full';
|
|
264
|
+
/** Force the component to show specific state */
|
|
265
|
+
forceState = null;
|
|
266
|
+
/** Hide table completely when in form-only mode */
|
|
267
|
+
get hideTable() {
|
|
268
|
+
return (this.mode === 'form-only' || (this.forceState && this.mode !== 'table-only')) ?? false;
|
|
269
|
+
}
|
|
270
|
+
/** Auto-show form when in form-only mode with forceState */
|
|
271
|
+
get autoShowForm() {
|
|
272
|
+
return this.mode === 'form-only' && !!this.forceState;
|
|
273
|
+
}
|
|
274
|
+
tableClass = 'h-full flex-1 flex flex-col overflow-hidden border border-surface rounded-2xl xs:rounded-2xl p-4 bg-white';
|
|
275
|
+
ngOnInit() {
|
|
276
|
+
if (this.apiName && this.apiName != '') {
|
|
277
|
+
this.service.apiName = this.apiName;
|
|
162
278
|
}
|
|
163
279
|
}
|
|
280
|
+
// Helper method to open form programmatically
|
|
281
|
+
openForm(mode, model) {
|
|
282
|
+
this.dialog.openForm(mode, model);
|
|
283
|
+
}
|
|
164
284
|
// private destroy$ = new Subject<void>();
|
|
165
285
|
/** الآن يتلقّى pagination + sort في حدث واحد */
|
|
166
286
|
onLazyLoad(event) {
|
|
@@ -212,43 +332,9 @@ class GenericCrudTableComponent {
|
|
|
212
332
|
this.rowSelect.emit(row);
|
|
213
333
|
}
|
|
214
334
|
}
|
|
215
|
-
beforeSave = (record) => record;
|
|
216
335
|
onSubmit() {
|
|
217
|
-
if (this.form
|
|
218
|
-
|
|
219
|
-
const save = () => {
|
|
220
|
-
this.loading = true;
|
|
221
|
-
this.errorMessage = null;
|
|
222
|
-
const id = this.isEditMode ? this.model[this.idField] : null;
|
|
223
|
-
const recordToSave = this.beforeSave({ ...this.model });
|
|
224
|
-
const operation$ = this.isEditMode
|
|
225
|
-
? this.service.update(id, recordToSave)
|
|
226
|
-
: this.service.create(recordToSave);
|
|
227
|
-
operation$.subscribe({
|
|
228
|
-
next: () => {
|
|
229
|
-
this.loading = false;
|
|
230
|
-
// ✅ رسالة نجاح
|
|
231
|
-
this.swalService.success(this.isEditMode ? 'تم التعديل بنجاح' : 'تم الحفظ بنجاح');
|
|
232
|
-
this.visibleChange.emit(false);
|
|
233
|
-
this.applySearch('');
|
|
234
|
-
},
|
|
235
|
-
error: () => {
|
|
236
|
-
// ❌ ما نعرض رسالة خطأ هنا لأن الـ interceptor يتكفل فيها
|
|
237
|
-
this.loading = false;
|
|
238
|
-
}
|
|
239
|
-
});
|
|
240
|
-
};
|
|
241
|
-
if (this.useConfirmOnSave) {
|
|
242
|
-
this.swalService.confirm(this.isEditMode ? 'تأكيد التعديل' : 'تأكيد الحفظ', this.isEditMode
|
|
243
|
-
? 'هل تريد حفظ التعديلات على هذا السجل؟'
|
|
244
|
-
: 'هل تريد حفظ هذا السجل؟', 'نعم', 'إلغاء').then(result => {
|
|
245
|
-
if (result.isConfirmed) {
|
|
246
|
-
save();
|
|
247
|
-
}
|
|
248
|
-
});
|
|
249
|
-
}
|
|
250
|
-
else {
|
|
251
|
-
save();
|
|
336
|
+
if (this.mode != 'form-only') {
|
|
337
|
+
this.applySearch('');
|
|
252
338
|
}
|
|
253
339
|
}
|
|
254
340
|
trackByIdx(index, item) {
|
|
@@ -272,34 +358,35 @@ class GenericCrudTableComponent {
|
|
|
272
358
|
});
|
|
273
359
|
}
|
|
274
360
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericCrudTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
275
|
-
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", 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 }], ngImport: i0, template: "\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 <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 </div>\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 </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\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<p-drawer\r\n *ngIf=\"(typeof displayMode === 'string' ? displayMode : isEditMode ? displayMode['edit'] : isViewMode === false ? displayMode['add'] : displayMode['view'] ) === 'drawer' && drawerVisible\"\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=\"!w-full md:!w-80 lg:!w-[40rem]\">\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<p-dialog\r\n *ngIf=\"(typeof displayMode === 'string' ? displayMode : isEditMode ? displayMode['edit'] : isViewMode === false ? displayMode['add'] : displayMode['view'] ) === 'dialog' && 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: dialogMaxWidth }\"\r\n [header]=\"isEditMode ? ('UPDATE' | translate) : isViewMode === false ? ('ADD'| translate) : viewHeaderTitle\">\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", 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"] }] });
|
|
276
362
|
}
|
|
277
363
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericCrudTableComponent, decorators: [{
|
|
278
364
|
type: Component,
|
|
279
365
|
args: [{ selector: 'app-generic-crud-table', standalone: true, imports: [
|
|
280
366
|
CommonModule,
|
|
281
367
|
TableModule,
|
|
282
|
-
GenericButton,
|
|
283
368
|
ButtonModule,
|
|
284
|
-
GenericSearch,
|
|
285
369
|
GenericTable,
|
|
286
370
|
ToolbarModule,
|
|
287
371
|
TranslateModule,
|
|
288
372
|
DividerModule,
|
|
289
373
|
IconFieldModule,
|
|
290
374
|
DrawerModule,
|
|
291
|
-
FormlyForm,
|
|
292
375
|
ReactiveFormsModule,
|
|
293
376
|
FormsModule,
|
|
294
377
|
MessageModule,
|
|
295
|
-
BreadcrumbComponent,
|
|
296
378
|
DialogModule,
|
|
379
|
+
GenericDialogComponent,
|
|
380
|
+
GenericCrudHeaderComponent
|
|
297
381
|
], host: {
|
|
298
|
-
class: '
|
|
299
|
-
}, template: "
|
|
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" }]
|
|
300
384
|
}], propDecorators: { genericTable: [{
|
|
301
385
|
type: ViewChild,
|
|
302
386
|
args: ['genericTable']
|
|
387
|
+
}], dialog: [{
|
|
388
|
+
type: ViewChild,
|
|
389
|
+
args: ['dialog']
|
|
303
390
|
}], data: [{
|
|
304
391
|
type: Input
|
|
305
392
|
}], formFields: [{
|
|
@@ -338,6 +425,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
|
|
|
338
425
|
type: Output
|
|
339
426
|
}], singleAction: [{
|
|
340
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
|
|
341
448
|
}], filters: [{
|
|
342
449
|
type: Input
|
|
343
450
|
}], filterModel: [{
|
|
@@ -368,6 +475,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
|
|
|
368
475
|
type: Input
|
|
369
476
|
}], service: [{
|
|
370
477
|
type: Input
|
|
478
|
+
}], apiName: [{
|
|
479
|
+
type: Input
|
|
371
480
|
}], idField: [{
|
|
372
481
|
type: Input
|
|
373
482
|
}], showRowSelectionCheckbox: [{
|
|
@@ -384,7 +493,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
|
|
|
384
493
|
type: Input
|
|
385
494
|
}], breadcrumb: [{
|
|
386
495
|
type: Input
|
|
387
|
-
}],
|
|
496
|
+
}], mode: [{
|
|
497
|
+
type: Input
|
|
498
|
+
}], forceState: [{
|
|
499
|
+
type: Input
|
|
500
|
+
}], hideTable: [{
|
|
501
|
+
type: Input
|
|
502
|
+
}], autoShowForm: [{
|
|
388
503
|
type: Input
|
|
389
504
|
}] } });
|
|
390
505
|
|