@masterteam/forms 0.0.59 → 0.0.61

package/fesm2022/masterteam-forms-client-form.mjs

@@ -4,6 +4,7 @@ import * as i2 from '@angular/forms';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { switchMap, EMPTY, map } from 'rxjs';
 import { Skeleton } from 'primeng/skeleton';
 import { Button } from '@masterteam/components/button';
 import { EntitiesPreview } from '@masterteam/components/entities';
@@ -35,6 +36,13 @@ class ClientFormApiService {
     submit(request) {
         return this.http.post('process-submit', request);
     }
+    /**
+     * Validate the exact submit payload against backend-owned form rules
+     * before the real submit call.
+     */
+    validate(request) {
+        return this.http.post('process-submit/validate', request);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientFormApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ClientFormApiService, providedIn: 'root' });
 }
@@ -151,7 +159,6 @@ const WIDTH_TO_ENTITY_SIZE = {
  * @param lookups  Available lookup definitions for resolving Lookup/LookupMultiSelect options
  */
 function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups = [], context = null, readonly = false) {
-    const validationRules = mapValidationRules(config, lang);
     return {
         sections: config.sections
             .slice()
@@ -178,7 +185,6 @@ function mapToDynamicFormConfig(config, lang = 'en', mode = 'create', lookups =
             };
         })
             .filter((section) => section.fields.length > 0),
-        validationRules,
     };
 }
 /**
@@ -280,6 +286,7 @@ function mapPreviewSectionsToEntities(config, values, lang = 'en', mode = 'creat
                 configuration: {
                     ...property.configuration,
                     size: WIDTH_TO_ENTITY_SIZE[field.width] ?? 24,
+                    labelPosition: 'top',
                 },
             };
         }),
@@ -454,19 +461,6 @@ function buildFormulaCondition(field) {
         mode: 'auto',
     };
 }
-function mapValidationRules(config, lang) {
-    return (config.validations ?? []).map((rule) => ({
-        id: rule.id,
-        formulaTokens: rule.formulaTokens,
-        formulaText: rule.formulaText,
-        message: rule.message?.[lang] ??
-            rule.message?.en ??
-            rule.message?.ar ??
-            'Validation rule failed',
-        severity: rule.severity,
-        enabled: rule.enabled,
-    }));
-}
 /**
  * Resolve lookup items for Lookup / LookupMultiSelect viewTypes.
  *
@@ -717,8 +711,14 @@ class ClientForm {
     state = inject(ClientFormStateService);
     loadSub;
     submitSub;
+    formValueSub;
     hasStartedLoad = signal(false, ...(ngDevMode ? [{ debugName: "hasStartedLoad" }] : []));
-    runtimeMessages = signal([], ...(ngDevMode ? [{ debugName: "runtimeMessages" }] : []));
+    formRuntimeMessages = signal([], ...(ngDevMode ? [{ debugName: "formRuntimeMessages" }] : []));
+    submitValidationMessages = signal([], ...(ngDevMode ? [{ debugName: "submitValidationMessages" }] : []));
+    runtimeMessages = computed(() => [
+        ...this.formRuntimeMessages(),
+        ...this.submitValidationMessages(),
+    ], ...(ngDevMode ? [{ debugName: "runtimeMessages" }] : []));
     translocoService = inject(TranslocoService);
     // ============================================================================
     // Public State Signals (for parent access via viewChild)
@@ -950,6 +950,11 @@ class ClientForm {
     // Effects
     // ============================================================================
     constructor() {
+        this.formValueSub = this.formControl.valueChanges.subscribe(() => {
+            if (this.submitValidationMessages().length > 0) {
+                this.submitValidationMessages.set([]);
+            }
+        });
         // Auto-load when inputs are ready
         effect(() => {
             const autoLoad = this.autoLoad();
@@ -1000,7 +1005,8 @@ class ClientForm {
             return;
         this.loadSub?.unsubscribe();
         this.hasStartedLoad.set(true);
-        this.runtimeMessages.set([]);
+        this.formRuntimeMessages.set([]);
+        this.submitValidationMessages.set([]);
         this.state.loading.set(true);
         this.state.error.set(null);
         this.state.submitResponse.set(null);
@@ -1049,8 +1055,30 @@ class ClientForm {
         this.state.submitting.set(true);
         this.state.submitError.set(null);
         const request = this.buildSubmitRequest(loadResponse);
-        this.submitSub = this.api.submit(request).subscribe({
-            next: (response) => {
+        this.submitValidationMessages.set([]);
+        this.submitSub = this.api
+            .validate(request)
+            .pipe(switchMap((validationResponse) => {
+            const validation = validationResponse.data;
+            if (!validation) {
+                const msg = validationResponse.message ?? 'Failed to validate form';
+                this.state.submitting.set(false);
+                this.state.setSubmitError(msg);
+                this.errored.emit(msg);
+                return EMPTY;
+            }
+            this.submitValidationMessages.set(this.mapSubmitValidationMessages(validation.results ?? []));
+            if (validation.hasBlockingFailures) {
+                this.state.submitting.set(false);
+                return EMPTY;
+            }
+            return this.api.submit(request).pipe(map((response) => ({
+                kind: 'submit',
+                response,
+            })));
+        }))
+            .subscribe({
+            next: ({ response }) => {
                 this.state.submitting.set(false);
                 if (response.data) {
                     this.state.setSubmitResponse(response.data);
@@ -1063,7 +1091,9 @@ class ClientForm {
                 }
             },
             error: (err) => {
-                const msg = err?.error?.message ?? err?.message ?? 'Failed to submit form';
+                const msg = err?.error?.message ??
+                    err?.message ??
+                    'Failed to validate or submit form';
                 this.state.setSubmitError(msg);
                 this.errored.emit(msg);
             },
@@ -1094,7 +1124,7 @@ class ClientForm {
      * Check whether the current form state is valid.
      */
     isValid() {
-        return this.formControl.valid;
+        return this.formControl.valid && this.runtimeErrors().length === 0;
     }
     /**
      * Reset the component to its initial state.
@@ -1103,11 +1133,12 @@ class ClientForm {
         this.loadSub?.unsubscribe();
         this.submitSub?.unsubscribe();
         this.formControl.reset({});
-        this.runtimeMessages.set([]);
+        this.formRuntimeMessages.set([]);
+        this.submitValidationMessages.set([]);
         this.state.reset();
     }
     onRuntimeMessagesChange(messages) {
-        this.runtimeMessages.set(messages ?? []);
+        this.formRuntimeMessages.set(messages ?? []);
     }
     onStepChange(value) {
         const count = this.stepSections().length;
@@ -1155,6 +1186,7 @@ class ClientForm {
     ngOnDestroy() {
         this.loadSub?.unsubscribe();
         this.submitSub?.unsubscribe();
+        this.formValueSub?.unsubscribe();
     }
     // ============================================================================
     // Private Helpers
@@ -1229,6 +1261,45 @@ class ClientForm {
             loadResponse,
         });
     }
+    mapSubmitValidationMessages(results) {
+        return results
+            .filter((result) => !result.passed)
+            .map((result) => ({
+            code: result.isEvaluationError
+                ? 'FORMULA_EVALUATION_ERROR'
+                : 'FORMULA_FALSE',
+            severity: result.severity,
+            message: this.resolveSubmitValidationMessage(result),
+            ruleId: result.ruleId,
+        }));
+    }
+    resolveSubmitValidationMessage(result) {
+        const translatedMessage = this.resolveTranslatableValue(result.message);
+        if (translatedMessage) {
+            return translatedMessage;
+        }
+        const errorMessage = result.errorMessage?.trim();
+        if (errorMessage) {
+            return errorMessage;
+        }
+        return 'Form validation failed';
+    }
+    resolveTranslatableValue(value) {
+        if (typeof value === 'string') {
+            const normalized = value.trim();
+            return normalized.length > 0 ? normalized : null;
+        }
+        if (!value) {
+            return null;
+        }
+        const lang = this.lang();
+        const localized = value.display ?? value[lang] ?? value.en ?? value.ar ?? null;
+        if (typeof localized !== 'string') {
+            return null;
+        }
+        const normalized = localized.trim();
+        return normalized.length > 0 ? normalized : null;
+    }
     resolveStepTimelineState(stepValue, currentStep) {
         if (stepValue < currentStep) {
             return 'completed';