@solidstarters/solid-core-ui 1.0.2 → 1.1.1

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

@@ -0,0 +1,87 @@
+'use client';
+import { Button } from 'primereact/button';
+import { OverlayPanel } from 'primereact/overlaypanel';
+import { RadioButton } from 'primereact/radiobutton';
+import { useRef } from 'react';
+interface Props {
+    sizeOptions: { label: string; value: string, image: string }[];
+    setSize: (value: string) => void;
+    size: string;
+    viewModes: { label: string; value: string, image: string }[];
+    setView: (value: string) => void;
+    view: string;
+}
+export const SolidLayoutViews = ({ sizeOptions, setSize, size, viewModes, setView, view }: Props) => {
+    const op = useRef(null);
+
+    return (
+        <div className="position-relative">
+            <Button
+                type="button"
+                size='small'
+                severity='secondary'
+                icon={
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
+                        <path d="M14.9016 13.1969L10.8031 9.09845L14.9016 5L19 9.09845L14.9016 13.1969ZM5 11.7461V5.94301H10.8031V11.7461H5ZM12.2539 19V13.1969H18.057V19H12.2539ZM5 19V13.1969H10.8031V19H5ZM6.45078 10.2953H9.35233V7.39378H6.45078V10.2953ZM14.9197 11.1658L16.9689 9.11658L14.9197 7.06736L12.8705 9.11658L14.9197 11.1658ZM13.7047 17.5492H16.6062V14.6477H13.7047V17.5492ZM6.45078 17.5492H9.35233V14.6477H6.45078V17.5492Z" fill="#4B4D52" />
+                    </svg>
+                }
+                className='custom-icon-button'
+                outlined
+                // @ts-ignore
+                onClick={(e) => op.current.toggle(e)}
+            />
+            <OverlayPanel ref={op} className='solid-header-dropdown-panel'>
+                <div className='secondary-border-bottom p-1'>
+                    <p className='px-3 pt-2'>Density</p>
+                    <div className="flex flex-column gap-1">
+                        {sizeOptions.map((option) => (
+                            <div key={option.value} className={`flex align-items-center ${option.value === size ? 'solid-active-view' : 'solid-view'}`}>
+                                <RadioButton
+                                    inputId={option.value}
+                                    name="sizes"
+                                    value={option.value}
+                                    onChange={(e) => setSize(e.value)}
+                                    checked={option.value === size}
+                                />
+                                <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
+                                    {option.label}
+                                    <img
+                                        src={option.image}
+                                        alt={option.value}
+                                        className='img-fluid position-relative'
+                                        style={{ width: '2.75rem' }}
+                                    />
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+                <div className='p-1'>
+                    <p className='px-3 pt-2'>View Mode</p>
+                    <div className="flex flex-column gap-1">
+                        {viewModes.map((option) => (
+                            <div key={option.value} className={`flex align-items-center ${option.value === view ? 'solid-active-view' : 'solid-view'}`}>
+                                <RadioButton
+                                    inputId={option.value}
+                                    name="views"
+                                    value={option.value}
+                                    onChange={(e) => setView(e.value)}
+                                    checked={option.value === view}
+                                />
+                                <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
+                                    {option.label}
+                                    <img
+                                        src={option.image}
+                                        alt={option.value}
+                                        className='img-fluid position-relative'
+                                        style={{ width: '2.75rem' }}
+                                    />
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </OverlayPanel>
+        </div>
+    );
+}

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

@@ -0,0 +1,31 @@
+'use client';
+import { Dialog } from "primereact/dialog";
+import { useState } from "react";
+
+
+export const SolidListViewOptions = ({ }: any) => {
+
+    const [visible, setVisible] = useState<boolean>(false);
+
+    const [componentsToRender, setComponentsToRender] = useState(["Header", "NonExistentComponent"]);
+
+    return (
+        <div className="card flex justify-content-center">
+            <i className="pi pi-cog" onClick={() => setVisible(true)}></i>
+
+            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>
+                <p className="m-0">
+                    ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+                <div>
+                   
+                </div>
+
+            </Dialog>
+        </div>
+    )
+
+}

package/src/components/core/filter/SolidManyToOneFilterElement.tsx

@@ -20,7 +20,7 @@ export const SolidManyToOneFilterElement = ({ value, updateInputs, index, fieldM
             limit: 10,
             filters: {
                 [fieldMetadata.relationModel.userKeyField.name]: {
-                    '"$containsi"': event.query
+                    $containsi: event.query
                 }
             }
         };

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

@@ -1,8 +1,9 @@
 // @ts-nocheck
-'use client';
+'use client'
 
-import { DragDropContext } from "@hello-pangea/dnd";
-import { useState } from "react";
+import React, { useState, useEffect } from "react";
+import { DragDropContext, DropResult } from "@hello-pangea/dnd";
+import axios from "axios";
 import KanbanColumn from "./KanbanColumn";
 
 // Define types for groupData and Grouped Data
@@ -23,7 +24,7 @@ interface ApiResponse {
     };
 }
 
-export const KanbanBoard = ({ kanbanViewData, solidViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd }: 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>>({});
@@ -108,6 +109,8 @@ export const KanbanBoard = ({ kanbanViewData, solidViewMetaData, setKanbanViewDa
                         />
                     );
                 })}
+                <div className="kanban-load-more-folded">
+                    <a className="kaban-load-more" onClick={handleSwimLinPagination}>load More</a></div>
             </div>
         </DragDropContext>
     );

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

@@ -8,15 +8,12 @@ import Link from "next/link";
 import { FilterMatchMode } from "primereact/api";
 import { Button } from "primereact/button";
 import {
-  DataTableFilterMeta,
-  DataTableStateEvent
+  DataTableFilterMeta
 } from "primereact/datatable";
 import { Dialog } from "primereact/dialog";
 import qs from "qs";
 import { useEffect, useState } from "react";
-import { SolidConfigureLayoutElement } from "../common/SolidConfigureLayoutElement";
 import { SolidCreateButton } from "../common/SolidCreateButton";
-import { SolidGlobalSearchElement } from "../common/SolidGlobalSearchElement";
 import KanbanBoard from "./KanbanBoard";
 
 type SolidKanbanViewParams = {
@@ -79,13 +76,13 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
   const kanbanViewMetaDataQs = qs.stringify({ ...params, viewType: 'kanban' }, {
     encodeValuesOnly: true,
   });
-  const [kanbanViewMetaData, setKanbanViewMetaData] = useState({});
+  const [kanbanViewMetaData, setKanbanViewMetaData] = useState<any>({});
+
   const {
     data: solidKanbanViewMetaData,
     error: solidKanbanViewMetaDataError,
     isLoading: solidKanbanViewMetaDataIsLoading,
-    isError: solidKanbanViewMetaDataIsError,
-    refetch
+    isError: solidKanbanViewMetaDataIsError
   } = useGetSolidViewLayoutQuery(kanbanViewMetaDataQs);
 
 
@@ -97,46 +94,58 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
 
     const initialFilters: any = {};
     const toPopulate: string[] = [];
-    // for (let i = 0; i < solidView.layout.children.length; i++) {
-    //   const column = solidView.layout.children[i];
-    //   const fieldMetadata = solidFieldsMetadata[column.attrs.name];
-
-    //   // Form the initial filters after iterating over the columns and field metadata. 
-    //   if (['int', 'bigint', 'float', 'decimal'].includes(fieldMetadata.type)) {
-    //     // initialFilters[column.attrs.name] = { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
-    //     initialFilters[column.attrs.name] = { value: null, matchMode: FilterMatchMode.EQUALS }
-    //   }
-    //   else if (['date', 'datetime', 'time', 'boolean'].includes(fieldMetadata.type)) {
-    //     // initialFilters[column.attrs.name] = { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] }
-    //     initialFilters[column.attrs.name] = { value: null, matchMode: FilterMatchMode.EQUALS }
-    //   }
-    //   else if (['relation', 'selectionStatic', 'selectionDynamic'].includes(fieldMetadata.type)) {
-    //     initialFilters[column.attrs.name] = { value: null, matchMode: FilterMatchMode.IN }
-    //   }
-    //   else {
-    //     // initialFilters[column.attrs.name] = { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] }
-    //     initialFilters[column.attrs.name] = { value: null, matchMode: FilterMatchMode.STARTS_WITH }
-    //   }
-
-    //   if (column.attrs.name === 'id') {
-    //     initialFilters[column.attrs.name] = { value: null, matchMode: FilterMatchMode.IN }
-    //   }
-
-    //   // Form the "toPopulate" array. 
-    //   if (fieldMetadata.type === 'relation' && fieldMetadata.relationType === 'many-to-one') {
-    //     toPopulate.push(fieldMetadata.name);
-    //   }
-    // }
+    function extractFields(node: any, result: any = []) {
+      if (node.type === "field") {
+        result.push(node);
+      }
+      if (node.children) {
+        node.children.forEach((child: any) => extractFields(child, result));
+      }
+      return result;
+    }
+
+    const data = { /* Your JSON object here */ };
+    const layoutFields = extractFields(solidView.layout);
+
+    for (let i = 0; i < layoutFields.length; i++) {
+      const column = layoutFields[i];
+      const fieldMetadata = solidFieldsMetadata[column.attrs.name];
+
+      // Form the initial filters after iterating over the columns and field metadata. 
+      if (['int', 'bigint', 'float', 'decimal'].includes(fieldMetadata.type)) {
+        // initialFilters[column.attrs.name] = { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
+        initialFilters[column.attrs.name] = { value: null, matchMode: FilterMatchMode.EQUALS }
+      }
+      else if (['date', 'datetime', 'time', 'boolean'].includes(fieldMetadata.type)) {
+        // initialFilters[column.attrs.name] = { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] }
+        initialFilters[column.attrs.name] = { value: null, matchMode: FilterMatchMode.EQUALS }
+      }
+      else if (['relation', 'selectionStatic', 'selectionDynamic'].includes(fieldMetadata.type)) {
+        initialFilters[column.attrs.name] = { value: null, matchMode: FilterMatchMode.IN }
+      }
+      else {
+        // initialFilters[column.attrs.name] = { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] }
+        initialFilters[column.attrs.name] = { value: null, matchMode: FilterMatchMode.STARTS_WITH }
+      }
+
+      if (column.attrs.name === 'id') {
+        initialFilters[column.attrs.name] = { value: null, matchMode: FilterMatchMode.IN }
+      }
+
+      // Form the "toPopulate" array. 
+      if (fieldMetadata.type === 'relation' && fieldMetadata.relationType === 'many-to-one') {
+        toPopulate.push(fieldMetadata.name);
+      }
+    }
     setFilters(initialFilters);
-    setRows(solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.defaultPageSize ? solidKanbanViewMetaData?.data?.solidView?.layout?.attrs.defaultPageSize : 25)
+    setRows(kanbanViewMetaData?.data?.solidView?.layout?.attrs?.defaultPageSize ? kanbanViewMetaData?.data?.solidView?.layout?.attrs.defaultPageSize : 25)
     setToPopulate(toPopulate);
   }
 
   useEffect(() => {
-    // refetch();
+
     if (solidKanbanViewMetaData) {
       setKanbanViewMetaData(solidKanbanViewMetaData);
-
       initialFilterMethod()
     }
   }, [solidKanbanViewMetaData]);
@@ -150,13 +159,16 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
   const [filterValues, setFilterValues] = useState([{ field: '', operator: '', value: '' }]);
   const [first, setFirst] = useState(0);
   const [rows, setRows] = useState(25);
-  const [sortField, setSortField] = useState("");
-  const [sortOrder, setSortOrder] = useState(0);
   const [selectedRecords, setSelectedRecords] = useState<any[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [isDialogVisible, setDialogVisible] = useState(false);
   const [createButtonUrl, setCreateButtonUrl] = useState<string>();
   const [editButtonUrl, setEditButtonUrl] = useState<string>();
+  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();
@@ -183,22 +195,6 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
     }
   }, [solidEntityKanbanViewData]);
 
-
-  useEffect(() => {
-    if (solidKanbanViewMetaData) {
-      const createActionUrl = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.createAction && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.type === "custom" ? solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.customComponent : "form/new";
-      const editActionUrl = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.editAction && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.type === "custom" ? solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.customComponent : "form";
-      if (createActionUrl) {
-        setCreateButtonUrl(createActionUrl)
-      }
-      if (editActionUrl) {
-        setEditButtonUrl(editActionUrl)
-      }
-    }
-  }, [solidKanbanViewMetaData])
-  console.log("solidKanbanViewMetaData", solidKanbanViewMetaData);
-
-
   // Delete mutation 
   const [
     deleteManySolidEntities,
@@ -213,10 +209,28 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
 
 
 
+
+
   // Fetch data after toPopulate has been populated...
   useEffect(() => {
+
+    if (solidKanbanViewMetaData) {
+      const createActionUrl = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.createAction && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.type === "custom" ? solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.customComponent : "form/new";
+      const editActionUrl = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.editAction && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.type === "custom" ? solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.customComponent : "form";
+      if (solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.pageSize) {
+        setColumnsCount(solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.pageSize)
+      }
+      if (createActionUrl) {
+        setCreateButtonUrl(createActionUrl)
+      }
+      if (editActionUrl) {
+        setEditButtonUrl(editActionUrl)
+      }
+    }
     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,
@@ -226,7 +240,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
           populate: toPopulate,
           populateGroup: true,
           groupFilter: {
-            limit: 100,
+            limit: rows,
             offset: 0
           }
           // sort: [`id:desc`],
@@ -243,182 +257,8 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
 
   }, [isDeleteSolidEntitiesSucess, toPopulate, solidKanbanViewMetaData]);
 
-  // Handle pagination event.
-  const onPageChange = (event: any) => {
-    setFirst(event.first);
-    setRows(event.rows);
-    setQueryString(event.first, event.rows, sortField, sortOrder, filters);
-  };
 
-  // Handle sort event.
-  const onSort = (event: DataTableStateEvent) => {
-    const { sortField, sortOrder } = event;
-    const validSortOrder = sortOrder === 1 || sortOrder === -1 ? sortOrder : 0;
-    setSortField(sortField);
-    setSortOrder(validSortOrder);
-    setFirst(0);
-    setQueryString(
-      0,
-      rows,
-      sortField,
-      sortOrder === 1 || sortOrder === -1 ? sortOrder : 0,
-      filters
-    );
-  };
-
-  // handle change in the records which are currently selected...
-  const onSelectionChange = (event: any) => {
-    const value = event.value;
-    setSelectedRecords(value);
-  };
-
-  const identifySolidOperatorAndValue = (primeReactMatchMode: FilterMatchMode, value: any): { operator: string, value: string | string[] | any[] } => {
-    // @ts-ignore
-    if (primeReactMatchMode.label && primeReactMatchMode.label === 'Not In') {
-      primeReactMatchMode = FilterMatchMode.NOT_IN;
-    }
-
-    // Default value, this might not be useful as the solid server might not support these match modes. 
-    let solidOperator = '';
-    let solidValue = value[0];
-
-    switch (primeReactMatchMode) {
-      case FilterMatchMode.STARTS_WITH:
-        solidOperator = "$startsWithi";
-        break;
-      case FilterMatchMode.CONTAINS:
-        solidOperator = "$containsi";
-        break;
-      case FilterMatchMode.NOT_CONTAINS:
-        solidOperator = "$notContains";
-        break;
-      case FilterMatchMode.ENDS_WITH:
-        solidOperator = "$endsWith";
-        break;
-      case FilterMatchMode.EQUALS:
-        solidOperator = "$eqi";
-        solidValue = value;
-        break;
-      case FilterMatchMode.NOT_EQUALS:
-        solidOperator = "$nei";
-        solidValue = value;
-        break;
-      case FilterMatchMode.IN:
-        solidOperator = "$in";
-        solidValue = value;
-        break;
-      case FilterMatchMode.NOT_IN:
-        solidOperator = "$notIn";
-        solidValue = value;
-        break;
-      case FilterMatchMode.LESS_THAN:
-        solidOperator = "$lt";
-        break;
-      case FilterMatchMode.LESS_THAN_OR_EQUAL_TO:
-        solidOperator = "$lte";
-        break;
-      case FilterMatchMode.GREATER_THAN:
-        solidOperator = "$gt";
-        break;
-      case FilterMatchMode.GREATER_THAN_OR_EQUAL_TO:
-        solidOperator = "$gte";
-        break;
-      case FilterMatchMode.BETWEEN:
-        solidOperator = "$between";
-        solidValue = value;
-        break;
-    }
-
-    return { operator: solidOperator, value: solidValue };
-
-  }
-
-  // Common utility function that gets called on filter, sort & pagination events. 
-  // This function creates the query string as per the solid backend API specification 
-  const setQueryString = async (
-    offset?: number,
-    limit?: number,
-    sortField?: string,
-    sortOrder?: number,
-    filterQuery?: any
-  ) => {
-
-    const formattedFilters: any = {};
-    const solidFieldsMetadata = solidKanbanViewMetaData.data.solidFieldsMetadata;
-
-    filterQuery.forEach((fieldData: any) => {
-
-      const filterFieldMeta = solidFieldsMetadata[fieldData.field];
-
-      // Some filters will not have constraints
-      if (!fieldData.constraints) {
-        if (fieldData.value != null) {
-          const { operator, value } = identifySolidOperatorAndValue(fieldData.operator, fieldData.value);
-
-          // Massage the filter value for relation many-to-one before sending to the server. 
-          if (filterFieldMeta.type === 'relation' && filterFieldMeta.relationType === 'many-to-one') {
-            // @ts-ignore
-            const manyToOneIds = value.map(i => i.value);
-            formattedFilters[fieldData.field] = { [operator]: manyToOneIds };
-          }
-          // Massage the filter value for selectionStatic before sending to the server. 
-          else if (['selectionStatic', 'selectionDynamic'].includes(filterFieldMeta.type)) {
-            // @ts-ignore
-            const values = value.map(i => i.value);
-            formattedFilters[fieldData.field] = { [operator]: values };
-          }
-          else {
-            formattedFilters[fieldData.field] = { [operator]: value };
-          }
-        }
-      }
-      // TODO: Incase we start supporting multiple constraints in the future then we need to implement an else block here. 
-      else { }
-
-    });
 
-    const groupByFieldName = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.groupBy;
-    const queryData: any = {
-      offset: offset ?? first,
-      limit: limit ?? rows,
-      populate: toPopulate,
-      fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
-      groupBy: groupByFieldName,
-      populateGroup: true,
-      filters: formattedFilters,
-    };
-
-    // if (sortField) {
-    //   const sortFieldMetadata = solidFieldsMetadata[sortField];
-    //   if (sortFieldMetadata.type === 'relation' && sortFieldMetadata.relationType === 'many-to-one') {
-    //     sortField = `${sortField}.${sortFieldMetadata.relationModel.userKeyField.name}`;
-    //   }
-    //   queryData.sort = [
-    //     `${sortField}:${sortOrder == 0 ? null : sortOrder == 1 ? "asc" : "desc"}`,
-    //   ];
-    // }
-    // else {
-    //   queryData.sort = [`id:desc`];
-    // }
-
-    const queryString = qs.stringify(queryData, {
-      encodeValuesOnly: true,
-    });
-
-    triggerGetSolidEntities(queryString);
-  };
-
-  // handle filter...
-  const onFilter = (e: any) => {
-    setFilters(e.filters);
-    setQueryString(
-      0,
-      rows,
-      sortField,
-      sortOrder === 1 || sortOrder === -1 ? sortOrder : 0,
-      e.filters
-    );
-  };
 
   // clear Filter
   const clearFilter = () => {
@@ -587,18 +427,40 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
     );
   };
 
-  const applyFilter = (filter: any) => {
-    setQueryString(
-      0,
-      rows,
-      sortField,
-      sortOrder === 1 || sortOrder === -1 ? sortOrder : 0,
-      filter
-    )
-    console.log("filter in kanbanview", filter);
+
+  const handleSwimLinPagination = async () => {
+
+    if (solidKanbanViewMetaData) {
+      const groupByFieldName = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.groupBy;
+      const columnsToLoadCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.pageSize || 5;
+      const queryData = {
+        offset: swimLaneCurrentPageNumber * 2,
+        limit: 2,
+        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);
+      console.log("data", data);
+      if (data && data?.data?.groupRecords.length > 0) {
+        const updatedData = [...kanbanViewData, ...data.data.groupRecords];
+        setKanbanViewData(updatedData);
+      }
+      setSwimLaneCurrentPageNumber(swimLaneCurrentPageNumber + 1)
+    }
   }
 
-  
 
   return (
     <>
@@ -629,17 +491,17 @@ 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 solidKanbanViewMetaData={solidKanbanViewMetaData} applyFilter={applyFilter} filterValues={filterValues} setFilterValues={setFilterValues}></SolidGlobalSearchElement>
+          } */}
         </div>
 
-        <SolidConfigureLayoutElement></SolidConfigureLayoutElement>
+        {/* <SolidConfigureLayoutElement></SolidConfigureLayoutElement> */}
 
       </div>
       <style>{`.p-datatable .p-datatable-loading-overlay {background-color: rgba(0, 0, 0, 0.0);}`}</style>
       {solidKanbanViewMetaData && kanbanViewData &&
-        <KanbanBoard kanbanViewData={kanbanViewData} solidViewMetaData={solidKanbanViewMetaData?.data} setKanbanViewData={setKanbanViewData} handleLoadMore={handleLoadMore} onDragEnd={onDragEnd}></KanbanBoard>
+        <KanbanBoard kanbanViewData={kanbanViewData} solidViewMetaData={solidKanbanViewMetaData?.data} setKanbanViewData={setKanbanViewData} handleLoadMore={handleLoadMore} onDragEnd={onDragEnd} handleSwimLinPagination={handleSwimLinPagination}></KanbanBoard>
       }
 
       <Dialog