@solidstarters/solid-core-ui 1.1.78 → 1.1.80

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

@@ -0,0 +1,638 @@
+"use client";
+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 { useRouter, useSearchParams } from "next/navigation";
+import { queryStringToQueryObject } from "../list/SolidListView";
+import { InputText } from "primereact/inputtext";
+import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
+import qs from "qs";
+import { useSelector } from "react-redux";
+import { SolidSaveCustomFilterForm } from "./SolidSaveCustomFilterForm";
+var getRandomInt = function (min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+var transformFiltersToRules = function (filter, parentRule) {
+    if (parentRule === void 0) { parentRule = null; }
+    var currentId = idCounter++;
+    if (filter["$or"]) {
+        return {
+            id: currentId,
+            type: FilterRuleType.RULE_GROUP,
+            matchOperator: FilterOperator.OR,
+            parentRule: parentRule,
+            children: filter["$or"].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"].map(function (subFilter) { return transformFiltersToRules(subFilter, currentId); })
+        };
+    }
+    // Handle single rule condition
+    for (var key in filter) {
+        var condition = filter[key];
+        for (var matchMode in condition) {
+            return {
+                id: currentId,
+                type: FilterRuleType.RULE,
+                fieldName: key,
+                //@ts-ignore
+                matchMode: matchMode,
+                value: [condition[matchMode]],
+                parentRule: parentRule,
+                children: []
+            };
+        }
+    }
+    throw new Error("Invalid filter structure");
+};
+var idCounter = 1;
+var generateId = function () { return Date.now() + Math.floor(Math.random() * 1000); };
+var transformRulesToFilters = function (input) {
+    // Helper function to process individual rules
+    var processRule = function (rule) {
+        var _a, _b;
+        if (rule.value && rule.value.length > 0) {
+            // Ensure rule.value is always an array
+            var values = typeof rule.value[0] === "object" ? rule.value.map(function (i) { return i.value; }) : rule.value;
+            if (rule.matchMode !== '$in' && rule.matchMode !== '$notIn' && rule.matchMode !== '$between') {
+                values = values[0];
+            }
+            // Rule transformation
+            var transformedRule = (_a = {},
+                _a[rule.fieldName] = (_b = {},
+                    _b[rule.matchMode] = values // Assuming `value` is always an array with `value` and `label`
+                ,
+                    _b),
+                _a);
+            // If the rule has children (which means it's a rule group), process them
+            var processedFields = void 0;
+            if (rule.children && rule.children.length > 0) {
+                processedFields = rule.children.map(function (child) { return processRuleGroup(child); });
+            }
+            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);
+            }
+        });
+        return _a = {},
+            _a[operator] = children,
+            _a;
+    };
+    // Start processing the root rule group
+    var filterObject = processRuleGroup(input);
+    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);
+};
+var tranformSearchToFilters = function (input) {
+    if (!input || !input.$and)
+        return input;
+    var grouped = {};
+    input.$and.forEach(function (_a) {
+        var _b;
+        var fieldName = _a.fieldName, value = _a.value;
+        var val = Array.isArray(value) && value.length === 1 ? value[0] : value;
+        if (!grouped[fieldName]) {
+            grouped[fieldName] = [];
+        }
+        if (Array.isArray(val)) {
+            (_b = grouped[fieldName]).push.apply(_b, val);
+        }
+        else {
+            grouped[fieldName].push(val);
+        }
+    });
+    return {
+        $and: Object.entries(grouped).map(function (_a) {
+            var _b;
+            var fieldName = _a[0], values = _a[1];
+            return (_b = {},
+                _b[fieldName] = {
+                    $containsi: values.length === 1 ? values[0] : values
+                },
+                _b);
+        })
+    };
+};
+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;
+};
+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: [_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 }), _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);
+                        } })] })] }));
+};
+export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
+    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 _b = useState(defaultState), initialState = _b[0], setInitialState = _b[1];
+    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);
+    var _c = useState(initialState), filterRules = _c[0], setFilterRules = _c[1];
+    var _d = useState([]), fields = _d[0], setFields = _d[1];
+    var _e = useState([]), searchableFields = _e[0], setSearchableFields = _e[1];
+    var _f = useState(false), showGlobalSearchElement = _f[0], setShowGlobalSearchElement = _f[1];
+    var _g = useState(""), customChip = _g[0], setCustomChip = _g[1];
+    var _h = useState([]), searchChips = _h[0], setSearchChips = _h[1];
+    var _j = useState(""), inputValue = _j[0], setInputValue = _j[1];
+    var _k = useState(null), searchFilter = _k[0], setSearchFilter = _k[1];
+    var _l = useState(null), customFilter = _l[0], setCustomFilter = _l[1];
+    var _m = useState(false), hasSearched = _m[0], setHasSearched = _m[1];
+    var _o = useState(), currentSavedFilterData = _o[0], setCurrentSavedFilterData = _o[1];
+    var _p = useState(), savedFilterTobeDeleted = _p[0], setSavedFilterTobeDeleted = _p[1];
+    var _q = useState(false), isDeleteSQDialogVisible = _q[0], setIsDeleteSQDialogVisible = _q[1];
+    var _r = useState(), savedFilterQueryString = _r[0], setSavedFilterQueryString = _r[1];
+    var user = useSelector(function (state) { return state.auth; }).user;
+    var _s = useState([]), savedFilters = _s[0], setSavedFilters = _s[1];
+    var entityApi = createSolidEntityApi("savedFilters");
+    var useCreateSolidEntityMutation = entityApi.useCreateSolidEntityMutation, useDeleteSolidEntityMutation = entityApi.useDeleteSolidEntityMutation, useGetSolidEntityByIdQuery = entityApi.useGetSolidEntityByIdQuery, useUpdateSolidEntityMutation = entityApi.useUpdateSolidEntityMutation, useLazyGetSolidEntitiesQuery = entityApi.useLazyGetSolidEntitiesQuery;
+    var _t = useCreateSolidEntityMutation(), createEntity = _t[0], _u = _t[1], isEntityCreateSuccess = _u.isSuccess, isEntityCreateError = _u.isError, entityCreateError = _u.error;
+    var _v = useUpdateSolidEntityMutation(), updateEntity = _v[0], _w = _v[1], isEntityUpdateSuceess = _w.isSuccess, isEntityUpdateError = _w.isError, entityUpdateError = _w.error;
+    var _x = useDeleteSolidEntityMutation(), deleteEntity = _x[0], _y = _x[1], isEntityDeleteSuceess = _y.isSuccess, isEntityDeleteError = _y.isError, entityDeleteError = _y.error;
+    var _z = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _z[0], _0 = _z[1], solidEntityListViewData = _0.data, isLoading = _0.isLoading, error = _0.error;
+    useEffect(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var filters = {
+            $or: [
+                {
+                    $and: [
+                        { model: { $in: [(_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] } },
+                        { view: { $in: [(_d = viewData === null || viewData === void 0 ? void 0 : viewData.solidView) === null || _d === void 0 ? void 0 : _d.id] } },
+                        { user: { $in: [(_e = user === null || user === void 0 ? void 0 : user.user) === null || _e === void 0 ? void 0 : _e.id] } }
+                    ]
+                },
+                {
+                    $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] } },
+                        { isPrivate: { $eq: true } }
+                    ]
+                }
+            ]
+        };
+        var queryData = {
+            offset: 0,
+            limit: 10,
+            filters: filters,
+            populate: ["model", "view", "user"],
+            sort: ["id:desc"],
+        };
+        var queryString = qs.stringify(queryData, { encodeValuesOnly: true });
+        setSavedFilterQueryString(queryString);
+        triggerGetSolidEntities(queryString);
+    }, [searchParams]);
+    useEffect(function () {
+        if (solidEntityListViewData) {
+            setSavedFilters(solidEntityListViewData.records);
+        }
+    }, [solidEntityListViewData]);
+    useImperativeHandle(ref, function () { return ({
+        clearFilter: function () {
+            setFilterRules(initialState);
+        }
+    }); });
+    useEffect(function () {
+        var searchChips;
+        var customChips;
+        var parsedSearchParams = searchParams;
+        var savedQuery = parsedSearchParams === null || parsedSearchParams === void 0 ? void 0 : parsedSearchParams.get("savedQuery");
+        if (savedQuery && savedFilters.length > 0) {
+            var currentSavedFilterId_1 = Number(savedQuery);
+            var currentSavedFilterData_1 = savedFilters.find(function (savedFilter) { return savedFilter.id === currentSavedFilterId_1; });
+            setCurrentSavedFilterData(currentSavedFilterData_1);
+            if (currentSavedFilterData_1) {
+                var filterJson = JSON.parse(currentSavedFilterData_1 === null || currentSavedFilterData_1 === void 0 ? void 0 : currentSavedFilterData_1.filterQueryJson);
+                if (filterJson) {
+                    searchChips = (filterJson === null || filterJson === void 0 ? void 0 : filterJson.s_filter) || null;
+                    customChips = (filterJson === null || filterJson === void 0 ? void 0 : filterJson.c_filter) || null;
+                }
+            }
+        }
+        else {
+            var queryObject = queryStringToQueryObject();
+            if (queryObject) {
+                searchChips = (queryObject === null || queryObject === void 0 ? void 0 : queryObject.s_filter) || null;
+                customChips = (queryObject === null || queryObject === void 0 ? void 0 : queryObject.c_filter) || null;
+            }
+        }
+        if (searchChips) {
+            var 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);
+            setHasSearched(true);
+        }
+        if (customChips) {
+            setCustomFilter(customChips);
+            var formatedCustomChips = transformFiltersToRules(customChips);
+            setFilterRules([formatedCustomChips]);
+            setHasSearched(true);
+        }
+    }, [searchParams, savedFilters]);
+    function findSearchableField(node, targetName) {
+        var _a, _b;
+        if ((node === null || node === void 0 ? void 0 : node.type) === 'field' &&
+            ((_a = node === null || node === void 0 ? void 0 : node.attrs) === null || _a === void 0 ? void 0 : _a.name) === targetName &&
+            ((_b = node === null || node === void 0 ? void 0 : node.attrs) === null || _b === void 0 ? void 0 : _b.isSearchable)) {
+            return true;
+        }
+        if (Array.isArray(node === null || node === void 0 ? void 0 : node.children)) {
+            return node.children.some(function (child) { return findSearchableField(child, targetName); });
+        }
+        return false;
+    }
+    function collectLeafFieldTypes(layoutArray) {
+        var result = [];
+        function recurse(node) {
+            if (!node || typeof node !== 'object')
+                return;
+            // If it's a field and has no children (leaf field node)
+            if (node.type === 'field' && !node.children) {
+                result.push(node);
+            }
+            // If it has children, recurse into them
+            if (Array.isArray(node.children)) {
+                node.children.forEach(recurse);
+            }
+        }
+        // Input is an array of nodes
+        layoutArray.forEach(recurse);
+        return result;
+    }
+    useEffect(function () {
+        var _a, _b, _c, _d, _e;
+        if ((_a = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _a === void 0 ? void 0 : _a.solidFieldsMetadata) {
+            var fieldsData = (_b = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _b === void 0 ? void 0 : _b.solidFieldsMetadata;
+            var fieldsList = Object.entries(fieldsData).map(function (_a) {
+                var key = _a[0], value = _a[1];
+                return ({ name: value.displayName, value: key, type: value.type });
+            });
+            setFields(fieldsList);
+            var searchableFieldsList = fieldsList.filter(function (field) { return field.type === "longText" || field.type === "shortText"; });
+            var finalsearchableFieldsList = [];
+            if (typeof window !== "undefined" && window.location.href.includes("list")) {
+                finalsearchableFieldsList = searchableFieldsList.filter(function (field) { var _a, _b, _c, _d; return field.value && ((_d = (_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.layout) === null || _c === void 0 ? void 0 : _c.children) === null || _d === void 0 ? void 0 : _d.some(function (child) { var _a, _b; return ((_a = child === null || child === void 0 ? void 0 : child.attrs) === null || _a === void 0 ? void 0 : _a.name) === field.value && ((_b = child === null || child === void 0 ? void 0 : child.attrs) === null || _b === void 0 ? void 0 : _b.isSearchable); })); }).map(function (field) { return field.value; });
+            }
+            if (typeof window !== "undefined" && window.location.href.includes("kanban")) {
+                var result_1 = collectLeafFieldTypes((_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);
+                finalsearchableFieldsList = searchableFieldsList.filter(function (field) { return field.value && (result_1 === null || result_1 === void 0 ? void 0 : result_1.some(function (child) { var _a, _b; return ((_a = child === null || child === void 0 ? void 0 : child.attrs) === null || _a === void 0 ? void 0 : _a.name) === field.value && ((_b = child === null || child === void 0 ? void 0 : child.attrs) === null || _b === void 0 ? void 0 : _b.isSearchable); })); }).map(function (field) { return field.value; });
+            }
+            setSearchableFields(finalsearchableFieldsList);
+        }
+    }, []);
+    useEffect(function () {
+        if (chipsRef.current) {
+            var inputElement = chipsRef.current.querySelector("input");
+            if (inputElement) {
+                inputElement.addEventListener("input", function (e) {
+                    setInputValue(e.target.value);
+                });
+            }
+        }
+    }, []);
+    // useEffect(() => {
+    //     // Get the last valid filter
+    //     const validFilters = filters?.$or?.filter((filter: any) => filter !== undefined) || [];
+    //     if (validFilters.length > 0) {
+    //         setCustomChip(validFilters.length.toString()); // Store only the number
+    //     } else {
+    //         setCustomChip(""); // Reset when no filters are present
+    //     }
+    // }, [filters]);
+    var firstFilterableFieldName = searchableFields[0]; // First searchable field
+    var handleAddChip = function (columnName) {
+        if (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim()) {
+            var newChip_1 = {
+                columnName: columnName || firstFilterableFieldName,
+                value: inputValue.trim(),
+            };
+            setSearchChips(function (prev) { return __spreadArray(__spreadArray([], prev, true), [newChip_1], false); });
+            setInputValue("");
+            setHasSearched(true);
+        }
+    };
+    var clearCustomFilter = function () {
+        var finalFilter = mergeSearchAndCustomFilters(null, searchFilter, "c_filter", "s_filter");
+        handleApplyCustomFilter(finalFilter);
+        setFilterRules(initialState);
+        setCustomFilter(null);
+    };
+    var handleKeyDown = function (e) {
+        if (e.key === "Enter" && (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim())) {
+            handleAddChip();
+            e.preventDefault();
+        }
+        else if (e.key === "Backspace" && inputValue === "") {
+            if (searchChips.length > 0) {
+                // Remove last search chip only
+                setSearchChips(function (prev) { return prev.slice(0, -1); });
+                setHasSearched(true);
+            }
+            else if (customFilter) {
+                // If no search chips, remove custom filter
+                clearCustomFilter();
+            }
+        }
+    };
+    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;
+    };
+    var transformFilterRules = function (filterRules) {
+        var transformedFilter = transformRulesToFilters(filterRules[0]);
+        console.log("transformedFilter from custom filter", transformedFilter);
+        setCustomFilter(transformedFilter);
+        if (transformedFilter) {
+            var finalFilter = mergeSearchAndCustomFilters(transformedFilter, searchFilter, "c_filter", "s_filter");
+            handleApplyCustomFilter(finalFilter);
+        }
+        setShowGlobalSearchElement(false);
+    };
+    useEffect(function () {
+        if (hasSearched === true) {
+            var formattedChips = {
+                $and: searchChips.map(function (chip) { return ({
+                    fieldName: chip.columnName,
+                    matchMode: "$containsi",
+                    value: [chip.value]
+                }); })
+            };
+            // if (formattedChips.$and.length > 0) {
+            var transformedFilter = tranformSearchToFilters(formattedChips);
+            setSearchFilter(transformedFilter);
+            var finalFilter = mergeSearchAndCustomFilters(transformedFilter, customFilter, "s_filter", "c_filter");
+            handleApplyCustomFilter(finalFilter);
+            // }
+        }
+    }, [searchChips]);
+    // Saved Filter related 
+    var applySavedFilter = function (savedfilter) {
+        // push the savedQuery=1 in url 
+        if (savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.id) {
+            router.push("?savedQuery=".concat(savedfilter.id));
+        }
+        else {
+            console.error("Saved filter ID is undefined or null.");
+        }
+    };
+    var openSavedCustomFilter = function (savedfilter) {
+        //Open custom filter popup 
+        router.push("?savedQuery=".concat(savedfilter.id));
+        setShowGlobalSearchElement(true);
+        // dont refetch the data yet
+        var customFilter = JSON.parse(savedfilter.filterQueryJson).c_filter;
+        setCustomFilter(customFilter ? customFilter : null);
+        if (customFilter) {
+            var formatedCustomChips = transformFiltersToRules(customFilter ? customFilter : null);
+            setFilterRules(formatedCustomChips ? [formatedCustomChips] : initialState);
+        }
+    };
+    var deleteSavedFilter = function () {
+        // delte the saved filter with id 
+        deleteEntity(savedFilterTobeDeleted);
+        triggerGetSolidEntities(savedFilterQueryString);
+        setIsDeleteSQDialogVisible(false);
+        var parsedSearchParams = searchParams;
+        var savedQuery = parsedSearchParams === null || parsedSearchParams === void 0 ? void 0 : parsedSearchParams.get("savedQuery");
+        if (savedFilterTobeDeleted === savedQuery) {
+            var urlParams = new URLSearchParams(window.location.search);
+            urlParams.delete("savedQuery");
+            router.push("?".concat(urlParams.toString()));
+        }
+    };
+    var handleSaveFilter = function (formValues) { return __awaiter(void 0, void 0, void 0, function () {
+        var filterJson, formData, result;
+        var _a, _b, _c, _d, _e, _f;
+        return __generator(this, function (_g) {
+            switch (_g.label) {
+                case 0:
+                    filterJson = mergeSearchAndCustomFilters(customFilter, searchFilter, "c_filter", "s_filter");
+                    setShowSaveFilterPopup(false);
+                    formData = new FormData();
+                    formData.append("name", formValues.name);
+                    formData.append("filterQueryJson", JSON.stringify(filterJson));
+                    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", (_f = user === null || user === void 0 ? void 0 : user.user) === null || _f === void 0 ? void 0 : _f.id);
+                    if (!formValues.id) return [3 /*break*/, 2];
+                    return [4 /*yield*/, updateEntity({ id: +formValues.id, data: formData }).unwrap()];
+                case 1:
+                    _g.sent();
+                    router.push("?savedQuery=".concat(formValues.id));
+                    return [3 /*break*/, 4];
+                case 2: return [4 /*yield*/, createEntity(formData).unwrap()];
+                case 3:
+                    result = _g.sent();
+                    router.push("?savedQuery=".concat(result.data.id));
+                    _g.label = 4;
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var groupedSearchChips = searchChips.reduce(function (acc, chip) {
+        var key = chip.columnName || firstFilterableFieldName;
+        if (!acc[key]) {
+            acc[key] = [];
+        }
+        acc[key].push(chip.value);
+        return acc;
+    }, {});
+    var handleRemoveChipGroup = function (columnName) {
+        var updatedChips = searchChips.filter(function (chip) { return chip.columnName !== columnName; });
+        setSearchChips(updatedChips);
+        setHasSearched(true);
+    };
+    var CustomChip = function () {
+        var _a, _b;
+        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 () { return 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: (customFilter === null || customFilter === void 0 ? void 0 : customFilter.$or) && ((_a = customFilter === null || customFilter === void 0 ? void 0 : customFilter.$or) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "".concat((_b = customFilter === null || customFilter === void 0 ? void 0 : customFilter.$or) === null || _b === void 0 ? void 0 : _b.length) : customFilter.$and.length }), " rules applied"] })] }), _jsx("a", { onClick: clearCustomFilter, style: { cursor: "pointer" }, children: _jsx("i", { className: "pi pi-times ml-1" }) })] }) }));
+    };
+    var SearchChip = function () { return (_jsx(_Fragment, { children: Object.entries(groupedSearchChips).map(function (_a) {
+            var column = _a[0], values = _a[1];
+            return (_jsx("li", { children: _jsxs("div", { className: "search-filter-chip-type", children: [_jsx("div", { children: column }), 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));
+        }) })); };
+    var _1 = useState(false), showOverlay = _1[0], setShowOverlay = _1[1];
+    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: [customFilter && _jsx(CustomChip, {}), _jsx(SearchChip, {}), _jsx("li", { ref: chipsRef, children: _jsxs("div", { className: "relative", 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", { className: "absolute w-full z-5 surface-0 border-round border-1 border-300 shadow-2", style: { top: 35 }, children: [inputValue ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "custom-filter-search-options px-2 py-2 flex flex-column", children: searchableFields.map(function (value, index) { return (_jsxs(Button, { className: "p-2 flex gap-1 text-color", onClick: function () { return handleAddChip(value); }, text: true, severity: "secondary", size: "small", children: ["Search ", _jsx("strong", { children: value }), " for :", _jsx("span", { className: "font-bold text-color", children: inputValue })] }, index)); }) }), _jsx(Divider, { className: "m-0" })] })) :
+                            _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' }, 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-4", children: fields.length > 0 &&
+                                _jsx(FilterComponent, { viewData: viewData, fields: fields, filterRules: filterRules, setFilterRules: setFilterRules, transformFilterRules: transformFilterRules, closeDialog: function () { return setShowGlobalSearchElement(false); } }) })] }), _jsx(Dialog, { header: "Save Custom Filter", 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, 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