Afiq
577128a799
- Refactored ConditionalLogicEngine.vue to optimize conditional logic script generation by grouping handlers for watched fields, reducing duplicate event listeners and improving performance. - Added helper functions for generating condition checks and action codes, enhancing code readability and maintainability. - Introduced ConditionalLogicTestDemo.vue to demonstrate the benefits of optimization, showcasing before and after examples of conditional logic handling. - Updated FormBuilderFieldSettingsModal.vue to include notes on optimization when multiple fields watch the same trigger field, improving user awareness of performance enhancements. - Enhanced ComponentPreview.vue and workflow pages to support preview mode for conditional logic, ensuring consistent behavior across the application.
108 lines
3.3 KiB
Vue
108 lines
3.3 KiB
Vue
<template>
|
|
<div class="conditional-logic-demo p-6 bg-gray-50 rounded-lg">
|
|
<h3 class="text-lg font-semibold mb-4">Conditional Logic Optimization Demo</h3>
|
|
|
|
<!-- Before Optimization Example -->
|
|
<div class="mb-6">
|
|
<h4 class="text-md font-medium text-red-600 mb-2">❌ Before Optimization (Duplicate Handlers)</h4>
|
|
<div class="bg-red-50 p-4 rounded border border-red-200">
|
|
<pre class="text-sm text-red-800 whitespace-pre-wrap">{{ beforeOptimization }}</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- After Optimization Example -->
|
|
<div class="mb-6">
|
|
<h4 class="text-md font-medium text-green-600 mb-2">✅ After Optimization (Grouped Handlers)</h4>
|
|
<div class="bg-green-50 p-4 rounded border border-green-200">
|
|
<pre class="text-sm text-green-800 whitespace-pre-wrap">{{ afterOptimization }}</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Benefits -->
|
|
<div class="bg-blue-50 p-4 rounded border border-blue-200">
|
|
<h4 class="text-md font-medium text-blue-800 mb-2">🚀 Benefits of Optimization</h4>
|
|
<ul class="text-sm text-blue-700 space-y-1">
|
|
<li>• <strong>Reduced Memory Usage:</strong> Only one handler per watched field instead of multiple duplicates</li>
|
|
<li>• <strong>Better Performance:</strong> Fewer function calls when field values change</li>
|
|
<li>• <strong>Cleaner Code:</strong> Grouped logic is easier to read and maintain</li>
|
|
<li>• <strong>No Conflicts:</strong> Eliminates potential conflicts between duplicate handlers</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
// Example scenario: 3 fields (field2, field3, field4) all depend on field1
|
|
const beforeOptimization = computed(() => `// BEFORE: Multiple duplicate handlers for the same field
|
|
// This creates performance issues and potential conflicts
|
|
|
|
// Conditional logic for field: field2
|
|
onFieldChange('field1', function() {
|
|
if (getField('field1') === 'show') {
|
|
showField('field2');
|
|
} else {
|
|
hideField('field2');
|
|
}
|
|
});
|
|
|
|
// Conditional logic for field: field3
|
|
onFieldChange('field1', function() {
|
|
if (getField('field1') === 'show') {
|
|
showField('field3');
|
|
} else {
|
|
hideField('field3');
|
|
}
|
|
});
|
|
|
|
// Conditional logic for field: field4
|
|
onFieldChange('field1', function() {
|
|
if (getField('field1') === 'show') {
|
|
showField('field4');
|
|
} else {
|
|
hideField('field4');
|
|
}
|
|
});
|
|
|
|
// Problem: 3 duplicate handlers listening to the same field!`)
|
|
|
|
const afterOptimization = computed(() => `// AFTER: Single optimized handler for all dependent fields
|
|
// Much more efficient and prevents conflicts
|
|
|
|
// Optimized field change handler for: field1
|
|
// Handles 3 dependent field(s): field2, field3, field4
|
|
onFieldChange('field1', function() {
|
|
// Logic for text field: field2
|
|
if (getField('field1') === 'show') {
|
|
showField('field2');
|
|
} else {
|
|
hideField('field2');
|
|
}
|
|
|
|
// Logic for text field: field3
|
|
if (getField('field1') === 'show') {
|
|
showField('field3');
|
|
} else {
|
|
hideField('field3');
|
|
}
|
|
|
|
// Logic for text field: field4
|
|
if (getField('field1') === 'show') {
|
|
showField('field4');
|
|
} else {
|
|
hideField('field4');
|
|
}
|
|
});
|
|
|
|
// Solution: Only 1 handler managing all dependent fields!`)
|
|
</script>
|
|
|
|
<style scoped>
|
|
pre {
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
overflow-x: auto;
|
|
}
|
|
</style> |