@evoke-platform/ui-components 1.0.0-dev.246 → 1.0.0-dev.248

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.js

@@ -3,14 +3,14 @@ import { Typography } from '@mui/material';
 import { QueryBuilderMaterial } from '@react-querybuilder/material';
 import { isArray, isEmpty, startCase } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
-import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestID, formatQuery, parseMongoDB, useRuleGroup, } from 'react-querybuilder';
+import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestID, formatQuery, useRuleGroup, } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 import { TrashCan } from '../../../icons/custom';
 import { Autocomplete, Button, IconButton, TextField } from '../../core';
 import { Box } from '../../layout';
 import { difference } from '../util';
 import PropertyTree from './PropertyTree';
-import { traversePropertyPath } from './utils';
+import { parseMongoDB, traversePropertyPath } from './utils';
 import ValueEditor from './ValueEditor';
 const ALL_OPERATORS = [
     { name: '=', label: 'Is' },

package/dist/published/components/custom/CriteriaBuilder/ValueEditor.js

@@ -84,7 +84,7 @@ const ValueEditor = (props) => {
             const isMultiple = ['in', 'notIn'].includes(operator);
             const options = presetValues;
             if (isMultiple) {
-                return (React.createElement(Autocomplete, { freeSolo: true, multiple: true, options: options, getOptionLabel: (option) => typeof option === 'object' && option?.label ? option.label : option, value: Array.isArray(value) ? (disabled ? [] : value) : [], disabled: disabled, 
+                return (React.createElement(Autocomplete, { freeSolo: true, multiple: true, options: options, getOptionLabel: (option) => typeof option === 'object' && option?.label ? option.label : String(option), value: Array.isArray(value) ? (disabled ? [] : value) : [], disabled: disabled, 
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     onChange: (event, newValue) => {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -131,7 +131,8 @@ const ValueEditor = (props) => {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     getOptionLabel: (option) => {
                         if (typeof option === 'string') {
-                            return options.find((o) => option === o.name || option == o.value?.name)?.label || '';
+                            const found = options.find((o) => option === o.name || option === o.value?.name);
+                            return found?.label || option;
                         }
                         return option?.label;
                     }, 

package/dist/published/components/custom/CriteriaBuilder/types.d.ts

@@ -35,3 +35,17 @@ export type TreeViewObject = {
     name: string;
     properties: TreeViewProperty[];
 };
+export type MongoDBQueryValue = null | string | {
+    $not?: {
+        $regex?: string;
+    };
+    $regex?: string;
+    $eq?: unknown;
+    $ne?: unknown;
+    $lt?: unknown;
+    $lte?: unknown;
+    $gt?: unknown;
+    $gte?: unknown;
+    $in?: unknown[];
+    $nin?: unknown[];
+};

package/dist/published/components/custom/CriteriaBuilder/utils.d.ts

@@ -1,3 +1,4 @@
+import { RuleGroupType } from 'react-querybuilder';
 import { ExpandedProperty, Obj, ObjectProperty } from '../../../types';
 /**
  * Recursively updates a node in a tree structure by applying an updater function to the node with the specified ID.
@@ -51,4 +52,13 @@ export declare const traversePropertyPath: (propertyPath: string, rootObject: Ob
  * @returns {string} - The truncated name path if it exceeds the limit, otherwise the original name path.
  */
 export declare const truncateNamePath: (namePath: string, limit?: number) => string;
+/**
+ * Parses a MongoDB query into a RuleGroupType or a single RuleType.
+ * This function recursively processes the MongoDB query and transforms it into
+ * a structured format that can be used in the CriteriaBuilder.
+ *
+ * @param {Record<string, unknown>} mongoQuery - The MongoDB query to be parsed.
+ * @returns {RuleGroupType} - Correctly formatted rule or rules for the query builder.
+ */
+export declare function parseMongoDB(mongoQuery: Record<string, unknown>): RuleGroupType;
 export {};

package/dist/published/components/custom/CriteriaBuilder/utils.js

@@ -1,3 +1,4 @@
+import { isArray, isEmpty } from 'lodash';
 /**
  * Recursively updates a node in a tree structure by applying an updater function to the node with the specified ID.
  *
@@ -141,3 +142,153 @@ export const truncateNamePath = (namePath, limit = 20) => {
         return `${namePath.substring(0, limit - 3)}...`;
     }
 };
+/**
+ * Parses a MongoDB query into a RuleGroupType or a single RuleType.
+ * This function recursively processes the MongoDB query and transforms it into
+ * a structured format that can be used in the CriteriaBuilder.
+ *
+ * @param {Record<string, unknown>} mongoQuery - The MongoDB query to be parsed.
+ * @returns {RuleGroupType} - Correctly formatted rule or rules for the query builder.
+ */
+export function parseMongoDB(mongoQuery) {
+    /**
+     * Parses a single rule from the MongoDB query.
+     *
+     * @param {string} key - The field name for the rule.
+     * @param {MongoDBQueryValue} value - The value associated with the key to parse.
+     * @returns {RuleType | undefined} - A RuleType if the value is valid, otherwise undefined.
+     */
+    const parseRule = (key, value) => {
+        if (value === null) {
+            return {
+                field: key,
+                operator: 'null',
+                value: null,
+            };
+        }
+        else if (typeof value === 'string' || typeof value === 'number' || '$eq' in value) {
+            return {
+                field: key,
+                operator: '=',
+                value: typeof value === 'object' && '$eq' in value ? value.$eq : value,
+            };
+        }
+        else if (value.$not && typeof value.$not.$regex === 'string') {
+            return {
+                field: key,
+                operator: 'doesNotContain',
+                value: value.$not.$regex,
+            };
+        }
+        else if (typeof value.$regex === 'string') {
+            let operator = 'contains';
+            const regexValue = value.$regex;
+            if (regexValue.startsWith('^')) {
+                operator = 'beginsWith';
+                regexValue.slice(1);
+            }
+            else if (regexValue.endsWith('$')) {
+                operator = 'endsWith';
+                regexValue.slice(0, -1);
+            }
+            return {
+                field: key,
+                operator: operator,
+                value: regexValue,
+            };
+        }
+        else if ('$ne' in value) {
+            return {
+                field: key,
+                operator: value.$ne === null ? 'notNull' : '!=',
+                value: value.$ne,
+            };
+        }
+        else if ('$lt' in value) {
+            return {
+                field: key,
+                operator: '<',
+                value: value.$lt,
+            };
+        }
+        else if ('$lte' in value) {
+            return {
+                field: key,
+                operator: '<=',
+                value: value.$lte,
+            };
+        }
+        else if ('$gt' in value) {
+            return {
+                field: key,
+                operator: '>',
+                value: value.$gt,
+            };
+        }
+        else if ('$gte' in value) {
+            return {
+                field: key,
+                operator: '>=',
+                value: value.$gte,
+            };
+        }
+        else if ('$in' in value) {
+            return {
+                field: key,
+                operator: 'in',
+                value: (value.$in || []).join(','),
+            };
+        }
+        else if ('$nin' in value) {
+            return {
+                field: key,
+                operator: 'notIn',
+                value: (value.$nin || []).join(','),
+            };
+        }
+        else {
+            return undefined;
+        }
+    };
+    /**
+     * Recursively parses a MongoDB query into a RuleGroupType or RuleType.
+     *
+     * @param {Record<string, unknown>} query - The MongoDB query object to be parsed.
+     * @returns {RuleGroupType | RuleType} - A RuleGroupType with combinator and rules, or a single RuleType.
+     */
+    const parseGroup = (query) => {
+        if ('$and' in query && isArray(query.$and)) {
+            return {
+                combinator: 'and',
+                rules: query.$and.map(parseGroup),
+            };
+        }
+        else if ('$or' in query && isArray(query.$or)) {
+            return {
+                combinator: 'or',
+                rules: query.$or.map(parseGroup),
+            };
+        }
+        else if (isEmpty(query)) {
+            return { combinator: 'and', rules: [] };
+        }
+        else {
+            const rules = Object.entries(query)
+                .map(([key, value]) => parseRule(key, value))
+                .filter((rule) => rule !== null);
+            return rules[0];
+        }
+    };
+    const result = parseGroup(mongoQuery);
+    // Check if the result is a RuleGroupType (i.e., has a combinator)
+    if (result && 'combinator' in result) {
+        return result;
+    }
+    else {
+        // If there are no condition groups configured so it's not a RuleGroupType, wrap it in a default 'and' combinator
+        return {
+            combinator: 'and',
+            rules: result ? [result] : [],
+        };
+    }
+}

package/dist/published/stories/CriteriaBuilder.stories.js

@@ -183,12 +183,18 @@ CriteriaBuilder.args = {
             required: false,
             searchable: false,
         },
+        {
+            id: 'amountOfInspections',
+            name: 'Inspection Count',
+            type: 'integer',
+            required: false,
+        },
     ],
     setCriteria: (criteria) => console.log('criteria= ', criteria),
     criteria: {
         $or: [
             {
-                name: 'bert',
+                name: { $in: ['Jane', 'John', 'Jack'] },
             },
             {
                 licensedFor: { $in: ['hot dogs', 'amusements', 'entertainment'] },
@@ -287,6 +293,12 @@ CriteriaBuilderPresetUserID.args = {
             required: false,
             searchable: false,
         },
+        {
+            id: 'amountOfInspections',
+            name: 'Inspection Count',
+            type: 'integer',
+            required: false,
+        },
     ],
     setCriteria: (criteria) => console.log('criteria= ', criteria),
     criteria: {
@@ -325,6 +337,12 @@ CriteriaBuilderGroupedPresetValues.args = {
             required: false,
             objectId: '',
         },
+        {
+            id: 'amountOfInspections',
+            name: 'Inspection Count',
+            type: 'integer',
+            required: false,
+        },
         {
             id: 'licensedFor',
             name: 'licensed for',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.246",
+    "version": "1.0.0-dev.248",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",