@solidstarters/solid-core-ui 1.1.1 → 1.1.2

package/dist/index.js

@@ -195,7 +195,7 @@ export { CancelButton, SolidCancelButton } from './components/common/CancelButto
 export { CreateButton } from './components/common/CreateButton';
 export { DropzonePlaceholder } from './components/common/DropzonePlaceholder';
 export { DropzoneUpload } from './components/common/DropzoneUpload';
-// export * from './components/common/FilterComponent';
+// export * from '@/components/common/FilterComponent';
 export { HeaderDynamicTitles } from './components/common/HeaderDynamicTitles';
 // export * from './components/common/MarkdownViewer';
 export { MultipleSelectAutoCompleteField } from './components/common/MultipleSelectAutoCompleteField';
@@ -429,7 +429,7 @@ export { default as AuthBanner } from './components/common/AuthBanner';
 //CodeEditor.tsx
 export { default as CodeEditor } from './components/common/CodeEditor';
 //FilterComponent.tsx
-// export { default as FilterComponent } from './components/common/FilterComponent';
+// export { default as FilterComponent } from '@/components/common/FilterComponent';
 //MarkdownViewer.tsx
 export { default as MarkdownViewer } from './components/common/MarkdownViewer';
 //SolidFormView.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidstarters/solid-core-ui",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "scripts": {
     "build": "tsc && tsc-alias",
     "clean": "rm -rf dist",

package/src/components/core/common/FilterComponent.tsx

@@ -88,7 +88,6 @@ const FilterRuleComponent = ({ viewData, fields, rule, onChange, onAddRule, onAd
   // const applicableInputField = rule.fieldName ? fields.find(f => f.name === rule.fieldName)?.type : "";
   const [fieldName, setFieldName] = useState({ name: rule.fieldName });
   const [matchMode, setMatchMode] = useState({ name: rule.matchMode });
-  console.log("level", level);
 
   return (
     // <div style={{ marginLeft: (level - 1) * 10 + 'px' }} className="filter-rule">
@@ -303,7 +302,7 @@ const FilterGroupComponent = ({ viewData, fields, group, onChange, onAddRule, on
 };
 
 // Main Filter component
-const FilterComponent = ({ viewData, fields, filterRules, setFilterRules, handleApplyCustomFilter }) => {
+const FilterComponent = ({ viewData, fields, filterRules, setFilterRules, transformFilterRules }) => {
   // const initialState: FilterRule[] = [
   //   {
   //     id: 1,
@@ -420,10 +419,10 @@ const FilterComponent = ({ viewData, fields, filterRules, setFilterRules, handle
     setFilterRules(prev => deleteRecursively(prev, id));
   };
 
-  const handlePrintState = () => {
-    setPrintedState(JSON.stringify(filterRules, null, 2)); // Pretty format the state
-    handleApplyCustomFilter()
-  };
+  // const handlePrintState = () => {
+  //   // setPrintedState(JSON.stringify(filterRules, null, 2)); // Pretty format the state
+  //   transformFilterRules(filterRules)
+  // };
 
 
 
@@ -449,7 +448,7 @@ const FilterComponent = ({ viewData, fields, filterRules, setFilterRules, handle
       </div>
 
       <div className='text-center'>
-        <Button label="Apply" size="small" onClick={handlePrintState} type="submit" className="small-button" />
+        <Button label="Apply" size="small" onClick={() => transformFilterRules(filterRules)} type="submit" className="small-button" />
 
         <br></br>
         <textarea value={printedState} readOnly rows={20} cols={100} style={{ marginTop: '20px' }} />

package/src/components/core/common/SolidGlobalSearchElement.tsx

@@ -1,20 +1,153 @@
-import { useEffect, useRef, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { Dialog } from "primereact/dialog";
 import { TabPanel, TabView } from "primereact/tabview";
 import { SolidSearchBox } from "./SolidSearchBox";
-import FilterComponent from "@/components/core/common/FilterComponent";
+import FilterComponent, { FilterOperator, FilterRule, FilterRuleType } from "@/components/core/common/FilterComponent";
 import { Button } from "primereact/button";
 import { InputText } from "primereact/inputtext";
 import { OverlayPanel } from "primereact/overlaypanel";
 import { Divider } from "primereact/divider";
 
 
-export const SolidGlobalSearchElement = ({ viewData, applyFilter, showGlobalSearchElement, setShowGlobalSearchElement,customFilter, setCustomFilter,handleApplyCustomFilter }: any) => {
 
-    const handleApplyFilter = (filters: any) => {
-        setShowGlobalSearchElement(false);
-        applyFilter(filters)
+const getRandomInt = (min: number, max: number) => {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+const transformRulesToFilters = (input: any) => {
+
+    // Helper function to process individual rules
+    const processRule = (rule: any) => {
+        if (rule.value && rule.value.length > 0) {
+
+            // Ensure rule.value is always an array
+            let values = typeof rule.value[0] === "object" ? rule.value.map((i: any) => i.value) : rule.value;
+            if (rule.matchMode !== '$in' && rule.matchMode !== '$notIn' && rule.matchMode !== '$between') {
+                values = values[0];
+            }
+            // Rule transformation
+            let transformedRule = {
+                [rule.fieldName]: {
+                    [rule.matchMode]: values    // Assuming `value` is always an array with `value` and `label`
+                }
+            };
+
+            // If the rule has children (which means it's a rule group), process them
+            let processedFields;
+            if (rule.children && rule.children.length > 0) {
+                processedFields = rule.children.map((child: any) => processRuleGroup(child));
+            }
+            if (processedFields) {
+                return { ...transformedRule, processedFields }
+            }
+            return { ...transformedRule }
+        }
+
+    };
+
+    // Helper function to process rule groups
+    const processRuleGroup = (ruleGroup: any) => {
+        const operator = ruleGroup.matchOperator === 'or' ? '$or' : '$and';
+        const children = ruleGroup.children.map((child: any) => {
+            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 {
+            [operator]: children
+        };
+    };
+
+    // Start processing the root rule group
+    const filterObject = processRuleGroup(input);
+
+    function liftProcessedFields(filters: any) {
+        if (!filters || typeof filters !== 'object') return filters;
+
+        const processArray = (arr: any) => {
+            let newArr = [];
+            for (let obj of arr) {
+                if (obj && obj.processedFields) {
+                    let processed: any = processArray(obj.processedFields); // Recursively process nested processedFields
+                    delete obj.processedFields;
+                    newArr.push(obj, ...processed);
+                } else {
+                    newArr.push(obj);
+                }
+
+                for (let key in obj) {
+                    if (Array.isArray(obj[key])) {
+                        obj[key] = processArray(obj[key]);
+                    }
+                }
+            }
+            return newArr;
+        }
+
+        for (let key in filters) {
+            if (Array.isArray(filters[key])) {
+                filters[key] = processArray(filters[key]);
+            }
+        }
+
+        return filters;
     }
+    return liftProcessedFields(filterObject)
+
+}
+
+export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCustomFilter }: any, ref) => {
+
+    const initialState: FilterRule[] = [
+        {
+            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: []
+                }
+            ]
+        }
+    ];
+    const [filterRules, setFilterRules] = useState<FilterRule[]>(initialState);
+    const [showGlobalSearchElement, setShowGlobalSearchElement] = useState<boolean>(false);
+    const transformFilterRules = (filterRules: any) => {
+        const transformedFilter = transformRulesToFilters(filterRules[0]);
+        if (transformedFilter) {
+            handleApplyCustomFilter(transformedFilter)
+        }
+        setShowGlobalSearchElement(false)
+    }
+
+    useImperativeHandle(ref, () => ({
+        clearFilter: () => {
+            setFilterRules(initialState);
+        }
+    }));
+
+
 
     const [fields, setFields] = useState<any[]>([]);
 
@@ -44,12 +177,12 @@ export const SolidGlobalSearchElement = ({ viewData, applyFilter, showGlobalSear
                 />
             </div>
             <OverlayPanel ref={op} className="solid-custom-overlay" style={{ minWidth: 378 }}>
-            <div className="px-4 py-3">
+                <div className="px-4 py-3">
                     <p className="m-0">Searching...</p>
                 </div>
                 <Divider className="m-0" />
                 <div className="px-2 py-1">
-                    <Button text size="small" label="Custom Filter" iconPos="left" icon='pi pi-plus'  onClick={() => setShowGlobalSearchElement(true)}/>
+                    <Button text size="small" label="Custom Filter" iconPos="left" icon='pi pi-plus' onClick={() => setShowGlobalSearchElement(true)} />
                 </div>
             </OverlayPanel>
             <Dialog header={false} className="search-filter-popup" showHeader={false} visible={showGlobalSearchElement} style={{ width: '50vw' }} onHide={() => { if (!showGlobalSearchElement) return; setShowGlobalSearchElement(false); }}>
@@ -69,7 +202,7 @@ export const SolidGlobalSearchElement = ({ viewData, applyFilter, showGlobalSear
                         </TabPanel>
                         <TabPanel header="Filter" >
                             {fields.length > 0 &&
-                                <FilterComponent viewData={viewData} fields={fields} filterRules={customFilter} setFilterRules={setCustomFilter} handleApplyCustomFilter={handleApplyCustomFilter} ></FilterComponent>
+                                <FilterComponent viewData={viewData} fields={fields} filterRules={filterRules} setFilterRules={setFilterRules} transformFilterRules={transformFilterRules} ></FilterComponent>
                             }
                             {/* <SolidKanbanFilter solidKanbanViewMetaData={solidKanbanViewMetaData} handleApplyFilter={handleApplyFilter} filterValues={filterValues} setFilterValues={setFilterValues}></SolidKanbanFilter> */}
                         </TabPanel>
@@ -79,4 +212,4 @@ export const SolidGlobalSearchElement = ({ viewData, applyFilter, showGlobalSear
         </div>
     )
 
-}
+});

package/src/components/core/filter/fields/SolidSelectionDynamicField.tsx

@@ -29,7 +29,7 @@ const SolidSelectionDynamicField = ({ fieldMetadata, onChange, index, rule }: So
                 values={rule.value}
                 onChange={(e: any) => {
                     console.log("e", e);
-                    onChange(rule.id, 'value', e.map((i: any) => i.value))
+                    onChange(rule.id, 'value', e)  
                 }}
                 numberOfInputs={numberOfInputs}
                 inputType={InputTypes.SelectionDynamic}

package/src/components/core/filter/fields/SolidSelectionStaticField.tsx

@@ -31,8 +31,7 @@ const SolidSelectionStaticField = ({ fieldMetadata, onChange, index, rule }: Sol
             <SolidVarInputsFilterElement
                 values={rule.value}
                 onChange={(e: any) => {
-                    console.log("e", e);
-                    onChange(rule.id, 'value', e.value)
+                    onChange(rule.id, 'value', e)
                 }}
                 numberOfInputs={numberOfInputs}
                 inputType={InputTypes.SelectionStatic}

package/src/components/core/filter/fields/SolidShortTextField.tsx

@@ -36,7 +36,6 @@ const SolidShortTextField = ({ fieldMetadata, onChange, index, rule }: SolidFilt
             <SolidVarInputsFilterElement
                 values={rule.value}
                 onChange={(e: any) => {
-                    console.log("e", e);
                     onChange(rule.id, 'value', e)
                 }}
                 numberOfInputs={numberOfInputs}

package/src/components/core/kanban/KanbanBoard.tsx

@@ -24,7 +24,7 @@ interface ApiResponse {
     };
 }
 
-export const KanbanBoard = ({ kanbanViewData, solidViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd,handleSwimLinPagination }: any) => {
+export const KanbanBoard = ({ kanbanViewData, solidViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd, handleSwimLinPagination }: any) => {
     const [loading, setLoading] = useState<boolean>(true);
     // State to manage the folded status of each column
     const [foldedStates, setFoldedStates] = useState<Record<string, boolean>>({});
@@ -94,6 +94,8 @@ export const KanbanBoard = ({ kanbanViewData, solidViewMetaData, setKanbanViewDa
                     const group = {
                         label: data.groupName,
                         count: data.groupData.meta.totalRecords,
+                        limit: data.groupData.meta.perPage,
+                        currentPage: data.groupData.meta.currentPage,
                         folded: foldedStates[data.groupName] || false,
                     };
 

package/src/components/core/kanban/KanbanColumn.tsx

@@ -2,16 +2,19 @@
 'use client';
 
 
+import React, { useRef } from "react";
 import { Droppable, DroppableProvided } from "@hello-pangea/dnd";
-import { OverlayPanel } from "primereact/overlaypanel";
-import { useRef } from "react";
+import { Button } from "primereact/button";
 import KanbanCard from "./KanbanCard";
+import { OverlayPanel } from "primereact/overlaypanel";
 
 // Define types for props
 interface Group {
   label: string;
   count: number;
   folded: boolean;
+  limit: number;
+  currentPage: number;
 }
 
 interface GroupData {
@@ -28,9 +31,10 @@ interface KanbanColumnProps {
   handleLoadMore: (groupByField: string) => void;
 }
 
-const KanbanColumn = ({ groupByField, solidViewMetaData,group, groupData, toggleFold, handleLoadMore }: KanbanColumnProps) => {
+const KanbanColumn = ({ groupByField, solidViewMetaData, group, groupData, toggleFold, handleLoadMore }: KanbanColumnProps) => {
   const op = useRef<any>(null);
 
+
   return (
     <div className={group.folded ? "kanban-column kanban-column-folded" : "kanban-column"}>
       <div className="kaban-heading-area">
@@ -107,12 +111,14 @@ const KanbanColumn = ({ groupByField, solidViewMetaData,group, groupData, toggle
                 <KanbanCard key={data.id} data={data} solidViewMetaData={solidViewMetaData} index={index} />
               ))}
               {provided.placeholder}
-              <a
-              className="load-more-button"
-                onClick={() => handleLoadMore(groupByField)}
-              >
-                Load more data...
-              </a>
+              {group.count > 0 &&
+                <a
+                  className="load-more-button"
+                  onClick={() => handleLoadMore(groupByField)}
+                >
+                  Load more data... ({group.count - (group.limit * group.currentPage)} remaining)
+                </a>
+              }
             </div>
           )}
         </Droppable>

package/src/components/core/kanban/SolidKanbanView.tsx

@@ -7,13 +7,11 @@ import { DropResult } from "@hello-pangea/dnd";
 import Link from "next/link";
 import { FilterMatchMode } from "primereact/api";
 import { Button } from "primereact/button";
-import {
-  DataTableFilterMeta
-} from "primereact/datatable";
 import { Dialog } from "primereact/dialog";
 import qs from "qs";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { SolidCreateButton } from "../common/SolidCreateButton";
+import { SolidGlobalSearchElement } from "../common/SolidGlobalSearchElement";
 import KanbanBoard from "./KanbanBoard";
 
 type SolidKanbanViewParams = {
@@ -22,12 +20,15 @@ type SolidKanbanViewParams = {
   embeded: boolean;
 };
 
+
 export const SolidKanbanView = (params: SolidKanbanViewParams) => {
+  const solidGlobalSearchElementRef = useRef();
 
   // TODO: The initial filter state will be created based on the fields which are present on this kanban view. 
-  const [filters, setFilters] = useState<DataTableFilterMeta>({});
+  const [filters, setFilters] = useState<any>();
   const [toPopulate, setToPopulate] = useState<string[]>([]);
   const [actionsAllowed, setActionsAllowed] = useState<string[]>([]);
+  const [showGlobalSearchElement, setShowGlobalSearchElement] = useState<boolean>(false);
 
   const [triggerCheckIfPermissionExists] = useLazyCheckIfPermissionExistsQuery();
   useEffect(() => {
@@ -52,9 +53,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
     fetchPermissions();
   }, [params.modelName]);
 
-  const isFilterApplied = Object.values(filters).some(
-    (filter: any) => filter?.value && filter.value.length > 0
-  );
+  const isFilterApplied = filters ? true : false;
 
   // Create the RTK slices for this entity
   const entityApi = createSolidEntityApi(params.modelName);
@@ -137,8 +136,8 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
         toPopulate.push(fieldMetadata.name);
       }
     }
-    setFilters(initialFilters);
-    setRows(kanbanViewMetaData?.data?.solidView?.layout?.attrs?.defaultPageSize ? kanbanViewMetaData?.data?.solidView?.layout?.attrs.defaultPageSize : 25)
+    // setFilters(initialFilters);
+    setRows(kanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsCount ? kanbanViewMetaData?.data?.solidView?.layout?.attrs.recordsCount : 25)
     setToPopulate(toPopulate);
   }
 
@@ -167,9 +166,6 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
   const [columnsCount, setColumnsCount] = useState(5);
   const [swimLaneCurrentPageNumber, setSwimLaneCurrentPageNumber] = useState(1);
 
-  console.log("kanbanViewData", kanbanViewData);
-
-
   // Get the kanban view data.
   // const [triggerGetSolidEntitiesForKanban, { data: solidEntityKanbanViewData, isLoading, error }] = useLazyGetSolidKanbanEntitiesQuery();
   const [triggerGetSolidEntities, { data: solidEntityKanbanViewData, isLoading, error }] = useLazyGetSolidEntitiesQuery();
@@ -178,9 +174,9 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
   // After data is fetched populate the kanban view state so as to be able to render the data. 
   useEffect(() => {
     if (solidEntityKanbanViewData) {
-
-      setKanbanViewData(solidEntityKanbanViewData?.groupRecords);
-      const loadmoredata = Object.entries(solidEntityKanbanViewData?.groupRecords).reduce((acc: any, [key, value]: any) => {
+      const latestKanbanGroupData = [...kanbanViewData, ...solidEntityKanbanViewData?.groupRecords]
+      setKanbanViewData(latestKanbanGroupData);
+      const loadmoredata = Object.entries(latestKanbanGroupData).reduce((acc: any, [key, value]: any) => {
         acc[value.groupName] = {
           offset: (value.groupData.meta.currentPage - 1) * value.groupData.meta.perPage,
           limit: value.groupData.meta.perPage,
@@ -191,7 +187,6 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
 
       setKanbanLoadMoreData(loadmoredata)
       setLoading(false);
-
     }
   }, [solidEntityKanbanViewData]);
 
@@ -230,18 +225,19 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
     if (solidKanbanViewMetaData) {
       const groupByFieldName = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.groupBy;
       const columnsToLoadCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.pageSize || 5;
-      
+
       if (toPopulate) {
         const queryData = {
           offset: 0,
-          limit: 2,
+          limit: columnsToLoadCount,
           fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
           groupBy: groupByFieldName,
           populate: toPopulate,
           populateGroup: true,
           groupFilter: {
-            limit: rows,
-            offset: 0
+            limit: kanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsCount,
+            offset: 0,
+            filters:filters
           }
           // sort: [`id:desc`],
         };
@@ -261,13 +257,51 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
 
 
   // clear Filter
-  const clearFilter = () => {
+
+  const clearFilter = async() => {
     if (solidKanbanViewMetaData) {
-      initialFilterMethod()
+      // initialFilterMethod()
+    }
+    setFilters(null);
+    if (solidKanbanViewMetaData) {
+      const groupByFieldName = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.groupBy;
+      const columnsToLoadCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.pageSize || 5;
+
+      if (toPopulate) {
+        const queryData = {
+          offset: 0,
+          limit: columnsToLoadCount,
+          fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
+          groupBy: groupByFieldName,
+          populate: toPopulate,
+          populateGroup: true,
+          groupFilter: {
+            limit: rows,
+            offset: 0,
+          }
+          // sort: [`id:desc`],
+        };
+        // fields=status&groupBy=status&fields=count(status)&populateGroup=true
+        const queryString = qs.stringify(queryData, {
+          encodeValuesOnly: true
+        });
+
+        const data: any = await triggerGetSolidEntities(queryString);
+        if (data && data?.data?.groupRecords.length > 0) {
+          const updatedData = [...data.data.groupRecords];
+          setKanbanViewData(updatedData);
+        }
+        setSelectedRecords([]);
+      }
     }
+
+    // @ts-ignore
+    solidGlobalSearchElementRef.current.clearFilter()
   };
 
 
+
+
   // clickable link allowing one to open the detail / form view.
   const detailsBodyTemplate = (solidViewData: any) => {
     return (
@@ -316,7 +350,8 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
         filters: {
           [groupByFieldName]: {
             $in: [status],
-          }
+          },
+          ...filters
         }
       }
 
@@ -434,15 +469,16 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       const groupByFieldName = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.groupBy;
       const columnsToLoadCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.pageSize || 5;
       const queryData = {
-        offset: swimLaneCurrentPageNumber * 2,
-        limit: 2,
+        offset: swimLaneCurrentPageNumber * columnsToLoadCount,
+        limit: columnsToLoadCount,
         fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
         groupBy: groupByFieldName,
         populate: toPopulate,
         populateGroup: true,
         groupFilter: {
           limit: rows,
-          offset: 0
+          offset: 0,
+          filters: filters
         }
         // sort: [`id:desc`],
       };
@@ -452,7 +488,6 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       });
 
       const data: any = await triggerGetSolidEntities(queryString);
-      console.log("data", data);
       if (data && data?.data?.groupRecords.length > 0) {
         const updatedData = [...kanbanViewData, ...data.data.groupRecords];
         setKanbanViewData(updatedData);
@@ -461,6 +496,62 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
     }
   }
 
+  const handleApplyCustomFilter = async (filters: any) => {
+
+    const groupByFieldName = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.groupBy;
+    const columnsToLoadCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.pageSize || 5;
+    setFilters(filters)
+
+    if (toPopulate) {
+      const queryData = {
+        offset: 0,
+        limit: columnsToLoadCount,
+        fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
+        groupBy: groupByFieldName,
+        populate: toPopulate,
+        populateGroup: true,
+        groupFilter: {
+          limit: rows,
+          offset: 0,
+          filters: filters
+        }
+        // sort: [`id:desc`],
+      };
+      // fields=status&groupBy=status&fields=count(status)&populateGroup=true
+      const queryString = qs.stringify(queryData, {
+        encodeValuesOnly: true
+      });
+
+      // triggerGetSolidEntities(queryString);
+      const data: any = await triggerGetSolidEntities(queryString);
+      if (data && data?.data?.groupRecords.length > 0) {
+        const updatedData = [...data.data.groupRecords];
+        setKanbanViewData(updatedData);
+      }
+      setSelectedRecords([]);
+    }
+    // if (toPopulate) {
+    //   const queryData = {
+    //     offset: 0,
+    //     limit: 25,
+    //     populate: toPopulate,
+    //     sort: [`id:desc`],
+    //     filters: { ...transformedFilter.filters }
+    //   };
+    //   if (params.embeded) {
+
+    //   }
+    //   const queryString = qs.stringify(queryData, {
+    //     encodeValuesOnly: true
+    //   });
+
+    //   triggerGetSolidEntities(queryString);
+    //   // setShowGlobalSearchElement(false)
+    //   setSelectedRecords([]);
+    // }
+  }
+
+
 
   return (
     <>
@@ -491,9 +582,11 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
             />
           }
 
-          {/* {solidKanbanViewMetaData?.data?.solidView?.layout?.attrs.enableGlobalSearch === true &&
-            // <SolidGlobalSearchElement solidKanbanViewMetaData={solidKanbanViewMetaData} applyFilter={applyFilter} filterValues={filterValues} setFilterValues={setFilterValues}></SolidGlobalSearchElement>
-          } */}
+          {solidKanbanViewMetaData?.data?.solidView?.layout?.attrs.enableGlobalSearch === true &&
+            // <SolidGlobalSearchElement viewData={solidKanbanViewMetaData} handleApplyCustomFilter={handleApplyCustomFilter} ></SolidGlobalSearchElement>
+            <SolidGlobalSearchElement ref={solidGlobalSearchElementRef} viewData={solidKanbanViewMetaData} handleApplyCustomFilter={handleApplyCustomFilter}  ></SolidGlobalSearchElement>
+
+          }
         </div>
 
         {/* <SolidConfigureLayoutElement></SolidConfigureLayoutElement> */}