@solidxai/core-ui 0.0.1

package/dist/components/core/common/SolidGlobalSearchElement.js

@@ -0,0 +1,1167 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { Dialog } from "primereact/dialog";
+import FilterComponent, { FilterOperator, FilterRuleType } from "../../../components/core/common/FilterComponent";
+import { Button } from "primereact/button";
+import { Divider } from "primereact/divider";
+import { usePathname } from "../../../hooks/usePathname";
+import { useRouter } from "../../../hooks/useRouter";
+import { useSearchParams } from "../../../hooks/useSearchParams";
+import { queryStringToQueryObject } from "../list/SolidListView";
+import { InputText } from "primereact/inputtext";
+import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
+import qs from "qs";
+import { SolidSaveCustomFilterForm } from "./SolidSaveCustomFilterForm";
+import { ERROR_MESSAGES } from "../../../constants/error-messages";
+import { hydrateRelationRules } from "../../../helpers/hydrateRelationRules";
+import { useSession } from '../../../hooks/useSession';
+var getRandomInt = function (min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+var extractFields = function (nodes) {
+    if (nodes === void 0) { nodes = []; }
+    var result = [];
+    for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
+        var node = nodes_1[_i];
+        if ((node === null || node === void 0 ? void 0 : node.type) === "field") {
+            result.push(node);
+        }
+        if (Array.isArray(node === null || node === void 0 ? void 0 : node.children)) {
+            result.push.apply(result, extractFields(node.children));
+        }
+    }
+    return result;
+};
+var transformFiltersToRules = function (filter, parentRule) {
+    if (parentRule === void 0) { parentRule = null; }
+    if (!filter || typeof filter !== "object" || Object.keys(filter).length === 0) {
+        throw new Error("Invalid filter: expected a non-null object with properties");
+    }
+    if (!filter || typeof filter !== "object") {
+        throw new Error("Invalid filter: expected a non-null object");
+    }
+    var currentId = idCounter++;
+    if (filter["$or"]) {
+        return {
+            id: currentId,
+            type: FilterRuleType.RULE_GROUP,
+            matchOperator: FilterOperator.OR,
+            parentRule: parentRule,
+            children: filter["$or"]
+                .filter(function (sub) {
+                // Filter out null, undefined, empty strings, and empty objects
+                if (sub == null)
+                    return false;
+                if (typeof sub === "string" && sub.trim() === "")
+                    return false;
+                if (typeof sub === "object" && Object.keys(sub).length === 0)
+                    return false;
+                return true;
+            })
+                .map(function (subFilter) { return transformFiltersToRules(subFilter, currentId); })
+        };
+    }
+    if (filter["$and"]) {
+        return {
+            id: currentId,
+            type: FilterRuleType.RULE_GROUP,
+            matchOperator: FilterOperator.AND,
+            parentRule: parentRule,
+            children: filter["$and"]
+                .filter(function (sub) {
+                // Filter out null, undefined, empty strings, and empty objects
+                if (sub == null)
+                    return false;
+                if (typeof sub === "string" && sub.trim() === "")
+                    return false;
+                if (typeof sub === "object" && Object.keys(sub).length === 0)
+                    return false;
+                return true;
+            })
+                .map(function (subFilter) { return transformFiltersToRules(subFilter, currentId); })
+        };
+    }
+    // Handle single rule condition
+    for (var fieldName in filter) {
+        var condition = filter[fieldName];
+        if (!condition || typeof condition !== "object") {
+            throw new Error("Invalid condition for field '".concat(fieldName, "'"));
+        }
+        // CASE 1: relation filter → unwrap first
+        if ((condition === null || condition === void 0 ? void 0 : condition.id) && typeof (condition === null || condition === void 0 ? void 0 : condition.id) === "object") {
+            for (var matchMode in condition.id) {
+                var rawValue = condition.id[matchMode];
+                var mathcModeValue = matchMode;
+                return {
+                    id: currentId,
+                    type: FilterRuleType.RULE,
+                    fieldName: fieldName,
+                    matchMode: mathcModeValue,
+                    value: Array.isArray(rawValue) ? rawValue : [rawValue],
+                    parentRule: parentRule,
+                    children: []
+                };
+            }
+        }
+        // CASE 2: normal field → loop stays
+        for (var matchMode in condition) {
+            var rawValue = condition[matchMode];
+            var mathcModeValue = matchMode;
+            return {
+                id: currentId,
+                type: FilterRuleType.RULE,
+                fieldName: fieldName,
+                matchMode: mathcModeValue,
+                value: Array.isArray(rawValue) ? rawValue : [rawValue],
+                parentRule: parentRule,
+                children: []
+            };
+        }
+    }
+    throw new Error(ERROR_MESSAGES.INVALID_FILTER_STRUCTURE);
+};
+var idCounter = 1;
+var generateId = function () { return Date.now() + Math.floor(Math.random() * 1000); };
+var transformRulesToFilters = function (input, viewData) {
+    // Helper function to process individual rules
+    var processRule = function (rule) {
+        var _a, _b, _c, _d;
+        var _e, _f;
+        if (rule.value !== undefined && rule.value !== null) {
+            // Ensure rule.value is always an array
+            var values = typeof rule.value[0] === "object" ? rule.value.map(function (i) { return (i === null || i === void 0 ? void 0 : i.value) ? i === null || i === void 0 ? void 0 : i.value : i; }) : rule === null || rule === void 0 ? void 0 : rule.value;
+            if (rule.matchMode !== '$in' && rule.matchMode !== '$notIn' && rule.matchMode !== '$between' && rule.matchMode !== '$null' && rule.matchMode !== '$notNull') {
+                values = values[0];
+            }
+            var fieldMeta = (_f = (_e = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _e === void 0 ? void 0 : _e.solidFieldsMetadata) === null || _f === void 0 ? void 0 : _f[rule.fieldName];
+            var isManyToMany = (fieldMeta === null || fieldMeta === void 0 ? void 0 : fieldMeta.type) === 'relation' && (fieldMeta === null || fieldMeta === void 0 ? void 0 : fieldMeta.relationType) === 'many-to-many';
+            var transformedRule = void 0;
+            if (isManyToMany) {
+                // For many-to-many relations, always use array format for $in/$notIn
+                transformedRule = (_a = {},
+                    _a[rule.fieldName] = {
+                        id: (_b = {},
+                            _b[rule.matchMode] = values // Keep as array
+                        ,
+                            _b)
+                    },
+                    _a);
+            }
+            else {
+                // Rule transformation
+                transformedRule = (_c = {},
+                    _c[rule.fieldName] = (_d = {},
+                        _d[rule.matchMode] = values // Assuming `value` is always an array with `value` and `label`
+                    ,
+                        _d),
+                    _c);
+            }
+            var processedFields = void 0;
+            if (rule.children && rule.children.length > 0) {
+                processedFields = rule.children.map(function (child) { return processRuleGroup(child); }).filter(function (child) { return child != null; });
+                ;
+            }
+            if (processedFields) {
+                return __assign(__assign({}, transformedRule), { processedFields: processedFields });
+            }
+            return __assign({}, transformedRule);
+        }
+    };
+    // Helper function to process rule groups
+    var processRuleGroup = function (ruleGroup) {
+        var _a;
+        var operator = ruleGroup.matchOperator === 'or' ? '$or' : '$and';
+        var children = ruleGroup.children.map(function (child) {
+            if (child.type === 'rule') {
+                // Process the rule
+                return processRule(child);
+            }
+            else if (child.type === 'rule_group') {
+                // Process the rule group recursively
+                return processRuleGroup(child);
+            }
+        }).filter(function (child) { return child != null; });
+        // If no valid children, return null
+        // if (children.length === 0) {
+        //     return null;
+        // }
+        // If only one child, return it directly without wrapping in operator
+        // if (children.length === 1) {
+        //     return children[0];
+        // }
+        return _a = {},
+            _a[operator] = children,
+            _a;
+    };
+    // Start processing the root rule group
+    var filterObject = processRuleGroup(input);
+    if (!filterObject) {
+        return {};
+    }
+    function liftProcessedFields(filters) {
+        if (!filters || typeof filters !== 'object')
+            return filters;
+        var processArray = function (arr) {
+            var newArr = [];
+            for (var _i = 0, arr_1 = arr; _i < arr_1.length; _i++) {
+                var obj = arr_1[_i];
+                if (obj && obj.processedFields) {
+                    var processed = processArray(obj.processedFields); // Recursively process nested processedFields
+                    delete obj.processedFields;
+                    newArr.push.apply(newArr, __spreadArray([obj], processed, false));
+                }
+                else {
+                    newArr.push(obj);
+                }
+                for (var key in obj) {
+                    if (Array.isArray(obj[key])) {
+                        obj[key] = processArray(obj[key]);
+                    }
+                }
+            }
+            return newArr;
+        };
+        for (var key in filters) {
+            if (Array.isArray(filters[key])) {
+                filters[key] = processArray(filters[key]);
+            }
+        }
+        return filters;
+    }
+    return liftProcessedFields(filterObject);
+};
+// Build nested condition for relation fields
+function buildNestedCondition(path, operatorKey, value) {
+    var _a;
+    var keys = path.split(".").filter(Boolean);
+    var leaf = (_a = {}, _a[operatorKey] = value, _a);
+    return keys.reduceRight(function (acc, key) {
+        var _a;
+        return (_a = {}, _a[key] = acc, _a);
+    }, leaf);
+}
+var tranformSearchToFilters = function (input) {
+    if (!input || !input.$and)
+        return input;
+    var grouped = {};
+    input.$and.forEach(function (_a) {
+        var _b;
+        var _c, _d;
+        var fieldName = _a.fieldName, value = _a.value, searchField = _a.searchField, matchMode = _a.matchMode;
+        var val = Array.isArray(value) && value.length === 1 ? value[0] : value;
+        if (!grouped[fieldName]) {
+            grouped[fieldName] = { values: [], searchField: searchField || "", matchMode: matchMode || "$containsi" };
+        }
+        if (Array.isArray(val)) {
+            (_c = grouped[fieldName]) === null || _c === void 0 ? void 0 : (_b = _c.values).push.apply(_b, val);
+        }
+        else {
+            (_d = grouped[fieldName]) === null || _d === void 0 ? void 0 : _d.values.push(val);
+        }
+    });
+    // return {
+    //     $and: Object.entries(grouped).map(([fieldName, values]) => ({
+    //         [fieldName]: {
+    //             $containsi: values.length === 1 ? values[0] : values
+    //         }
+    //     }))
+    // };
+    var andFilters = [];
+    Object.entries(grouped).forEach(function (_a) {
+        var _b;
+        var fieldName = _a[0], value = _a[1];
+        var isNested = value.searchField ? value.searchField.includes(".") : false;
+        if (isNested) {
+            // NESTED: use $eq and expand dot-notation into nested objects
+            if (value.values.length === 1) {
+                andFilters.push(buildNestedCondition(value.searchField, value.matchMode, value.values[0]));
+            }
+            else {
+                andFilters.push({
+                    $or: value.values.map(function (v) { return buildNestedCondition(value.searchField, value.matchMode, v); }),
+                });
+            }
+        }
+        else {
+            if (value.values.length === 1) {
+                andFilters.push((_b = {},
+                    _b[fieldName] = {
+                        $containsi: value.values[0]
+                    },
+                    _b));
+            }
+            else {
+                andFilters.push({
+                    $or: value.values.map(function (v) {
+                        var _a;
+                        return (_a = {},
+                            _a[fieldName] = { $containsi: v },
+                            _a);
+                    })
+                });
+            }
+        }
+    });
+    return {
+        $and: andFilters
+    };
+};
+export var mergeSearchAndCustomFilters = function (transformedFilter, newFilter, transformedFilterName, newFilterName) {
+    var filters = {};
+    // Add only non-null filters
+    if (transformedFilter && Object.keys(transformedFilter).length > 0) {
+        filters[transformedFilterName] = transformedFilter;
+    }
+    if (newFilter && Object.keys(newFilter).length > 0) {
+        filters[newFilterName] = newFilter;
+    }
+    // Return the combined filters object
+    return filters;
+};
+export var mergeAllDiffFilters = function (customFilter, searchFilter, savedFilter, preDefinedFilter) {
+    var filters = {};
+    // Add only non-null filters
+    if (customFilter && Object.keys(customFilter).length > 0) {
+        filters["custom_filter_predicate"] = customFilter;
+    }
+    if (searchFilter && Object.keys(searchFilter).length > 0) {
+        filters["search_predicate"] = searchFilter;
+    }
+    if (savedFilter && Object.keys(savedFilter).length > 0) {
+        filters["saved_filter_predicate"] = savedFilter;
+    }
+    if (preDefinedFilter && Object.keys(preDefinedFilter).length > 0) {
+        filters["predefined_search_predicate"] = preDefinedFilter;
+    }
+    // Return the combined filters object
+    return filters;
+};
+var SavedFilterList = function (_a) {
+    var savedfilter = _a.savedfilter, activeSavedFilter = _a.activeSavedFilter, applySavedFilter = _a.applySavedFilter, openSavedCustomFilter = _a.openSavedCustomFilter, setSavedFilterTobeDeleted = _a.setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible = _a.setIsDeleteSQDialogVisible;
+    return (_jsxs("div", { className: "flex align-items-center justify-content-between gap-2", children: [_jsxs("div", { children: [_jsx(Button, { text: true, size: "small", className: "text-base py-1 w-full", severity: Number(activeSavedFilter) == savedfilter.id ? "secondary" : "contrast", onClick: function () { return applySavedFilter(savedfilter); }, children: savedfilter.name }), (savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.description) && _jsx("p", { className: "text-xs pl-3", children: savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.description })] }), _jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx(Button, { icon: "pi pi-pencil", style: { fontSize: 10 }, severity: "secondary", outlined: true, size: "small", onClick: function () { return openSavedCustomFilter(savedfilter); } }), _jsx(Button, { icon: "pi pi-trash", style: { fontSize: 10 }, severity: "secondary", outlined: true, size: "small", onClick: function () {
+                            setSavedFilterTobeDeleted(savedfilter.id),
+                                setIsDeleteSQDialogVisible(true);
+                        } })] })] }));
+};
+var replacePlaceholders = function (obj, searchValue) {
+    if (typeof obj === 'string') {
+        return obj.replace(/\{\{search\}\}/g, searchValue);
+    }
+    if (Array.isArray(obj)) {
+        return obj.map(function (item) { return replacePlaceholders(item, searchValue); });
+    }
+    if (obj && typeof obj === 'object') {
+        var newObj = {};
+        for (var key in obj) {
+            newObj[key] = replacePlaceholders(obj[key], searchValue);
+        }
+        return newObj;
+    }
+    return obj;
+};
+export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
+    var _b, _c, _d, _e, _f;
+    var viewData = _a.viewData, handleApplyCustomFilter = _a.handleApplyCustomFilter, filters = _a.filters, clearFilter = _a.clearFilter, showSaveFilterPopup = _a.showSaveFilterPopup, setShowSaveFilterPopup = _a.setShowSaveFilterPopup;
+    var defaultState = [
+        {
+            id: 1,
+            type: FilterRuleType.RULE_GROUP,
+            matchOperator: FilterOperator.OR,
+            parentRule: null,
+            children: [
+                {
+                    id: Date.now() + getRandomInt(1, 500),
+                    type: FilterRuleType.RULE,
+                    fieldName: null,
+                    matchMode: null,
+                    value: null,
+                    parentRule: 1,
+                    children: []
+                },
+                {
+                    id: Date.now() + getRandomInt(1, 500),
+                    type: FilterRuleType.RULE,
+                    fieldName: null,
+                    matchMode: null,
+                    value: null,
+                    parentRule: 1,
+                    children: []
+                }
+            ]
+        }
+    ];
+    var _g = useState(defaultState), initialState = _g[0], setInitialState = _g[1];
+    var pathname = usePathname();
+    var searchParams = useSearchParams(); // Converts the query params to a string
+    var activeSavedFilter = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("savedQuery");
+    var router = useRouter();
+    var chipsRef = useRef(null);
+    // filterRules is used to maintian the ui of custom filter 
+    // customFilter is used to maintian the transformed filter object of custom filter
+    var _h = useState(initialState), filterRules = _h[0], setFilterRules = _h[1];
+    var _j = useState(null), customFilter = _j[0], setCustomFilter = _j[1];
+    var _k = useState([]), fields = _k[0], setFields = _k[1];
+    var _l = useState([]), searchableFields = _l[0], setSearchableFields = _l[1];
+    // used to show the list of predefined searches 
+    var _m = useState([]), predefinedSearches = _m[0], setPredefinedSearches = _m[1];
+    // used to open / close the custom fitler popup 
+    var _o = useState(false), showGlobalSearchElement = _o[0], setShowGlobalSearchElement = _o[1];
+    // searchChips maintain the ui to display searched query 
+    // searchFilter maintain the transformed filter of the  searched query 
+    var _p = useState([]), searchChips = _p[0], setSearchChips = _p[1];
+    var _q = useState(null), searchFilter = _q[0], setSearchFilter = _q[1];
+    // predefinedSearchChip maintain the ui to display predefined searches query 
+    var _r = useState(null), predefinedSearchChip = _r[0], setPredefinedSearchChip = _r[1];
+    //  state to maintain the text typed in the search input box
+    var _s = useState(""), inputValue = _s[0], setInputValue = _s[1];
+    // flag to prevent un necessary re renders
+    var _t = useState(false), hasSearched = _t[0], setHasSearched = _t[1];
+    // currentSavedFilterData  is used to save the whole object of saved filter 
+    var _u = useState(), currentSavedFilterData = _u[0], setCurrentSavedFilterData = _u[1];
+    var _v = useState(), currentSavedFilterQuery = _v[0], setCurrentSavedFilterQuery = _v[1];
+    var _w = useState(), currentSavedFilterRules = _w[0], setCurrentSavedFilterRules = _w[1];
+    var _x = useState(false), showSavedFilterComponent = _x[0], setShowSavedFilterComponent = _x[1];
+    var _y = useState(), savedFilterTobeDeleted = _y[0], setSavedFilterTobeDeleted = _y[1];
+    var _z = useState(false), isDeleteSQDialogVisible = _z[0], setIsDeleteSQDialogVisible = _z[1];
+    var _0 = useState(), savedFilterQueryString = _0[0], setSavedFilterQueryString = _0[1];
+    var _1 = useState(false), showOverlay = _1[0], setShowOverlay = _1[1];
+    var overlayRef = useRef(null);
+    var _2 = useSession(), session = _2.data, status = _2.status;
+    var user = session === null || session === void 0 ? void 0 : session.user;
+    var _3 = useState(0), refreshKey = _3[0], setRefreshKey = _3[1];
+    var _4 = useState(null), predefinedSearchBaseFilter = _4[0], setPredefinedSearchBaseFilter = _4[1];
+    var _5 = useState([]), savedFilters = _5[0], setSavedFilters = _5[1];
+    var _6 = useState(false), savedFiltersLoaded = _6[0], setSavedFiltersLoaded = _6[1];
+    var entityApi = createSolidEntityApi("savedFilters");
+    var useCreateSolidEntityMutation = entityApi.useCreateSolidEntityMutation, useDeleteSolidEntityMutation = entityApi.useDeleteSolidEntityMutation, useGetSolidEntityByIdQuery = entityApi.useGetSolidEntityByIdQuery, useUpdateSolidEntityMutation = entityApi.useUpdateSolidEntityMutation, useLazyGetSolidEntitiesQuery = entityApi.useLazyGetSolidEntitiesQuery;
+    var _7 = useCreateSolidEntityMutation(), createEntity = _7[0], _8 = _7[1], isEntityCreateSuccess = _8.isSuccess, isEntityCreateError = _8.isError, entityCreateError = _8.error;
+    var _9 = useUpdateSolidEntityMutation(), updateEntity = _9[0], _10 = _9[1], isEntityUpdateSuceess = _10.isSuccess, isEntityUpdateError = _10.isError, entityUpdateError = _10.error;
+    var _11 = useDeleteSolidEntityMutation(), deleteEntity = _11[0], _12 = _11[1], isEntityDeleteSuceess = _12.isSuccess, isEntityDeleteError = _12.isError, entityDeleteError = _12.error;
+    var _13 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _13[0], _14 = _13[1], solidEntityListViewData = _14.data, isSavedFilterLoading = _14.isLoading, error = _14.error;
+    var _15 = useState(0), savedFilterFetchDataRefreshKey = _15[0], setSavedFilterFetchDataRefreshKey = _15[1];
+    useEffect(function () {
+        var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var filters, queryData, queryString, savedFilter;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            return __generator(this, function (_p) {
+                switch (_p.label) {
+                    case 0:
+                        if (!((_c = (_b = (_a = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.id) || !((_e = (_d = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _d === void 0 ? void 0 : _d.solidView) === null || _e === void 0 ? void 0 : _e.id) || !(user === null || user === void 0 ? void 0 : user.id)) {
+                            return [2 /*return*/];
+                        }
+                        setSavedFiltersLoaded(false);
+                        filters = {
+                            $or: [
+                                {
+                                    $and: [
+                                        { model: { $in: [(_h = (_g = (_f = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _f === void 0 ? void 0 : _f.solidView) === null || _g === void 0 ? void 0 : _g.model) === null || _h === void 0 ? void 0 : _h.id] } },
+                                        { view: { $in: [(_j = viewData === null || viewData === void 0 ? void 0 : viewData.solidView) === null || _j === void 0 ? void 0 : _j.id] } },
+                                        { user: { $in: [user === null || user === void 0 ? void 0 : user.id] } },
+                                        { isPrivate: { $eq: true } }
+                                    ]
+                                },
+                                {
+                                    $and: [
+                                        { model: { $in: [(_m = (_l = (_k = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _k === void 0 ? void 0 : _k.solidView) === null || _l === void 0 ? void 0 : _l.model) === null || _m === void 0 ? void 0 : _m.id] } },
+                                        { view: { $in: [(_o = viewData === null || viewData === void 0 ? void 0 : viewData.solidView) === null || _o === void 0 ? void 0 : _o.id] } },
+                                        { isPrivate: { $eq: false } }
+                                    ]
+                                }
+                            ]
+                        };
+                        queryData = {
+                            offset: 0,
+                            limit: 10,
+                            filters: filters,
+                            populate: ["model", "view", "user"],
+                            sort: ["id:desc"],
+                        };
+                        queryString = qs.stringify(queryData, { encodeValuesOnly: true });
+                        setSavedFilterQueryString(queryString);
+                        return [4 /*yield*/, triggerGetSolidEntities(queryString).unwrap()];
+                    case 1:
+                        savedFilter = _p.sent();
+                        if (savedFilter) {
+                            console.log("savedFilter", savedFilter);
+                            setSavedFilters(savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.records);
+                            setSavedFiltersLoaded(true);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        fn();
+    }, [
+        activeSavedFilter,
+        savedFilterFetchDataRefreshKey,
+        (_c = (_b = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _b === void 0 ? void 0 : _b.solidView) === null || _c === void 0 ? void 0 : _c.id,
+        (_f = (_e = (_d = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _d === void 0 ? void 0 : _d.solidView) === null || _e === void 0 ? void 0 : _e.model) === null || _f === void 0 ? void 0 : _f.id,
+        user === null || user === void 0 ? void 0 : user.id
+    ]);
+    useImperativeHandle(ref, function () { return ({
+        clearFilter: function () {
+            setFilterRules(initialState);
+        }
+    }); });
+    useEffect(function () {
+        var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var searchChips, customChips, parsedSearchParams, queryObject, currentSavedFilterId_1, currentSavedFilterData_1, filterJson, finalSavedFilter, formattedChips, rules, hydratedRules;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        parsedSearchParams = searchParams;
+                        if (!savedFiltersLoaded) return [3 /*break*/, 3];
+                        if (activeSavedFilter && savedFilters.length === 0)
+                            return [2 /*return*/];
+                        queryObject = queryStringToQueryObject();
+                        // const savedQuery = parsedSearchParams?.get("savedQuery");
+                        if (activeSavedFilter) {
+                            currentSavedFilterId_1 = Number(activeSavedFilter);
+                            currentSavedFilterData_1 = savedFilters.find(function (savedFilter) { return savedFilter.id === currentSavedFilterId_1; });
+                            setCurrentSavedFilterData(currentSavedFilterData_1);
+                            if (currentSavedFilterData_1) {
+                                filterJson = JSON.parse(currentSavedFilterData_1 === null || currentSavedFilterData_1 === void 0 ? void 0 : currentSavedFilterData_1.filterQueryJson);
+                                if (filterJson) {
+                                    finalSavedFilter = filterJson;
+                                    setCurrentSavedFilterQuery(finalSavedFilter);
+                                }
+                            }
+                        }
+                        else {
+                            setCurrentSavedFilterData(null);
+                            setCurrentSavedFilterQuery(null);
+                        }
+                        if (queryObject) {
+                            if (queryObject) {
+                                searchChips = (queryObject === null || queryObject === void 0 ? void 0 : queryObject.search_predicate) || null;
+                                customChips = (queryObject === null || queryObject === void 0 ? void 0 : queryObject.custom_filter_predicate) || null;
+                            }
+                        }
+                        if (searchChips) {
+                            formattedChips = searchChips === null || searchChips === void 0 ? void 0 : searchChips.$and.map(function (chip, key) {
+                                var _a;
+                                var chipKey = Object.keys(chip)[0]; // Get the key, e.g., "displayName"
+                                var chipValue = (_a = chip[chipKey]) === null || _a === void 0 ? void 0 : _a.$containsi; // Get the value of "$containsi"
+                                var chipdata = {
+                                    columnName: chipKey,
+                                    value: chipValue
+                                };
+                                return chipdata;
+                            });
+                            setSearchChips(formattedChips);
+                            setSearchFilter(searchChips);
+                        }
+                        if (!(customChips && Object.keys(customChips).length !== 0)) return [3 /*break*/, 2];
+                        setCustomFilter(customChips);
+                        rules = transformFiltersToRules(customChips);
+                        return [4 /*yield*/, hydrateRelationRules([rules], viewData)];
+                    case 1:
+                        hydratedRules = _a.sent();
+                        setFilterRules(hydratedRules);
+                        _a.label = 2;
+                    case 2:
+                        setHasSearched(true);
+                        setRefreshKey(function (prev) { return prev + 1; });
+                        _a.label = 3;
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); };
+        fn();
+    }, [viewData, activeSavedFilter, savedFilters, savedFiltersLoaded]);
+    useEffect(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if ((_a = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _a === void 0 ? void 0 : _a.solidFieldsMetadata) {
+            // Reset search state when switching views
+            setSearchChips([]);
+            setSearchFilter(null);
+            setFilterRules(initialState);
+            setCustomFilter(null);
+            setPredefinedSearchChip(null);
+            setPredefinedSearchBaseFilter(null);
+            setInputValue("");
+            var fieldsData = (_b = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _b === void 0 ? void 0 : _b.solidFieldsMetadata;
+            // console.log(`fiels data while rendering solid global search element: `);
+            // console.log(fieldsData);
+            var layoutChildren = (_f = (_e = (_d = (_c = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _c === void 0 ? void 0 : _c.solidView) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.children) !== null && _f !== void 0 ? _f : [];
+            var fieldElements_1 = extractFields(layoutChildren);
+            var fieldsList = Object.entries(fieldsData !== null && fieldsData !== void 0 ? fieldsData : {}).map(function (_a) {
+                var _b, _c, _d, _e, _f;
+                var key = _a[0], value = _a[1];
+                var viewFieldElement = fieldElements_1.find(function (f) { var _a; return ((_a = f === null || f === void 0 ? void 0 : f.attrs) === null || _a === void 0 ? void 0 : _a.name) === key; });
+                return {
+                    name: value.displayName,
+                    value: key,
+                    type: value.type,
+                    ormType: value.ormType,
+                    matchMode: (_b = viewFieldElement === null || viewFieldElement === void 0 ? void 0 : viewFieldElement.attrs) === null || _b === void 0 ? void 0 : _b.searchMatchMode,
+                    searchField: (_d = (_c = viewFieldElement === null || viewFieldElement === void 0 ? void 0 : viewFieldElement.attrs) === null || _c === void 0 ? void 0 : _c.searchField) !== null && _d !== void 0 ? _d : null,
+                    isSearchable: (_f = (_e = viewFieldElement === null || viewFieldElement === void 0 ? void 0 : viewFieldElement.attrs) === null || _e === void 0 ? void 0 : _e.isSearchable) !== null && _f !== void 0 ? _f : false,
+                };
+            });
+            setFields(fieldsList);
+            var searchableFieldsList = fieldsList.filter(function (field) {
+                if (!field.isSearchable)
+                    return false;
+                switch (field.type) {
+                    case "relation":
+                        // Only include relation if searchField is present
+                        return !!field.searchField;
+                    case "longText":
+                    case "shortText":
+                    case "selectionStatic":
+                    case "selectionDynamic":
+                        return true;
+                    // case "selectionStatic":
+                    case "computed":
+                        return field.ormType === "varchar";
+                    default:
+                        return false;
+                }
+            });
+            // console.log("searchableFieldsList", searchableFieldsList);
+            // Optionally map to a minimal structure if needed for UI
+            var finalSearchableFieldsList = searchableFieldsList.map(function (field) {
+                var _a;
+                return ({
+                    fieldName: field.value,
+                    displayName: field.name,
+                    searchField: (_a = field.searchField) !== null && _a !== void 0 ? _a : "",
+                    matchMode: field.matchMode
+                });
+            });
+            // console.log("finalSearchableFieldsList", finalSearchableFieldsList);
+            setSearchableFields(finalSearchableFieldsList);
+            var predefinedSearchesList = ((_k = (_j = (_h = (_g = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _g === void 0 ? void 0 : _g.solidView) === null || _h === void 0 ? void 0 : _h.layout) === null || _j === void 0 ? void 0 : _j.attrs) === null || _k === void 0 ? void 0 : _k.predefinedSearches) || [];
+            setPredefinedSearches(predefinedSearchesList);
+        }
+        // used to open the 
+    }, [viewData]);
+    useEffect(function () {
+        if (chipsRef.current) {
+            var inputElement = chipsRef.current.querySelector("input");
+            if (inputElement) {
+                inputElement.addEventListener("input", function (e) {
+                    setInputValue(e.target.value);
+                });
+            }
+        }
+    }, []);
+    var handleAddChip = function (columnName) {
+        if (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim()) {
+            var fallbackField_1 = searchableFields[0]; // guaranteed object
+            if (!fallbackField_1)
+                return;
+            // Support comma-separated values: split, trim and add as separate chips
+            var values = inputValue.split(",").map(function (v) { return v.trim(); }).filter(function (v) { return v !== ""; });
+            var fieldName_1 = columnName || fallbackField_1.fieldName;
+            var chipsToAdd_1 = values.map(function (v) { return ({
+                columnName: fieldName_1,
+                value: v,
+                columnDisplayName: fallbackField_1.displayName,
+                searchField: fallbackField_1.searchField,
+                matchMode: fallbackField_1.matchMode
+            }); });
+            setSearchChips(function (prev) { return __spreadArray(__spreadArray([], prev, true), chipsToAdd_1, true); });
+            setInputValue("");
+            setHasSearched(true);
+            setRefreshKey(function (prev) { return prev + 1; });
+        }
+    };
+    var clearCustomFilter = function () {
+        // handleApplyCustomFilter(finalFilter)
+        setFilterRules(initialState);
+        setCustomFilter(null);
+        // setPredefinedSearchChip(null)
+        // setPredefinedSearchBaseFilter(null)
+        setHasSearched(true);
+        setRefreshKey(function (prev) { return prev + 1; });
+    };
+    var transformCustomFilterRules = function (filterRules) {
+        var transformedFilter = transformRulesToFilters(filterRules[0], viewData);
+        // If there's a predefined search, merge it with the new custom filter
+        var finalCustomFilter = transformedFilter;
+        // if (predefinedSearchChip && predefinedSearchBaseFilter) {
+        //     // Combine predefined filter with new custom filter
+        //     finalCustomFilter = {
+        //         $and: [predefinedSearchBaseFilter, transformedFilter]
+        //     };
+        // }
+        setCustomFilter(finalCustomFilter);
+        // handleApplyCustomFilter(finalFilter);
+        setShowGlobalSearchElement(false);
+        setHasSearched(true);
+        setRefreshKey(function (prev) { return prev + 1; });
+    };
+    var transformSavedFilterRules = function (filterRules) {
+        var transformedFilter = transformRulesToFilters(filterRules[0], viewData);
+        // If there's a predefined search, merge it with the new custom filter
+        var finalCustomFilter = transformedFilter;
+        // if (predefinedSearchChip && predefinedSearchBaseFilter) {
+        //     // Combine predefined filter with new custom filter
+        //     finalCustomFilter = {
+        //         $and: [predefinedSearchBaseFilter, transformedFilter]
+        //     };
+        // }
+        setCurrentSavedFilterQuery(finalCustomFilter);
+        // handleApplyCustomFilter(finalFilter);
+        setShowSavedFilterComponent(false);
+        setHasSearched(true);
+        setRefreshKey(function (prev) { return prev + 1; });
+    };
+    useEffect(function () {
+        if (refreshKey > 0) {
+            console.log("refres", refreshKey);
+            console.log("hasSearched", hasSearched);
+            var formattedChips = {
+                $and: searchChips.map(function (chip) {
+                    var _a;
+                    return ({
+                        fieldName: chip.columnName,
+                        matchMode: chip.matchMode,
+                        value: [chip.value],
+                        searchField: (_a = chip.searchField) !== null && _a !== void 0 ? _a : "",
+                    });
+                })
+            };
+            var finalSearchFilter = tranformSearchToFilters(formattedChips);
+            setSearchFilter(finalSearchFilter);
+            var finalSavedFilter = currentSavedFilterQuery;
+            var finalPredefinedFilter = predefinedSearchBaseFilter;
+            var finalCustomFilter = customFilter;
+            console.log("finalCustomFilter", finalCustomFilter);
+            console.log("finalPredefinedFilter", finalPredefinedFilter);
+            console.log("finalSavedFilter", finalSavedFilter);
+            console.log("finalSearchFilter", finalSearchFilter);
+            var finalFilter = mergeAllDiffFilters(finalCustomFilter, finalSearchFilter, finalSavedFilter, finalPredefinedFilter);
+            handleApplyCustomFilter(finalFilter);
+            // }
+        }
+    }, [refreshKey]);
+    // Handle predefined search selection
+    var hasCustomFilterChanged = function () {
+        if (!predefinedSearchChip || !customFilter || !predefinedSearchBaseFilter) {
+            return false;
+        }
+        // Deep comparison to check if filter has changed
+        return JSON.stringify(customFilter) !== JSON.stringify(predefinedSearchBaseFilter);
+    };
+    var openSavedCustomFilter = function (savedfilter) { return __awaiter(void 0, void 0, void 0, function () {
+        var savedfilterId_1, currentSavedFilterData_2, filterJson, finalSavedFilter, rules, hydratedRules;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    //Open custom filter popup 
+                    // router.push(`?savedQuery=${savedfilter.id}`);
+                    // setShowGlobalSearchElement(true);
+                    // // dont refetch the data yet
+                    // const customFilter = JSON.parse(savedfilter.filterQueryJson);
+                    // setCustomFilter(customFilter ? customFilter : null);
+                    // if (customFilter) {
+                    //     const formatedCustomChips: FilterRule = transformFiltersToRules(customFilter ? customFilter : null);
+                    //     setFilterRules(formatedCustomChips ? [formatedCustomChips] : initialState);
+                    // }
+                    setSearchChips([]);
+                    setSearchFilter(null);
+                    setFilterRules(initialState);
+                    setCustomFilter(null);
+                    setPredefinedSearchChip(null);
+                    setPredefinedSearchBaseFilter(null);
+                    if (!(savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.id)) return [3 /*break*/, 3];
+                    savedfilterId_1 = savedfilter.id;
+                    // router.push(`?savedQuery=${savedfilter.id}`);
+                    setShowOverlay(false);
+                    currentSavedFilterData_2 = savedFilters.find(function (savedFilter) { return savedFilter.id === savedfilterId_1; });
+                    setCurrentSavedFilterData(currentSavedFilterData_2);
+                    if (!currentSavedFilterData_2) return [3 /*break*/, 2];
+                    filterJson = JSON.parse(currentSavedFilterData_2 === null || currentSavedFilterData_2 === void 0 ? void 0 : currentSavedFilterData_2.filterQueryJson);
+                    if (!filterJson) return [3 /*break*/, 2];
+                    finalSavedFilter = filterJson;
+                    setCurrentSavedFilterQuery(finalSavedFilter);
+                    rules = transformFiltersToRules(finalSavedFilter ? finalSavedFilter : null);
+                    return [4 /*yield*/, hydrateRelationRules([rules], viewData)];
+                case 1:
+                    hydratedRules = _a.sent();
+                    setCurrentSavedFilterRules(hydratedRules ? hydratedRules : initialState);
+                    setShowSavedFilterComponent(true);
+                    _a.label = 2;
+                case 2: return [3 /*break*/, 4];
+                case 3:
+                    console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
+                    _a.label = 4;
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var deleteSavedFilter = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var parsedSearchParams, savedQuery, urlParams;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: 
+                // delte the saved filter with id 
+                return [4 /*yield*/, deleteEntity(savedFilterTobeDeleted)];
+                case 1:
+                    // delte the saved filter with id 
+                    _a.sent();
+                    parsedSearchParams = searchParams;
+                    savedQuery = parsedSearchParams === null || parsedSearchParams === void 0 ? void 0 : parsedSearchParams.get("savedQuery");
+                    if (savedFilterTobeDeleted == savedQuery) {
+                        urlParams = new URLSearchParams(window.location.search);
+                        urlParams.delete("savedQuery");
+                        router.push("?".concat(urlParams.toString()));
+                    }
+                    setIsDeleteSQDialogVisible(false);
+                    setTimeout(function () {
+                        setSavedFilterFetchDataRefreshKey(function (prev) { return prev + 1; });
+                    }, 500);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleSaveFilter = function (formValues) { return __awaiter(void 0, void 0, void 0, function () {
+        var filterJson, formData, currentPageUrl, filterJson, formData, result_1, currentPageUrl, error_1;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        return __generator(this, function (_l) {
+            switch (_l.label) {
+                case 0:
+                    setShowSaveFilterPopup(false);
+                    _l.label = 1;
+                case 1:
+                    _l.trys.push([1, 6, , 7]);
+                    if (!formValues.id) return [3 /*break*/, 3];
+                    filterJson = currentSavedFilterQuery;
+                    formData = new FormData();
+                    formData.append("name", formValues.name);
+                    formData.append("filterQueryJson", JSON.stringify(filterJson, null, 2));
+                    formData.append("modelId", (_c = (_b = (_a = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.id);
+                    formData.append("viewId", (_e = (_d = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _d === void 0 ? void 0 : _d.solidView) === null || _e === void 0 ? void 0 : _e.id);
+                    formData.append("isPrivate", formValues.isPrivate);
+                    formData.append("userId", user === null || user === void 0 ? void 0 : user.id);
+                    return [4 /*yield*/, updateEntity({ id: +formValues.id, data: formData }).unwrap()];
+                case 2:
+                    _l.sent();
+                    setSearchChips([]);
+                    setSearchFilter(null);
+                    setFilterRules(initialState);
+                    setCustomFilter(null);
+                    setPredefinedSearchChip(null);
+                    currentPageUrl = window.location.pathname;
+                    localStorage.removeItem(currentPageUrl); // Store in local storage with the URL as the key
+                    setPredefinedSearchBaseFilter(null);
+                    setTimeout(function () {
+                        router.push("?savedQuery=".concat(formValues.id));
+                    }, 500);
+                    return [3 /*break*/, 5];
+                case 3:
+                    filterJson = customFilter;
+                    formData = new FormData();
+                    formData.append("name", formValues.name);
+                    formData.append("filterQueryJson", JSON.stringify(filterJson, null, 2));
+                    formData.append("modelId", (_h = (_g = (_f = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _f === void 0 ? void 0 : _f.solidView) === null || _g === void 0 ? void 0 : _g.model) === null || _h === void 0 ? void 0 : _h.id);
+                    formData.append("viewId", (_k = (_j = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _j === void 0 ? void 0 : _j.solidView) === null || _k === void 0 ? void 0 : _k.id);
+                    formData.append("isPrivate", formValues.isPrivate);
+                    formData.append("userId", user === null || user === void 0 ? void 0 : user.id);
+                    return [4 /*yield*/, createEntity(formData).unwrap()];
+                case 4:
+                    result_1 = _l.sent();
+                    setSearchChips([]);
+                    setSearchFilter(null);
+                    setFilterRules(initialState);
+                    setCustomFilter(null);
+                    setPredefinedSearchChip(null);
+                    setPredefinedSearchBaseFilter(null);
+                    currentPageUrl = window.location.pathname;
+                    localStorage.removeItem(currentPageUrl); // Store in local storage with the URL as the key
+                    setTimeout(function () {
+                        router.push("?savedQuery=".concat(result_1.data.id));
+                    }, 500);
+                    _l.label = 5;
+                case 5: return [3 /*break*/, 7];
+                case 6:
+                    error_1 = _l.sent();
+                    return [3 /*break*/, 7];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        // Explicitly type the event as a MouseEvent
+        function handleClickOutside(event) {
+            if (overlayRef.current && !overlayRef.current.contains(event.target)) {
+                setShowOverlay(false);
+            }
+        }
+        if (showOverlay) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [showOverlay]);
+    var CustomChip = function () {
+        var _a, _b, _c, _d;
+        console.log("customFilter", customFilter);
+        var ruleCount = (_d = (_b = (_a = customFilter === null || customFilter === void 0 ? void 0 : customFilter.$or) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : (_c = customFilter === null || customFilter === void 0 ? void 0 : customFilter.$and) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : Object.keys(customFilter || {}).length;
+        return (_jsx("li", { children: _jsxs("div", { className: "custom-filter-chip-type", children: [_jsxs("div", { className: "flex align-items-center gap-2 text-base", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", onClick: function () {
+                                    setShowGlobalSearchElement(true);
+                                }, children: [_jsx("rect", { width: "20", height: "20", rx: "4", fill: "#722ED1" }), _jsx("path", { d: "M8.66667 15V13.3333H11.3333V15H8.66667ZM6 10.8333V9.16667H14V10.8333H6ZM4 6.66667V5H16V6.66667H4Z", fill: "white" })] }), _jsxs("span", { children: [_jsx("strong", { children: ruleCount }), " rules applied"] })] }), _jsx("a", { onClick: clearCustomFilter, style: { cursor: "pointer" }, children: _jsx("i", { className: "pi pi-times ml-1" }) })] }) }));
+    };
+    //saved filter related code start
+    var applySavedFilter = function (savedfilter) {
+        setSearchChips([]);
+        setSearchFilter(null);
+        setFilterRules(initialState);
+        setCustomFilter(null);
+        setPredefinedSearchChip(null);
+        setPredefinedSearchBaseFilter(null);
+        var currentPageUrl = window.location.pathname; // Get the current page URL
+        localStorage.removeItem(currentPageUrl); // Store in local storage with the URL as the key
+        // push the savedQuery=1 in url 
+        if (savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.id) {
+            router.push("?savedQuery=".concat(savedfilter.id));
+            setShowOverlay(false);
+        }
+        else {
+            console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
+        }
+    };
+    var removeSavedFilter = function () {
+        var params = new URLSearchParams(searchParams.toString());
+        setCurrentSavedFilterData(null);
+        setCurrentSavedFilterQuery(null);
+        if (params.has("savedQuery")) {
+            params.delete("savedQuery");
+            var newUrl = params.toString()
+                ? "".concat(pathname, "?").concat(params.toString())
+                : pathname;
+            router.push(newUrl);
+        }
+    };
+    var SavedFiltersChip = function () {
+        return (_jsx("li", { children: _jsxs("div", { className: "custom-filter-chip-type", children: [_jsxs("div", { className: "flex align-items-center gap-2 text-base", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", onClick: function () {
+                                    var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
+                                        var rules, hydratedRules;
+                                        return __generator(this, function (_a) {
+                                            switch (_a.label) {
+                                                case 0:
+                                                    if (!currentSavedFilterQuery) return [3 /*break*/, 2];
+                                                    rules = transformFiltersToRules(currentSavedFilterQuery ? currentSavedFilterQuery : null);
+                                                    return [4 /*yield*/, hydrateRelationRules([rules], viewData)];
+                                                case 1:
+                                                    hydratedRules = _a.sent();
+                                                    setCurrentSavedFilterRules(hydratedRules ? hydratedRules : initialState);
+                                                    setShowSavedFilterComponent(true);
+                                                    _a.label = 2;
+                                                case 2: return [2 /*return*/];
+                                            }
+                                        });
+                                    }); };
+                                    fn();
+                                }, children: [_jsx("rect", { width: "20", height: "20", rx: "4", fill: "#722ED1" }), _jsx("path", { d: "M8.66667 15V13.3333H11.3333V15H8.66667ZM6 10.8333V9.16667H14V10.8333H6ZM4 6.66667V5H16V6.66667H4Z", fill: "white" })] }), _jsx("span", { children: _jsx("strong", { children: currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.name }) })] }), _jsx("a", { onClick: removeSavedFilter, style: { cursor: "pointer" }, children: _jsx("i", { className: "pi pi-times ml-1" }) })] }) }));
+    };
+    //saved filter related code end
+    // search related code start
+    var handleRemoveChipGroup = function (columnName) {
+        var updatedChips = searchChips.filter(function (chip) { return chip.columnName !== columnName; });
+        setSearchChips(updatedChips);
+        setHasSearched(true);
+        setRefreshKey(function (prev) { return prev + 1; });
+    };
+    var groupedSearchChips = searchChips.reduce(function (acc, chip) {
+        var key = chip.columnName;
+        if (!key)
+            return acc; // skip if undefined
+        if (!acc[key]) {
+            acc[key] = [];
+        }
+        acc[key].push(chip.value);
+        return acc;
+    }, {});
+    var handleKeyDown = function (e) {
+        if (e.key === "Enter" && (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim())) {
+            handleAddChip();
+            e.preventDefault();
+            setShowOverlay(false);
+        }
+        else if (e.key === "Backspace" && inputValue === "") {
+            if (searchChips.length > 0) {
+                setSearchChips(function (prev) { return prev.slice(0, -1); });
+            }
+            else if (customFilter) {
+                setCustomFilter(null);
+                setFilterRules(initialState);
+            }
+            else if (predefinedSearchChip) {
+                setPredefinedSearchChip(null);
+                setPredefinedSearchBaseFilter(null);
+            }
+            else if (activeSavedFilter) {
+                removeSavedFilter();
+            }
+            else if (activeSavedFilter) {
+                clearCustomFilter();
+            }
+            setHasSearched(true);
+            setRefreshKey(function (prev) { return prev + 1; });
+        }
+    };
+    var SearchChip = function () { return (_jsx(_Fragment, { children: Object.entries(groupedSearchChips).map(function (_a) {
+            var column = _a[0], values = _a[1];
+            var fieldMeta = searchableFields.find(function (f) { return f.fieldName === column; });
+            var columnDisplayName = (fieldMeta === null || fieldMeta === void 0 ? void 0 : fieldMeta.displayName) || column;
+            return (_jsx("li", { children: _jsxs("div", { className: "search-filter-chip-type", children: [_jsx("div", { children: columnDisplayName }), values.map(function (value, index) { return (_jsxs(React.Fragment, { children: [_jsx("span", { className: "custom-chip-value", children: value }, index), index < values.length - 1 &&
+                                    _jsx("span", { className: "custom-chip-or", children: "or" })] })); }), _jsx("i", { className: "pi pi-times ml-1", style: { cursor: "pointer" }, onClick: function () { return handleRemoveChipGroup(column); } })] }) }, column));
+        }) })); };
+    // search related code end
+    // predefinedfilter related code start
+    var handlePredefinedSearch = function (predefinedSearch) {
+        if (!(inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim()))
+            return;
+        if (!(predefinedSearch === null || predefinedSearch === void 0 ? void 0 : predefinedSearch.filters)) {
+            console.error('Invalid predefined search: missing filters', predefinedSearch);
+            return;
+        }
+        try {
+            // Replace {{search}} placeholders with actual search value
+            var processedFilter = replacePlaceholders(predefinedSearch.filters, inputValue.trim());
+            // Clear all existing filters and searches
+            // setSearchChips([]);
+            // setSearchFilter(null);
+            // setFilterRules(initialState);
+            // setCustomFilter(null)
+            // removeSavedFilter();
+            // Set the predefined search chip
+            setPredefinedSearchChip({
+                name: predefinedSearch.name,
+                value: inputValue.trim()
+            });
+            setPredefinedSearchBaseFilter(processedFilter);
+            // Apply the predefined search filter as custom filter
+            // setCustomFilter(processedFilter);
+            // Apply the filter
+            // handleApplyCustomFilter(finalFilter);
+            // Clear input and close overlay
+            setInputValue("");
+            setShowOverlay(false);
+            setHasSearched(true);
+            setRefreshKey(function (prev) { return prev + 1; });
+        }
+        catch (error) {
+            console.error('Error applying predefined search:', error);
+            // Optionally show user-friendly error message
+        }
+    };
+    var removePredefinedSearchChip = function () {
+        setPredefinedSearchChip(null);
+        setPredefinedSearchBaseFilter(null);
+        setCustomFilter(null);
+        // handleApplyCustomFilter(finalFilter);
+        setHasSearched(true);
+        setRefreshKey(function (prev) { return prev + 1; });
+    };
+    var PredefinedSearchChip = function () { return (_jsx("li", { children: _jsxs("div", { className: "search-filter-chip-type", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsxs("strong", { children: [predefinedSearchChip === null || predefinedSearchChip === void 0 ? void 0 : predefinedSearchChip.name, ":"] }), _jsx("span", { className: "custom-chip-value", children: predefinedSearchChip === null || predefinedSearchChip === void 0 ? void 0 : predefinedSearchChip.value })] }), _jsx("i", { className: "pi pi-times ml-1", style: { cursor: "pointer" }, onClick: removePredefinedSearchChip })] }) })); };
+    // predefinedfilter related code end
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex justify-content-center solid-custom-filter-wrapper relative", children: [_jsx("div", { className: "solid-global-search-element", children: _jsxs("ul", { className: "", children: [currentSavedFilterData && _jsx(SavedFiltersChip, {}), predefinedSearchChip && _jsx(PredefinedSearchChip, {}), customFilter && _jsx(CustomChip, {}), _jsx(SearchChip, {}), _jsx("li", { ref: chipsRef, children: _jsxs("div", { className: "relative solid-global-search-element-wrapper", children: [_jsx(InputText, { value: inputValue || "", placeholder: "Search.", onChange: function (e) {
+                                                setInputValue(e.target.value);
+                                                setShowOverlay(true);
+                                            }, onFocus: function () {
+                                                if (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim())
+                                                    setShowOverlay(true);
+                                            }, onBlur: function () {
+                                                // Delay so you can click buttons inside overlay
+                                                setTimeout(function () { return setShowOverlay(false); }, 150);
+                                            }, onKeyDown: handleKeyDown }), _jsx(Button, { icon: "pi pi-search", style: { fontSize: 10 }, severity: "secondary", outlined: true, size: "small", onClick: function () { return setShowOverlay(true); }, className: "custom-filter-button" })] }) })] }) }), showOverlay && (_jsxs("div", { ref: overlayRef, className: "absolute w-full z-5 shadow-2 solid-search-overlay-pannel", style: { top: 35, background: "var(--surface-0)", border: '1px solid var(--surface-300) !important', borderRadius: '6px' }, children: [inputValue ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "custom-filter-search-options px-3 py-2 flex flex-column", children: [_jsx("h6", { className: "my-1 font-bold", children: "Search By Fields" }), searchableFields.map(function (value, index) {
+                                            // console.log("value", value);
+                                            return (_jsxs(Button, { className: "p-2 flex gap-1 text-color", 
+                                                // onClick={() => handleAddChip(value)}
+                                                onMouseDown: function (e) {
+                                                    // Prevent focus loss from input
+                                                    e.preventDefault();
+                                                    var currentValue = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim();
+                                                    if (currentValue) {
+                                                        var values = currentValue.split(",").map(function (v) { return v.trim(); }).filter(function (v) { return v !== ""; });
+                                                        var chipsToAdd_2 = values.map(function (v) { return ({
+                                                            columnName: value.fieldName,
+                                                            value: v,
+                                                            columnDisplayName: value.displayName,
+                                                            searchField: value.searchField,
+                                                            matchMode: value.matchMode
+                                                        }); });
+                                                        setSearchChips(function (prev) { return __spreadArray(__spreadArray([], prev, true), chipsToAdd_2, true); });
+                                                        setInputValue("");
+                                                        setHasSearched(true);
+                                                        setRefreshKey(function (prev) { return prev + 1; });
+                                                        setShowOverlay(false);
+                                                    }
+                                                }, text: true, severity: "secondary", size: "small", children: ["Search ", _jsx("strong", { children: value.displayName }), " for: ", _jsx("span", { className: "font-bold text-color", children: inputValue })] }, index));
+                                        })] }), predefinedSearches && predefinedSearches.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: "m-0" }), _jsxs("div", { className: "custom-filter-search-options px-3 py-2 flex flex-column", children: [_jsx("h6", { className: "my-1 font-bold", children: "Predefined Searches" }), predefinedSearches.map(function (predefinedSearch, index) { return (_jsxs(Button, { className: "p-2 flex flex-column align-items-start gap-1 text-color", onMouseDown: function (e) {
+                                                        e.preventDefault();
+                                                        handlePredefinedSearch(predefinedSearch);
+                                                    }, text: true, severity: "secondary", size: "small", children: [_jsxs("div", { className: "flex gap-1 align-items-center", children: [_jsxs("strong", { children: [predefinedSearch.name, ":"] }), _jsx("span", { className: "font-bold text-color", children: inputValue })] }), _jsx("div", { className: "text-xs", children: predefinedSearch.description })] }, index)); })] })] }))] })) :
+                            _jsxs(_Fragment, { children: [_jsx("div", { className: "p-3 text-base", children: "Search Here..." }), _jsx(Divider, { className: "m-0" })] }), savedFilters.length > 0 &&
+                            _jsxs(_Fragment, { children: [_jsxs("div", { className: "p-3", children: [_jsx("p", { className: "font-medium", children: "Saved Filters" }), _jsx("div", { className: "flex flex-column gap-2", children: savedFilters.map(function (savedfilter) {
+                                                    return _jsx(SavedFilterList, { savedfilter: savedfilter, activeSavedFilter: activeSavedFilter, applySavedFilter: applySavedFilter, openSavedCustomFilter: openSavedCustomFilter, setSavedFilterTobeDeleted: setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible: setIsDeleteSQDialogVisible });
+                                                }) })] }), _jsx(Divider, { className: "m-0" })] }), _jsx("div", { className: "px-2 py-1", children: _jsx(Button, { text: true, size: "small", label: "Custom Filter", iconPos: "left", icon: 'pi pi-plus', onClick: function () { return setShowGlobalSearchElement(true); }, className: "font-bold" }) })] })), _jsxs(Dialog, { header: false, className: "solid-global-search-filter", showHeader: false, visible: showGlobalSearchElement, style: { width: '65vw' }, breakpoints: { '1024px': '75vw', '991px': '90vw', '767px': '94w', '250px': '96vw' }, onHide: function () { if (!showGlobalSearchElement)
+                        return; setShowGlobalSearchElement(false); }, children: [_jsxs("div", { className: "flex align-items-center justify-content-between px-3", children: [_jsx("h5", { className: "solid-custom-title m-0", children: "Add Custom Filter" }), _jsx(Button, { icon: "pi pi-times", rounded: true, text: true, "aria-label": "Cancel", type: "reset", size: "small", onClick: function () { return setShowGlobalSearchElement(false); } })] }), _jsx(Divider, { className: "m-0" }), _jsx("div", { className: "p-3 lg:p-4", children: fields.length > 0 &&
+                                _jsx(FilterComponent, { viewData: viewData, fields: fields, filterRules: filterRules, setFilterRules: setFilterRules, transformFilterRules: transformCustomFilterRules, closeDialog: function () { return setShowGlobalSearchElement(false); } }) })] }), _jsxs(Dialog, { header: false, className: "solid-global-search-filter", showHeader: false, visible: showSavedFilterComponent, style: { width: '65vw' }, breakpoints: { '1024px': '75vw', '991px': '90vw', '767px': '94w', '250px': '96vw' }, onHide: function () { if (!showSavedFilterComponent)
+                        return; setShowSavedFilterComponent(false); }, children: [_jsxs("div", { className: "flex align-items-center justify-content-between px-3", children: [_jsx("h5", { className: "solid-custom-title m-0", children: "Saved Filter" }), _jsx(Button, { icon: "pi pi-times", rounded: true, text: true, "aria-label": "Cancel", type: "reset", size: "small", onClick: function () { return setShowSavedFilterComponent(false); } })] }), _jsx(Divider, { className: "m-0" }), _jsx("div", { className: "p-3 lg:p-4", children: fields.length > 0 &&
+                                _jsx(FilterComponent, { viewData: viewData, fields: fields, filterRules: currentSavedFilterRules, setFilterRules: setCurrentSavedFilterRules, transformFilterRules: transformSavedFilterRules, closeDialog: function () { return setShowSavedFilterComponent(false); } }) })] }), _jsx(Dialog, { header: "Save Custom Filter", className: "solid-custom-filter-dialog", visible: showSaveFilterPopup, style: { width: 500 }, onHide: function () { if (!showSaveFilterPopup)
+                        return; setShowSaveFilterPopup(false); }, children: _jsx(SolidSaveCustomFilterForm, { currentSavedFilterData: currentSavedFilterData, handleSaveFilter: handleSaveFilter, closeDialog: setShowSaveFilterPopup }) }), _jsx(Dialog, { visible: isDeleteSQDialogVisible, header: "Confirm Delete", modal: true, className: "solid-confirm-dialog", footer: function () { return (_jsxs("div", { className: "flex justify-content-center", children: [_jsx(Button, { label: "Yes", icon: "pi pi-check", className: 'small-button', severity: "danger", autoFocus: true, onClick: deleteSavedFilter }), _jsx(Button, { label: "No", icon: "pi pi-times", className: 'small-button', onClick: function () { return setIsDeleteSQDialogVisible(false); } })] })); }, onHide: function () { return setIsDeleteSQDialogVisible(false); }, children: _jsxs("p", { children: ["Are you sure you want to delete the ", currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.name, " saved query?"] }) })] }) }));
+});
+//# sourceMappingURL=SolidGlobalSearchElement.js.map