Refactor Field Inspection into a Decoupled Vue Directive#226
Conversation
- Replaced legacy, repetitive field inspection logic with a centralized `v-field-inspect` custom directive. - Introduced `flexirule/public/js/flexirule/rule_builder/constants.js` with a configurable `INSPECT_MODIFIER` (Shift). - Implemented in-place text swapping for labels and a micro-badge fallback for labelless controls. - Centralized directive application in `ControlFactory.vue` to cover all fields automatically. - Removed deprecated `fieldInspector` state and global mouse listeners from `App.vue`. - Swept all individual controls to remove redundant `data-fxr-fieldname` attributes. Co-authored-by: Sendipad <705960+Sendipad@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
- Fixed an issue where field inspection didn't work in modals by changing `ControlFactory` wrapper from `display: contents` to `display: block`. - Hardened modifier key detection in `v-field-inspect` directive to reliably capture Shift key states. - Re-synchronized all hovered instances when the modifier key is toggled. - Cleaned up legacy `fieldInspector` code from `App.vue` and redundant attributes from controls. Co-authored-by: Sendipad <705960+Sendipad@users.noreply.github.com>
- Migrated `v-field-inspect` from `ControlFactory.vue` to base controls (`ComboBox`, `Data`, `Check`, `Text`, `Code`, `FlexValue`, `MultiSelect`). - This ensures fields used directly in configuration panels (bypassing the factory) are correctly inspectable. - Improved directive label detection to support varied FlexiRule label classes (`.fxr-label`, `.label-area`, `.control-label`). - Converted all remaining manual `data-fxr-fieldname` attributes to the new directive. - Added comprehensive logging and safety resets to the directive. - Verified asset build and linting. Co-authored-by: Sendipad <705960+Sendipad@users.noreply.github.com>
1 participant
This PR refactors the field inspection feature in the
flexiruleworkspace to align with Frappe's native Form Builder while using a more modern and decoupled Vue 3 approach.Key Changes:
constants.jsto manage the modifier key (defaulting toShift).v-field-inspectto handle the heavy lifting of state tracking, visual swapping (label to fieldname), and the click-to-copy mechanism.ControlFactory.vue, removing the need for manual attributes on every control.App.vue.data-fxr-fieldnameattributes.This refactoring significantly reduces code duplication, simplifies the core application state, and provides a more robust and maintainable pattern for developer tools within the Rule Builder.
PR created automatically by Jules for task 10670225873261897384 started by @Sendipad