commons-shared-web-ui 0.0.62 → 0.0.63

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

@@ -1,628 +0,0 @@
-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;
-    }
-}
-