pgo-ui 1.1.13 → 1.1.16

package/src/components/pgo/forms/DynamicForm.vue

@@ -1,27 +1,26 @@
 <template>
-    <Modal
-        v-model="open"
+    <Modal 
+        v-model="open" 
         persistent
         padding="p-3"
         :bg="bg"
-        :width="width"
     >
         <Banner
             v-if="form?.banner"
             v-bind="form?.banner"
-            bannerClass="mb-4"
+            bannerClass="mb-4" 
         />
-        <Form
+        <Form 
             v-model="valid"
             ref="formRef"
-        >
-            <input
+        >   
+            <input 
                 v-if="props.mode === 'edit' && props.editItemId"
                 v-model="formData.id"
                 type="hidden"
             />
-            <!-- Render grouped fields -->
-
+            <!-- Render grouped fields --> 
+            
              <!--  A0111904  -->
             <template v-if="form.groups">
                 <template v-for="(group, id) in form.groups" :key="id">
@@ -30,11 +29,11 @@
                             <div v-if="group.title" :class="['absolute top-0 -translate-y-1/2 bg-inherit px-2 text-sm font-semibold mb-2', lang === 'dv' ? 'right-4' : 'left-4']">
                                 {{ group.title ? useLanguageSelected(group.title, lang) : '' }}
                             </div>
-                            <template
-                                v-for="(field, index) in getFieldsByGroup(group.name)"
+                            <template 
+                                v-for="(field, index) in getFieldsByGroup(group.name)" 
                                 :key="field?.key || index"
                             >
-                                <div
+                                <div 
                                     v-if="field && field.key && shouldShowField(field)"
                                     :class="columnSpansMap[field.columnSpan] || columnSpansMap[1]"
                                 >
@@ -49,15 +48,15 @@
                         </div>
                     </div>
                 </template>
-
+                
                 <!-- MOVE: Render ungrouped fields ONCE after ALL groups -->
                 <div v-if="getUngroupedFields().length > 0" class="mb-4">
-                    <div :class="['grid', gridColsMap[form.numberOfColumns] || gridColsMap[2], 'gap-x-2 gap-y-4']">
-                        <template
-                            v-for="(field, index) in getUngroupedFields()"
+                    <div :class="['grid', gridColsMap[form.numberOfColumns] || gridColsMap[2], 'gap-2']">
+                        <template 
+                            v-for="(field, index) in getUngroupedFields()" 
                             :key="field?.key || index"
                         >
-                            <div
+                            <div 
                                 v-if="field && field.key && shouldShowField(field)"
                                 :class="columnSpansMap[field.columnSpan] || columnSpansMap[1]"
                             >
@@ -72,14 +71,14 @@
                     </div>
                 </div>
             </template>
-
+            
             <!-- If no groups, render all fields -->
-            <div v-else :class="['grid', gridColsMap[form.numberOfColumns] || gridColsMap[2], 'gap-x-2 gap-y-4']">
-                <template
-                    v-for="(field, index) in form.fields"
+            <div v-else :class="['grid', gridColsMap[form.numberOfColumns] || gridColsMap[2], 'gap-2']">
+                <template 
+                    v-for="(field, index) in form.fields" 
                     :key="field?.key || index"
                 >
-                    <div
+                    <div 
                         v-if="field && field.key && shouldShowField(field)"
                         :class="columnSpansMap[field.columnSpan] || columnSpansMap[1]"
                     >
@@ -94,42 +93,37 @@
             </div>
         </Form>
         <template #footer>
-            <div class="flex justify-end gap-2">
-
-                <!-- DRAFT: only visible in create mode before any save -->
-                <Button
-                    v-if="formMode === 'create'"
-                    label="buttons.draft"
-                    color="primary"
-                    :loading="isSubmitting && clickedButton === 'draft'"
-                    :disabled="isSubmitting || !valid"
-                    @click="handleSubmit('draft')"
-                />
-
-                <!-- UPDATE: visible after draft saved or opened in edit mode -->
-                <Button
-                    v-if="formMode === 'edit'"
-                    label="buttons.update"
-                    color="warning"
-                    :loading="isSubmitting && clickedButton === 'update'"
-                    :disabled="isSubmitting || !isFormDirty || !valid"
+            <div class="flex justify-end gap-2 ">
+                <Button v-if="mode == 'edit'"
+                    label="buttons.update" 
+                    color="primary" 
+                    :loading="isSubmitting"
                     @click="handleSubmit('update')"
                 />
+                <template v-else>
+                    <Button 
+                        v-if="items || draftSubmitted"
+                        label="buttons.submit" 
+                        color="primary" 
+                        :loading="isSubmitting"
+                        :disabled="!valid || isSubmitting"
+                        
+                        @click="handleSubmit('submitted')"
+                    />
+                    <Button  
+                        label="buttons.draft" 
+                        color="primary" 
+                        :loading="isSubmitting"
+                        :disabled="!valid || isSubmitting || draftSubmitted"
+                        
+                        @click="handleSubmit('draft')"
+                    />
+                    <!-- <Button v-if="items" label="buttons.submit" color="primary" @click="handleSubmit('submit')"/> -->
 
-                <!-- SUBMIT: visible after draft saved or opened in edit mode -->
-                <Button
-                    v-if="formMode === 'edit'"
-                    label="buttons.submit"
-                    color="primary"
-                    :loading="isSubmitting && clickedButton === 'submit'"
-                    :disabled="isSubmitting || !valid"
-                    @click="handleSubmit('submit')"
-                />
-
-                <!-- CLOSE: always visible -->
-                <Button
-                    label="buttons.close"
-                    color="gray"
+                </template>
+                <Button 
+                    label="buttons.close" 
+                    color="gray" 
                     :disabled="isSubmitting"
                     @click="handleClose"
                 />
@@ -144,31 +138,27 @@
     import Modal from '../Modal.vue'
     import { Banner, LabelField } from '../index'
     import { gridColsMap, columnSpansMap, useLanguageSelected, initializeFunctions } from '@/pgo-components/lib/componentConfig';
-
+    
     const rules = inject('validationRules')
     // const baseUrl = inject('baseUrl')
     const { language } = inject('i18n')
 
     const valid = ref(false);
     const formId = ref(null);
-    const relationId = ref(null);
     const open = ref(true);
     const formRef = ref(null);
     const isSubmitting = ref(false);
     const draftSubmitted = ref(false);
     const clickedButton = ref('');
-    const isPreFilled = ref(false)
-    const originalFormData = ref({})
-
     const emit = defineEmits([
-        'update:modelValue',
-        'submit:success',
-        'submit:error',
+        'update:modelValue', 
+        'submit:success', 
+        'submit:error', 
         'close',
         'field:event',
         'view-pdf'
     ]);
-
+    
     const props = defineProps({
         modelValue: { type: Boolean, default: false },
         form: { type: Object, required: true },
@@ -177,19 +167,17 @@
         crudLink:{ type: String },
         editItemId: { type: [String, Number], default: null },
         mode: { type: String, default: 'create', enum: ['create', 'edit'] },
-        width: { type: String, default: '' },
+
         bg: { type: String, default: 'bg-background-color' },
     });
 
     const api = inject('api');
     const snackbar = inject('snackbar');
 
-    // Initialize form data from fields
+    // Initialize form data from fields 
     const formData = reactive({});
     const FormDataList = ref({});
 
-    const formMode = ref(props.mode)
-
     // Initialize variables as reactive refs
     const formVariables = reactive({});
 
@@ -199,18 +187,15 @@
 
     // Enhanced evaluation context that includes props and mode
     const createEvaluationContext = () => {
-       return {
-            formData,
-            formVariables,
-            variables: formVariables,
-            props,
-            mode: formMode.value,
-            formType: formType.value,
-            isEdit: formMode.value === 'edit',
-            isCreate: formMode.value === 'create',
-            ...formVariables,
+        return {
             ...formData,
-        }
+            ...formVariables,
+            mode: props.mode,
+            formType: formType.value,
+            props: props,
+            isEdit: props.mode === 'edit',
+            isCreate: props.mode === 'create'
+        };
     };
 
     // const fileList = ref([
@@ -250,84 +235,56 @@
         return formData[fieldKey];
     };
 
-    // Helper function to set field value (uses flat dot-notation keys matching field.key)
+    // Helper function to set field value
     const setFieldValue = (fieldKey, value) => {
-        formData[fieldKey] = value;
+        if (formData.hasOwnProperty(fieldKey)) {
+            formData[fieldKey] = value;
+        }
     };
 
-    const isFormDirty = computed(() => {
-        if (!isPreFilled.value) return false
-        return Object.keys(originalFormData.value).some(key => {
-            const original = originalFormData.value[key]
-            const current = formData[key]
-            // Handle null/undefined equality
-            if (original === null || original === undefined) {
-                return current !== null && current !== undefined && current !== ''
-            }
-            // Handle objects/arrays
-            if (typeof original === 'object') {
-                return JSON.stringify(original) !== JSON.stringify(current)
-            }
-            return original !== current
-        })
-    })
-
     // Initialize form data with default values or items data
-const initializeFormData = () => {
+    const initializeFormData = () => {
+        // Add safety check for form.fields
         if (!props.form.fields || !Array.isArray(props.form.fields)) {
             return;
         }
-
+        
         props.form.fields.forEach(field => {
             if (!field || !field.key) return;
 
-            const fieldKey = field.dataKey ?? field.key
-
-            // 1. Try to get value from props.items (supports dot notation)
-            if (props.items) {
-                const val = fieldKey.includes('.')
-                    ? getNestedValue(props.items, fieldKey)
-                    : props.items[fieldKey]
-
-                if (val !== undefined) {
-                    formData[field.key] = val
-                    return
+            if (props.items && props.items[field.key] !== undefined) {
+                formData[field.key] = props.items[field.key];
+            } else if (field.default !== undefined) {
+                formData[field.key] = field.default;
+            } else if (field.value !== undefined) {
+                    formData[field.key] = field.value;
+            } else {
+                // Set default value based on type
+                switch (field.type) {
+                    case 'number':
+                    case 'integer':
+                        formData[field.key] = null;
+                        break;
+                    case 'boolean':
+                        formData[field.key] = false;
+                        break;
+                    case 'array':
+                        formData[field.key] = null;
+                        break;
+                    case 'object':
+                        formData[field.key] = null;
+                        break;
+                    case 'string':
+                    default:
+                       if (field.inputType === 'checkbox') {
+                            formData[field.key] = false; // Default checkboxes to false
+                        } else {
+                            formData[field.key] = null;
+                        }
+                        break;
                 }
             }
-
-
-            // 2. Use field default value
-            if (field.default !== undefined) {
-                formData[field.key] = field.default
-                return
-            }
-
-            // 3. Use field value
-            if (field.value !== undefined) {
-                formData[field.key] = field.value
-                return
-            }
-
-            // 4. Set type-based default (fallback)
-            switch (field.type) {
-                case 'number':
-                case 'integer':
-                    formData[field.key] = null
-                    break
-                case 'boolean':
-                    formData[field.key] = false
-                    break
-                case 'array':
-                case 'object':
-                    formData[field.key] = null
-                    break
-                case 'string':
-                default:
-                    formData[field.key] = field.inputType === 'checkbox' ? false : null
-                    break
-            }
         });
-
         // console.log('Initialized form data:', formData);
     };
 
@@ -342,35 +299,23 @@ const initializeFormData = () => {
 
     const initializeAllFunctions = () => {
         if (props.form.functions) {
-            Object.entries(props.form.functions).forEach(([name, functionBody]) => {
-                try {
-                    compiledFunctions.value[name] = (...args) => {
-                        const context = createEvaluationContext()
-
-                        // Add common function-specific arguments
-                        if (args[0] !== undefined) context.response = args[0]
-                        if (args[1] !== undefined) context.item = args[1]
-                        if (args[2] !== undefined) context.event = args[2]
-
-                        // Add all positional args
-                        args.forEach((arg, index) => {
-                            context[`arg${index}`] = arg
-                        })
-
-                        try {
-                            // Pass function body directly — NOT wrapped with return()
-                            // Function bodies can have multiple statements and returns
-                            return safeEval(functionBody, context)
-                        } catch (error) {
-                            console.warn(`Error executing function "${name}":`, error.message)
-                            console.warn('Function body was:', functionBody)
-                            return null
-                        }
-                    }
-                } catch (error) {
-                    console.warn(`Error compiling function "${name}":`, error.message)
+            // Create context that the functions will have access to
+            const functionContext = {
+                formData,
+                formVariables,
+                snackbar,
+                api,
+                emit,
+                props,
+                console,
+                variables: formVariables,
+                this: {
+                    variables: formVariables
                 }
-            })
+            };
+
+            // Use the global initializeFunctions helper
+            compiledFunctions.value = initializeFunctions(props.form.functions, functionContext);
         }
     };
 
@@ -378,18 +323,273 @@ const initializeFormData = () => {
     const executeFunction = (functionName, ...args) => {
         if (compiledFunctions.value[functionName]) {
             try {
-                return compiledFunctions.value[functionName](...args)
+                return compiledFunctions.value[functionName](...args);
             } catch (error) {
-                console.warn(`Error executing function "${functionName}":`, error.message)
-                return null
+                console.error(`Error executing function ${functionName}:`, error);
+                snackbar?.show({ 
+                    message: `Function ${functionName} execution failed`, 
+                    variant: 'error' 
+                });
             }
         } else {
-            console.warn(`Function "${functionName}" not found in compiled functions`)
-            return null
+            console.warn(`Function ${functionName} not found`);
+        }
+    };
+
+    // Function to get fields by group name
+    const getFieldsByGroup = (groupName) => {
+        if (!props.form.fields || !Array.isArray(props.form.fields)) {
+            return [];
+        }
+        return props.form.fields.filter(field => field && field.group === groupName);
+    };
+
+    const shouldShowGroup = (group) => {
+        // Add null check for group
+        if (!group) {
+            return false;
+        }
+        
+        // If no condition, always show the group
+        if (!group.condition) {
+            return true;
+        }
+        
+        try {
+            // Normalize the condition string (trim spaces)
+            let expression = group.condition.trim();
+            
+            // Create enhanced evaluation context
+            const context = createEvaluationContext();
+            
+            // Helper function to safely evaluate expressions
+            const evaluateCondition = (expr) => {
+                // Handle various condition patterns:
+                
+                // Pattern 1: Simple variable check "variableName" -> check if variable is truthy
+                if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(expr)) {
+                    return !!context[expr];
+                }
+                
+                // Pattern 2: Negation "!variableName"
+                if (/^!/.test(expr)) {
+                    const variableName = expr.substring(1).trim();
+                    if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(variableName)) {
+                        return !context[variableName];
+                    }
+                }
+                
+                // Pattern 3: Complex expression with &&, ||, ===, !==, >, <, etc.
+                // Create variable declarations from context
+                const varDeclarations = Object.keys(context)
+                    .map(key => {
+                        const value = context[key];
+                        // Properly stringify different value types
+                        if (value === null || value === undefined) {
+                            return `const ${key} = null;`;
+                        } else if (typeof value === 'string') {
+                            return `const ${key} = "${value.replace(/"/g, '\\"')}";`;
+                        } else if (typeof value === 'boolean') {
+                            return `const ${key} = ${value};`;
+                        } else if (typeof value === 'number') {
+                            return `const ${key} = ${value};`;
+                        } else {
+                            return `const ${key} = ${JSON.stringify(value)};`;
+                        }
+                    })
+                    .join('\n');
+                
+                // Create and execute the function with the context
+                const fn = new Function(varDeclarations + `\nreturn (${expr});`);
+                return fn();
+            };
+            
+            // Evaluate the condition expression
+            return !!evaluateCondition(expression);
+        } catch (error) {
+            console.warn(`Error evaluating group condition "${group.condition}":`, error.message);
+            // Fallback: check if the condition is a simple variable reference
+            const simpleVariable = group.condition.trim().replace(/^!/, '');
+            if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(simpleVariable)) {
+                const context = createEvaluationContext();
+                const value = context[simpleVariable];
+                return group.condition.trim().startsWith('!') ? !value : !!value;
+            }
+            return true; // Show group by default if evaluation fails
+        }
+    };
+
+    // Function to get ungrouped fields
+    const getUngroupedFields = () => {
+        if (!props.form.fields || !Array.isArray(props.form.fields)) {
+            return [];
+        }
+        return props.form.fields.filter(field => field && !field.group);
+    };
+
+    // Function to check if field should be shown based on condition
+    const shouldShowField = (field) => {
+        // Add null check for field
+        if (!field) {
+            return false;
+        }
+
+         if (field.hidden === true) {
+            return false;
+        }
+        
+        if (!field.condition) {
+            return true;
+        }
+        
+        try {
+            // Normalize the condition string (trim spaces)
+            let expression = field.condition.trim();
+            
+            // Create enhanced evaluation context
+            const context = createEvaluationContext();
+            
+            // Helper function to safely evaluate expressions
+            const evaluateCondition = (expr) => {
+                // Handle various condition patterns:
+                
+                // Pattern 1: Simple field check "fieldName" -> check if field is truthy
+                if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(expr)) {
+                    return !!context[expr];
+                }
+                
+                // Pattern 2: Negation "!fieldName"
+                if (/^!/.test(expr)) {
+                    const fieldName = expr.substring(1).trim();
+                    if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(fieldName)) {
+                        return !context[fieldName];
+                    }
+                }
+                
+                // Pattern 3: Complex expression with &&, ||, ===, !==, >, <, etc.
+                // Create variable declarations from context
+                const varDeclarations = Object.keys(context)
+                    .map(key => {
+                        const value = context[key];
+                        // Properly stringify different value types
+                        if (value === null || value === undefined) {
+                            return `const ${key} = null;`;
+                        } else if (typeof value === 'string') {
+                            return `const ${key} = "${value.replace(/"/g, '\\"')}";`;
+                        } else if (typeof value === 'boolean') {
+                            return `const ${key} = ${value};`;
+                        } else if (typeof value === 'number') {
+                            return `const ${key} = ${value};`;
+                        } else {
+                            return `const ${key} = ${JSON.stringify(value)};`;
+                        }
+                    })
+                    .join('\n');
+                
+                // Create and execute the function with the context
+                const fn = new Function(varDeclarations + `\nreturn (${expr});`);
+                return fn();
+            };
+            
+            // Evaluate the condition expression
+            return !!evaluateCondition(expression);
+        } catch (error) {
+            console.warn(`Error evaluating condition "${field.condition}":`, error.message);
+            // Fallback: check if the condition is a simple field reference
+            const simpleField = field.condition.trim().replace(/^!/, '');
+            if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(simpleField)) {
+                const context = createEvaluationContext();
+                const value = context[simpleField];
+                return field.condition.trim().startsWith('!') ? !value : !!value;
+            }
+            return true; // Show field by default if evaluation fails
+        }
+    };
+
+    const componentMap = computed(() => {
+        const map = {}
+        const usedTypes = new Set(props.form.fields.map(f => f.inputType?.toLowerCase()))
+        
+        if (usedTypes.has('search') || usedTypes.has('inputsearch')) {
+            map['search'] = defineAsyncComponent(() => import('../SearchBox.vue'))
+            map['searchbox'] = defineAsyncComponent(() => import('../SearchBox.vue'))
+        }
+        
+        if (usedTypes.has('select')) {
+            map['select'] = defineAsyncComponent(() => import('../inputs/Select.vue'))
+        }
+        if (usedTypes.has('textarea')) {
+            map['textarea'] = defineAsyncComponent(() => import('../inputs/Textarea.vue'))
+        }
+        
+        if (usedTypes.has('textfield') || usedTypes.has('text') || usedTypes.has('string')) {
+            map['textfield'] = defineAsyncComponent(() => import('../inputs/TextField.vue'))
+            map['text'] = defineAsyncComponent(() => import('../inputs/TextField.vue'))
+            map['string'] = defineAsyncComponent(() => import('../inputs/TextField.vue'))
+        }
+        
+        if (usedTypes.has('datepicker') || usedTypes.has('date')) {
+            map['datepicker'] = defineAsyncComponent(() => import('../inputs/DatePicker.vue'))
+            map['date'] = defineAsyncComponent(() => import('../inputs/DatePicker.vue'))
+        }
+        
+        if (usedTypes.has('chipgroup')) {
+            map['chipgroup'] = defineAsyncComponent(() => import('../buttons/ChipGroup.vue'))
+        }
+
+        if (usedTypes.has('checkbox')) {
+            map['checkbox'] = defineAsyncComponent(() => import('../inputs/Checkbox.vue'))
+        }
+
+        if (usedTypes.has('radio')) {
+            map['radio'] = defineAsyncComponent(() => import('../inputs/Radio.vue'))
+        }
+
+        if (usedTypes.has('numberfield') || usedTypes.has('number')) {
+            map['numberfield'] = defineAsyncComponent(() => import('../inputs/NumberField.vue'))
+            map['number'] = defineAsyncComponent(() => import('../inputs/NumberField.vue'))
+        }
+        if (usedTypes.has('file') || usedTypes.has('filefield')) {
+            map['file'] = defineAsyncComponent(() => import('../inputs/FileUpload.vue'))
+            map['filefield'] = defineAsyncComponent(() => import('../inputs/FileUpload.vue'))
+        }
+        if (usedTypes.has('label') || usedTypes.has('labelfield')) {
+            map['label'] = defineAsyncComponent(() => import('../inputs/LabelField.vue'))
+            map['labelfield'] = defineAsyncComponent(() => import('../inputs/LabelField.vue'))
+        }
+
+        return map
+    })
+
+    const getFieldComponent = (type) => {
+        const normalizedType = type?.toLowerCase() || 'textfield'
+        return componentMap.value[normalizedType] || componentMap.value['textfield']
+    }
+
+        // Helper function to evaluate JavaScript expressions with context
+    const evaluateExpression = (expression, context) => {
+        if (typeof expression !== 'string') {
+            return expression; // Return as-is if not a string
+        }
+        
+        // If it's a simple variable name, return the context value
+        if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(expression)) {
+            return context[expression];
+        }
+        
+        try {
+            // Create function with context variables as parameters
+            const contextKeys = Object.keys(context);
+            const contextValues = Object.values(context);
+            const func = new Function(...contextKeys, `return ${expression}`);
+            return func(...contextValues);
+        } catch (error) {
+            console.warn('Error evaluating expression:', expression, error);
+            return false;
         }
     };
 
-    // Simplified getFieldProps function - evaluate disabled expressions
+    // Simplified getFieldProps function
     const getFieldProps = (field) => {
         if (!field) {
             return {};
@@ -397,158 +597,269 @@ const initializeFormData = () => {
 
         // Create evaluation context
         const context = createEvaluationContext();
-
-        const {
-            type,
-            key,
-            inputType,
-            columnSpan,
-            rules,
-            condition,
-            group,
-            events,
+        
+        const { 
+            type, 
+            key, 
+            inputType, 
+            columnSpan, 
+            rules, 
+            condition, 
+            group, 
+            events, 
             hidden,
-            default: defaultValue,
-            ...restProps
+            disabled,
+            reaonly,
+            value,
+            default: defaultValue, 
+            ...restProps 
         } = field;
-
-        const cleanProps = { ...restProps }
-
-        // Evaluate disabled if it's a string expression
-        if (typeof field.disabled === 'string') {
-            try {
-                cleanProps.disabled = !!safeEval(`return (${field.disabled});`, context)
-            } catch (error) {
-                console.warn(`Error evaluating disabled for field "${field.key}":`, error.message)
-                cleanProps.disabled = false
-            }
-        } else if (typeof field.disabled === 'boolean') {
-            cleanProps.disabled = field.disabled
+        
+        // Skip hidden fields
+        if (hidden) {
+            return {};
         }
 
+        // Start with fieldKey
+        const cleanProps = {
+            fieldKey: key
+        };
+        
         // Add relationId for file upload components
         if (field.inputType === 'file' || field.inputType === 'filefield') {
-            cleanProps.relationId = relationId.value;
-            cleanProps['onUploadSuccess'] = () => handleUploadSuccess();
-            cleanProps['onView-pdf'] = (pdfData) => emit('view-pdf', pdfData);
-            cleanProps.fileList = FormDataList.value?.[field.dataKey ?? field.key];
+            cleanProps.relationId = formId.value || props.editItemId;
+            // cleanProps.onuploadSuccess = fetchData();
+            // cleanProps.onviewPdf = emit('view-pdf');
+            // cleanProps.fileList = FormDataList.value?.[ field.dataKey ?? field.key ];
+            
+            // cleanProps.relationId = formId.value || props.editItemId;
+            cleanProps.onUploadSuccess = () => handleUploadSuccess(); 
+            cleanProps['onView-pdf'] = (pdfData) => emit('view-pdf', pdfData); 
+            cleanProps.fileList = FormDataList.value?.[ field.dataKey ?? field.key ];
+            // cleanProps.fileList = fileList.value;
         }
 
-        return cleanProps
-    };
+        // Add all other props directly (assuming they're clean from backend)
+        // Add all other props and evaluate expressions
+        Object.entries(restProps).forEach(([propKey, value]) => {
+            // Skip empty/null/undefined values
+            if (value === '' || value === null || value === undefined) {
+                return;
+            }
+            
+            // Filter out any event-like properties that are strings
+            if (propKey.startsWith('on') && typeof value === 'string') {
+                console.warn(`Filtering out string event handler: ${propKey}`);
+                return;
+            }
+            
+            // Evaluate expressions for specific props
+            if (typeof value === 'string' && (
+                propKey === 'disabled' || 
+                propKey === 'readonly' || 
+                propKey === 'required' ||
+                propKey === 'visible' ||
+                propKey === 'hidden'
+            )) {
+                // Check if it looks like a JavaScript expression
+                if (value.includes('===') || value.includes('!==') || 
+                    value.includes('==') || value.includes('!=') ||
+                    value.includes('&&') || value.includes('||') ||
+                    value.includes('?') || value.includes(':')) {
+                    cleanProps[propKey] = evaluateExpression(value, context);
+                } else if (context.hasOwnProperty(value)) {
+                    // Simple variable reference
+                    cleanProps[propKey] = context[value];
+                } else {
+                    cleanProps[propKey] = value;
+                }
+            } else {
+                cleanProps[propKey] = value;
+            }
+        });
 
+        if (disabled !== undefined) {
+            if (typeof disabled === 'string') {
+                cleanProps.disabled = evaluateExpression(disabled, context);
+            } else {
+                cleanProps.disabled = disabled;
+            }
+        }
+        
+        // Dynamically handle events configuration
+        if (events && typeof events === 'object') {
+            Object.keys(events).forEach(eventName => {
+                const functionName = events[eventName];
+                
+                // Convert event name to Vue prop format (onEventName)
+                let vueEventName;
+                
+                if (eventName.includes(':')) {
+                    vueEventName = 'on' + eventName
+                        .split(':')
+                        .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+                        .join('');
+                } else if (eventName.includes('-')) {
+                    vueEventName = 'on' + eventName
+                        .split('-')
+                        .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+                        .join('');
+                } else {
+                    vueEventName = 'on' + eventName.charAt(0).toUpperCase() + eventName.slice(1);
+                }
+                
+                // Create the event handler
+                cleanProps[vueEventName] = (data) => {
+                    executeFunction(functionName, data);
+                };
+            });
+        }
+        
+        // Handle item-text, item-value, item-title transformations
+        if (cleanProps.itemText) {
+            cleanProps['item-text'] = cleanProps.itemText;
+            delete cleanProps.itemText;
+        }
+        if (cleanProps.itemValue) {
+            cleanProps['item-value'] = cleanProps.itemValue;
+            delete cleanProps.itemValue;
+        }
+        if (cleanProps.itemTitle) {
+            cleanProps['item-title'] = cleanProps.itemTitle;
+            delete cleanProps.itemTitle;
+        }
+        
+        return cleanProps;
+    };
+    
     const parseRules = (rulesString) => {
         if (!rulesString || !rules) return [];
+        
         if (Array.isArray(rulesString)) return rulesString;
-
+        
         if (typeof rulesString === 'string') {
             try {
-                // Wrap in array brackets if not already wrapped
-                const normalized = rulesString.trim().startsWith('[')
-                    ? rulesString
-                    : `[${rulesString}]`
-
-                // Evaluate with full context - rules and formData available
-                const result = new Function('rules', 'formData', 'formVariables', `return ${normalized}`)(
-                    rules,
-                    formData,
-                    formVariables
-                )
-
-                return Array.isArray(result) ? result.filter(Boolean) : [result].filter(Boolean)
+                const cleanString = rulesString.replace(/[\[\]]/g, '').trim();
+                const ruleNames = cleanString.split(',').map(r => r.trim());
+                
+                return ruleNames.map(ruleName => {
+                    const match = ruleName.match(/rules\.(\w+)(\(.*\))?/);
+                    if (match) {
+                        const [, funcName, args] = match;
+                        
+                        if (rules[funcName]) {
+                            if (args) {
+                                const argValues = args.slice(1, -1).split(',').map(arg => {
+                                    arg = arg.trim();
+                                    return isNaN(arg) ? arg.replace(/['"]/g, '') : Number(arg);
+                                });
+                                return rules[funcName](...argValues);
+                            }
+                            return rules[funcName];
+                        }
+                    }
+                    return null;
+                }).filter(Boolean);
             } catch (e) {
                 console.error('Failed to parse rules:', rulesString, e);
                 return [];
             }
         }
-
+        
         return [];
     };
 
     const handleSubmit = async (buttonType) => {
-        clickedButton.value = buttonType
-
-        const { valid: isValid } = await formRef.value?.validate()
+        clickedButton.value = buttonType;
+        const { valid: isValid } = await formRef.value?.validate();
         if (!isValid) {
-            snackbar?.show({ message: 'Please fix validation errors', variant: 'error' })
-            return
+            snackbar?.show({ message: 'Please fix validation errors', variant: 'error' });
+            return;
         }
 
         if (!api) {
-            snackbar?.show({ message: 'API not configured', variant: 'error' })
-            return
+            console.error('API not available');
+            snackbar?.show({ message: 'API not configured', variant: 'error' });
+            return;
         }
 
         if (!props.form?.crudLink) {
-            snackbar?.show({ message: 'Form configuration error', variant: 'error' })
-            return
+            console.error('No crudLink defined in form config');
+            snackbar?.show({ message: 'Form configuration error', variant: 'error' });
+            return;
         }
 
-        isSubmitting.value = true
+        isSubmitting.value = true;
 
         try {
-            const submitData = getDbFieldsOnly(formData)
-            const currentId = formId.value || props.editItemId
-
-            let response
-
-            if (buttonType === 'draft' && !currentId) {
-                // ── First save: POST with status=draft ────────────────────────
-                submitData.status = 'draft'
-                const createLink = props.form?.createLink || props.form?.crudLink
-                response = await api.post(createLink, submitData)
-
-                // Transition to edit mode
-                formId.value = (response?.data?.uuid || response?.uuid) ?? (response?.data?.id || response?.id)
-                formData.id = response?.data?.id || response?.id
-                relationId.value = response?.data?.id || response?.id
-                formMode.value = 'edit'       // ← trigger button swap
-
-                await fetchData()             // load saved data back
-
-                // snackbar?.show({ message: response?.data?.message || 'Draft saved', variant: 'success' })
-                // Do NOT close form
-                emit('submit:success', response?.message)
-
-            } else if (buttonType === 'update') {
-                // ── Update: PUT, do not close ─────────────────────────────────
-                submitData.status = 'draft'
-                //submitData.id = currentId
-                const updateLink = props.form?.updateLink || props.form?.crudLink
-                response = await api.put(`${updateLink}/${currentId}`, submitData)
-
-                await fetchData()
-
-                // snackbar?.show({ message: response?.data?.message || 'Updated successfully', variant: 'success' })
-                // Do NOT close form
-                emit('submit:success', response?.message)
-
-            } else if (buttonType === 'submit') {
-                // ── Submit: PUT with status=submitted, then close ─────────────
-                submitData.status = 'submitted'
-                //submitData.id = currentId
-                const updateLink = props.form?.updateLink || props.form?.crudLink
-                response = await api.put(`${updateLink}/${currentId}`, submitData)
-
-                // snackbar?.show({ message: response?.data?.message || 'Submitted successfully', variant: 'success' })
-                emit('submit:success', response?.message)
-                handleClose()
-                formRef.value?.reset()
+            // Filter out non-database fields before submission
+            const submitData = getDbFieldsOnly(formData);
+            if (clickedButton.value === 'draft') {
+                submitData.status = 'draft';
+            }else {
+                submitData.status = 'submitted';
             }
-
+            if (formId.value) {
+                submitData.id = formId.value; // Ensure ID is included for updates
+            }
+            // const isFullUrl = /^https?:\/\//i.test(props.form?.crudLink)
+            // let url = isFullUrl ? props.form?.crudLink : baseUrl + '/' + props.form?.crudLink
+            let completeUrl =  ''
+            
+            if ((props.mode === 'edit' && props.editItemId) || clickedButton.value === 'submitted') {
+                const editLink = props.form?.updateLink || props.form?.crudLink;
+                // const isFullUrl = /^https?:\/\//i.test(editLink)
+                // let url = isFullUrl ? editLink : baseUrl + '/' + editLink
+                let url = editLink
+                url += `/${submitData.id}`;
+                completeUrl = api.put(url, submitData); // Use filtered data
+            } else {
+
+                const createLink = props.form?.createLink || props.form?.crudLink;
+                // const isFullUrl = /^https?:\/\//i.test(createLink)
+                // let url = isFullUrl ? createLink : baseUrl + '/' + createLink
+                let url = createLink
+                completeUrl = api.post(url, submitData); // Use filtered data
+            }
+            const response = await completeUrl;
+
+            const successMessage = response.data?.message || response.message || 'Created successfully';
+            snackbar?.show({ message: successMessage, variant: 'success' });
+            
+            formId.value = response?.data?.id || formData.id || props.editItemId || null; // Update formId with response ID if available
+            // submitData.id = formId.value; // Ensure submitData has the correct ID for any subsequent operations
+            console.log('Form submission response:', response);
+            
+            if (clickedButton.value === 'draft') {
+                draftSubmitted.value = true;
+            }
+            if (clickedButton.value !== 'draft') {
+                emit('submit:success', response.message);
+                handleClose();
+                formRef.value?.reset();
+            }
+            
         } catch (error) {
-            console.error('Form submission error:', error)
-            // const errorMessage = error.response?.data?.message || 'Form submission failed'
-            // snackbar?.show({ message: errorMessage, variant: 'error' })
-
+            console.error('Form submission error:', error);
+            const errorMessage = error.response?.data?.message || 'Form submission failed';
+            snackbar?.show({ message: errorMessage, variant: 'error' });
             if (error.response?.status === 422 || error.response?.data?.errors) {
-                formRef.value?.setErrors(error.response.data.errors)
-                emit('submit:error', error)
+                const backendErrors = error.response.data.errors;
+                snackbar?.show({ message: backendErrors, variant: 'error' });
+
+                // if (formRef.value?.setErrors) {
+                    formRef.value.setErrors(backendErrors);
+                // } else {
+                //     console.error('formRef.value.setErrors not available')
+                // }
+                
+                const errorMessage = error.response.data.message || 'Validation failed';
+                emit('submit:error', error);
             }
         } finally {
-            isSubmitting.value = false
+            isSubmitting.value = false;
         }
-    }
+    };
 
         // Helper function to filter out non-database fields
     const getDbFieldsOnly = (data) => {
@@ -561,7 +872,7 @@ const initializeFormData = () => {
             .filter(field => field && field.NotDbField === true)
             .map(field => field.key);
 
-        // console.log('Non-DB fields to exclude:', nonDbFields);
+        console.log('Non-DB fields to exclude:', nonDbFields);
 
         // Create new object with only database fields
         const dbOnlyData = {};
@@ -571,112 +882,45 @@ const initializeFormData = () => {
             }
         });
 
-        // console.log('Original form data:', data);
-        // console.log('Filtered DB-only data:', dbOnlyData);
+        console.log('Original form data:', data);
+        console.log('Filtered DB-only data:', dbOnlyData);
 
         return dbOnlyData;
     };
-    // Helper to get nested value by dot notation key e.g. "submissionDetails.form_ref_number"
-    const getNestedValue = (obj, path) => {
-        if (!path || !obj) return undefined
-        return path.split('.').reduce((acc, key) => {
-            if (acc === null || acc === undefined) return undefined
-            return acc[key]
-        }, obj)
-    }
-
     // import dataList from '../../../pgo-components/services/data.json'
     const fetchData = async () => {
         // FormDataList.value = dataList
         // props.form.fields.forEach(field => {
-        //     if (!field || !field.key) return
-
-        //     const fieldKey = field.dataKey ?? field.key  // support dataKey override
-
-        //         // Try dot notation first (e.g. "submissionDetails.form_ref_number")
-        //         if (fieldKey.includes('.')) {
-        //             const nestedVal = getNestedValue(FormDataList.value, fieldKey)
-        //             if (nestedVal !== undefined) {
-        //                 formData[field.key] = nestedVal
-        //                 return
-        //             }
-        //         }
-
-        //         // Fallback: flat key lookup
-        //         if (FormDataList.value[fieldKey] !== undefined) {
-        //             formData[field.key] = FormDataList.value[fieldKey]
-        //         }
+        //     if (dataList[field.key] !== undefined) {
+        //         formData[field.key] = dataList[field.key]
+        //     }
         // })
-
-        // await nextTick()
-        // if (formRef.value?.validate) {
-        //     const result = await formRef.value.validate()
-        //     valid.value = result?.valid ?? false
-        // }
-        // originalFormData.value = JSON.parse(JSON.stringify({ ...formData }))
-        // isPreFilled.value = true   // mark as pre-filled after fetchData
         // console.log('Form Fetched data:', FormDataList.value);
         // return;
 
-        const showId = formId.value || props.editItemId
-        // if (!id) return
+        if (props.mode !== 'edit' || !props.editItemId || clickedButton.value !== 'draft') {
+            return;
+        }
 
         try {
-            const showLink = props.form?.showLink || props.form?.crudLink
-           let url = `${showLink}/${showId}`
-            if (props.form?.showLinkParams) {
-                const rawParams = props.form.showLinkParams
-                if (typeof rawParams === 'string') {
-                    url = `${url}?${rawParams}`
-                } else {
-                    const flattened = {}
-                    for (const [key, value] of Object.entries(rawParams)) {
-                        flattened[key] = (typeof value === 'object' && value !== null)
-                            ? JSON.stringify(value)
-                            : value
-                    }
-                    // url = `${url}?${new URLSearchParams(flattened).toString()}`
-                    url = `${url}?payload=${encodeURIComponent(JSON.stringify(rawParams))}`
-                }
-            }
-
-            const response = await api.get(`${url}`)
-            // const response = await api.get(`${url}/${props.editItemId}`)
-
-            // console.log('Fetched data from API:', response);
-
+            // console.log('form:', props.form);
+            const showLink = props.form?.showLink || props.form?.crudLink;
+            // const isFullUrl = /^https?:\/\//i.test(showLink)
+            // let url = isFullUrl ? showLink : baseUrl + '/' + showLink
+            let url = showLink;
+            
+            const response = await api.get(`${url}/${props.editItemId}`)
+            
             if (response) {
                 const fetchedData = response
-                FormDataList.value = response || response.data || {}
-                formData.id = response?.data?.id || response?.id
-                relationId.value = response?.data?.id || response?.id
-
+                FormDataList.value = response || response.data || {};
+                formData.id = props.editItemId
+                
                 props.form.fields.forEach(field => {
-                    if (!field || !field.key) return
-
-                    const fieldKey = field.key
-
-                    if (fieldKey.includes('.')) {
-                        const nestedVal = getNestedValue(fetchedData, fieldKey)
-                        if (nestedVal !== undefined) {
-                            formData[field.key] = nestedVal
-                            return
-                        }
-                    }
-
-                    if (fetchedData[fieldKey] !== undefined) {
-                        formData[field.key] = fetchedData[fieldKey]
+                    if (fetchedData[field.key] !== undefined) {
+                        formData[field.key] = fetchedData[field.key]
                     }
                 })
-                // console.log('Form data after fetch:', formData);
-                await nextTick()
-                if (formRef.value?.validate) {
-                    const result = await formRef.value.validate()
-                    valid.value = result?.valid ?? false
-                }
-                originalFormData.value = JSON.parse(JSON.stringify({ ...formData }))
-                isPreFilled.value = true   // mark as pre-filled after fetchData
-
             }
         } catch (error) {
             snackbar?.show({ message: 'Error fetching data', variant: 'error' })
@@ -684,20 +928,17 @@ const initializeFormData = () => {
         }
     }
 
-
     const handleClose = () => {
-        open.value = false
-        isSubmitting.value = false
-        formRef.value?.reset()
-        valid.value = false
-        isPreFilled.value = false
-        formMode.value = props.mode    // ← reset on close
-        originalFormData.value = {}
-        formId.value = null
-        emit('close', false)
+        open.value = false;
+        isSubmitting.value = false;
+        formRef.value?.reset();
+        valid.value = false;
+        emit('close', false);
     };
 
     const handleUploadSuccess = () => {
+        // After a successful file upload, refetch the item data to get the latest file list
+        // showUploads.value = true
         fetchData();
     };
     // Initialize on mount
@@ -717,7 +958,6 @@ const initializeFormData = () => {
     // Watch for form changes
     watch(() => props.form, (newForm) => {
         if (newForm) {
-            initializeFormData();
             if (newForm.variables) {
                 initializeVariables();
             }
@@ -725,10 +965,9 @@ const initializeFormData = () => {
                 initializeAllFunctions();
             }
             // Only fetch data if we're in edit mode and have the necessary data
-            if (props.mode === 'edit' && props.editItemId && newForm.crudLink) {
-                formId.value = props.editItemId
-                fetchData();
-            }
+        if (props.mode === 'edit' && props.editItemId && newForm.crudLink) {
+            fetchData();
+        }
         }
     }, { deep: true });
 
@@ -743,9 +982,7 @@ const initializeFormData = () => {
 
     // Also watch for mode changes
     watch(() => props.mode, (newMode) => {
-        formMode.value = newMode
         if (newMode === 'edit' && props.editItemId) {
-            formId.value = props.editItemId
             fetchData()
         } else if (newMode === 'create') {
             initializeFormData()
@@ -753,14 +990,13 @@ const initializeFormData = () => {
     })
 
     // Initialize on mount
-    // onMounted(async () => {
-    //     await nextTick()
-    //     // Re-validate to ensure form state reflects defaults
-    //     if (formRef.value?.validate) {
-    //         const result = await formRef.value.validate()
-    //         valid.value = result?.valid ?? false
-    //     }
-    // })
+    onMounted(() => {
+        // if (props.mode === 'edit' && props.editItemId) {
+        //     // fetchData()
+        // } else {
+        //     initializeFormData()
+        // }
+    })
 
     watch(() => props.modelValue, (newVal) => {
         // open.value = newVal;
@@ -773,43 +1009,7 @@ const initializeFormData = () => {
         if (!newVal) {
             formRef.value?.reset();
             valid.value = false; // Reset valid state when modal closes
-            // console.log('form open', formRef.value.isValid, valid.value);
+            console.log('form open', formRef.value.isValid, valid.value);
         }
     });
-</script>
-
-<script>
-    const safeEval = (expression, context) => {
-        const functionKeys = []
-        const functionValues = []
-        const varDeclarations = []
-
-        Object.keys(context)
-            .filter(key => /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key))
-            .forEach(key => {
-                const value = context[key]
-
-                if (typeof value === 'function') {
-                    functionKeys.push(key)
-                    functionValues.push(value)
-                } else if (value === null || value === undefined) {
-                    varDeclarations.push(`var ${key} = null;`)
-                } else if (typeof value === 'object') {
-                    try {
-                        varDeclarations.push(`var ${key} = ${JSON.stringify(value)};`)
-                    } catch {
-                        varDeclarations.push(`var ${key} = null;`)
-                    }
-                } else if (typeof value === 'string') {
-                    varDeclarations.push(`var ${key} = ${JSON.stringify(value)};`)
-                } else {
-                    varDeclarations.push(`var ${key} = ${value};`)
-                }
-            })
-
-        // expression is used as-is — caller decides whether to add "return (...)"
-        const body = varDeclarations.join('\n') + `\n${expression}`
-        const fn = new Function(...functionKeys, body)
-        return fn(...functionValues)
-    }
-</script>
+</script>