@elite.framework/ng.ui.core 2.0.2 → 2.0.4
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 +4 -1
- package/fesm2022/elite.framework-ng.ui.core-generic-crud-table.mjs.map +1 -1
- package/fesm2022/elite.framework-ng.ui.core-generic-view.mjs +19 -15
- package/fesm2022/elite.framework-ng.ui.core-generic-view.mjs.map +1 -1
- package/package.json +35 -35
|
@@ -114,27 +114,33 @@ class GenericViewComponent {
|
|
|
114
114
|
}));
|
|
115
115
|
}
|
|
116
116
|
getViewFields(fields = []) {
|
|
117
|
-
const flatten = (fields) => fields.flatMap(field => {
|
|
118
|
-
|
|
117
|
+
const flatten = (fields) => fields.flatMap((field) => {
|
|
118
|
+
/* 1. GROUP / PANEL / WRAPPER */
|
|
119
119
|
if (field.fieldGroup?.length) {
|
|
120
|
-
|
|
120
|
+
const children = flatten(field.fieldGroup);
|
|
121
|
+
if (!children.length)
|
|
122
|
+
return [];
|
|
123
|
+
return [{
|
|
124
|
+
...field,
|
|
125
|
+
wrappers: field.wrappers,
|
|
126
|
+
props: { ...field.props },
|
|
127
|
+
fieldGroupClassName: field.fieldGroupClassName,
|
|
128
|
+
fieldGroup: children
|
|
129
|
+
}];
|
|
121
130
|
}
|
|
122
|
-
|
|
131
|
+
/* 2. FIELD ARRAY (REPEAT / TABLE / MULTI) */
|
|
123
132
|
const fieldArrayConfig = typeof field.fieldArray === 'function'
|
|
124
133
|
? field.fieldArray(field)
|
|
125
134
|
: field.fieldArray;
|
|
126
135
|
if (field.fieldArray) {
|
|
127
|
-
|
|
128
|
-
if (field.props && (field.props['view']?.hidden))
|
|
136
|
+
if (field.props?.['view']?.hidden)
|
|
129
137
|
return [];
|
|
130
138
|
const children = flatten(fieldArrayConfig?.fieldGroup || []);
|
|
131
|
-
// IF NO CHILDREN RETURN EMPTY
|
|
132
139
|
if (!children.length)
|
|
133
140
|
return [];
|
|
134
|
-
// Return copy of repeat wrapper but in view-mode
|
|
135
141
|
return [{
|
|
136
142
|
...field,
|
|
137
|
-
type: field.props
|
|
143
|
+
type: field.props?.['view']?.type || field.type,
|
|
138
144
|
readonly: this.viewMode,
|
|
139
145
|
disabled: this.viewMode,
|
|
140
146
|
fieldArray: {
|
|
@@ -143,11 +149,9 @@ class GenericViewComponent {
|
|
|
143
149
|
}
|
|
144
150
|
}];
|
|
145
151
|
}
|
|
146
|
-
|
|
147
|
-
if (!field.props ||
|
|
148
|
-
field.props['view']?.hidden) {
|
|
152
|
+
/* 3. SINGLE FIELD */
|
|
153
|
+
if (!field.props || field.props['view']?.hidden)
|
|
149
154
|
return [];
|
|
150
|
-
}
|
|
151
155
|
const type = field.props['view']?.type ||
|
|
152
156
|
field.props['table']?.type ||
|
|
153
157
|
field.props['filter']?.type ||
|
|
@@ -370,7 +374,7 @@ class GenericViewComponent {
|
|
|
370
374
|
// this.goToMode(currentMode);
|
|
371
375
|
}
|
|
372
376
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
373
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: GenericViewComponent, isStandalone: true, selector: "app-detail-view", inputs: { title: "title", actions: "actions", createEditActions: "createEditActions", tabs: "tabs", viewMode: "viewMode", breadcrumb: "breadcrumb", service: "service", formFields: "formFields", apiName: "apiName", idField: "idField", standaloneMode: "standaloneMode", isViewMode: "isViewMode", isCreateMode: "isCreateMode", isEditMode: "isEditMode", model: "model", displayMode: "displayMode", mode: "mode", loading: "loading" }, outputs: { action: "action", afterDelete: "afterDelete" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }, { propertyName: "inlineForm", first: true, predicate: ["inlineForm"], descendants: true }], ngImport: i0, template: "\r\n@if (mode === 'detail') {\r\n<div class=\"w-full flex flex-col gap-3\">\r\n <!-- overlay -->\r\n <div *ngIf=\"loading\"\r\n class=\"absolute inset-0 bg-white/70 flex items-center justify-center z-50\">\r\n <p-progress-spinner/>\r\n </div>\r\n\r\n <!-- actual content -->\r\n <!-- Toolbar -->\r\n <p-toolbar style=\"background: transparent;border: 0px;box-shadow: none;\" class=\"bg-transparent shadow-none border-none rounded-md px-3\">\r\n <ng-template pTemplate=\"left\">\r\n <!-- <span class=\"font-semibold text-lg xs:hidden block\">{{ title }}</span> -->\r\n <app-breadcrumb class=\"xs:block\" [breadcrumb]=\"breadcrumb\"></app-breadcrumb> <!-- xs:block hidden -->\r\n </ng-template>\r\n <ng-template pTemplate=\"right\">\r\n <div class=\"flex gap-2\">\r\n\r\n <button\r\n pButton pRipple\r\n icon=\"pi pi-chevron-right\"\r\n class=\"p-button-text p-button-sm fd-btn\"\r\n pTooltip=\"\u0627\u0644\u062A\u0627\u0644\u064A\"\r\n (click)=\"next()\"\r\n ></button>\r\n <button\r\n pButton pRipple\r\n icon=\"pi pi-chevron-left\"\r\n class=\"p-button-text p-button-sm fd-btn\"\r\n pTooltip=\"\u0627\u0644\u0633\u0627\u0628\u0642\"\r\n (click)=\"previous()\"\r\n ></button>\r\n </div>\r\n </ng-template>\r\n </p-toolbar>\r\n <p-toolbar class=\"bg-white shadow rounded-md px-3\">\r\n\r\n <ng-template pTemplate=\"left\">\r\n @if (isViewMode) {\r\n <div class=\"flex gap-1\">\r\n @for (action of actions_; track $index) {\r\n <button\r\n pButton pRipple\r\n [icon]=\"action.icon ?? ''\"\r\n [label]=\"(action.label ?? '') | translate\"\r\n class=\"fd-btn\"\r\n (click)=\"onAction(action,model)\"\r\n ></button>\r\n }\r\n </div>\r\n }\r\n </ng-template>\r\n <ng-template pTemplate=\"right\">\r\n @if (isEditMode || isCreateMode) {\r\n <div class=\"flex gap-1\">\r\n @for (btn of createEditActions; track $index) {\r\n @if (!btn.visible || (btn.visible && btn.visible === true)) {\r\n @if (btn.type === 'submit' && inlineForm) {\r\n <lib-generic-button\r\n [type]=\"'submit'\"\r\n [loading]=\"inlineForm.loading\"\r\n [disabled]=\"inlineForm.loading || form.invalid\"\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [severity]=\"btn.severity\"\r\n [size]=\"btn.size\"\r\n [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"inlineForm.onSubmit()\"\r\n ></lib-generic-button>\r\n }\r\n @else{\r\n <lib-generic-button\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [severity]=\"btn.severity\"\r\n [size]=\"btn.size\"\r\n [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"handleCreateEditAction(btn)\"\r\n ></lib-generic-button>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n </p-toolbar>\r\n\r\n <!-- Tabs -->\r\n <p-tabs value=\"0\">\r\n <p-tablist>\r\n @for (tab of tabs_; track $index) {\r\n <p-tab value=\"{{$index}}\">\r\n <i [class]=\"tab.icon\"></i>\r\n <span class=\"mr-1 ml-1\">{{ tab.header }}</span>\r\n </p-tab>\r\n }\r\n </p-tablist>\r\n <p-tabpanels>\r\n @for (tab of tabs_; track $index) {\r\n <p-tabpanel value=\"{{$index}}\">\r\n\r\n <!-- Formly fields -->\r\n <!-- p-4 grid grid-cols-1 md:grid-cols-2 gap-4 -->\r\n <div class=\"border border-surface p-4\">\r\n @if (tab.fields.length && $index === 0) {\r\n\r\n <form *ngIf=\"form\" [formGroup]=\"form\">\r\n @if (tab.fields.length && $index === 0 ) {\r\n @if (isEditMode || isCreateMode) {\r\n <app-generic-dialog\r\n #inlineForm\r\n [form]=\"form\"\r\n [model]=\"model\"\r\n [formFields]=\"formFields ?? []\"\r\n [apiName]=\"apiName\"\r\n [idField]=\"idField ??'id'\"\r\n [displayMode]=\"'inline'\"\r\n [mode]=\"'form-only'\"\r\n [forceState]=\"isCreateMode ? 'create':'edit'\"\r\n (afterSave)=\"afterSave($event)\"\r\n >\r\n </app-generic-dialog>\r\n}\r\n@else if(isViewMode){\r\n <formly-form\r\n [form]=\"form\"\r\n [fields]=\"tab.fields\"\r\n [model]=\"model\"\r\n ></formly-form>\r\n}\r\n}\r\n </form>\r\n\r\n }\r\n @if (tab.fields.length && $index > 0) {\r\n\r\n\r\n <formly-form\r\n [form]=\"getForm($index)\"\r\n [fields]=\"tab.fields\"\r\n [model]=\"tab.model || model\"\r\n ></formly-form>\r\n\r\n }\r\n\r\n <!-- Custom template -->\r\n @if (tab.content) {\r\n <ng-container\r\n *ngTemplateOutlet=\"tab.content; context: { model: model }\">\r\n </ng-container>\r\n }\r\n </div>\r\n </p-tabpanel>\r\n }\r\n </p-tabpanels>\r\n </p-tabs>\r\n</div>\r\n\r\n<!-- [model]=\"model\" -->\r\n <app-generic-dialog\r\n #dialog\r\n [formFields]=\"formFields ?? []\"\r\n [apiName]=\"apiName\"\r\n [idField]=\"idField ??'id'\"\r\n [displayMode]=\"displayMode ?? 'dialog'\"\r\n (afterSave)=\"afterSave($event)\"\r\n >\r\n </app-generic-dialog>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i2.Toolbar, selector: "p-toolbar", inputs: ["styleClass", "ariaLabelledBy"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i5.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i5.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i5.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i5.TabList, selector: "p-tablist" }, { kind: "component", type: i5.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: BreadcrumbComponent, selector: "app-breadcrumb", inputs: ["breadcrumb"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { 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: 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: ProgressSpinnerModule }, { kind: "component", type: i8.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] });
|
|
377
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: GenericViewComponent, isStandalone: true, selector: "app-detail-view", inputs: { title: "title", actions: "actions", createEditActions: "createEditActions", tabs: "tabs", viewMode: "viewMode", breadcrumb: "breadcrumb", service: "service", formFields: "formFields", apiName: "apiName", idField: "idField", standaloneMode: "standaloneMode", isViewMode: "isViewMode", isCreateMode: "isCreateMode", isEditMode: "isEditMode", model: "model", displayMode: "displayMode", mode: "mode", loading: "loading" }, outputs: { action: "action", afterDelete: "afterDelete" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }, { propertyName: "inlineForm", first: true, predicate: ["inlineForm"], descendants: true }], ngImport: i0, template: "\r\n@if (mode === 'detail') {\r\n<div class=\"w-full flex flex-col gap-3\">\r\n <!-- overlay -->\r\n <div *ngIf=\"loading\"\r\n class=\"absolute inset-0 bg-white/70 flex items-center justify-center z-50\">\r\n <p-progress-spinner/>\r\n </div>\r\n\r\n <!-- actual content -->\r\n <!-- Toolbar -->\r\n <p-toolbar style=\"background: transparent;border: 0px;box-shadow: none;\" class=\"bg-transparent shadow-none border-none rounded-md px-3\">\r\n <ng-template pTemplate=\"left\">\r\n <!-- <span class=\"font-semibold text-lg xs:hidden block\">{{ title }}</span> -->\r\n <app-breadcrumb class=\"xs:block\" [breadcrumb]=\"breadcrumb\"></app-breadcrumb> <!-- xs:block hidden -->\r\n </ng-template>\r\n <ng-template pTemplate=\"right\">\r\n <div class=\"flex gap-2\">\r\n\r\n <button\r\n pButton pRipple\r\n icon=\"pi pi-chevron-right\"\r\n class=\"p-button-text p-button-sm fd-btn\"\r\n pTooltip=\"\u0627\u0644\u062A\u0627\u0644\u064A\"\r\n (click)=\"next()\"\r\n ></button>\r\n <button\r\n pButton pRipple\r\n icon=\"pi pi-chevron-left\"\r\n class=\"p-button-text p-button-sm fd-btn\"\r\n pTooltip=\"\u0627\u0644\u0633\u0627\u0628\u0642\"\r\n (click)=\"previous()\"\r\n ></button>\r\n </div>\r\n </ng-template>\r\n </p-toolbar>\r\n <p-toolbar class=\"bg-white shadow rounded-md px-3\">\r\n\r\n <ng-template pTemplate=\"left\">\r\n @if (isViewMode) {\r\n <div class=\"flex gap-1\">\r\n @for (action of actions_; track $index) {\r\n <button\r\n pButton pRipple\r\n [icon]=\"action.icon ?? ''\"\r\n [label]=\"(action.label ?? '') | translate\"\r\n class=\"fd-btn\"\r\n (click)=\"onAction(action,model)\"\r\n ></button>\r\n }\r\n </div>\r\n }\r\n </ng-template>\r\n <ng-template pTemplate=\"right\">\r\n @if (isEditMode || isCreateMode) {\r\n <div class=\"flex gap-1\">\r\n @for (btn of createEditActions; track $index) {\r\n @if (!btn.visible || (btn.visible && btn.visible === true)) {\r\n @if (btn.type === 'submit' && inlineForm) {\r\n <lib-generic-button\r\n [type]=\"'submit'\"\r\n [loading]=\"inlineForm.loading\"\r\n [disabled]=\"inlineForm.loading || form.invalid\"\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [severity]=\"btn.severity\"\r\n [size]=\"btn.size\"\r\n [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"inlineForm.onSubmit()\"\r\n ></lib-generic-button>\r\n }\r\n @else{\r\n <lib-generic-button\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [severity]=\"btn.severity\"\r\n [size]=\"btn.size\"\r\n [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"handleCreateEditAction(btn)\"\r\n ></lib-generic-button>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n </p-toolbar>\r\n\r\n <!-- Tabs -->\r\n <p-tabs value=\"0\">\r\n <p-tablist>\r\n @for (tab of tabs_; track $index) {\r\n <p-tab value=\"{{$index}}\">\r\n <i [class]=\"tab.icon\"></i>\r\n <span class=\"mr-1 ml-1\">{{ tab.header }}</span>\r\n </p-tab>\r\n }\r\n </p-tablist>\r\n <p-tabpanels>\r\n @for (tab of tabs_; track $index) {\r\n <p-tabpanel value=\"{{$index}}\">\r\n\r\n <!-- Formly fields -->\r\n <!-- border border-surface p-4-->\r\n <div class=\"\">\r\n @if (tab.fields.length && $index === 0) {\r\n\r\n <form *ngIf=\"form\" [formGroup]=\"form\">\r\n @if (tab.fields.length && $index === 0 ) {\r\n @if (isEditMode || isCreateMode) {\r\n <app-generic-dialog\r\n #inlineForm\r\n [form]=\"form\"\r\n [model]=\"model\"\r\n [formFields]=\"formFields ?? []\"\r\n [apiName]=\"apiName\"\r\n [idField]=\"idField ??'id'\"\r\n [displayMode]=\"'inline'\"\r\n [mode]=\"'form-only'\"\r\n [forceState]=\"isCreateMode ? 'create':'edit'\"\r\n (afterSave)=\"afterSave($event)\"\r\n >\r\n </app-generic-dialog>\r\n}\r\n@else if(isViewMode){\r\n <formly-form\r\n [form]=\"form\"\r\n [fields]=\"tab.fields\"\r\n [model]=\"model\"\r\n ></formly-form>\r\n}\r\n}\r\n </form>\r\n\r\n }\r\n @if (tab.fields.length && $index > 0) {\r\n\r\n\r\n <formly-form\r\n [form]=\"getForm($index)\"\r\n [fields]=\"tab.fields\"\r\n [model]=\"tab.model || model\"\r\n ></formly-form>\r\n\r\n }\r\n\r\n <!-- Custom template -->\r\n @if (tab.content) {\r\n <ng-container\r\n *ngTemplateOutlet=\"tab.content; context: { model: model }\">\r\n </ng-container>\r\n }\r\n </div>\r\n </p-tabpanel>\r\n }\r\n </p-tabpanels>\r\n </p-tabs>\r\n</div>\r\n\r\n<!-- [model]=\"model\" -->\r\n <app-generic-dialog\r\n #dialog\r\n [formFields]=\"formFields ?? []\"\r\n [apiName]=\"apiName\"\r\n [idField]=\"idField ??'id'\"\r\n [displayMode]=\"displayMode ?? 'dialog'\"\r\n (afterSave)=\"afterSave($event)\"\r\n >\r\n </app-generic-dialog>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i2.Toolbar, selector: "p-toolbar", inputs: ["styleClass", "ariaLabelledBy"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i5.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i5.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i5.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i5.TabList, selector: "p-tablist" }, { kind: "component", type: i5.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: BreadcrumbComponent, selector: "app-breadcrumb", inputs: ["breadcrumb"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { 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: 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: ProgressSpinnerModule }, { kind: "component", type: i8.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] });
|
|
374
378
|
}
|
|
375
379
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericViewComponent, decorators: [{
|
|
376
380
|
type: Component,
|
|
@@ -388,7 +392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
|
|
|
388
392
|
GenericDialogComponent,
|
|
389
393
|
GenericButton,
|
|
390
394
|
ProgressSpinnerModule
|
|
391
|
-
], template: "\r\n@if (mode === 'detail') {\r\n<div class=\"w-full flex flex-col gap-3\">\r\n <!-- overlay -->\r\n <div *ngIf=\"loading\"\r\n class=\"absolute inset-0 bg-white/70 flex items-center justify-center z-50\">\r\n <p-progress-spinner/>\r\n </div>\r\n\r\n <!-- actual content -->\r\n <!-- Toolbar -->\r\n <p-toolbar style=\"background: transparent;border: 0px;box-shadow: none;\" class=\"bg-transparent shadow-none border-none rounded-md px-3\">\r\n <ng-template pTemplate=\"left\">\r\n <!-- <span class=\"font-semibold text-lg xs:hidden block\">{{ title }}</span> -->\r\n <app-breadcrumb class=\"xs:block\" [breadcrumb]=\"breadcrumb\"></app-breadcrumb> <!-- xs:block hidden -->\r\n </ng-template>\r\n <ng-template pTemplate=\"right\">\r\n <div class=\"flex gap-2\">\r\n\r\n <button\r\n pButton pRipple\r\n icon=\"pi pi-chevron-right\"\r\n class=\"p-button-text p-button-sm fd-btn\"\r\n pTooltip=\"\u0627\u0644\u062A\u0627\u0644\u064A\"\r\n (click)=\"next()\"\r\n ></button>\r\n <button\r\n pButton pRipple\r\n icon=\"pi pi-chevron-left\"\r\n class=\"p-button-text p-button-sm fd-btn\"\r\n pTooltip=\"\u0627\u0644\u0633\u0627\u0628\u0642\"\r\n (click)=\"previous()\"\r\n ></button>\r\n </div>\r\n </ng-template>\r\n </p-toolbar>\r\n <p-toolbar class=\"bg-white shadow rounded-md px-3\">\r\n\r\n <ng-template pTemplate=\"left\">\r\n @if (isViewMode) {\r\n <div class=\"flex gap-1\">\r\n @for (action of actions_; track $index) {\r\n <button\r\n pButton pRipple\r\n [icon]=\"action.icon ?? ''\"\r\n [label]=\"(action.label ?? '') | translate\"\r\n class=\"fd-btn\"\r\n (click)=\"onAction(action,model)\"\r\n ></button>\r\n }\r\n </div>\r\n }\r\n </ng-template>\r\n <ng-template pTemplate=\"right\">\r\n @if (isEditMode || isCreateMode) {\r\n <div class=\"flex gap-1\">\r\n @for (btn of createEditActions; track $index) {\r\n @if (!btn.visible || (btn.visible && btn.visible === true)) {\r\n @if (btn.type === 'submit' && inlineForm) {\r\n <lib-generic-button\r\n [type]=\"'submit'\"\r\n [loading]=\"inlineForm.loading\"\r\n [disabled]=\"inlineForm.loading || form.invalid\"\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [severity]=\"btn.severity\"\r\n [size]=\"btn.size\"\r\n [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"inlineForm.onSubmit()\"\r\n ></lib-generic-button>\r\n }\r\n @else{\r\n <lib-generic-button\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [severity]=\"btn.severity\"\r\n [size]=\"btn.size\"\r\n [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"handleCreateEditAction(btn)\"\r\n ></lib-generic-button>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n </p-toolbar>\r\n\r\n <!-- Tabs -->\r\n <p-tabs value=\"0\">\r\n <p-tablist>\r\n @for (tab of tabs_; track $index) {\r\n <p-tab value=\"{{$index}}\">\r\n <i [class]=\"tab.icon\"></i>\r\n <span class=\"mr-1 ml-1\">{{ tab.header }}</span>\r\n </p-tab>\r\n }\r\n </p-tablist>\r\n <p-tabpanels>\r\n @for (tab of tabs_; track $index) {\r\n <p-tabpanel value=\"{{$index}}\">\r\n\r\n <!-- Formly fields -->\r\n <!--
|
|
395
|
+
], template: "\r\n@if (mode === 'detail') {\r\n<div class=\"w-full flex flex-col gap-3\">\r\n <!-- overlay -->\r\n <div *ngIf=\"loading\"\r\n class=\"absolute inset-0 bg-white/70 flex items-center justify-center z-50\">\r\n <p-progress-spinner/>\r\n </div>\r\n\r\n <!-- actual content -->\r\n <!-- Toolbar -->\r\n <p-toolbar style=\"background: transparent;border: 0px;box-shadow: none;\" class=\"bg-transparent shadow-none border-none rounded-md px-3\">\r\n <ng-template pTemplate=\"left\">\r\n <!-- <span class=\"font-semibold text-lg xs:hidden block\">{{ title }}</span> -->\r\n <app-breadcrumb class=\"xs:block\" [breadcrumb]=\"breadcrumb\"></app-breadcrumb> <!-- xs:block hidden -->\r\n </ng-template>\r\n <ng-template pTemplate=\"right\">\r\n <div class=\"flex gap-2\">\r\n\r\n <button\r\n pButton pRipple\r\n icon=\"pi pi-chevron-right\"\r\n class=\"p-button-text p-button-sm fd-btn\"\r\n pTooltip=\"\u0627\u0644\u062A\u0627\u0644\u064A\"\r\n (click)=\"next()\"\r\n ></button>\r\n <button\r\n pButton pRipple\r\n icon=\"pi pi-chevron-left\"\r\n class=\"p-button-text p-button-sm fd-btn\"\r\n pTooltip=\"\u0627\u0644\u0633\u0627\u0628\u0642\"\r\n (click)=\"previous()\"\r\n ></button>\r\n </div>\r\n </ng-template>\r\n </p-toolbar>\r\n <p-toolbar class=\"bg-white shadow rounded-md px-3\">\r\n\r\n <ng-template pTemplate=\"left\">\r\n @if (isViewMode) {\r\n <div class=\"flex gap-1\">\r\n @for (action of actions_; track $index) {\r\n <button\r\n pButton pRipple\r\n [icon]=\"action.icon ?? ''\"\r\n [label]=\"(action.label ?? '') | translate\"\r\n class=\"fd-btn\"\r\n (click)=\"onAction(action,model)\"\r\n ></button>\r\n }\r\n </div>\r\n }\r\n </ng-template>\r\n <ng-template pTemplate=\"right\">\r\n @if (isEditMode || isCreateMode) {\r\n <div class=\"flex gap-1\">\r\n @for (btn of createEditActions; track $index) {\r\n @if (!btn.visible || (btn.visible && btn.visible === true)) {\r\n @if (btn.type === 'submit' && inlineForm) {\r\n <lib-generic-button\r\n [type]=\"'submit'\"\r\n [loading]=\"inlineForm.loading\"\r\n [disabled]=\"inlineForm.loading || form.invalid\"\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [severity]=\"btn.severity\"\r\n [size]=\"btn.size\"\r\n [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"inlineForm.onSubmit()\"\r\n ></lib-generic-button>\r\n }\r\n @else{\r\n <lib-generic-button\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [severity]=\"btn.severity\"\r\n [size]=\"btn.size\"\r\n [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"handleCreateEditAction(btn)\"\r\n ></lib-generic-button>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n </p-toolbar>\r\n\r\n <!-- Tabs -->\r\n <p-tabs value=\"0\">\r\n <p-tablist>\r\n @for (tab of tabs_; track $index) {\r\n <p-tab value=\"{{$index}}\">\r\n <i [class]=\"tab.icon\"></i>\r\n <span class=\"mr-1 ml-1\">{{ tab.header }}</span>\r\n </p-tab>\r\n }\r\n </p-tablist>\r\n <p-tabpanels>\r\n @for (tab of tabs_; track $index) {\r\n <p-tabpanel value=\"{{$index}}\">\r\n\r\n <!-- Formly fields -->\r\n <!-- border border-surface p-4-->\r\n <div class=\"\">\r\n @if (tab.fields.length && $index === 0) {\r\n\r\n <form *ngIf=\"form\" [formGroup]=\"form\">\r\n @if (tab.fields.length && $index === 0 ) {\r\n @if (isEditMode || isCreateMode) {\r\n <app-generic-dialog\r\n #inlineForm\r\n [form]=\"form\"\r\n [model]=\"model\"\r\n [formFields]=\"formFields ?? []\"\r\n [apiName]=\"apiName\"\r\n [idField]=\"idField ??'id'\"\r\n [displayMode]=\"'inline'\"\r\n [mode]=\"'form-only'\"\r\n [forceState]=\"isCreateMode ? 'create':'edit'\"\r\n (afterSave)=\"afterSave($event)\"\r\n >\r\n </app-generic-dialog>\r\n}\r\n@else if(isViewMode){\r\n <formly-form\r\n [form]=\"form\"\r\n [fields]=\"tab.fields\"\r\n [model]=\"model\"\r\n ></formly-form>\r\n}\r\n}\r\n </form>\r\n\r\n }\r\n @if (tab.fields.length && $index > 0) {\r\n\r\n\r\n <formly-form\r\n [form]=\"getForm($index)\"\r\n [fields]=\"tab.fields\"\r\n [model]=\"tab.model || model\"\r\n ></formly-form>\r\n\r\n }\r\n\r\n <!-- Custom template -->\r\n @if (tab.content) {\r\n <ng-container\r\n *ngTemplateOutlet=\"tab.content; context: { model: model }\">\r\n </ng-container>\r\n }\r\n </div>\r\n </p-tabpanel>\r\n }\r\n </p-tabpanels>\r\n </p-tabs>\r\n</div>\r\n\r\n<!-- [model]=\"model\" -->\r\n <app-generic-dialog\r\n #dialog\r\n [formFields]=\"formFields ?? []\"\r\n [apiName]=\"apiName\"\r\n [idField]=\"idField ??'id'\"\r\n [displayMode]=\"displayMode ?? 'dialog'\"\r\n (afterSave)=\"afterSave($event)\"\r\n >\r\n </app-generic-dialog>\r\n}\r\n" }]
|
|
392
396
|
}], propDecorators: { title: [{
|
|
393
397
|
type: Input
|
|
394
398
|
}], actions: [{
|