@limetech/lime-crm-building-blocks 1.96.0 → 1.98.0

package/dist/collection/components/lime-query-builder/lime-query-builder.js

@@ -10,22 +10,32 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { h } from "@stencil/core";
 import { SelectLimeTypes as Limetypes, } from "@limetech/lime-web-components";
+import { guiFilterToLimeQuery, limeQueryToGuiFilter, normalizeLimeQueryFilterForGui, } from "./filter-conversion";
 import { isLimeQuerySupported, } from "./lime-query-validation";
 /**
  * Lime Query Builder Component
  *
- * A code editor for constructing Lime Query DSL queries in JSON format.
+ * A comprehensive query builder for constructing Lime Query DSL queries.
+ * This is the main component that combines limetype selection with the filter builder.
  *
  * Features:
- * - **JSON code editor**: Write queries using the Lime Query DSL
- * - **Syntax validation**: Real-time validation of query structure
- * - **Feature flag support**: GUI mode placeholder (not yet implemented)
+ * - **Limetype selection**: Choose which object type to query
+ * - **Filter builder**: Build complex filters with AND/OR/NOT logic
+ * - **Property path selection**: Navigate through relations
+ * - **Type-aware inputs**: Automatic input types based on property type
+ * - **Response format**: Select which properties to return
+ * - **Query options**: Configure limit and other query parameters
+ * - **Placeholder support**: Use `%activeObject%` placeholders in filter values
+ * - **Real-time output**: See the Lime Query JSON as you build
  *
- * The component allows editing of complete `LimeQuery` objects that can be sent
+ * The component produces a complete `LimeQuery` object that can be sent
  * directly to the Lime CRM backend.
  *
- * When the feature flag `useLimeQueryBuilderGuiMode` is enabled, a mode toggle
- * becomes available, but GUI mode currently shows a placeholder message.
+ * **Active Object Placeholders**:
+ * When the `activeLimetype` prop is provided, the component enables validation
+ * and UI support for `%activeObject%` placeholders in filter expressions.
+ * These placeholders reference properties of a contextual "active object"
+ * (e.g., `%activeObject%.company` references the company of the active object).
  *
  * @exampleComponent limebb-example-lime-query-builder-basic
  * @private
@@ -34,10 +44,76 @@ export class LimeQueryBuilder {
     constructor() {
         this.mode = 'gui';
         this.codeValue = '';
+        this.limetype = '';
+        this.filter = {
+            filter_type: 'AND',
+            expressions: [],
+        };
+        this.handleLimetypeChange = (event) => {
+            event.stopPropagation();
+            this.limetype = event.detail;
+            // Reset filter when limetype changes
+            this.filter = {
+                filter_type: 'AND',
+                expressions: [],
+            };
+            // Reset response format when limetype changes
+            this.internalResponseFormat = {
+                object: {
+                    _id: null,
+                },
+            };
+            this.emitChange();
+        };
+        this.handleFilterChange = (event) => {
+            event.stopPropagation();
+            // Convert missing expression back to empty AND to keep the UI consistent
+            if (event.detail.filter_type === '') {
+                this.filter = {
+                    filter_type: 'AND',
+                    expressions: [],
+                };
+            }
+            else {
+                this.filter = event.detail;
+            }
+            this.emitChange();
+        };
+        this.handleResponseFormatChange = (event) => {
+            event.stopPropagation();
+            this.internalResponseFormat = event.detail;
+            this.emitChange();
+        };
+        this.handleLimitChange = (event) => {
+            event.stopPropagation();
+            const value = event.detail;
+            this.limit = value ? Number.parseInt(value, 10) : undefined;
+            this.emitChange();
+        };
         this.switchToGui = () => {
-            this.mode = 'gui';
+            // Validate JSON before switching
+            try {
+                const parsed = JSON.parse(this.codeValue);
+                // Check if it's supported in GUI
+                const support = this.checkGuiSupport();
+                if (!support.guiSupported) {
+                    // Don't switch if GUI can't render this query
+                    return;
+                }
+                // Update internal state from parsed query
+                this.limetype = parsed.limetype || '';
+                this.filter = normalizeLimeQueryFilterForGui(limeQueryToGuiFilter(parsed.filter));
+                this.internalResponseFormat = parsed.responseFormat;
+                this.limit = parsed.limit;
+                this.mode = 'gui';
+                this.change.emit(parsed);
+            }
+            catch (_a) {
+                // Don't switch if JSON is invalid (linter will show the error)
+            }
         };
         this.switchToCode = () => {
+            this.updateCodeValue();
             this.mode = 'code';
         };
         this.handleCodeChange = (event) => {
@@ -58,43 +134,130 @@ export class LimeQueryBuilder {
         return ((_c = (_b = (_a = this.platform) === null || _a === void 0 ? void 0 : _a.isFeatureEnabled) === null || _b === void 0 ? void 0 : _b.call(_a, 'useLimeQueryBuilderGuiMode')) !== null && _c !== void 0 ? _c : false);
     }
     componentWillLoad() {
-        // Initialize code value from input prop
-        this.codeValue = JSON.stringify(this.value || {}, null, 2);
         // Force code mode if GUI is disabled
         if (!this.guiModeEnabled) {
             this.mode = 'code';
+            // Initialize code value from prop
+            this.updateCodeValue();
+            return;
+        }
+        if (this.value) {
+            this.limetype = this.value.limetype || '';
+            this.filter = normalizeLimeQueryFilterForGui(limeQueryToGuiFilter(this.value.filter));
+            this.internalResponseFormat = this.value.responseFormat;
+            this.limit = this.value.limit;
+        }
+        // Initialize code value from prop
+        this.updateCodeValue();
+        // Check if GUI mode is supported
+        const support = this.checkGuiSupport();
+        if (!support.guiSupported) {
+            this.mode = 'code';
         }
     }
     render() {
         const guiSupported = this.checkGuiSupport();
-        return (h("div", { key: '77e93d0277a99b8ff1c777d7ee0b63259755f740', class: "lime-query-builder" }, this.label && (h("h3", { key: '4089d69ea3404c656f1c24ec73aef6df2cc8baec', class: "lime-query-builder-label" }, this.label)), this.guiModeEnabled && (h("div", { key: '5d18a749386651cc1361b712693bad105dba9b03', class: "mode-controls" }, this.renderModeSwitch(guiSupported))), !this.guiModeEnabled || this.mode === 'code' ? (h("div", { class: "code-mode" }, this.renderCodeEditor(guiSupported))) : (h("div", { class: "gui-mode" }, h("div", { class: "placeholder-message" }, h("h4", null, "GUI Mode Not Yet Supported"), h("p", null, "The visual query builder interface is not yet available. Please use Code mode to write queries in JSON format."))))));
+        const showCodeMode = !this.guiModeEnabled || this.mode === 'code';
+        return (h("div", { key: '96d1a933f699404c3806af3742e9ad30d53562aa', class: "lime-query-builder" }, this.renderLabel(), this.renderModeControls(guiSupported), showCodeMode
+            ? this.renderCodeMode(guiSupported)
+            : this.renderGuiMode()));
+    }
+    emitChange() {
+        // Only emit in GUI mode
+        if (this.mode === 'code') {
+            return;
+        }
+        if (!this.limetype) {
+            return;
+        }
+        // Use internal state, then default to returning just _id
+        const responseFormat = this.internalResponseFormat || {
+            object: {
+                _id: null,
+            },
+        };
+        const limeQuery = {
+            limetype: this.limetype,
+            responseFormat: responseFormat,
+            filter: guiFilterToLimeQuery(this.filter),
+        };
+        if (this.limit !== undefined && this.limit > 0) {
+            limeQuery.limit = this.limit;
+        }
+        this.change.emit(limeQuery);
+    }
+    updateCodeValue() {
+        if (!this.limetype) {
+            this.codeValue = JSON.stringify(this.value || {}, null, 2);
+            return;
+        }
+        // Use internal state, then default to returning just _id
+        const responseFormat = this.internalResponseFormat || {
+            object: {
+                _id: null,
+            },
+        };
+        const limeQuery = {
+            limetype: this.limetype,
+            responseFormat: responseFormat,
+            filter: guiFilterToLimeQuery(this.filter),
+        };
+        if (this.limit !== undefined && this.limit > 0) {
+            limeQuery.limit = this.limit;
+        }
+        this.codeValue = JSON.stringify(limeQuery, null, 2);
     }
     checkGuiSupport() {
-        if (!this.limetypes || !this.codeValue) {
+        if (!this.limetypes) {
             // Can't validate yet, assume all is good
             return {
                 valid: true,
-                guiSupported: false,
+                guiSupported: true,
                 validationErrors: [],
                 guiLimitations: [],
             };
         }
-        // Parse and validate the code value
-        let limeQueryToCheck;
-        try {
-            limeQueryToCheck = JSON.parse(this.codeValue);
+        // When in code mode, validate the parsed code value instead of current state
+        let queryToCheck;
+        if (this.mode === 'code' && this.codeValue) {
+            try {
+                queryToCheck = JSON.parse(this.codeValue);
+            }
+            catch (_a) {
+                return {
+                    valid: false,
+                    guiSupported: false,
+                    validationErrors: ['Invalid JSON'],
+                    guiLimitations: [],
+                };
+            }
         }
-        catch (_a) {
-            return {
-                valid: false,
-                guiSupported: false,
-                validationErrors: ['Invalid JSON'],
-                guiLimitations: [],
+        else {
+            // Build query from current GUI state
+            if (!this.limetype) {
+                return {
+                    valid: true,
+                    guiSupported: true,
+                    validationErrors: [],
+                    guiLimitations: [],
+                };
+            }
+            const responseFormat = this
+                .internalResponseFormat || {
+                object: {
+                    _id: null,
+                },
+            };
+            queryToCheck = {
+                limetype: this.limetype,
+                responseFormat: responseFormat,
+                filter: guiFilterToLimeQuery(this.filter),
             };
+            if (this.limit !== undefined && this.limit > 0) {
+                queryToCheck.limit = this.limit;
+            }
         }
-        // In code-only mode, we don't track activeLimetype separately
-        // Pass undefined since it's not needed for code mode validation
-        return isLimeQuerySupported(limeQueryToCheck, this.limetypes, undefined, this.guiModeEnabled);
+        return isLimeQuerySupported(queryToCheck, this.limetypes, this.activeLimetype, this.guiModeEnabled);
     }
     renderModeSwitch(support) {
         const guiDisabled = !support.guiSupported;
@@ -107,6 +270,46 @@ export class LimeQueryBuilder {
             !guiSupported.guiSupported &&
             guiSupported.guiLimitations.length > 0 && (h("div", { class: "gui-limitations" }, h("strong", null, "Cannot switch to GUI mode:"), h("ul", null, guiSupported.guiLimitations.map((limitation) => (h("li", null, limitation))))))));
     }
+    renderLimetypeSection() {
+        return (h("div", { class: "limetype-section" }, h("limebb-limetype-field", { platform: this.platform, context: this.context, label: "Object Type", value: this.limetype, required: true, fieldName: "limetype", helperText: "Select the type of object you want to query", onChange: this.handleLimetypeChange })));
+    }
+    renderResponseFormatSection() {
+        if (!this.limetype) {
+            return;
+        }
+        return (h("div", { class: "response-format-section" }, h("limebb-response-format-editor", { platform: this.platform, context: this.context, limetype: this.limetype, value: this.internalResponseFormat, onChange: this.handleResponseFormatChange })));
+    }
+    renderFilterSection() {
+        if (!this.limetype) {
+            return;
+        }
+        return (h("div", { class: "filter-section" }, h("h4", { class: "section-label" }, "Filter Conditions"), h("limebb-lime-query-filter-expression", { platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, expression: this.filter, onExpressionChange: this.handleFilterChange })));
+    }
+    renderQueryOptionsSection() {
+        var _a;
+        if (!this.limetype) {
+            return;
+        }
+        return (h("div", { class: "query-options-section" }, h("h4", { class: "section-label" }, "Query Options"), h("div", { class: "query-options-controls" }, h("limel-input-field", { label: "Limit", type: "number", value: ((_a = this.limit) === null || _a === void 0 ? void 0 : _a.toString()) || '', placeholder: "No limit", helperText: "Maximum number of results", onChange: this.handleLimitChange }))));
+    }
+    renderGuiMode() {
+        return (h("div", { class: "gui-mode" }, this.renderLimetypeSection(), this.renderResponseFormatSection(), this.renderFilterSection(), this.renderQueryOptionsSection()));
+    }
+    renderLabel() {
+        if (!this.label) {
+            return;
+        }
+        return h("h3", { class: "lime-query-builder-label" }, this.label);
+    }
+    renderModeControls(support) {
+        if (!this.guiModeEnabled) {
+            return;
+        }
+        return (h("div", { class: "mode-controls" }, this.renderModeSwitch(support)));
+    }
+    renderCodeMode(support) {
+        return h("div", { class: "code-mode" }, this.renderCodeEditor(support));
+    }
     static get is() { return "limebb-lime-query-builder"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
@@ -208,6 +411,25 @@ export class LimeQueryBuilder {
                 "setter": false,
                 "attribute": "label",
                 "reflect": false
+            },
+            "activeLimetype": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The limetype of the active object (for %activeObject% placeholder validation).\nWhen provided, enables placeholder validation and the placeholder input mode.\nWhen omitted, placeholders are accepted without validation."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active-limetype",
+                "reflect": false
             }
         };
     }
@@ -215,7 +437,11 @@ export class LimeQueryBuilder {
         return {
             "limetypes": {},
             "mode": {},
-            "codeValue": {}
+            "codeValue": {},
+            "limetype": {},
+            "filter": {},
+            "internalResponseFormat": {},
+            "limit": {}
         };
     }
     static get events() {