platformcommons-web-lib 1.0.0

package/src/lib/modules/configurable-form/component/configurable-form.component.ts

@@ -0,0 +1,628 @@
+import { Component, EventEmitter, Input, OnInit, Output, OnChanges, SimpleChanges } from '@angular/core';
+import { FormBuilder, FormGroup, FormControl, FormArray, Validators, AbstractControl, ReactiveFormsModule } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { HttpClient } from '@angular/common/http';
+import {
+    FormConfig,
+    FormField,
+    FormSection,
+    FormOption,
+    JsonFormConfig,
+    JsonFieldConfig,
+    FieldType,
+    UISubType
+} from '../configurable-form.model';
+import { CommonModule } from '@angular/common';
+import { MaterialModule } from '../../material/material.module';
+import { translateConfig } from '../../../utils/translation.utils';
+
+@Component({
+    selector: 'lib-configurable-form',
+    templateUrl: './configurable-form.component.html',
+    styleUrls: ['./configurable-form.component.scss'],
+    standalone: true,
+    imports: [CommonModule, ReactiveFormsModule, MaterialModule],
+})
+export class ConfigurableFormComponent implements OnInit, OnChanges {
+    @Input() config!: FormConfig;
+    @Input() jsonConfig!: JsonFormConfig;
+    @Input() data: any = {};
+    @Input() baseApiUrl: string = '';
+    @Input() labels: any;
+    @Output() optionsLoad = new EventEmitter<any>();
+
+    form!: FormGroup;
+    processedConfig!: FormConfig;
+    fieldVisibilityMap: Map<string, boolean> = new Map();
+    passwordFieldState: Map<string, boolean> = new Map();
+
+    constructor(
+        private fb: FormBuilder,
+        private snackBar: MatSnackBar,
+        private http: HttpClient
+    ) { }
+
+    ngOnInit(): void {
+        this.initializeForm();
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes['config'] || changes['jsonConfig']) {
+            this.initializeForm();
+        }
+        if (changes['data'] && this.form) {
+            this.form.patchValue(this.data);
+        }
+    }
+
+    initializeForm() {
+        // Transform JSON config if provided, otherwise use config directly
+        if (this.jsonConfig) {
+            this.processedConfig = this.transformJsonConfig(this.jsonConfig);
+        } else if (this.config) {
+            this.processedConfig = JSON.parse(JSON.stringify(this.config));
+        } else {
+            return;
+        }
+
+        // Apply translations if labels and labelsObject are provided
+        if (this.labels && this.labels.labelsObject) {
+            translateConfig(this.processedConfig, this.labels.labelsObject);
+        }
+
+
+        this.normalizeFields();
+        this.initializeFieldVisibility();
+        this.buildForm();
+        this.setupDependencies();
+
+        // Patch initial data if provided
+        if (this.data && Object.keys(this.data).length > 0) {
+            this.form.patchValue(this.data);
+        }
+    }
+
+    // Transform JSON config format to internal FormConfig format
+    transformJsonConfig(jsonConfig: JsonFormConfig): FormConfig {
+        const fields = jsonConfig.jsonConfig
+            .sort((a, b) => a.sequence - b.sequence)
+            .map(field => this.transformJsonField(field));
+
+        return {
+            sections: [{
+                sectionTitle: jsonConfig.label,
+                fields: fields
+            }],
+            entityType: jsonConfig.entityType
+        };
+    }
+
+    // Transform individual JSON field to FormField
+    transformJsonField(jsonField: JsonFieldConfig): FormField {
+        const fieldType = this.mapUISubTypeToFieldType(jsonField.uiConfig.subType);
+
+        return {
+            name: jsonField.jsonKey,
+            jsonKey: jsonField.jsonKey,
+            label: jsonField.label,
+            type: fieldType,
+            sequence: jsonField.sequence,
+            keyType: jsonField.keyType,
+            uiConfig: jsonField.uiConfig,
+            validationRules: jsonField.validationRules,
+            required: jsonField.validationRules?.isMandatory || jsonField.validationRules?.isRequired,
+            mandatory: jsonField.validationRules?.isMandatory,
+            dependsOn: undefined, // Will be set based on dependent array
+            dependent: jsonField.uiConfig.dependent,
+            optionConfigs: jsonField.uiConfig.optionConfigs,
+            class: 'col-12'
+        };
+    }
+
+    // Map UI subtype to field type
+    mapUISubTypeToFieldType(subType?: string): FieldType {
+        switch (subType) {
+            case 'UI_SUBTYPE.SHORT_TEXT':
+                return 'text';
+            case 'UI_SUBTYPE.LONG_TEXT':
+                return 'textarea';
+            case 'UI_SUBTYPE.NUMBER':
+                return 'number';
+            case 'UI_SUBTYPE.EMAIL':
+                return 'email';
+            case 'UI_SUBTYPE.PHONE':
+                return 'tel';
+            case 'UI_SUBTYPE.URL':
+                return 'url';
+            default:
+                return 'text';
+        }
+    }
+
+    // Normalize fields to ensure all required properties exist
+    normalizeFields() {
+        this.processedConfig.sections.forEach(section => {
+            section.fields.forEach(field => {
+                // Set default type if not specified
+                if (!field.type) {
+                    field.type = 'text';
+                }
+
+                // Merge uiConfig with field-level properties
+                if (field.uiConfig) {
+                    if (field.uiConfig.type === 'UI_TYPE.DROP_DOWN') {
+                        field.type = 'dropdown';
+                    }
+                    if (field.uiConfig.optionConfigs) {
+                        field.optionConfigs = field.uiConfig.optionConfigs;
+                    }
+                    if (field.uiConfig.dependent) {
+                        field.dependent = field.uiConfig.dependent;
+                    }
+                }
+
+                // Initialize visibility
+                if (field.visible === undefined) {
+                    field.visible = true;
+                }
+
+                // Load options for dropdowns
+                if ((field.type === 'dropdown' || field.type === 'select') && field.optionConfigs) {
+                    this.loadFieldOptions(field);
+                }
+            });
+        });
+    }
+
+    // Initialize field visibility map
+    initializeFieldVisibility() {
+        this.processedConfig.sections.forEach(section => {
+            section.fields.forEach(field => {
+                this.fieldVisibilityMap.set(field.name, field.visible !== false);
+            });
+        });
+    }
+
+    buildForm() {
+        const formGroupConfig: any = {};
+
+        this.processedConfig.sections.forEach(section => {
+            if (section.isRepeater) {
+                // Create FormArray for repeater sections
+                const arrayName = section.formArrayName || 'items';
+                const minItems = section.minItems || 1;
+                const initialItems = [];
+
+                for (let i = 0; i < minItems; i++) {
+                    initialItems.push(this.createGroup(section.fields));
+                }
+
+                formGroupConfig[arrayName] = this.fb.array(initialItems);
+            } else {
+                // Add regular fields to form group
+                section.fields.forEach(field => {
+                    if (field.subFields) {
+                        // Composite field - add all sub-fields
+                        field.subFields.forEach(subField => {
+                            if (field.required || field.mandatory) {
+                                subField.required = true;
+                            }
+                            formGroupConfig[subField.name] = this.createControl(subField);
+                        });
+                    } else {
+                        formGroupConfig[field.name] = this.createControl(field);
+                    }
+                });
+            }
+        });
+
+        this.form = this.fb.group(formGroupConfig);
+
+        // Apply composite validators to the root form group
+        this.processedConfig.sections.forEach(section => {
+            if (!section.isRepeater) {
+                section.fields.forEach(field => {
+                    if (field.type === 'composite' && field.compositeValidationRule && field.subFields) {
+                        this.form.addValidators(this.createCompositeValidator(field));
+                    }
+                });
+            }
+        });
+        this.form.updateValueAndValidity();
+    }
+
+    createCompositeValidator(field: FormField) {
+        return (control: AbstractControl) => {
+            const group = control as FormGroup;
+            if (!field.subFields || field.subFields.length < 2) return null;
+
+            if (field.compositeValidationRule === 'minMax') {
+                const minControl = group.get(field.subFields[0].name);
+                const maxControl = group.get(field.subFields[1].name);
+
+                if (minControl && maxControl && minControl.value !== null && maxControl.value !== null) {
+                    if (Number(minControl.value) > Number(maxControl.value)) {
+                        return { [`invalid_minMax_${field.name}`]: true };
+                    }
+                }
+            }
+
+            if (field.compositeValidationRule === 'percentageTotal') {
+                let total = 0;
+                let allPresent = true;
+
+                field.subFields.forEach(sub => {
+                    const ctrl = group.get(sub.name);
+                    if (ctrl && ctrl.value !== null && ctrl.value !== '') {
+                        total += Number(ctrl.value);
+                    } else {
+                        allPresent = false;
+                    }
+                });
+
+                if (allPresent && total !== 100) {
+                    return { [`invalid_percentageTotal_${field.name}`]: true };
+                }
+            }
+
+            return null;
+        };
+    }
+
+    createControl(field: FormField): FormControl {
+        const validators = [];
+
+        // Add validators based on field configuration
+        if (field.required || field.mandatory || field.validationRules?.isMandatory || field.validationRules?.isRequired) {
+            validators.push(Validators.required);
+        }
+
+        if (field.validationRules?.minLength) {
+            validators.push(Validators.minLength(field.validationRules.minLength));
+        }
+
+        if (field.validationRules?.maxLength) {
+            validators.push(Validators.maxLength(field.validationRules.maxLength));
+        }
+
+        if (field.validationRules?.pattern) {
+            validators.push(Validators.pattern(field.validationRules.pattern));
+        }
+
+        if (field.validationRules?.min !== undefined) {
+            validators.push(Validators.min(field.validationRules.min));
+        }
+
+        if (field.validationRules?.max !== undefined) {
+            validators.push(Validators.max(field.validationRules.max));
+        }
+
+        if (field.type === 'email') {
+            validators.push(Validators.email);
+        }
+
+        const initialValue = field.value !== undefined ? field.value : '';
+        return this.fb.control({ value: initialValue, disabled: field.disabled || false }, validators);
+    }
+
+    createGroup(fields: FormField[]): FormGroup {
+        const groupConfig: any = {};
+
+        fields.forEach(field => {
+            if (field.subFields) {
+                field.subFields.forEach(subField => {
+                    groupConfig[subField.name] = this.createControl(subField);
+                });
+            } else {
+                groupConfig[field.name] = this.createControl(field);
+            }
+        });
+
+        return this.fb.group(groupConfig);
+    }
+
+    getFormArray(name: string): FormArray {
+        return this.form.get(name) as FormArray;
+    }
+
+    addRepeaterItem(section: FormSection) {
+        const arrayName = section.formArrayName || 'items';
+        const formArray = this.getFormArray(arrayName);
+
+        // Check max items
+        if (section.maxItems && formArray.length >= section.maxItems) {
+            this.snackBar.open(this.labels.errorMaxItemsAllowed.replace('{0}', String(section.maxItems)), this.labels.closeSnackBar, { duration: 3000 });
+            return;
+        }
+
+        formArray.push(this.createGroup(section.fields));
+    }
+
+    removeRepeaterItem(sectionName: string, index: number) {
+        const formArray = this.getFormArray(sectionName);
+        formArray.removeAt(index);
+    }
+
+    validate(): boolean {
+        if (this.form.invalid) {
+            this.form.markAllAsTouched();
+            this.scrollToFirstInvalidControl();
+            return false;
+        }
+        return true;
+    }
+
+    scrollToFirstInvalidControl() {
+        const firstInvalidControl = document.querySelector('.is-invalid');
+        if (firstInvalidControl) {
+            firstInvalidControl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }
+
+    setupDependencies() {
+        this.processedConfig.sections.forEach(section => {
+            section.fields.forEach(field => {
+
+
+                // Also setup for fields with dependent array
+                if (field.dependent && field.dependent.length > 0) {
+                    const control = this.form.get(field.name);
+                    if (control) {
+                        control.valueChanges.subscribe(value => {
+                            this.onFieldValueChange(field, value);
+                        });
+                    }
+                }
+            });
+        });
+    }
+
+    onFieldValueChange(field: FormField, value: any) {
+        // Handle dependent fields
+        if (field.dependent && field.dependent.length > 0) {
+            field.dependent.forEach(dependentFieldName => {
+                const dependentField = this.findFieldByName(dependentFieldName);
+                if (dependentField) {
+                    // Clear the dependent field value
+                    const control = this.form.get(dependentFieldName);
+                    if (control) {
+                        control.setValue('');
+                        control.markAsUntouched();
+                    }
+
+                    // Load new options for the dependent field
+                    if (value) {
+                        this.loadFieldOptions(dependentField, { [field.name]: value });
+                    } else {
+                        // Clear options if parent value is cleared
+                        dependentField.loadedOptions = [];
+                    }
+                }
+            });
+        }
+    }
+
+    // Load options for a dropdown field
+    loadFieldOptions(field: FormField, parentValues?: any) {
+        // Emit event for parent to notify about options load request
+        // Allow parent to mark as handled to skip internal API call
+        const event = { field, parentValue: parentValues, handled: false };
+        this.optionsLoad.emit(event);
+
+        if (event.handled) {
+            return;
+        }
+
+        if (!field.optionConfigs) {
+            return;
+        }
+
+        const config = field.optionConfigs;
+
+        // Handle static options
+        if (config.optionDTO === 'OPTION_DTO.STATIC' && config.staticOptions) {
+            field.loadedOptions = config.staticOptions;
+            return;
+        }
+
+        // Handle API-based options
+        if (config.optionDTO === 'OPTION_DTO.REF_DATA' && config.url) {
+            let url = config.url;
+
+            // Replace placeholders in URL with parent values
+            if (parentValues) {
+                Object.keys(parentValues).forEach(key => {
+                    url = url.replace(`{${key}}`, parentValues[key]);
+                });
+            }
+
+            // Prepend base API URL if provided
+            if (this.baseApiUrl && !url.startsWith('http')) {
+                url = `${this.baseApiUrl}/${url}`;
+            }
+
+            this.http.get<any>(url).subscribe({
+                next: (response) => {
+                    // Extract data from response
+                    const data = response.data || response.content || response;
+                    field.loadedOptions = this.extractOptions(data, config);
+                },
+                error: (error) => {
+                    console.error('Error loading options:', error);
+                    field.loadedOptions = [];
+                }
+            });
+        }
+    }
+
+    // Extract options from API response
+    extractOptions(data: any[], config: any): FormOption[] {
+        if (!Array.isArray(data)) {
+            return [];
+        }
+
+        return data.map(item => ({
+            label: item[config.labelKey || 'name'],
+            value: item[config.requestKey || 'code'] || item[config.valueKey || 'id'],
+            code: item.code,
+            name: item.name
+        }));
+    }
+
+    // Get options for a field (either static or loaded)
+    getFieldOptions(field: FormField): FormOption[] {
+        return field.loadedOptions || field.options || [];
+    }
+
+    // Check if field is visible
+    isFieldVisible(field: FormField): boolean {
+        return this.fieldVisibilityMap.get(field.name) !== false;
+    }
+
+    // Toggle field visibility
+    toggleFieldVisibility(field: FormField, visible: boolean) {
+        this.fieldVisibilityMap.set(field.name, visible);
+
+        const control = this.form.get(field.name);
+        if (control) {
+            if (visible) {
+                // Re-enable and restore validators
+                control.enable();
+                this.updateControlValidators(control, field);
+            } else {
+                // Disable and clear validators
+                control.disable();
+                control.clearValidators();
+                control.updateValueAndValidity();
+            }
+        }
+    }
+
+    // Update control validators based on field config
+    updateControlValidators(control: AbstractControl, field: FormField) {
+        const validators = [];
+
+        if (field.required || field.mandatory || field.validationRules?.isMandatory) {
+            validators.push(Validators.required);
+        }
+
+        if (field.validationRules?.minLength) {
+            validators.push(Validators.minLength(field.validationRules.minLength));
+        }
+
+        if (field.validationRules?.maxLength) {
+            validators.push(Validators.maxLength(field.validationRules.maxLength));
+        }
+
+        if (field.validationRules?.pattern) {
+            validators.push(Validators.pattern(field.validationRules.pattern));
+        }
+
+        control.setValidators(validators);
+        control.updateValueAndValidity();
+    }
+
+    onFileChange(event: any, field: FormField) {
+        const files: FileList = event.target.files;
+
+        if (!files || files.length === 0) {
+            return;
+        }
+
+        // Initialize uploadedFiles if not present
+        // Initialize uploadedFiles if not present
+        if (!field.uploadedFiles) {
+            field.uploadedFiles = [];
+        }
+
+        const uploadedFiles: any[] = [];
+        // Handle files
+        for (let i = 0; i < files.length; i++) {
+            const file = files[i];
+
+            // Check file size (5MB limit)
+            if (file.size > 5 * 1024 * 1024) {
+                this.snackBar.open(this.labels.errorFileLimitExceeded.replace('{0}', file.name), this.labels.closeSnackBar, { duration: 3000 });
+                continue;
+            }
+
+            uploadedFiles.push({
+                name: file.name,
+                size: file.size,
+                type: file.type,
+                file: file
+            });
+        }
+
+        if (field.multiple) {
+            field.uploadedFiles.push(...uploadedFiles);
+        } else {
+            field.uploadedFiles = uploadedFiles;
+        }
+
+        // Update form control value for validation
+        this.updateFileControlValue(field);
+
+        // Clear the input
+        event.target.value = '';
+    }
+
+    // Remove uploaded file
+    removeFile(field: FormField, index: number) {
+        if (field.uploadedFiles) {
+            field.uploadedFiles.splice(index, 1);
+            this.updateFileControlValue(field);
+        }
+    }
+
+    // Update file control value for validation
+    updateFileControlValue(field: FormField) {
+        const control = this.form.get(field.name);
+        if (control) {
+            const hasFiles = field.uploadedFiles && field.uploadedFiles.length > 0;
+            control.setValue(hasFiles ? field.uploadedFiles : null);
+            control.markAsTouched();
+        }
+    }
+
+    // Get character count for text field
+    getCharacterCount(fieldName: string): number {
+        const control = this.form.get(fieldName);
+        if (control && control.value) {
+            return control.value.toString().length;
+        }
+        return 0;
+    }
+
+    // Toggle section collapse
+    toggleSection(section: FormSection) {
+        section.collapsed = !section.collapsed;
+    }
+
+
+
+    // Helper method to find field by name
+    private findFieldByName(name: string): FormField | undefined {
+        for (const section of this.processedConfig.sections) {
+            const field = section.fields.find(f => f.name === name);
+            if (field) {
+                return field;
+            }
+        }
+        return undefined;
+    }
+
+    // Get the processed config for template use
+    get sections(): FormSection[] {
+        return this.processedConfig?.sections || [];
+    }
+
+    togglePassword(fieldName: string) {
+        this.passwordFieldState.set(fieldName, !this.passwordFieldState.get(fieldName));
+    }
+
+    isPasswordVisible(fieldName: string): boolean {
+        return this.passwordFieldState.get(fieldName) || false;
+    }
+}
+