@elite.framework/ng.ui.core 1.0.61 → 1.0.63

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.
Files changed (31) hide show
  1. package/fesm2022/elite.framework-ng.ui.core-base-crud.mjs +6 -0
  2. package/fesm2022/elite.framework-ng.ui.core-base-crud.mjs.map +1 -1
  3. package/fesm2022/elite.framework-ng.ui.core-custom-switch.mjs +2 -0
  4. package/fesm2022/elite.framework-ng.ui.core-custom-switch.mjs.map +1 -1
  5. package/fesm2022/elite.framework-ng.ui.core-formly-ui-all.mjs +8 -2
  6. package/fesm2022/elite.framework-ng.ui.core-formly-ui-all.mjs.map +1 -1
  7. package/fesm2022/elite.framework-ng.ui.core-generic-button.mjs +31 -29
  8. package/fesm2022/elite.framework-ng.ui.core-generic-button.mjs.map +1 -1
  9. package/fesm2022/elite.framework-ng.ui.core-generic-crud-table.mjs +124 -8
  10. package/fesm2022/elite.framework-ng.ui.core-generic-crud-table.mjs.map +1 -1
  11. package/fesm2022/elite.framework-ng.ui.core-generic-dialog.mjs +31 -7
  12. package/fesm2022/elite.framework-ng.ui.core-generic-dialog.mjs.map +1 -1
  13. package/fesm2022/elite.framework-ng.ui.core-generic-selector.mjs +1 -1
  14. package/fesm2022/elite.framework-ng.ui.core-generic-selector.mjs.map +1 -1
  15. package/fesm2022/elite.framework-ng.ui.core-generic-table.mjs +6 -4
  16. package/fesm2022/elite.framework-ng.ui.core-generic-table.mjs.map +1 -1
  17. package/fesm2022/elite.framework-ng.ui.core-generic-view.mjs +398 -0
  18. package/fesm2022/elite.framework-ng.ui.core-generic-view.mjs.map +1 -0
  19. package/fesm2022/elite.framework-ng.ui.core-label-type.mjs +44 -1
  20. package/fesm2022/elite.framework-ng.ui.core-label-type.mjs.map +1 -1
  21. package/fesm2022/elite.framework-ng.ui.core-wrappers.mjs +44 -1
  22. package/fesm2022/elite.framework-ng.ui.core-wrappers.mjs.map +1 -1
  23. package/generic-button/index.d.ts +1 -4
  24. package/generic-crud-table/index.d.ts +13 -2
  25. package/generic-dialog/index.d.ts +2 -2
  26. package/generic-table/index.d.ts +2 -0
  27. package/generic-view/README.md +3 -0
  28. package/generic-view/index.d.ts +96 -0
  29. package/label-type/index.d.ts +9 -1
  30. package/package.json +19 -15
  31. package/wrappers/index.d.ts +6 -1
@@ -17,10 +17,12 @@ import { DrawerModule } from 'primeng/drawer';
17
17
  import { DialogModule } from 'primeng/dialog';
18
18
  import { UntypedFormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
19
19
  import { SwalService, BaseService } from '@elite.framework/ng.core/services';
20
- import { GenericTable } from '@elite.framework/ng.ui.core/generic-table';
21
- import { GenericDialogComponent } from '@elite.framework/ng.ui.core/generic-dialog';
22
20
  import { BreadcrumbComponent } from '@elite.framework/ng.ui.core/breadcrumb';
23
21
  import { GenericSearch } from '@elite.framework/ng.ui.core/generic-search';
22
+ import { ActivatedRoute, Router } from '@angular/router';
23
+ import { GenericTable } from '@elite.framework/ng.ui.core/generic-table';
24
+ import { GenericDialogComponent } from '@elite.framework/ng.ui.core/generic-dialog';
25
+ import { GenericViewComponent } from '@elite.framework/ng.ui.core/generic-view';
24
26
 
25
27
  class GenericCrudTableModule {
26
28
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericCrudTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -46,12 +48,16 @@ class GenericCrudHeaderComponent {
46
48
  filters;
47
49
  filterModel = {};
48
50
  showSearch = true;
51
+ first = 0; // Add input for current 'first' index
52
+ rows = 10; // Add input for current 'rows' per page
53
+ totalRecords = 0; // Add input for total records
49
54
  // 🟢 Outputs
50
55
  singleItemAction = new EventEmitter();
51
56
  bulkAction = new EventEmitter();
52
57
  search = new EventEmitter();
53
58
  resetSearch = new EventEmitter();
54
59
  action = new EventEmitter();
60
+ paginateChange = new EventEmitter(); // NEW OUTPUT
55
61
  // 🟢 Helpers
56
62
  trackByIdx = (index) => index;
57
63
  // 🟢 Actions
@@ -67,6 +73,31 @@ class GenericCrudHeaderComponent {
67
73
  reset() {
68
74
  this.resetSearch.emit();
69
75
  }
76
+ // Go to previous page
77
+ // 🟢 Actions (Keep or adapt your existing pagination logic)
78
+ totalPages() {
79
+ if (this.totalRecords === 0 || this.rows === 0)
80
+ return 0;
81
+ return Math.ceil(this.totalRecords / this.rows);
82
+ }
83
+ // Go to previous page
84
+ goPrev() {
85
+ const newFirst = Math.max(this.first - this.rows, 0);
86
+ this.paginateChange.emit({ first: newFirst, rows: this.rows }); // EMIT EVENT
87
+ }
88
+ // Go to next page
89
+ goNext() {
90
+ const maxFirst = Math.max(0, (this.totalPages() - 1) * this.rows);
91
+ const newFirst = Math.min(this.first + this.rows, maxFirst);
92
+ this.paginateChange.emit({ first: newFirst, rows: this.rows }); // EMIT EVENT
93
+ }
94
+ // Check first/last page
95
+ isFirstPage() {
96
+ return this.first === 0;
97
+ }
98
+ isLastPage() {
99
+ return this.first + this.rows >= this.totalRecords;
100
+ }
70
101
  /**
71
102
  * Handles button click in a unified way.
72
103
  * - If btn.action is defined, execute it.
@@ -91,7 +122,7 @@ class GenericCrudHeaderComponent {
91
122
  }
92
123
  }
93
124
  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" }] });
125
+ 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", first: "first", rows: "rows", totalRecords: "totalRecords" }, outputs: { singleItemAction: "singleItemAction", bulkAction: "bulkAction", search: "search", resetSearch: "resetSearch", action: "action", paginateChange: "paginateChange" }, ngImport: i0, template: "@if (mode !== 'form-only' && mode !== 'detail') {\r\n<div class=\"flex items-start gap-2 justify-between\">\r\n <div>\r\n <app-breadcrumb\r\n class=\"xs:block hidden\"\r\n [breadcrumb]=\"breadcrumb\"\r\n ></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\r\n *ngFor=\"let btn of singleActionButtons; trackBy: trackByIdx\"\r\n >\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 [severity]=\"btn.severity\"\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 [severity]=\"btn.severity\"\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 [severity]=\"btn.severity\"\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} @if (mode !== 'form-only' && mode !== 'detail') {\r\n<div class=\"mt-2 mb-4 flex items-center justify-between\">\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\r\n icon=\"pi pi-refresh\"\r\n outlined\r\n severity=\"secondary\"\r\n (onClick)=\"reset()\"\r\n />\r\n <p-divider layout=\"vertical\" class=\"m-0 p-0 xs:block hidden\" />\r\n <p-button\r\n icon=\"pi pi-sort\"\r\n outlined\r\n severity=\"secondary\"\r\n class=\"xs:block hidden\"\r\n />\r\n <p-button\r\n label=\"1 of 15\"\r\n outlined\r\n severity=\"secondary\"\r\n class=\"xs:block hidden\"\r\n />\r\n <p-button\r\n icon=\"pi pi-chevron-right\"\r\n outlined\r\n severity=\"secondary\"\r\n class=\"xs:block hidden\"\r\n (click)=\"goNext()\"\r\n [disabled]=\"isLastPage()\"\r\n ></p-button>\r\n\r\n <p-button\r\n icon=\"pi pi-chevron-left\"\r\n outlined\r\n severity=\"secondary\"\r\n class=\"xs:block hidden\"\r\n (click)=\"goPrev()\"\r\n [disabled]=\"isFirstPage()\"\r\n ></p-button>\r\n\r\n\r\n </div>\r\n</div>\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
126
  }
96
127
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericCrudHeaderComponent, decorators: [{
97
128
  type: Component,
@@ -103,7 +134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
103
134
  ButtonModule,
104
135
  GenericSearch,
105
136
  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" }]
137
+ ], template: "@if (mode !== 'form-only' && mode !== 'detail') {\r\n<div class=\"flex items-start gap-2 justify-between\">\r\n <div>\r\n <app-breadcrumb\r\n class=\"xs:block hidden\"\r\n [breadcrumb]=\"breadcrumb\"\r\n ></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\r\n *ngFor=\"let btn of singleActionButtons; trackBy: trackByIdx\"\r\n >\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 [severity]=\"btn.severity\"\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 [severity]=\"btn.severity\"\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 [severity]=\"btn.severity\"\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} @if (mode !== 'form-only' && mode !== 'detail') {\r\n<div class=\"mt-2 mb-4 flex items-center justify-between\">\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\r\n icon=\"pi pi-refresh\"\r\n outlined\r\n severity=\"secondary\"\r\n (onClick)=\"reset()\"\r\n />\r\n <p-divider layout=\"vertical\" class=\"m-0 p-0 xs:block hidden\" />\r\n <p-button\r\n icon=\"pi pi-sort\"\r\n outlined\r\n severity=\"secondary\"\r\n class=\"xs:block hidden\"\r\n />\r\n <p-button\r\n label=\"1 of 15\"\r\n outlined\r\n severity=\"secondary\"\r\n class=\"xs:block hidden\"\r\n />\r\n <p-button\r\n icon=\"pi pi-chevron-right\"\r\n outlined\r\n severity=\"secondary\"\r\n class=\"xs:block hidden\"\r\n (click)=\"goNext()\"\r\n [disabled]=\"isLastPage()\"\r\n ></p-button>\r\n\r\n <p-button\r\n icon=\"pi pi-chevron-left\"\r\n outlined\r\n severity=\"secondary\"\r\n class=\"xs:block hidden\"\r\n (click)=\"goPrev()\"\r\n [disabled]=\"isFirstPage()\"\r\n ></p-button>\r\n\r\n\r\n </div>\r\n</div>\r\n}\r\n" }]
107
138
  }], propDecorators: { mode: [{
108
139
  type: Input
109
140
  }], breadcrumb: [{
@@ -124,6 +155,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
124
155
  type: Input
125
156
  }], showSearch: [{
126
157
  type: Input
158
+ }], first: [{
159
+ type: Input
160
+ }], rows: [{
161
+ type: Input
162
+ }], totalRecords: [{
163
+ type: Input
127
164
  }], singleItemAction: [{
128
165
  type: Output
129
166
  }], bulkAction: [{
@@ -134,6 +171,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
134
171
  type: Output
135
172
  }], action: [{
136
173
  type: Output
174
+ }], paginateChange: [{
175
+ type: Output
137
176
  }] } });
138
177
 
139
178
  /* eslint-disable @angular-eslint/no-output-on-prefix */
@@ -227,6 +266,34 @@ class GenericCrudTableComponent {
227
266
  permission: this.addPermissionName,
228
267
  },
229
268
  ];
269
+ createEditActions = [
270
+ {
271
+ icon: 'pi pi-check',
272
+ label: 'SAVE',
273
+ variant: 'raised',
274
+ severity: 'primary',
275
+ size: 'small',
276
+ actionName: 'save',
277
+ type: 'submit',
278
+ splitActions: [
279
+ {
280
+ label: this.translate.instant('SAVE_AND_ADD'),
281
+ icon: 'pi pi-save',
282
+ actionName: 'saveAndAdd'
283
+ }
284
+ ]
285
+ },
286
+ {
287
+ icon: 'pi pi-times',
288
+ label: 'CANCEL',
289
+ variant: 'raised',
290
+ severity: 'danger',
291
+ size: 'small',
292
+ actionName: 'cancel',
293
+ type: 'button',
294
+ },
295
+ ];
296
+ tabs = [];
230
297
  bulkActionButtons = [];
231
298
  singleActionButtons = [];
232
299
  _selectedRows = [];
@@ -265,17 +332,61 @@ class GenericCrudTableComponent {
265
332
  forceState = null;
266
333
  /** Hide table completely when in form-only mode */
267
334
  get hideTable() {
268
- return (this.mode === 'form-only' || (this.forceState && this.mode !== 'table-only')) ?? false;
335
+ return (this.mode === 'form-only' || this.mode === 'detail' || (this.forceState && this.mode !== 'table-only')) ?? false;
269
336
  }
270
337
  /** Auto-show form when in form-only mode with forceState */
271
338
  get autoShowForm() {
272
339
  return this.mode === 'form-only' && !!this.forceState;
273
340
  }
274
341
  tableClass = 'h-full flex-1 flex flex-col overflow-hidden border border-surface rounded-2xl xs:rounded-2xl p-4 bg-white';
342
+ route = inject(ActivatedRoute);
343
+ router = inject(Router);
344
+ currentId;
275
345
  ngOnInit() {
276
346
  if (this.apiName && this.apiName != '') {
277
347
  this.service.apiName = this.apiName;
278
348
  }
349
+ if (this.apiName) {
350
+ this.service.apiName = this.apiName;
351
+ }
352
+ if (this.tabs.length == 0) {
353
+ this.formFields_ = this.formFields;
354
+ this.tabs.push({ header: 'التفاصيل', icon: 'pi pi-info-circle', fields: this.formFields_, model: this.model });
355
+ }
356
+ this.route.paramMap.subscribe(params => {
357
+ const id = params.get(this.idField);
358
+ if (id) {
359
+ this.currentId = id;
360
+ this.mode = 'detail';
361
+ this.loadDetail(id);
362
+ }
363
+ else {
364
+ this.currentId = undefined;
365
+ }
366
+ });
367
+ }
368
+ // 3. Handle Header's Paginate Change Event
369
+ onHeaderPaginateChange(event) {
370
+ this.first = event.first; // Update the 'first' index
371
+ this.rows = event.rows;
372
+ const lazyLoadEvent = {
373
+ first: this.first,
374
+ rows: this.rows,
375
+ // You'd typically include current sorting and filtering state here
376
+ sortField: this.sortField,
377
+ sortOrder: 1,
378
+ filters: this.filters,
379
+ globalFilter: null, // or your current global filter value
380
+ };
381
+ this.onLazyLoad(lazyLoadEvent);
382
+ }
383
+ loadDetail(id) {
384
+ this.service.getList({ skipCount: 0, maxResultCount: 1, id }).subscribe({
385
+ next: res => {
386
+ const found = res.items.find(x => x[this.idField] == id);
387
+ this.model = found;
388
+ }
389
+ });
279
390
  }
280
391
  // Helper method to open form programmatically
281
392
  openForm(mode, model) {
@@ -358,7 +469,7 @@ class GenericCrudTableComponent {
358
469
  });
359
470
  }
360
471
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericCrudTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
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"] }] });
472
+ 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", createEditActions: "createEditActions", tabs: "tabs", 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' && mode !== 'detail' ? 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 (paginateChange)=\"onHeaderPaginateChange($event)\"\r\n [first]=\"first\"\r\n [rows]=\"rows\"\r\n [totalRecords]=\"totalRecords\"\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\r\n <app-detail-view\r\n [displayMode]=\"displayMode\"\r\n [mode]=\"mode\"\r\n [title]=\"breadcrumb_?.[0]?.label || 'Detail'\"\r\n [service]=\"service\"\r\n [apiName]=\"apiName\"\r\n [idField]=\"idField\"\r\n [actions]=\"actions\"\r\n [formFields]=\"formFields\"\r\n [model]=\"model\"\r\n [tabs]=\"tabs\"\r\n [loading]=\"loading\"\r\n [breadcrumb]=\"breadcrumb_\"\r\n [createEditActions]=\"createEditActions\"\r\n (action)=\"action.emit($event)\"\r\n >\r\n </app-detail-view>\r\n\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: ["form", "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", "first", "rows", "totalRecords"], outputs: ["singleItemAction", "bulkAction", "search", "resetSearch", "action", "paginateChange"] }, { kind: "component", type: GenericViewComponent, selector: "app-detail-view", inputs: ["title", "actions", "createEditActions", "tabs", "viewMode", "breadcrumb", "service", "formFields", "apiName", "idField", "standaloneMode", "isViewMode", "isCreateMode", "isEditMode", "model", "displayMode", "mode", "loading"], outputs: ["action", "afterDelete"] }] });
362
473
  }
363
474
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericCrudTableComponent, decorators: [{
364
475
  type: Component,
@@ -377,10 +488,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
377
488
  MessageModule,
378
489
  DialogModule,
379
490
  GenericDialogComponent,
380
- GenericCrudHeaderComponent
491
+ GenericCrudHeaderComponent,
492
+ GenericViewComponent
381
493
  ], host: {
382
494
  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" }]
495
+ }, template: "<div\r\n [class]=\"mode !== 'form-only' && mode !== 'detail' ? 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 (paginateChange)=\"onHeaderPaginateChange($event)\"\r\n [first]=\"first\"\r\n [rows]=\"rows\"\r\n [totalRecords]=\"totalRecords\"\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\r\n <app-detail-view\r\n [displayMode]=\"displayMode\"\r\n [mode]=\"mode\"\r\n [title]=\"breadcrumb_?.[0]?.label || 'Detail'\"\r\n [service]=\"service\"\r\n [apiName]=\"apiName\"\r\n [idField]=\"idField\"\r\n [actions]=\"actions\"\r\n [formFields]=\"formFields\"\r\n [model]=\"model\"\r\n [tabs]=\"tabs\"\r\n [loading]=\"loading\"\r\n [breadcrumb]=\"breadcrumb_\"\r\n [createEditActions]=\"createEditActions\"\r\n (action)=\"action.emit($event)\"\r\n >\r\n </app-detail-view>\r\n\r\n</div>\r\n" }]
384
496
  }], propDecorators: { genericTable: [{
385
497
  type: ViewChild,
386
498
  args: ['genericTable']
@@ -487,6 +599,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
487
599
  type: Input
488
600
  }], addButtonConfigs: [{
489
601
  type: Input
602
+ }], createEditActions: [{
603
+ type: Input
604
+ }], tabs: [{
605
+ type: Input
490
606
  }], bulkActionButtons: [{
491
607
  type: Input
492
608
  }], singleActionButtons: [{