@maro-tech/form 0.0.11 → 0.0.13
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.
|
@@ -2890,6 +2890,7 @@ class UiActionFormModalComponent {
|
|
|
2890
2890
|
recordId = input('', ...(ngDevMode ? [{ debugName: "recordId" }] : /* istanbul ignore next */ []));
|
|
2891
2891
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2892
2892
|
isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
2893
|
+
cancelLabel = input('Відмінити', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
|
|
2893
2894
|
initialValue = input({}, ...(ngDevMode ? [{ debugName: "initialValue" }] : /* istanbul ignore next */ []));
|
|
2894
2895
|
uploadPhoto = input(null, ...(ngDevMode ? [{ debugName: "uploadPhoto" }] : /* istanbul ignore next */ []));
|
|
2895
2896
|
closed = output();
|
|
@@ -2920,17 +2921,26 @@ class UiActionFormModalComponent {
|
|
|
2920
2921
|
onValueChange(value) {
|
|
2921
2922
|
this.formValue.set(value);
|
|
2922
2923
|
}
|
|
2923
|
-
onLookupCompleted(
|
|
2924
|
-
|
|
2924
|
+
onLookupCompleted(event) {
|
|
2925
|
+
const redirectTo = String(this.formConfig()?.redirectTo || '').trim();
|
|
2926
|
+
if (!redirectTo)
|
|
2927
|
+
return;
|
|
2928
|
+
const response = this.extractData(event.response) || event.response;
|
|
2929
|
+
const target = this.resolveTemplate(redirectTo, response);
|
|
2930
|
+
if (target && !target.includes('{{') && !target.includes(':')) {
|
|
2931
|
+
this.closed.emit();
|
|
2932
|
+
void this.router.navigateByUrl(target.startsWith('/') ? target : `/${target}`);
|
|
2933
|
+
}
|
|
2925
2934
|
}
|
|
2926
2935
|
onUploadingChange(uploading) {
|
|
2927
2936
|
this.isUploading.set(uploading);
|
|
2928
2937
|
}
|
|
2929
2938
|
onFieldActionTriggered(event) {
|
|
2930
|
-
const
|
|
2939
|
+
const payload = { ...this.formValue(), ...(event.action.payload || {}) };
|
|
2940
|
+
const endpoint = this.resolveTemplate(this.resolveEndpoint(event.action.api), payload);
|
|
2931
2941
|
if (!endpoint)
|
|
2932
2942
|
return;
|
|
2933
|
-
this.http.request(this.resolveMethod(event.action.method), endpoint, { body:
|
|
2943
|
+
this.http.request(this.resolveMethod(event.action.method), endpoint, { body: payload }).subscribe({
|
|
2934
2944
|
next: (response) => {
|
|
2935
2945
|
const data = this.extractData(response);
|
|
2936
2946
|
if (data)
|
|
@@ -2942,15 +2952,19 @@ class UiActionFormModalComponent {
|
|
|
2942
2952
|
if (this.isSubmitting())
|
|
2943
2953
|
return;
|
|
2944
2954
|
const action = this.submitAction();
|
|
2945
|
-
const
|
|
2955
|
+
const endpointTemplate = this.formConfig()?.api || action?.api;
|
|
2956
|
+
const endpoint = this.resolveEndpoint(endpointTemplate);
|
|
2946
2957
|
if (!endpoint)
|
|
2947
2958
|
return;
|
|
2948
2959
|
const payload = { ...(this.initialValue() || {}), ...(action?.payload || {}), ...this.formValue() };
|
|
2949
2960
|
const recordId = String(this.recordId() || '').trim();
|
|
2950
2961
|
if (recordId && !Object.prototype.hasOwnProperty.call(payload, 'id'))
|
|
2951
2962
|
payload['id'] = recordId;
|
|
2963
|
+
const resolvedEndpoint = this.resolveTemplate(endpoint, payload);
|
|
2964
|
+
if (!resolvedEndpoint || resolvedEndpoint.includes('{{'))
|
|
2965
|
+
return;
|
|
2952
2966
|
this.isSubmitting.set(true);
|
|
2953
|
-
this.http.request(this.resolveMethod(action?.method || (recordId ? 'PATCH' : 'POST')),
|
|
2967
|
+
this.http.request(this.resolveMethod(action?.method || (recordId ? 'PATCH' : 'POST')), resolvedEndpoint, { body: payload }).subscribe({
|
|
2954
2968
|
next: (response) => {
|
|
2955
2969
|
this.isSubmitting.set(false);
|
|
2956
2970
|
this.completed.emit(response);
|
|
@@ -3022,20 +3036,24 @@ class UiActionFormModalComponent {
|
|
|
3022
3036
|
if (!redirect)
|
|
3023
3037
|
return;
|
|
3024
3038
|
const data = this.extractData(response) || {};
|
|
3025
|
-
const target =
|
|
3026
|
-
const value = String(key).split('.').reduce((current, part) => current && typeof current === 'object' ? current[part] : undefined, data);
|
|
3027
|
-
return value == null ? '' : String(value);
|
|
3028
|
-
});
|
|
3039
|
+
const target = this.resolveTemplate(redirect, data);
|
|
3029
3040
|
if (target && !target.includes(':'))
|
|
3030
3041
|
void this.router.navigateByUrl(target.startsWith('/') ? target : `/${target}`);
|
|
3031
3042
|
}
|
|
3043
|
+
resolveTemplate(template, data) {
|
|
3044
|
+
return String(template || '').replace(/\{\{([a-zA-Z_][a-zA-Z0-9_.]*)\}\}|:([a-zA-Z_][a-zA-Z0-9_.]*)/g, (_match, bracesKey, colonKey) => {
|
|
3045
|
+
const key = String(bracesKey || colonKey || '');
|
|
3046
|
+
const value = key.split('.').reduce((current, part) => current && typeof current === 'object' ? current[part] : undefined, data);
|
|
3047
|
+
return value == null || value === '' ? '' : encodeURIComponent(String(value));
|
|
3048
|
+
});
|
|
3049
|
+
}
|
|
3032
3050
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiActionFormModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3033
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiActionFormModalComponent, isStandalone: true, selector: "forms-action-form-modal", inputs: { formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, uploadPhoto: { classPropertyName: "uploadPhoto", publicName: "uploadPhoto", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", completed: "completed" }, usesOnChanges: true, ngImport: i0, template: "@if (isOpen()) {\n <div class=\"fixed inset-0 z-50 flex items-
|
|
3051
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: UiActionFormModalComponent, isStandalone: true, selector: "forms-action-form-modal", inputs: { formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, uploadPhoto: { classPropertyName: "uploadPhoto", publicName: "uploadPhoto", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", completed: "completed" }, usesOnChanges: true, ngImport: i0, template: "@if (isOpen()) {\n <div class=\"fixed inset-0 z-50 flex min-h-full items-center justify-center overflow-y-auto bg-slate-950/40 p-4 sm:p-6\" role=\"dialog\" aria-modal=\"true\">\n <div class=\"my-0 flex min-h-0 max-h-[calc(100vh-2rem)] w-full flex-col overflow-hidden rounded-2xl bg-slate-50 shadow-2xl sm:max-h-[calc(100vh-3rem)]\" [ngClass]=\"panelClass()\">\n <div class=\"flex shrink-0 items-center justify-between border-b border-slate-200 bg-white px-5 py-4 sm:px-6\">\n <h2 class=\"text-lg font-semibold\">{{ formConfig()?.title || 'Form' }}</h2>\n <button type=\"button\" class=\"text-xl text-slate-400 hover:text-slate-900\" aria-label=\"Close\" (click)=\"close()\">\u00D7</button>\n </div>\n <div class=\"min-h-0 flex-1 overflow-y-auto p-4 sm:p-6\">\n @if (isLoading()) {\n <p class=\"text-sm text-slate-500\">Loading form\u2026</p>\n } @else {\n <forms-dynamic-form [fields]=\"fields()\" [value]=\"formValue()\" [showSubmit]=\"false\" [uploadPhoto]=\"uploadPhoto()\" (valueChange)=\"onValueChange($event)\" (lookupCompleted)=\"onLookupCompleted($event)\" (uploadingChange)=\"onUploadingChange($event)\" (fieldActionTriggered)=\"onFieldActionTriggered($event)\"></forms-dynamic-form>\n }\n </div>\n <div class=\"relative z-10 flex shrink-0 justify-end gap-3 border-t border-slate-200 bg-white px-5 py-4 sm:px-6\">\n <ui-button variant=\"ghost\" (click)=\"close()\">{{ cancelLabel() }}</ui-button>\n @if (submitAction()) { <ui-button variant=\"primary\" [disabled]=\"isLoading() || isSubmitting() || isUploading()\" (click)=\"confirm()\">{{ submitLabel() }}</ui-button> }\n </div>\n </div>\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "withShadow", "icon", "iconOnly", "ariaLabel"] }, { kind: "component", type: UiDynamicFormComponent, selector: "forms-dynamic-form", inputs: ["fields", "value", "errors", "submitLabel", "showSubmit", "disabled", "uploadPhoto"], outputs: ["valueChange", "lookupCompleted", "submitted", "filesChange", "uploadingChange", "fieldActionTriggered"] }] });
|
|
3034
3052
|
}
|
|
3035
3053
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiActionFormModalComponent, decorators: [{
|
|
3036
3054
|
type: Component,
|
|
3037
|
-
args: [{ selector: 'forms-action-form-modal', standalone: true, imports: [CommonModule, UiButtonComponent, UiDynamicFormComponent], template: "@if (isOpen()) {\n <div class=\"fixed inset-0 z-50 flex items-
|
|
3038
|
-
}], propDecorators: { formId: [{ type: i0.Input, args: [{ isSignal: true, alias: "formId", required: false }] }], recordId: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], uploadPhoto: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadPhoto", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
|
|
3055
|
+
args: [{ selector: 'forms-action-form-modal', standalone: true, imports: [CommonModule, UiButtonComponent, UiDynamicFormComponent], template: "@if (isOpen()) {\n <div class=\"fixed inset-0 z-50 flex min-h-full items-center justify-center overflow-y-auto bg-slate-950/40 p-4 sm:p-6\" role=\"dialog\" aria-modal=\"true\">\n <div class=\"my-0 flex min-h-0 max-h-[calc(100vh-2rem)] w-full flex-col overflow-hidden rounded-2xl bg-slate-50 shadow-2xl sm:max-h-[calc(100vh-3rem)]\" [ngClass]=\"panelClass()\">\n <div class=\"flex shrink-0 items-center justify-between border-b border-slate-200 bg-white px-5 py-4 sm:px-6\">\n <h2 class=\"text-lg font-semibold\">{{ formConfig()?.title || 'Form' }}</h2>\n <button type=\"button\" class=\"text-xl text-slate-400 hover:text-slate-900\" aria-label=\"Close\" (click)=\"close()\">\u00D7</button>\n </div>\n <div class=\"min-h-0 flex-1 overflow-y-auto p-4 sm:p-6\">\n @if (isLoading()) {\n <p class=\"text-sm text-slate-500\">Loading form\u2026</p>\n } @else {\n <forms-dynamic-form [fields]=\"fields()\" [value]=\"formValue()\" [showSubmit]=\"false\" [uploadPhoto]=\"uploadPhoto()\" (valueChange)=\"onValueChange($event)\" (lookupCompleted)=\"onLookupCompleted($event)\" (uploadingChange)=\"onUploadingChange($event)\" (fieldActionTriggered)=\"onFieldActionTriggered($event)\"></forms-dynamic-form>\n }\n </div>\n <div class=\"relative z-10 flex shrink-0 justify-end gap-3 border-t border-slate-200 bg-white px-5 py-4 sm:px-6\">\n <ui-button variant=\"ghost\" (click)=\"close()\">{{ cancelLabel() }}</ui-button>\n @if (submitAction()) { <ui-button variant=\"primary\" [disabled]=\"isLoading() || isSubmitting() || isUploading()\" (click)=\"confirm()\">{{ submitLabel() }}</ui-button> }\n </div>\n </div>\n </div>\n}\n" }]
|
|
3056
|
+
}], propDecorators: { formId: [{ type: i0.Input, args: [{ isSignal: true, alias: "formId", required: false }] }], recordId: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], uploadPhoto: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadPhoto", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
|
|
3039
3057
|
|
|
3040
3058
|
class UiInputComponent {
|
|
3041
3059
|
cdr = inject(ChangeDetectorRef);
|