Updated QueryBuilder issue 4346#4757
Draft
teboho wants to merge 40 commits into
Draft
Conversation
- Implemented ValueSources component for selecting value sources with icons. - Created IgnoreIfUnassignedWidget to allow criteria to be ignored if unassigned components are referenced. - Enhanced styles for query builder components, improving layout and visual consistency.
…into teboho/e/4346
- Introduced a set of JsonLogic operators to identify valid expression nodes. - Implemented isJsonLogicNode function to check if a value is a JsonLogic node. - Updated deepMergeValues to replace JsonLogic nodes as a whole during merging.
- Implemented mustache expression evaluation in utils.ts, allowing for dynamic string interpolation using mappings. - Introduced new utility functions for building expression contexts and evaluating mustache templates. - Added a new file for mustache expression functions, defining various string, date, and number manipulation functions. - Created a test setup file to mock window.matchMedia for testing environments.
… mustache expression widget
Optional body: replace ValueSources usage with new shared SourceSelector remove duplicated packed source trigger code and re-export ValueSources from sourceSelector align query-builder source trigger, rule cell, and input styles for consistent compact layout simplify mustache expression widget wrapper to fit updated value-cell flex behavior
…er box. I removed the left padding from styles.ts.
- Add mustacheExpressionFunc with strict-boolean return type for field-side fx rules (standalone boolean expression, no operator/value) - Register MUSTACHE_EXPRESSION func in query builder config - Add full CSS chain (display: contents) for field-source expression editor inside rule--field-wrapper - Source selector: hide func option on field-source side; always compact icon-only style - Field autocomplete: borderless variant to match pill container styling - Fix TypeScript build errors: renderSize, parentFieldCanReorder, handleDraggerMouseDown, JsonTree/IPlainTreeNode, labelYes/labelNo, ExpressionContextTree, singleValueTitle
- Add CustomQueryBuilder: a fully custom render of groups, rules, drag-and-drop, and relation selectors, replacing the library's default rendering pipeline - Remove renderFunc, renderField, renderFieldSources, renderValueSources, renderButton, renderItem, renderConjs, renderBeforeWidget, renderBeforeActions, renderAfterActions settings overrides — all now handled inside CustomQueryBuilder - Simplify index.tsx to settings-only config; remove all button/item render helpers - Remove qb-logic-heading heading element from queryBuilderContent (moved into custom builder) - Update styles for custom builder rule/group layout, drag handles, relation selectors, and field wrapper - Field source selector: remove func option on field (LHS) side - Query builder field component: minor prop adjustment
…expression editor polish - Zero out compact_styles residual padding/margin on .rule and .group--children to fix double-spacing between rules (gap now comes solely from filter-body/group-children gap: 10px) - Remove background from item rail so delete/drag icons render directly on page background - Boolean segmented widget restyled: transparent track, active item as filled blue pill, inactive as plain text, thumb hidden - Custom builder: expose canDelete/canDrag props on QueryBuilderItem and pass through to rail; align group action buttons to icon-only 32×32px - PropertySelect and expression editor: selection-item overflow fixes, min-width constraints on select slots
- Replace antd Segmented with a plain BoolButtonGroup component (two <button> elements) — no track background, no thumb animation - Active button renders as a filled blue rounded pill; inactive is plain text - Add sha-bool-btn-group styles: transparent container, pill-shaped active state, disabled opacity - Remove now-unused segmented overrides from styles
- Restrict boolean field valueSources to ['value'] in config, removing field/func options - Custom builder: detect boolean/strict-boolean field type and render the bool button group directly without a value-source selector or operator widget - Add sha-query-builder-boolean-value wrapper styles - Add test asserting boolean fields only allow direct value sources
- Update :has() selectors to use the exact custom builder DOM path (sha-query-builder-item-row > sha-query-builder-item-main > sha-query-builder-rule-row) so focus expansion only triggers on the correct ancestor, not on unrelated expression inputs elsewhere - Extract FLOATING_EDITOR_WIDTH constant in expression editor
Enables the left-hand operand of a query rule to use a mustache expression via a Function source option, mirroring the value-side UX exactly — same shell layout, expression editor, ignore-if-unassigned checkbox, and focus-expand behaviour. Switching back to Field source resets the rule in-place to a blank state.
At 3+ levels of group nesting the fixed-width grid columns leave no room for the value widget. Switches to flex-wrap at path depth ≥ 4 so field, operator, and value always remain fully visible regardless of nesting depth.
…it fixes Backend: Expression.Constant now preserves the actual JValue type instead of boxing everything as object — fixes !! and ! on strings, enables correct GUID/numeric/DateTime conversion paths, and adds an evaluate operator handler. Null comparisons on string members now check for both null and whitespace (is empty / is not empty semantics). Frontend: unify is_empty/is_not_empty into is_null/is_not_null with user-facing labels "is empty"/"is not empty", fix field-func round-tripping (parseFieldFuncExpression type guard), hide value column for unary operators, guard refListDropdown against missing field settings, and avoid mutating shared AntdConfig.operators.
Guard against missing ConfigUtils methods (getOperatorsForField, getValueSourcesForFieldOp, getWidgetForFieldOp, etc.) by checking availability before calling and falling back to field/type/config-level
… component for the root group Removing unused spacer/empty CSS classes and simplifying surface layout Fixing value editor slot sizing (flex, width, padding) and boolean button group styling Tightening expression editor padding/borders for inline use in query builder
… visual polish
- Enforce max group nesting depth (3 levels) with disabled "Add Group" buttons and drag validation
- Replace item rail with inline action buttons (delete/drag) inside a new item-shell grid layout
- Restyle group cards with heading lbels ("All/Any of the following...") and compact dropdown for add actions
- Add focus-ring styling for input controls and CSS variable for prefix column width
- Dynamically widen query builder modal based on JsonLogic group depth
- Make floating expression editor width adapt to anchor element width
… Ok/Cancel - Inline expression editor now floats above siblings via absolute positioning instead of growing the row height and pushing adjacent controls - Remove blue border from parent value-shell when expression editor is focused - Expand button opens an antd Modal with fx icon title, grey-bordered textarea, auto-focus on open, and resizable input - Modal uses draft value pattern: only Ok commits changes, Cancel/X reverts - Clean up unused floating position logic (floatingStyle, updateFloatingPosition, overlayRef, FLOATING_EDITOR_WIDTH)
…ipping - Render the inline expression editor via createPortal instead of in-place, eliminating the need for overflow:visible hacks on parent containers - Track editor position with a fixed-position portal styled to match the anchor element's bounding rect - Remove all overflow:visible workarounds from query builder styles - Always render the preview button (no conditional swap with editor surface) - Replace deprecated destroyOnClose with destroyOnHidden on the modal
…hown (display: inline-flex) when the parent .sha-query-builder-ignore-unassigned has the is-checked class
…gging nested single items - Check child __relation properties when determining group heading text, so a group with OR-related children displays "Any of the following..." - Enable drag handle on nested items even when they are the only sibling, allowing them to be moved to a different parent group
…groups from intercepting nested item drops
…croll, checkbox sizing, and empty group drop indicators
…into teboho/e/4346
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#4346