@bagelink/vue 1.4.14 → 1.4.18

package/src/components/ImportData.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts" generic="T">
 import type { BglFormSchemaT, Option } from '@bagelink/vue'
+import type { MaybeRefOrGetter } from 'vue'
 import type { Field } from '../types/BagelForm'
 import {
 	Btn,
@@ -13,13 +14,12 @@ import {
 	useExcel,
 	DragOver,
 } from '@bagelink/vue'
-import { computed, reactive, ref, watch, watchEffect } from 'vue'
+import { computed, reactive, ref, watch, watchEffect, toValue } from 'vue'
 
 import { useSchemaField } from '../composables/useSchemaField'
 import { formatString } from '../utils/strings'
 import TextInput from './form/inputs/TextInput.vue'
 
-// Add interface for schema items
 interface SchemaItem {
 	id: string
 	label: string
@@ -56,7 +56,7 @@ interface Transformation {
 }
 
 const props = defineProps<{
-	schema?: BglFormSchemaT<T>
+	schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
 	title?: string
 }>()
 
@@ -91,57 +91,40 @@ const dataTypeOptions = [
 	{ value: DATA_TYPES.BOOLEAN, label: 'Boolean' }
 ]
 
-// Component state
 const file = ref<File | null>(null)
 const fileData = ref<any[]>([])
 const sheetNames = ref<string[]>([])
 const selectedSheet = ref<string>('')
 const hasHeaders = ref(true)
-const fieldMapping = reactive<Record<string, string>>({})
 const isLoading = ref(false)
 const showPreviewModal = ref(false)
 const previewData = ref<any[]>([])
 const mappingComplete = ref(false)
 const fileHeaders = ref<string[]>([])
-
-// New state for constant values and transformations
-const defaultValues = reactive<Record<string, any>>({})
-
-// State for transformations
-const transformations = reactive<Record<string, Transformation[]>>({})
 const showTransformDialog = ref(false)
 const selectedTransformField = ref<SchemaItem | null>(null)
+const showRelatedDialog = ref(false)
+const selectedRelationField = ref<SchemaItem | null>(null)
+const selectedSourceValue = ref('')
+const selectedTargetValue = ref('')
+const showRelatedTransformDialog = ref(false)
+const selectedRelatedTransformField = ref<{ parentId: string, field: SchemaItem } | null>(null)
+const selectedRelatedSourceValue = ref('')
+const selectedRelatedTargetValue = ref('')
 
-// State for data types
+const fieldMapping = reactive<Record<string, string>>({})
+const defaultValues = reactive<Record<string, any>>({})
+const transformations = reactive<Record<string, Transformation[]>>({})
 const fieldDataTypes = reactive<Record<string, string>>({})
-
-// State for related data
 const relatedFiles = reactive<Record<string, File | null>>({})
 const relatedFileData = reactive<Record<string, any[]>>({})
 const relatedFileMappings = reactive<Record<string, Record<string, string>>>({})
-const showRelatedDialog = ref(false)
-const selectedRelationField = ref<SchemaItem | null>(null)
 const relatedKeyField = reactive<Record<string, string>>({})
 const parentKeyField = reactive<Record<string, string>>({})
-
-// Improve the transformations management
-const selectedSourceValue = ref('')
-const selectedTargetValue = ref('')
-
-// State for related field data types
 const relatedFieldDataTypes = reactive<Record<string, string>>({})
-
-// State for related default values
 const relatedDefaultValues = reactive<Record<string, Record<string, any>>>({})
-
-// State for related transformations
 const relatedTransformations = reactive<Record<string, Record<string, Transformation[]>>>({})
-const showRelatedTransformDialog = ref(false)
-const selectedRelatedTransformField = ref<{ parentId: string, field: SchemaItem } | null>(null)
-const selectedRelatedSourceValue = ref('')
-const selectedRelatedTargetValue = ref('')
 
-// Set up schema field rendering
 const formData = ref<any>({})
 const { renderField } = useSchemaField<any, any>({
 	mode: 'form',
@@ -149,7 +132,6 @@ const { renderField } = useSchemaField<any, any>({
 	onUpdateModelValue: (field: Field<any>, value: any) => {
 		if (!field.id) return
 
-		// Check if this is a related field (id contains a dot)
 		if (field.id.includes('.')) {
 			const [parentId, childId] = field.id.split('.')
 			if (!relatedDefaultValues[parentId]) {
@@ -157,19 +139,15 @@ const { renderField } = useSchemaField<any, any>({
 			}
 			relatedDefaultValues[parentId][childId] = value
 		} else {
-			// Regular field
 			defaultValues[field.id] = value
 		}
 	}
 })
 
-// Add function to get unique source values for a field
 function getUniqueSourceValues(fieldId: string): any[] {
 	if (!fieldMapping[fieldId] || !fileData.value || fileData.value.length === 0) {
 		return []
 	}
-
-	// Get all values from the mapped column
 	const allValues = fileData.value
 		.map(row => row[fieldMapping[fieldId]])
 		.filter(value => value !== undefined && value !== null && value !== '')
@@ -191,7 +169,6 @@ const availableSourceValues = computed(() => {
 	return getUniqueSourceValues(selectedTransformField.value.id)
 })
 
-// Create options array from unique values
 const sourceValueOptions = computed(() => {
 	return availableSourceValues.value.map(value => ({
 		value: String(value),
@@ -199,17 +176,11 @@ const sourceValueOptions = computed(() => {
 	}))
 })
 
-// Fix the findMatchingTargetValue function to handle Option types correctly
 function findMatchingTargetValue(sourceValue: string, options: Option[]): string | null {
 	if (!sourceValue || !options || !Array.isArray(options) || options.length === 0) return null
-
-	// Convert sourceValue to string and lowercase for comparison
 	const lowerSourceValue = String(sourceValue).toLowerCase().trim()
-
-	// First try exact match
 	const exactMatch = options.find((option) => {
 		const optionObj = typeof option === 'object' && option !== null ? option : { value: String(option), label: String(option) }
-		// Make sure option and label exist and is a string
 		if (!optionObj) return false
 		const optionLabel = `${optionObj.label}`.toLowerCase().trim()
 		return optionLabel === lowerSourceValue
@@ -229,7 +200,6 @@ function findMatchingTargetValue(sourceValue: string, options: Option[]): string
 
 		const optionLabel = `${optionObj.label}`.toLowerCase().trim()
 
-		// Try contains match
 		return lowerSourceValue.includes(optionLabel) || optionLabel.includes(lowerSourceValue)
 	})
 
@@ -243,7 +213,6 @@ function findMatchingTargetValue(sourceValue: string, options: Option[]): string
 	return null
 }
 
-// Watch for changes in selected source value and auto-match if enabled
 watch(selectedSourceValue, (newValue) => {
 	if (selectedTransformField.value?.options) {
 		const matchedValue = findMatchingTargetValue(newValue, selectedTransformField.value.options)
@@ -253,22 +222,18 @@ watch(selectedSourceValue, (newValue) => {
 	}
 })
 
-// Add a transformation
 function addTransformation(fieldId: string) {
 	if (!transformations[fieldId]) {
 		transformations[fieldId] = []
 	}
 
 	if (selectedSourceValue.value && selectedTargetValue.value) {
-		// Check if this source value already has a transformation
 		const existingIndex = transformations[fieldId].findIndex(t => t.sourceValue === selectedSourceValue.value
 		)
 
 		if (existingIndex >= 0) {
-			// Update existing transformation
 			transformations[fieldId][existingIndex].targetValue = selectedTargetValue.value
 		} else {
-			// Add new transformation
 			transformations[fieldId].push({
 				fieldId,
 				sourceValue: selectedSourceValue.value,
@@ -280,7 +245,6 @@ function addTransformation(fieldId: string) {
 	}
 }
 
-// Create a revised function to extract fields from the schema structure without duplicates
 function getAllFields(schema: any[]): any[] {
 	if (!schema || !Array.isArray(schema)) return []
 
@@ -312,18 +276,11 @@ function getAllFields(schema: any[]): any[] {
 		if (item && item.id && item.label) {
 			addFieldIfNew(item)
 		}
-
-		// Containers with children (like flex divs)
 		if (item && item.children && Array.isArray(item.children)) {
-			// Process each child
 			item.children.forEach((child: any) => {
-				// Regular fields
 				if (child && child.id && child.label) {
-					// Check if it's an array field
 					if (child.$el === 'array' && child.attrs && child.attrs.schema) {
-						// Add the array field itself (phones, emails)
 						addFieldIfNew(child)
-
 						if (Array.isArray(child.attrs.schema)) {
 							child.attrs.schema.forEach((schemaItem: SchemaItem) => {
 								if (schemaItem && schemaItem.id && schemaItem.label) {
@@ -339,7 +296,6 @@ function getAllFields(schema: any[]): any[] {
 									} else if (schemaItem.attrs && schemaItem.attrs.options) {
 										qualifiedField.options = schemaItem.attrs.options
 									}
-
 									addFieldIfNew(qualifiedField)
 								}
 							})
@@ -355,26 +311,19 @@ function getAllFields(schema: any[]): any[] {
 	return allFields
 }
 
-// Get extracted fields from schema
-const schemaFields = computed(() => {
-	return getAllFields(props.schema || [])
-})
+const schemaFields = computed(() => getAllFields(toValue(props.schema) || []))
 
-// Update the isFieldRequired function to handle the special case for array fields
 function isFieldRequired(field: any): boolean {
 	if (field.isArrayField && field.parentField) {
 		return false
 	}
 
-	// For regular fields, check the standard required attributes
 	return (field.attrs && field.attrs.required === true)
 		|| (field.required === true)
 		|| (field.attrs && field.attrs.attrs && field.attrs.attrs.required === true)
 }
 
-// Add a function to get field display information including conditional requirements
 function getFieldDescription(field: any): { description: string, isConditional: boolean } {
-	// For array child fields, show they're conditionally required
 	if (field.isArrayField && field.parentField) {
 		const parentLabel = schemaFields.value.find(f => f.id === field.parentField)?.label || field.parentField
 		return {
@@ -382,8 +331,6 @@ function getFieldDescription(field: any): { description: string, isConditional:
 			isConditional: true
 		}
 	}
-
-	// No special handling needed
 	return {
 		description: '',
 		isConditional: false
@@ -405,12 +352,10 @@ async function parseFile(file: File) {
 	}
 }
 
-// Replace loadSheetData function with simplified version
 async function loadSheetData() {
 	if (!file.value || !selectedSheet.value) return
 	isLoading.value = true
 	try {
-		// Use the readSheetData utility from our composable
 		const { headers, data } = await readSheetData(file.value, selectedSheet.value, hasHeaders.value)
 
 		fileHeaders.value = headers
@@ -424,21 +369,16 @@ async function loadSheetData() {
 	}
 }
 
-// Add a function to check if a field is related to an array parent that's already mapped
 function checkArrayFieldConflicts() {
-	// Get all array parent fields that are currently mapped
 	const mappedArrayParents = new Set()
-	const mappedArrayChildren = new Map() // Map from parent ID to child IDs
+	const mappedArrayChildren = new Map()
 
-	// Identify which array parents and children are mapped
 	Object.keys(fieldMapping).forEach((fieldId: string) => {
 		const field = schemaFields.value.find(f => f.id === fieldId)
 		if (field) {
 			if (field.$el === 'array') {
-				// This is an array parent
 				mappedArrayParents.add(field.id)
 			} else if (field.isArrayField && field.parentField) {
-				// This is an array child
 				if (!mappedArrayChildren.has(field.parentField)) {
 					mappedArrayChildren.set(field.parentField, new Set())
 				}
@@ -447,7 +387,6 @@ function checkArrayFieldConflicts() {
 		}
 	})
 
-	// For each array parent that's mapped, disable its children
 	for (const parentId of mappedArrayParents) {
 		const childFields = schemaFields.value.filter(f => f.parentField === parentId)
 		childFields.forEach((child: any) => {
@@ -456,7 +395,6 @@ function checkArrayFieldConflicts() {
 		})
 	}
 
-	// For each array child that's mapped, disable its parent
 	for (const [parentId, childIds] of mappedArrayChildren.entries()) {
 		if (childIds.size > 0) {
 			const parentField = schemaFields.value.find(f => f.id === parentId)
@@ -468,14 +406,11 @@ function checkArrayFieldConflicts() {
 	}
 }
 
-// Modify the resetMapping function to call checkArrayFieldConflicts
 function resetMapping() {
-	// Reset field mapping
 	Object.keys(fieldMapping).forEach((key: string) => {
 		delete fieldMapping[key]
 	})
 
-	// Reset disabled state on all fields
 	schemaFields.value.forEach((field: any) => {
 		field.disabled = false
 		field.disabledReason = ''
@@ -522,38 +457,29 @@ function resetMapping() {
 		})
 	}
 
-	// Check for array field conflicts
 	checkArrayFieldConflicts()
 	checkMappingComplete()
 }
 
-// Simplify the checkMappingComplete function to match canProcessData
 function checkMappingComplete() {
-	// Use the same logic as canProcessData for consistency
 	if (!file.value || (Object.keys(fieldMapping).length === 0 && Object.keys(defaultValues).length === 0)) {
 		mappingComplete.value = false
 		return
 	}
 
-	// Get strictly required fields (non-conditional)
 	const requiredFields = schemaFields.value.filter((field) => {
-		// Exclude array children which are conditionally required
 		if (field.isArrayField && field.parentField) return false
 
-		// Check various ways a field might be marked as required
 		return (field.attrs && field.attrs.required === true)
 			|| (field.required === true)
 			|| (field.attrs && field.attrs.attrs && field.attrs.attrs.required === true)
 	})
 
-	// If no strictly required fields, we just need at least one mapping or default value
 	if (requiredFields.length === 0) {
 		mappingComplete.value = Object.keys(fieldMapping).some(key => !!fieldMapping[key])
 			|| Object.keys(defaultValues).length > 0
 		return
 	}
-
-	// Check that all required fields are mapped or have default values
 	mappingComplete.value = requiredFields.every(field => !!fieldMapping[field.id] || hasDefaultValue(field.id))
 }
 
@@ -566,34 +492,24 @@ function showPreview() {
 		const mappedRow: MappedRow = {}
 
 		schemaFields.value.forEach((field) => {
-			// Skip array fields as they're handled separately
 			if (field.isArrayField || field.$el === 'array') return
-
-			// Get value from mapping or use default
 			let value: any = null
 			let useDefault = false
 
 			if (fieldMapping[field.id] && sourceRow[fieldMapping[field.id]] !== undefined) {
 				value = sourceRow[fieldMapping[field.id]]
-				// Use default value as fallback if the mapped value is empty
 				if (value === '' && defaultValues[field.id] !== undefined) {
 					value = defaultValues[field.id]
 					useDefault = true
 				}
 			} else if (defaultValues[field.id] !== undefined) {
-				// Use default value if no direct mapping or mapping is empty
 				value = defaultValues[field.id]
 				useDefault = true
 			}
 
-			// Skip if no value
-			if (value === null) {
-				return
-			}
+			if (value === null) return
 
-			// Apply transformations if any exist and not using default value
 			if (!useDefault && transformations[field.id] && transformations[field.id].length > 0) {
-				// Find matching transformation
 				const transform = transformations[field.id].find(t => t.sourceValue == value || t.sourceValue === String(value)
 				)
 				if (transform) {
@@ -601,21 +517,17 @@ function showPreview() {
 				}
 			}
 
-			// Apply data type conversion
 			const dataType = fieldDataTypes[field.id] || DATA_TYPES.STRING
 			value = convertValueByType(value, dataType)
 
 			if (field.id.includes('.')) {
-				// Handle dot notation for nested objects
 				const parts = field.id.split('.')
 				const rootField = parts[0]
 
-				// Create nested structure
 				if (!mappedRow[rootField]) {
 					mappedRow[rootField] = {}
 				}
 
-				// Handle multi-level nesting
 				let current = mappedRow[rootField]
 				for (let i = 1; i < parts.length - 1; i++) {
 					if (!current[parts[i]]) {
@@ -624,51 +536,41 @@ function showPreview() {
 					current = current[parts[i]]
 				}
 
-				// Set the value at the final level
 				current[parts[parts.length - 1]] = value
 			} else {
 				mappedRow[field.id] = value
 			}
 		})
 
-		// Process array child fields
 		const arrayChildFields = schemaFields.value.filter(field => field.isArrayField && field.parentField)
 
-		// Process each array field
 		arrayChildFields.forEach((childField) => {
 			const [parentId, childId] = childField.id.split('.')
 			if (!parentId || !childId) return
 
-			// Get value from mapping or use default
 			let value: any = null
 			let useDefault = false
 
 			if (fieldMapping[childField.id] && sourceRow[fieldMapping[childField.id]] !== undefined) {
 				value = sourceRow[fieldMapping[childField.id]]
-				// Use default value as fallback if the mapped value is empty
 				if (value === '' && defaultValues[childField.id] !== undefined) {
 					value = defaultValues[childField.id]
 					useDefault = true
 				}
 			} else if (defaultValues[childField.id] !== undefined) {
-				// Use default value if no direct mapping
 				value = defaultValues[childField.id]
 				useDefault = true
 			}
 
-			// Skip if no value
 			if (value === null) {
 				return
 			}
 
-			// Create the array structure if it doesn't exist
 			if (!mappedRow[parentId]) {
 				mappedRow[parentId] = []
 			}
 
-			// Apply transformations if any exist and not using default
 			if (!useDefault && transformations[childField.id] && transformations[childField.id].length > 0) {
-				// Find matching transformation
 				const transform = transformations[childField.id].find(t => t.sourceValue == value || t.sourceValue === String(value)
 				)
 				if (transform) {
@@ -676,71 +578,57 @@ function showPreview() {
 				}
 			}
 
-			// Apply data type conversion for array fields
 			const dataType = fieldDataTypes[childField.id] || DATA_TYPES.STRING
 			value = convertValueByType(value, dataType)
 
-			// Add the array item with the proper structure
 			mappedRow[parentId].push({
 				[childId]: value
 			})
 		})
 
-		// Handle related file data
 		Object.keys(relatedFiles).forEach((fieldId) => {
 			if (!relatedFiles[fieldId] || !relatedKeyField[fieldId] || !parentKeyField[fieldId]) {
 				return
 			}
 
-			// Get parent key value from this row
 			const parentKeyValue = sourceRow[parentKeyField[fieldId]]
 			if (!parentKeyValue) return
 
-			// Create the array structure if it doesn't exist
 			if (!mappedRow[fieldId]) {
 				mappedRow[fieldId] = []
 			}
 
-			// Find matching rows in related data
 			const matchingRows = relatedFileData[fieldId].filter(relatedRow => relatedRow[relatedKeyField[fieldId]] == parentKeyValue
 				|| relatedRow[relatedKeyField[fieldId]] === parentKeyValue.toString()
 			)
 
-			// Add each matching row as an item in the array
 			matchingRows.forEach((matchingRow) => {
 				const mappedItem: Record<string, any> = {}
 
-				// Apply mappings from related file
 				if (selectedRelationField.value?.attrs?.schema) {
 					selectedRelationField.value.attrs.schema.forEach((schemaItem: SchemaItem) => {
 						if (!schemaItem.id) return
 
-						// Get value from related mapping or use default
 						let value: any = null
 						let useDefault = false
 
 						if (relatedFileMappings[fieldId][schemaItem.id]
 							&& matchingRow[relatedFileMappings[fieldId][schemaItem.id]] !== undefined) {
 							value = matchingRow[relatedFileMappings[fieldId][schemaItem.id]]
-							// Use default as fallback for empty values
 							if (value === '' && relatedDefaultValues[fieldId][schemaItem.id] !== undefined) {
 								value = relatedDefaultValues[fieldId][schemaItem.id]
 								useDefault = true
 							}
 						} else if (relatedDefaultValues[fieldId][schemaItem.id] !== undefined) {
-							// Use default value if no mapping
 							value = relatedDefaultValues[fieldId][schemaItem.id]
 							useDefault = true
 						}
 
-						// Skip if no value
 						if (value === null) return
 
-						// Apply transformations if any exist and not using default
 						if (!useDefault
 							&& relatedTransformations[fieldId][schemaItem.id]
 							&& relatedTransformations[fieldId][schemaItem.id].length > 0) {
-							// Find matching transformation
 							const transform = relatedTransformations[fieldId][schemaItem.id].find(t => t.sourceValue == value || t.sourceValue === String(value)
 							)
 							if (transform) {
@@ -748,24 +636,20 @@ function showPreview() {
 							}
 						}
 
-						// Apply data type conversion
 						const fullChildId = `${fieldId}.${schemaItem.id}`
 						const dataType = relatedFieldDataTypes[fullChildId] || DATA_TYPES.STRING
 						value = convertValueByType(value, dataType)
 
-						// Add to mapped item
 						mappedItem[schemaItem.id] = value
 					})
 				}
 
-				// Only add item if it has at least one value
 				if (Object.keys(mappedItem).length > 0) {
 					mappedRow[fieldId].push(mappedItem)
 				}
 			})
 		})
 
-		// Check if this row has any data (not empty)
 		const hasData = Object.values(mappedRow).some((value) => {
 			if (value === null || value === undefined) return false
 			if (value === '') return false
@@ -773,39 +657,30 @@ function showPreview() {
 			return true
 		})
 
-		// Only add rows that have data
 		if (hasData) {
 			mappedData.push(mappedRow)
 		}
 	}
 
-	// Update the preview data with all non-empty rows
 	previewData.value = mappedData
-
-	// Show the modal
 	showPreviewModal.value = true
 }
 
-// Create a function to convert our schema fields to Spreadsheet column config
 function createSpreadsheetColumns() {
 	return schemaFields.value
 		.filter((field) => {
 			return field.$el !== 'array'
 		})
 		.map((field) => {
-			// Create a column config for each field
 			return {
 				key: field.id,
 				title: field.label,
-				// Special formatting for array child fields
 				formatter: field.isArrayField ? formatArrayChildValue : undefined
 			}
 		})
 }
 
-// Helper function to format array child values for display
 function formatArrayChildValue(value: any, row: any, fieldId: string): string {
-	// For array child fields, we need to check if it's in the parent array
 	const field = schemaFields.value.find(f => f.id === fieldId)
 	if (!field || !field.isArrayField || !field.parentField) return value
 
@@ -813,7 +688,6 @@ function formatArrayChildValue(value: any, row: any, fieldId: string): string {
 	const parentArray = row[parentId]
 
 	if (Array.isArray(parentArray) && parentArray.length > 0) {
-		// Extract values from the parent array
 		return parentArray
 			.map(item => item[childId])
 			.filter(val => val !== undefined)
@@ -823,7 +697,6 @@ function formatArrayChildValue(value: any, row: any, fieldId: string): string {
 	return ''
 }
 
-// Add computed for spreadsheet columns
 const spreadsheetColumns = computed(() => createSpreadsheetColumns())
 
 function processData() {
@@ -885,21 +758,19 @@ async function handleFilesUploaded(files: FileList) {
 		isLoading.value = false
 	}
 }
-// Watch for changes in the selected sheet
+
 watchEffect(() => {
 	if (selectedSheet.value) {
 		loadSheetData()
 	}
 })
 
-// Function to check if field has default value
 function hasDefaultValue(fieldId: string): boolean {
 	return defaultValues[fieldId] !== undefined
 		&& defaultValues[fieldId] !== null
 		&& defaultValues[fieldId] !== ''
 }
 
-// Function to open transformation dialog
 function openTransformDialog(field: SchemaItem) {
 	try {
 		if (!field.options) {
@@ -920,20 +791,17 @@ function openTransformDialog(field: SchemaItem) {
 	}
 }
 
-// Function to remove a transformation
 function removeTransformation(fieldId: string, index: number) {
 	if (transformations[fieldId] && transformations[fieldId].length > index) {
 		transformations[fieldId].splice(index, 1)
 	}
 }
 
-// Function to open related file dialog
 function openRelatedDialog(field: SchemaItem) {
 	selectedRelationField.value = field
 	showRelatedDialog.value = true
 }
 
-// Function to process related file
 async function processRelatedFile(fieldId: string, files: File[] | FileList) {
 	if (!files) return
 	const file = files[0]
@@ -941,15 +809,12 @@ async function processRelatedFile(fieldId: string, files: File[] | FileList) {
 	relatedFiles[fieldId] = file
 
 	try {
-		// First get sheet names
 		const sheets = await getSheetNames(file)
 		const selectedSheet = sheets.length > 0 ? sheets[0] : ''
 
-		// Use the first sheet instead of an empty string
 		const { data } = await readSheetData(file, selectedSheet, true)
 		relatedFileData[fieldId] = data
 
-		// Initialize mapping if not exists
 		if (!relatedFileMappings[fieldId]) {
 			relatedFileMappings[fieldId] = {}
 		}
@@ -958,7 +823,6 @@ async function processRelatedFile(fieldId: string, files: File[] | FileList) {
 	}
 }
 
-// Add function to auto-populate transformations for a field
 function autoPopulateTransformations(fieldId: string) {
 	try {
 		const field = schemaFields.value.find(f => f.id === fieldId)
@@ -967,7 +831,6 @@ function autoPopulateTransformations(fieldId: string) {
 			return
 		}
 
-		// Ensure options are available either directly or from attrs
 		let fieldOptions = field.options || (field.attrs && field.attrs.options)
 
 		if (!fieldMapping[fieldId] || !fileData.value || fileData.value.length === 0) {
@@ -980,7 +843,6 @@ function autoPopulateTransformations(fieldId: string) {
 			return
 		}
 
-		// Ensure options is an array
 		if (!Array.isArray(fieldOptions)) {
 			console.warn('Options is not an array for field:', fieldId)
 			fieldOptions = []
@@ -988,7 +850,6 @@ function autoPopulateTransformations(fieldId: string) {
 
 		const uniqueValues = getUniqueSourceValues(fieldId)
 
-		// Initialize transformations array if needed
 		if (!transformations[fieldId]) {
 			transformations[fieldId] = []
 		}
@@ -996,21 +857,17 @@ function autoPopulateTransformations(fieldId: string) {
 		let matchCount = 0
 		const unmatchedValues: string[] = []
 
-		// For each unique value, try to find a matching target
 		uniqueValues.forEach((sourceValue) => {
 			const strSourceValue = String(sourceValue)
 			const matchedValue = findMatchingTargetValue(strSourceValue, fieldOptions)
 
 			if (matchedValue) {
-				// Check if this source value already has a transformation
 				const existingIndex = transformations[fieldId].findIndex(t => t.sourceValue === strSourceValue
 				)
 
 				if (existingIndex >= 0) {
-					// Update existing transformation
 					transformations[fieldId][existingIndex].targetValue = matchedValue
 				} else {
-					// Add new transformation
 					transformations[fieldId].push({
 						fieldId,
 						sourceValue: strSourceValue,
@@ -1024,7 +881,6 @@ function autoPopulateTransformations(fieldId: string) {
 			}
 		})
 
-		// Provide some feedback about how many matches were found
 		if (matchCount === 0) {
 			alert(`No automatic matches found. Try creating transformations manually.`)
 		} else {
@@ -1036,9 +892,7 @@ function autoPopulateTransformations(fieldId: string) {
 	}
 }
 
-// Function to detect date format from string
 function detectDateFormat(value: string): RegExp | null {
-	// Common date formats
 	const formats = [
 		/^\d{4}-\d{2}-\d{2}$/, // YYYY-MM-DD
 		/^\d{2}\/\d{2}\/\d{4}$/, // MM/DD/YYYY
@@ -1055,30 +909,22 @@ function detectDateFormat(value: string): RegExp | null {
 	return null
 }
 
-// Function to parse date string based on detected format
 function parseDate(value: string): Date | null {
 	if (!value) return null
 
-	// Try parsing ISO format first
 	const isoDate = new Date(value)
 	if (!Number.isNaN(isoDate.getTime())) {
 		return isoDate
 	}
-
-	// Try parsing other formats
 	const format = detectDateFormat(value)
 	if (format) {
-		// Handle specific formats
 		if (/^\d{2}\/\d{2}\/\d{4}$/.test(value)) {
-			// MM/DD/YYYY
 			const [month, day, year] = value.split('/').map(Number)
 			return new Date(year, month - 1, day)
 		} else if (/^\d{2}\.\d{2}\.\d{4}$/.test(value)) {
-			// DD.MM.YYYY
 			const [day, month, year] = value.split('.').map(Number)
 			return new Date(year, month - 1, day)
 		} else if (/^\d{1,2}\s[a-z]{3,9}\s\d{4}$/i.test(value)) {
-			// D MMM YYYY or D MMMM YYYY
 			return new Date(value)
 		}
 	}
@@ -1086,12 +932,10 @@ function parseDate(value: string): Date | null {
 	return null
 }
 
-// Replace convertValueByType function with simplified version using composable utilities
 function convertValueByType(value: any, dataType: string): any {
 	if (value === null || value === undefined || value === '') {
 		return null
 	}
-
 	try {
 		switch (dataType) {
 			case DATA_TYPES.STRING:
@@ -1110,24 +954,18 @@ function convertValueByType(value: any, dataType: string): any {
 					if (['false', 'no', '0', 'off'].includes(lowercased)) return false
 				}
 				return Boolean(value)
-
 			case DATA_TYPES.DATE:
 			case DATA_TYPES.DATETIME:
-				// Handle Excel serial dates
 				if (isExcelSerialDate(value)) {
 					const date = excelSerialDateToJSDate(value)
 					return formatDate(date, dataType === DATA_TYPES.DATETIME)
 				}
-
-				// Handle string dates
 				if (typeof value === 'string') {
 					const dateObj = parseDate(value)
 					if (dateObj) {
 						return formatDate(dateObj, dataType === DATA_TYPES.DATETIME)
 					}
 				}
-
-				// Handle Date objects
 				if (value instanceof Date) {
 					return formatDate(value, dataType === DATA_TYPES.DATETIME)
 				}
@@ -1161,28 +999,22 @@ function detectDataType(value: any): string {
 	}
 
 	if (typeof value === 'string') {
-		// Check if it's a date string
 		if (detectDateFormat(value) || !Number.isNaN(new Date(value).getTime())) {
 			return DATA_TYPES.DATE
 		}
 	}
-
-	// Default to string
 	return DATA_TYPES.STRING
 }
 
-// Function to guess data types for all mapped fields
 function guessDataTypes(): void {
 	schemaFields.value.forEach((field) => {
 		if (!fieldDataTypes[field.id] && fieldMapping[field.id]) {
-			// Get sample values from the first few rows
 			const sampleValues = fileData.value
 				.slice(0, 5)
 				.map(row => row[fieldMapping[field.id]])
 				.filter(value => value !== undefined && value !== null && value !== '')
 
 			if (sampleValues.length > 0) {
-				// Detect most common type
 				const types = sampleValues.map(detectDataType)
 				const typeCount: Record<string, number> = {}
 
@@ -1190,7 +1022,6 @@ function guessDataTypes(): void {
 					typeCount[type] = (typeCount[type] || 0) + 1
 				})
 
-				// Get the most common type
 				let maxCount = 0
 				let mostCommonType = DATA_TYPES.STRING
 
@@ -1209,12 +1040,9 @@ function guessDataTypes(): void {
 	})
 }
 
-// Function to open transformation dialog for related fields
 function openRelatedTransformDialog(parentId: string, field: SchemaItem) {
 	try {
 		console.log('Opening related transform dialog for field:', field.id, 'in parent:', parentId)
-
-		// Make sure to set options property from attrs if needed
 		if (!field.options) {
 			field.options = []
 		}
@@ -1228,7 +1056,6 @@ function openRelatedTransformDialog(parentId: string, field: SchemaItem) {
 
 		selectedRelatedTransformField.value = { parentId, field }
 
-		// Initialize transformations structure if needed
 		if (!relatedTransformations[parentId]) {
 			relatedTransformations[parentId] = {}
 		}
@@ -1239,7 +1066,6 @@ function openRelatedTransformDialog(parentId: string, field: SchemaItem) {
 
 		showRelatedTransformDialog.value = true
 
-		// Reset selected values
 		selectedRelatedSourceValue.value = ''
 		selectedRelatedTargetValue.value = ''
 	} catch (error) {
@@ -1248,7 +1074,6 @@ function openRelatedTransformDialog(parentId: string, field: SchemaItem) {
 	}
 }
 
-// Function to get unique source values for a related field
 function getRelatedUniqueSourceValues(parentId: string, fieldId: string): any[] {
 	if (!relatedFileMappings[parentId][fieldId]
 		|| !relatedFileData[parentId]
@@ -1256,28 +1081,22 @@ function getRelatedUniqueSourceValues(parentId: string, fieldId: string): any[]
 		return []
 	}
 
-	// Get all values from the mapped column in the related file
 	const allValues = relatedFileData[parentId]
 		.map(row => row[relatedFileMappings[parentId][fieldId]])
 		.filter(value => value !== undefined && value !== null && value !== '')
 
-	// Create a unique set of values
 	const uniqueValues = [...new Set(allValues)]
 
-	// Filter out values that already have transformations
 	return uniqueValues.filter((value) => {
 		if (!relatedTransformations[parentId][fieldId]
 			|| relatedTransformations[parentId][fieldId].length === 0) {
 			return true
 		}
-
-		// Return false if this value already has a transformation
 		return !relatedTransformations[parentId][fieldId].some(t => t.sourceValue == value || t.sourceValue === value.toString()
 		)
 	})
 }
 
-// Computed for available related source values
 const availableRelatedSourceValues = computed(() => {
 	if (!selectedRelatedTransformField.value) {
 		return []
@@ -1287,7 +1106,6 @@ const availableRelatedSourceValues = computed(() => {
 	return getRelatedUniqueSourceValues(parentId, field.id)
 })
 
-// Create options array from unique related values
 const relatedSourceValueOptions = computed(() => {
 	return availableRelatedSourceValues.value.map(value => ({
 		value: String(value),
@@ -1295,7 +1113,6 @@ const relatedSourceValueOptions = computed(() => {
 	}))
 })
 
-// Function to add a related transformation
 function addRelatedTransformation(parentId: string, fieldId: string) {
 	if (!relatedTransformations[parentId]) {
 		relatedTransformations[parentId] = {}
@@ -1306,30 +1123,24 @@ function addRelatedTransformation(parentId: string, fieldId: string) {
 	}
 
 	if (selectedRelatedSourceValue.value && selectedRelatedTargetValue.value) {
-		// Check if this source value already has a transformation
 		const existingIndex = relatedTransformations[parentId][fieldId].findIndex(
 			t => t.sourceValue === selectedRelatedSourceValue.value
 		)
 
 		if (existingIndex >= 0) {
-			// Update existing transformation
 			relatedTransformations[parentId][fieldId][existingIndex].targetValue = selectedRelatedTargetValue.value
 		} else {
-			// Add new transformation
 			relatedTransformations[parentId][fieldId].push({
 				fieldId,
 				sourceValue: selectedRelatedSourceValue.value,
 				targetValue: selectedRelatedTargetValue.value
 			})
 		}
-
-		// Reset selection
 		selectedRelatedSourceValue.value = ''
 		selectedRelatedTargetValue.value = ''
 	}
 }
 
-// Function to remove a related transformation
 function removeRelatedTransformation(parentId: string, fieldId: string, index: number) {
 	if (relatedTransformations[parentId][fieldId]
 		&& relatedTransformations[parentId][fieldId].length > index) {
@@ -1337,7 +1148,6 @@ function removeRelatedTransformation(parentId: string, fieldId: string, index: n
 	}
 }
 
-// Function to auto-populate transformations for a related field
 function autoPopulateRelatedTransformations(parentId: string, fieldId: string) {
 	try {
 		const field = selectedRelatedTransformField.value?.field
@@ -1346,7 +1156,6 @@ function autoPopulateRelatedTransformations(parentId: string, fieldId: string) {
 			return
 		}
 
-		// Ensure options are available either directly or from attrs
 		let fieldOptions = field.options || (field.attrs && field.attrs.options)
 
 		if (!relatedFileMappings[parentId][fieldId]
@@ -1361,7 +1170,6 @@ function autoPopulateRelatedTransformations(parentId: string, fieldId: string) {
 			return
 		}
 
-		// Ensure options is an array
 		if (!Array.isArray(fieldOptions)) {
 			console.warn('Options is not an array for related field:', fieldId)
 			fieldOptions = []
@@ -1369,7 +1177,6 @@ function autoPopulateRelatedTransformations(parentId: string, fieldId: string) {
 
 		const uniqueValues = getRelatedUniqueSourceValues(parentId, fieldId)
 
-		// Initialize transformations array if needed
 		if (!relatedTransformations[parentId]) {
 			relatedTransformations[parentId] = {}
 		}
@@ -1381,14 +1188,12 @@ function autoPopulateRelatedTransformations(parentId: string, fieldId: string) {
 		let matchCount = 0
 		const unmatchedValues: string[] = []
 
-		// For each unique value, try to find a matching target
 		uniqueValues.forEach((sourceValue) => {
 			const strSourceValue = String(sourceValue)
 
 			const matchedValue = findMatchingTargetValue(strSourceValue, fieldOptions)
 
 			if (matchedValue) {
-				// Check if this source value already has a transformation
 				const existingIndex = relatedTransformations[parentId][fieldId].findIndex(
 					t => t.sourceValue === strSourceValue
 				)
@@ -1410,8 +1215,6 @@ function autoPopulateRelatedTransformations(parentId: string, fieldId: string) {
 				unmatchedValues.push(strSourceValue)
 			}
 		})
-
-		// Provide feedback about matches
 		if (matchCount === 0) {
 			alert(`No automatic matches found. Try creating transformations manually.`)
 		} else {
@@ -1423,15 +1226,12 @@ function autoPopulateRelatedTransformations(parentId: string, fieldId: string) {
 	}
 }
 
-// Initialize default value structure for a field
 function initDefaultValue(fieldId: string) {
-	// Make sure the field has an entry in defaultValues
 	if (defaultValues[fieldId] === undefined) {
 		defaultValues[fieldId] = null
 	}
 }
 
-// Initialize related default value structure
 function initRelatedDefaultValue(parentId: string, fieldId: string) {
 	if (!relatedDefaultValues[parentId]) {
 		relatedDefaultValues[parentId] = {}
@@ -1441,12 +1241,9 @@ function initRelatedDefaultValue(parentId: string, fieldId: string) {
 	}
 }
 
-// Helper function to prepare a field with default values for rendering
 function getFieldWithDefaults(field: any) {
-	// Get the current field type to render proper input
 	let fieldType = field.$el || 'text'
 
-	// If datatype is set, adjust the field type accordingly
 	if (fieldDataTypes[field.id]) {
 		switch (fieldDataTypes[field.id]) {
 			case DATA_TYPES.NUMBER:
@@ -1461,7 +1258,6 @@ function getFieldWithDefaults(field: any) {
 		}
 	}
 
-	// Update formData with current value to support the renderField function
 	if (field.id) {
 		formData.value[field.id] = defaultValues[field.id]
 	}
@@ -1473,12 +1269,8 @@ function getFieldWithDefaults(field: any) {
 	}
 }
 
-// Add a helper function for related fields too
 function getRelatedFieldWithDefaults(parentId: string, field: any) {
-	// Get the current field type to render proper input
 	let fieldType = field.$el || 'text'
-
-	// If datatype is set, adjust the field type accordingly
 	const fullFieldId = `${parentId}.${field.id}`
 	if (relatedFieldDataTypes[fullFieldId]) {
 		switch (relatedFieldDataTypes[fullFieldId]) {
@@ -1529,22 +1321,16 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 				</Card>
 			</DragOver>
 		</div>
-
-		<!-- Loading indicator -->
 		<div v-if="isLoading" class="loading-container">
 			<div class="spinner" />
 			<p>Processing your file...</p>
 		</div>
 
-		<!-- Step 2: Sheet selection and configuration -->
 		<div class="overflow h-100p">
 			<div v-if="file && !isLoading && sheetNames.length > 0" class="config-section flex gap-05 pb-2 m_flex-wrap">
 				<Btn v-tooltip="'Change File'" class="px-1" color="gray" @click="file = null">
 					<Icon icon="draft" size="1.5" weight="300" />
-					<p>
-						{{ file.name }}
-					</p>
-					<!-- <Icon icon="edit" size="0.75" /> -->
+					<p v-text="file.name" />
 				</Btn>
 				<SelectInput v-if="sheetNames.length > 1" v-model="selectedSheet" :options="sheetNames" label="Select Sheet" />
 				<CheckInput
@@ -1552,12 +1338,7 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 					style="--bgl-accent-color: var(--bgl-black); --bgl-primary: var(--bgl-black);"
 				/>
 			</div>
-
-			<!-- Step 3: Field Mapping -->
 			<div v-if="file && !isLoading && fileHeaders.length > 0">
-				<!-- <h3 class="mt-0">
-					Map Fields
-				</h3> -->
 				<p class="label pb-1 border-bottom mb-1">
 					Match each required field to a column from your file, set default values, or configure transformations
 				</p>
@@ -1644,8 +1425,6 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 				</div>
 			</div>
 		</div>
-
-		<!-- Transformation Modal -->
 		<Modal v-model:visible="showTransformDialog" title="Configure Transformations" width="800">
 			<div v-if="selectedTransformField">
 				<div class="flex space-between gap-1 mb-1 border-bottom pb-05 m_flex-wrap">
@@ -1718,8 +1497,6 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 				</div>
 			</div>
 		</Modal>
-
-		<!-- Related File Modal -->
 		<Modal v-model:visible="showRelatedDialog" title="Configure Related Data" width="900">
 			<div v-if="selectedRelationField">
 				<p class="pb-05">
@@ -1819,7 +1596,6 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 			</div>
 		</Modal>
 
-		<!-- Preview Modal -->
 		<Modal v-model:visible="showPreviewModal" title="Data Preview & Edit" width="90vw">
 			<div>
 				<Spreadsheet
@@ -1840,7 +1616,6 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 			</div>
 		</Modal>
 
-		<!-- Related Transformation Modal -->
 		<Modal v-model:visible="showRelatedTransformDialog" title="Configure Related Transformations" width="800">
 			<div v-if="selectedRelatedTransformField">
 				<p>Create transformations for <strong>{{ selectedRelatedTransformField.field.label }}</strong> in {{ selectedRelationField?.label }}</p>
@@ -1929,9 +1704,7 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 				</div>
 
 				<div>
-					<Btn @click="showRelatedTransformDialog = false">
-						Close
-					</Btn>
+					<Btn value="Close" @click="showRelatedTransformDialog = false" />
 				</div>
 			</div>
 		</Modal>