@solidxai/core-ui 0.1.3 → 0.1.4-beta.0

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

@@ -63,7 +63,7 @@ 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 { getFilterObjectFromLocalStorage } from "../list/SolidListView";
 import { InputText } from "primereact/inputtext";
 import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
 import qs from "qs";
@@ -71,6 +71,7 @@ import { SolidSaveCustomFilterForm } from "./SolidSaveCustomFilterForm";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
 import { hydrateRelationRules } from "../../../helpers/hydrateRelationRules";
 import { useSession } from '../../../hooks/useSession';
+import GroupingComponent from "./GroupingComponent";
 var getRandomInt = function (min, max) {
     return Math.floor(Math.random() * (max - min + 1)) + min;
 };
@@ -374,7 +375,7 @@ export var mergeSearchAndCustomFilters = function (transformedFilter, newFilter,
     // Return the combined filters object
     return filters;
 };
-export var mergeAllDiffFilters = function (customFilter, searchFilter, savedFilter, preDefinedFilter) {
+export var mergeAllDiffFilters = function (customFilter, searchFilter, savedFilter, preDefinedFilter, groupingRules, aggregationRules) {
     var filters = {};
     // Add only non-null filters
     if (customFilter && Object.keys(customFilter).length > 0) {
@@ -389,6 +390,12 @@ export var mergeAllDiffFilters = function (customFilter, searchFilter, savedFilt
     if (preDefinedFilter && Object.keys(preDefinedFilter).length > 0) {
         filters["predefined_search_predicate"] = preDefinedFilter;
     }
+    if (groupingRules && Object.keys(groupingRules).length > 0) {
+        filters["grouping_rules"] = groupingRules;
+    }
+    if (aggregationRules && Object.keys(aggregationRules).length > 0) {
+        filters["aggregation_rules"] = aggregationRules;
+    }
     // Return the combined filters object
     return filters;
 };
@@ -460,7 +467,7 @@ var extractChips = function (node) {
 };
 export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     var _b, _c, _d, _e, _f, _g, _h;
-    var viewData = _a.viewData, handleApplyCustomFilter = _a.handleApplyCustomFilter, showSaveFilterPopup = _a.showSaveFilterPopup, setShowSaveFilterPopup = _a.setShowSaveFilterPopup, filterPredicates = _a.filterPredicates;
+    var viewData = _a.viewData, viewType = _a.viewType, handleApplyCustomFilter = _a.handleApplyCustomFilter, showSaveFilterPopup = _a.showSaveFilterPopup, setShowSaveFilterPopup = _a.setShowSaveFilterPopup, filterPredicates = _a.filterPredicates;
     var defaultState = [
         {
             id: 1,
@@ -489,6 +496,17 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             ]
         }
     ];
+    var defaultAggregationRules = [
+        {
+            id: 1,
+            operator: "count",
+            fieldName: "id",
+            locked: true
+        }
+    ];
+    var defaultGroupingRules = [
+        { id: 1, fieldName: null, dateGrouping: null }
+    ];
     var _j = useState(defaultState), initialState = _j[0], setInitialState = _j[1];
     var pathname = usePathname();
     var searchParams = useSearchParams(); // Converts the query params to a string
@@ -501,43 +519,48 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     var _l = useState(null), customFilter = _l[0], setCustomFilter = _l[1];
     var _m = useState([]), fields = _m[0], setFields = _m[1];
     var _o = useState([]), searchableFields = _o[0], setSearchableFields = _o[1];
+    var _p = useState([]), groupableFields = _p[0], setGroupableFields = _p[1];
+    var _q = useState(defaultGroupingRules), groupingRules = _q[0], setGroupingRules = _q[1];
+    var _r = useState(defaultAggregationRules), aggregationRules = _r[0], setAggregationRules = _r[1];
     // used to show the list of predefined searches 
-    var _p = useState([]), predefinedSearches = _p[0], setPredefinedSearches = _p[1];
+    var _s = useState([]), predefinedSearches = _s[0], setPredefinedSearches = _s[1];
     // used to open / close the custom fitler popup 
-    var _q = useState(false), showGlobalSearchElement = _q[0], setShowGlobalSearchElement = _q[1];
+    var _t = useState(false), showGlobalSearchElement = _t[0], setShowGlobalSearchElement = _t[1];
+    // used to open / close the group fitler popup 
+    var _u = useState(false), showGroupFilterElement = _u[0], setShowGroupFilterElement = _u[1];
     // searchChips maintain the ui to display searched query 
     // searchFilter maintain the transformed filter of the  searched query 
-    var _r = useState([]), searchChips = _r[0], setSearchChips = _r[1];
-    var _s = useState(null), searchFilter = _s[0], setSearchFilter = _s[1];
+    var _v = useState([]), searchChips = _v[0], setSearchChips = _v[1];
+    var _w = useState(null), searchFilter = _w[0], setSearchFilter = _w[1];
     // predefinedSearchChip maintain the ui to display predefined searches query 
-    var _t = useState(null), predefinedSearchChip = _t[0], setPredefinedSearchChip = _t[1];
+    var _x = useState(null), predefinedSearchChip = _x[0], setPredefinedSearchChip = _x[1];
     //  state to maintain the text typed in the search input box
-    var _u = useState(""), inputValue = _u[0], setInputValue = _u[1];
+    var _y = useState(""), inputValue = _y[0], setInputValue = _y[1];
     // flag to prevent un necessary re renders
-    var _v = useState(false), hasSearched = _v[0], setHasSearched = _v[1];
+    var _z = useState(false), hasSearched = _z[0], setHasSearched = _z[1];
     // currentSavedFilterData  is used to save the whole object of saved filter 
-    var _w = useState(), currentSavedFilterData = _w[0], setCurrentSavedFilterData = _w[1];
-    var _x = useState(), currentSavedFilterQuery = _x[0], setCurrentSavedFilterQuery = _x[1];
-    var _y = useState(), currentSavedFilterRules = _y[0], setCurrentSavedFilterRules = _y[1];
-    var _z = useState(false), showSavedFilterComponent = _z[0], setShowSavedFilterComponent = _z[1];
-    var _0 = useState(), savedFilterTobeDeleted = _0[0], setSavedFilterTobeDeleted = _0[1];
-    var _1 = useState(false), isDeleteSQDialogVisible = _1[0], setIsDeleteSQDialogVisible = _1[1];
-    var _2 = useState(), savedFilterQueryString = _2[0], setSavedFilterQueryString = _2[1];
-    var _3 = useState(false), showOverlay = _3[0], setShowOverlay = _3[1];
+    var _0 = useState(), currentSavedFilterData = _0[0], setCurrentSavedFilterData = _0[1];
+    var _1 = useState(), currentSavedFilterQuery = _1[0], setCurrentSavedFilterQuery = _1[1];
+    var _2 = useState(), currentSavedFilterRules = _2[0], setCurrentSavedFilterRules = _2[1];
+    var _3 = useState(false), showSavedFilterComponent = _3[0], setShowSavedFilterComponent = _3[1];
+    var _4 = useState(), savedFilterTobeDeleted = _4[0], setSavedFilterTobeDeleted = _4[1];
+    var _5 = useState(false), isDeleteSQDialogVisible = _5[0], setIsDeleteSQDialogVisible = _5[1];
+    var _6 = useState(), savedFilterQueryString = _6[0], setSavedFilterQueryString = _6[1];
+    var _7 = useState(false), showOverlay = _7[0], setShowOverlay = _7[1];
     var overlayRef = useRef(null);
-    var _4 = useSession(), session = _4.data, status = _4.status;
+    var _8 = useSession(), session = _8.data, status = _8.status;
     var user = session === null || session === void 0 ? void 0 : session.user;
-    var _5 = useState(0), refreshKey = _5[0], setRefreshKey = _5[1];
-    var _6 = useState(null), predefinedSearchBaseFilter = _6[0], setPredefinedSearchBaseFilter = _6[1];
-    var _7 = useState([]), savedFilters = _7[0], setSavedFilters = _7[1];
-    var _8 = useState(false), savedFiltersLoaded = _8[0], setSavedFiltersLoaded = _8[1];
+    var _9 = useState(0), refreshKey = _9[0], setRefreshKey = _9[1];
+    var _10 = useState(null), predefinedSearchBaseFilter = _10[0], setPredefinedSearchBaseFilter = _10[1];
+    var _11 = useState([]), savedFilters = _11[0], setSavedFilters = _11[1];
+    var _12 = useState(false), savedFiltersLoaded = _12[0], setSavedFiltersLoaded = _12[1];
     var entityApi = createSolidEntityApi("savedFilters");
     var useCreateSolidEntityMutation = entityApi.useCreateSolidEntityMutation, useDeleteSolidEntityMutation = entityApi.useDeleteSolidEntityMutation, useGetSolidEntityByIdQuery = entityApi.useGetSolidEntityByIdQuery, useUpdateSolidEntityMutation = entityApi.useUpdateSolidEntityMutation, useLazyGetSolidEntitiesQuery = entityApi.useLazyGetSolidEntitiesQuery;
-    var _9 = useCreateSolidEntityMutation(), createEntity = _9[0], _10 = _9[1], isEntityCreateSuccess = _10.isSuccess, isEntityCreateError = _10.isError, entityCreateError = _10.error;
-    var _11 = useUpdateSolidEntityMutation(), updateEntity = _11[0], _12 = _11[1], isEntityUpdateSuceess = _12.isSuccess, isEntityUpdateError = _12.isError, entityUpdateError = _12.error;
-    var _13 = useDeleteSolidEntityMutation(), deleteEntity = _13[0], _14 = _13[1], isEntityDeleteSuceess = _14.isSuccess, isEntityDeleteError = _14.isError, entityDeleteError = _14.error;
-    var _15 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _15[0], _16 = _15[1], solidEntityListViewData = _16.data, isSavedFilterLoading = _16.isLoading, error = _16.error;
-    var _17 = useState(0), savedFilterFetchDataRefreshKey = _17[0], setSavedFilterFetchDataRefreshKey = _17[1];
+    var _13 = useCreateSolidEntityMutation(), createEntity = _13[0], _14 = _13[1], isEntityCreateSuccess = _14.isSuccess, isEntityCreateError = _14.isError, entityCreateError = _14.error;
+    var _15 = useUpdateSolidEntityMutation(), updateEntity = _15[0], _16 = _15[1], isEntityUpdateSuceess = _16.isSuccess, isEntityUpdateError = _16.isError, entityUpdateError = _16.error;
+    var _17 = useDeleteSolidEntityMutation(), deleteEntity = _17[0], _18 = _17[1], isEntityDeleteSuceess = _18.isSuccess, isEntityDeleteError = _18.isError, entityDeleteError = _18.error;
+    var _19 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _19[0], _20 = _19[1], solidEntityListViewData = _20.data, isSavedFilterLoading = _20.isLoading, error = _20.error;
+    var _21 = useState(0), savedFilterFetchDataRefreshKey = _21[0], setSavedFilterFetchDataRefreshKey = _21[1];
     useEffect(function () {
         var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
             var filters, queryData, queryString, savedFilter;
@@ -604,14 +627,15 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     }); });
     useEffect(function () {
         var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var searchChips, customChips, queryObject, currentSavedFilterId_1, currentSavedFilterData_1, filterJson, finalSavedFilter, formattedChips, rules, hydratedRules;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            var searchChips, customChips, queryObject, currentSavedFilterId_1, currentSavedFilterData_1, filterJson, finalSavedFilter, formattedChips, rules, hydratedRules, hasGroupingRules, layoutGroupBy, initialGroupingRules;
+            var _a, _b, _c, _d, _e;
+            return __generator(this, function (_f) {
+                switch (_f.label) {
                     case 0:
                         if (!savedFiltersLoaded) return [3 /*break*/, 3];
                         if (activeSavedFilter && savedFilters.length === 0)
                             return [2 /*return*/];
-                        queryObject = queryStringToQueryObject();
+                        queryObject = getFilterObjectFromLocalStorage();
                         // const savedQuery = parsedSearchParams?.get("savedQuery");
                         if (activeSavedFilter) {
                             currentSavedFilterId_1 = Number(activeSavedFilter);
@@ -645,13 +669,34 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                         rules = transformFiltersToRules(customChips);
                         return [4 /*yield*/, hydrateRelationRules([rules], viewData)];
                     case 1:
-                        hydratedRules = _a.sent();
+                        hydratedRules = _f.sent();
                         setFilterRules(hydratedRules);
-                        _a.label = 2;
+                        _f.label = 2;
                     case 2:
+                        hasGroupingRules = ((_a = queryObject === null || queryObject === void 0 ? void 0 : queryObject.grouping_rules) === null || _a === void 0 ? void 0 : _a.some(function (rule) { return rule.fieldName !== null; }));
+                        if (hasGroupingRules) {
+                            setGroupingRules(queryObject === null || queryObject === void 0 ? void 0 : queryObject.grouping_rules);
+                        }
+                        else {
+                            layoutGroupBy = (_e = (_d = (_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.layout) === null || _d === void 0 ? void 0 : _d.attrs) === null || _e === void 0 ? void 0 : _e.groupBy;
+                            if (Array.isArray(layoutGroupBy) && layoutGroupBy.length > 0) {
+                                initialGroupingRules = layoutGroupBy.map(function (groupStr, index) {
+                                    var _a = groupStr.split(":"), fieldName = _a[0], dateGrouping = _a[1];
+                                    return {
+                                        id: Date.now() + index,
+                                        fieldName: fieldName || null,
+                                        dateGrouping: dateGrouping || null
+                                    };
+                                });
+                                setGroupingRules(initialGroupingRules);
+                            }
+                        }
+                        if ((queryObject === null || queryObject === void 0 ? void 0 : queryObject.aggregation_rules) && (queryObject === null || queryObject === void 0 ? void 0 : queryObject.aggregation_rules) !== aggregationRules) {
+                            setAggregationRules(queryObject === null || queryObject === void 0 ? void 0 : queryObject.aggregation_rules);
+                        }
                         setRefreshKey(function (prev) { return prev + 1; });
                         setHasSearched(true);
-                        _a.label = 3;
+                        _f.label = 3;
                     case 3: return [2 /*return*/];
                 }
             });
@@ -706,7 +751,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             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 _b, _c, _d, _e, _f, _g;
                 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 {
@@ -717,6 +762,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     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,
+                    relationType: (_g = value === null || value === void 0 ? void 0 : value.relationType) !== null && _g !== void 0 ? _g : null,
                 };
             });
             setFields(fieldsList);
@@ -739,7 +785,30 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                         return false;
                 }
             });
-            // console.log("searchableFieldsList", searchableFieldsList);
+            var groupableFieldsList = fieldsList.filter(function (field) {
+                switch (field.type) {
+                    case "relation":
+                        // Only include relation if searchField is present
+                        if (field.relationType === "many-to-one")
+                            return true;
+                        return false;
+                    case "longText":
+                    case "shortText":
+                    case "selectionStatic":
+                    case "selectionDynamic":
+                    case "int":
+                    case "float":
+                    case "boolean":
+                    case "date":
+                    case "datetime":
+                        return true;
+                    // case "selectionStatic":
+                    case "computed":
+                        return field.ormType === "varchar";
+                    default:
+                        return false;
+                }
+            });
             // Optionally map to a minimal structure if needed for UI
             var finalSearchableFieldsList = searchableFieldsList.map(function (field) {
                 var _a;
@@ -750,8 +819,21 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     matchMode: field.matchMode
                 });
             });
-            // console.log("finalSearchableFieldsList", finalSearchableFieldsList);
             setSearchableFields(finalSearchableFieldsList);
+            var finalGroupableFieldsList = groupableFieldsList.map(function (field) {
+                var _a;
+                return ({
+                    fieldName: field.value,
+                    displayName: field.name,
+                    searchField: (_a = field.searchField) !== null && _a !== void 0 ? _a : "",
+                    matchMode: field.matchMode,
+                    type: field.type,
+                    ormType: field.ormType,
+                    relationType: field.relationType,
+                    computedFieldValueType: field.computedFieldValueType
+                });
+            });
+            setGroupableFields(finalGroupableFieldsList);
             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);
         }
@@ -829,10 +911,15 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         setHasSearched(true);
         setRefreshKey(function (prev) { return prev + 1; });
     };
+    var applyGrouping = function (groupingRules, aggregationRules) {
+        setHasSearched(true);
+        setShowGroupFilterElement(false);
+        setGroupingRules(groupingRules);
+        setAggregationRules(aggregationRules);
+        setRefreshKey(function (prev) { return prev + 1; });
+    };
     useEffect(function () {
         if (refreshKey > 0 && hasSearched) {
-            console.log("refres", refreshKey);
-            console.log("hasSearched", hasSearched);
             var formattedChips = {
                 $and: searchChips.map(function (chip) {
                     var _a;
@@ -849,7 +936,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             var finalSavedFilter = currentSavedFilterQuery;
             var finalPredefinedFilter = predefinedSearchBaseFilter;
             var finalCustomFilter = customFilter;
-            var finalFilter = mergeAllDiffFilters(finalCustomFilter, finalSearchFilter, finalSavedFilter, finalPredefinedFilter);
+            var finalFilter = mergeAllDiffFilters(finalCustomFilter, finalSearchFilter, finalSavedFilter, finalPredefinedFilter, groupingRules, aggregationRules);
             handleApplyCustomFilter(finalFilter, true);
             setHasSearched(false);
             // }
@@ -1076,6 +1163,15 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                                     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" }) })] }) }));
     };
+    var removeGrouping = function () {
+        setGroupingRules(defaultGroupingRules);
+        setAggregationRules(defaultAggregationRules);
+        setHasSearched(true);
+        setRefreshKey(function (prev) { return prev + 1; });
+    };
+    var GroupingChip = function () {
+        return (_jsx("li", { className: "solid-global-search-chip", children: _jsxs("div", { className: "flex align-items-center gap-2", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", onClick: function () { return setShowGroupFilterElement(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: groupingRules.length }), " Grouping rules applied"] })] }), _jsx("a", { onClick: removeGrouping, 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) {
@@ -1139,7 +1235,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             return;
         }
         try {
-            // Replace {{search}} placeholders with actual search value
+            // Replace {{ search }} placeholders with actual search value
             var processedFilter = replacePlaceholders(predefinedSearch.filters, inputValue.trim());
             // Clear all existing filters and searches
             // setSearchChips([]);
@@ -1178,7 +1274,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     };
     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) {
+    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, {}), groupingRules.length > 0 && groupingRules.some(function (r) { return r.fieldName !== null; }) && _jsx(GroupingChip, {}), _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 () {
@@ -1218,10 +1314,13 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                             _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(Divider, { className: "m-0" })] }), _jsxs("div", { className: "px-2 py-1 flex justify-content-between", children: [_jsx(Button, { text: true, size: "small", label: "Custom Filter", iconPos: "left", icon: 'pi pi-plus', onClick: function () { return setShowGlobalSearchElement(true); }, className: "font-bold" }), viewType === "tree" &&
+                                    _jsx(Button, { text: true, size: "small", label: "Grouping", iconPos: "left", icon: 'pi pi-plus', onClick: function () { return setShowGroupFilterElement(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-2 lg:p-2", 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: showGroupFilterElement, style: { width: '20vw' }, breakpoints: { '1024px': '75vw', '991px': '90vw', '767px': '94w', '250px': '96vw' }, onHide: function () { if (!showGroupFilterElement)
+                        return; setShowGroupFilterElement(false); }, children: [_jsxs("div", { className: "flex align-items-center justify-content-between px-3", children: [_jsx("h5", { className: "solid-custom-title m-0" }), _jsx(Button, { icon: "pi pi-times", rounded: true, text: true, "aria-label": "Cancel", type: "reset", size: "small", onClick: function () { return setShowGroupFilterElement(false); } })] }), _jsx(Divider, { className: "m-0" }), _jsx("div", { className: "p-2 lg:p-2", children: groupableFields.length > 0 &&
+                                _jsx(GroupingComponent, { viewData: viewData, fields: groupableFields, groupingRules: groupingRules, setGroupingRules: setGroupingRules, aggregationRules: aggregationRules, setAggregationRules: setAggregationRules, applyGrouping: applyGrouping, closeDialog: function () { return setShowGroupFilterElement(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-2 lg:p-2", 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?"] }) })] }) }));
 });