@solidstarters/solid-core-ui 1.1.73 → 1.1.75

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

@@ -1,803 +0,0 @@
-// @ts-nocheck
-
-"use client";
-import { createPermission, deletePermission, updatePermission } from "@/helpers/permissions";
-import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
-import { useGetSolidViewLayoutQuery } from "@/redux/api/solidViewApi";
-import { useLazyCheckIfPermissionExistsQuery } from "@/redux/api/userApi";
-import { DropResult } from "@hello-pangea/dnd";
-import Link from "next/link";
-import { FilterMatchMode } from "primereact/api";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import qs from "qs";
-import { useEffect, useRef, useState } from "react";
-import { SolidCreateButton } from "../common/SolidCreateButton";
-import { SolidGlobalSearchElement } from "../common/SolidGlobalSearchElement";
-import KanbanBoard from "./KanbanBoard";
-import CompactImage from '../../../resources/images/layout/images/compact.png';
-import CozyImage from '../../../resources/images/layout/images/cozy.png';
-import ComfortableImage from '../../../resources/images/layout/images/comfortable.png';
-import ListImage from '../../../resources/images/layout/images/cozy.png';
-import KanbanImage from '../../../resources/images/layout/images/kanban.png';
-import { capitalize } from "lodash";
-import Lightbox from "yet-another-react-lightbox";
-import Counter from "yet-another-react-lightbox/plugins/counter";
-import Download from "yet-another-react-lightbox/plugins/download";
-import "yet-another-react-lightbox/styles.css";
-import "yet-another-react-lightbox/plugins/counter.css";
-import { useRouter, useSearchParams } from "next/navigation";
-import { SolidKanbanViewConfigure } from "./SolidKanbanViewConfigure";
-import { KanbanUserViewLayout } from "./KanbanUserViewLayout";
-import { useSelector } from "react-redux";
-import { queryObjectToQueryString, queryStringToQueryObject } from "../list/SolidListView";
-
-
-import { Toast } from "primereact/toast";
-import { useSelector } from "react-redux";
-import { queryObjectToQueryString, queryStringToQueryObject } from "../list/SolidListView";
-
-
-
-type SolidKanbanViewParams = {
-  moduleName: string;
-  modelName: string;
-  embeded: boolean;
-};
-
-
-export const SolidKanbanView = (params: SolidKanbanViewParams) => {
-  const { user } = useSelector((state: any) => state.auth);
-
-  const solidGlobalSearchElementRef = useRef();
-  const searchParams = useSearchParams().toString(); // Converts the query params to a string
-  const router = useRouter();
-  // TODO: The initial filter state will be created based on the fields which are present on this kanban view. 
-  const [filters, setFilters] = useState<any>();
-  const [toPopulate, setToPopulate] = useState<string[]>([]);
-  const [toPopulateMedia, setToPopulateMedia] = useState<string[]>([]);
-  const [actionsAllowed, setActionsAllowed] = useState<string[]>([]);
-  const [showGlobalSearchElement, setShowGlobalSearchElement] = useState<boolean>(false);
-  const [showArchived, setShowArchived] = useState(false);
-  const sizeOptions = [
-    { label: 'Compact', value: 'small', image: CompactImage },
-    { label: 'Cozy', value: 'normal', image: CozyImage },
-    { label: 'Comfortable', value: 'large', image: ComfortableImage }
-  ]
-  const [size, setSize] = useState<string | any>(sizeOptions[1].value);
-  const [viewModes, setViewModes] = useState<any>([]);
-  const [groupByFieldName, setGroupByFieldName] = useState<string>("");
-  const [groupedView, setGroupedView] = useState(true);
-  const [triggerCheckIfPermissionExists] = useLazyCheckIfPermissionExistsQuery();
-  const [openLightbox, setOpenLightbox] = useState(false);
-  const [lightboxUrls, setLightboxUrls] = useState({});
-  const [filterQueryString, setFilterQueryString] = useState<any>();
-  const [isLayoutDialogVisible, setLayoutDialogVisible] = useState(false);
-  const toast = useRef<Toast>(null);
-
-  const pushFiltersToRouter = (filterQueryString: any) => {
-    router.push(`?${filterQueryString}`, undefined, { shallow: true });
-  };
-
-  useEffect(() => {
-    if (filterQueryString) {
-      pushFiltersToRouter(filterQueryString);
-    }
-  }, [filterQueryString]);
-
-
-
-  useEffect(() => {
-    const fetchPermissions = async () => {
-      if (params.modelName) {
-        const permissionNames = [
-          createPermission(params.modelName),
-          deletePermission(params.modelName),
-          updatePermission(params.modelName)
-        ]
-        const queryData = {
-          permissionNames: permissionNames
-        };
-        const queryString = qs.stringify(queryData, {
-          encodeValuesOnly: true
-        });
-        const response = await triggerCheckIfPermissionExists(queryString);
-        setActionsAllowed(response.data.data);
-      }
-    };
-    fetchPermissions();
-  }, [params.modelName]);
-
-  const isFilterApplied = filters ? true : false;
-
-  // Create the RTK slices for this entity
-  const entityApi = createSolidEntityApi(params.modelName);
-  const {
-    useCreateSolidEntityMutation,
-    useDeleteMultipleSolidEntitiesMutation,
-    useDeleteSolidEntityMutation,
-    useGetSolidEntitiesQuery,
-    useGetSolidEntityByIdQuery,
-    useLazyGetSolidEntitiesQuery,
-    useGetSolidKanbanEntitiesQuery,
-    useLazyGetSolidKanbanEntitiesQuery,
-    useLazyGetSolidEntityByIdQuery,
-    usePrefetch,
-    useUpdateSolidEntityMutation,
-    usePatchUpdateSolidEntityMutation
-  } = entityApi;
-
-  // Get the kanban view layout & metadata first. 
-  const kanbanViewMetaDataQs = qs.stringify({ ...params, viewType: 'kanban' }, {
-    encodeValuesOnly: true,
-  });
-  const [kanbanViewMetaData, setKanbanViewMetaData] = useState<any>({});
-
-  const {
-    data: solidKanbanViewMetaData,
-    error: solidKanbanViewMetaDataError,
-    isLoading: solidKanbanViewMetaDataIsLoading,
-    isError: solidKanbanViewMetaDataIsError
-  } = useGetSolidViewLayoutQuery(kanbanViewMetaDataQs);
-
-
-
-  const initialFilterMethod = () => {
-
-    const solidView = solidKanbanViewMetaData.data.solidView;
-    const solidFieldsMetadata = solidKanbanViewMetaData.data.solidFieldsMetadata;
-
-    const initialFilters: any = {};
-    const toPopulate: string[] = [];
-    const toPopulateMedia: string[] = [];
-    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);
-      }
-      if (fieldMetadata.type === 'mediaSingle' || fieldMetadata.type === 'mediaMultiple') {
-        toPopulateMedia.push(fieldMetadata.name);
-      }
-    }
-    // setFilters(initialFilters);
-    const recordsInSwimlane = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsInSwimlane ? solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsInSwimlane : 25;
-    // setToPopulate(toPopulate);
-    // setToPopulateMedia(toPopulateMedia);
-    setRecordsInSwimlane(recordsInSwimlane);
-    setToPopulate(toPopulate);
-    setToPopulateMedia(toPopulateMedia);
-    return { recordsInSwimlane, toPopulate, toPopulateMedia }
-  }
-
-
-  // Initial Filter data 
-  useEffect(() => {
-
-    if (solidKanbanViewMetaData) {
-      setKanbanViewMetaData(solidKanbanViewMetaData);
-      // initialFilterMethod();
-      const viewModes = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.length > 0 && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.map((view: any) => { return { label: capitalize(view), value: view } });
-      setViewModes(viewModes);
-      if (solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.grouped !== false) {
-        setGroupByFieldName(solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.groupBy)
-      } else {
-        setGroupByFieldName("deletedTracker");
-        setGroupedView(false);
-      }
-    }
-  }, [solidKanbanViewMetaData]);
-
-  // All kanban view state.
-  const [kanbanViewData, setKanbanViewData] = useState<any>([]);
-  const [kanbanLoadMoreData, setKanbanLoadMoreData] = useState<any>({});
-  const [recordsInSwimlane, setRecordsInSwimlane] = useState(25);
-  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);
-  const [queryDataLoaded, setQueryDataLoaded] = useState(false);
-  const [showSaveFilterPopup, setShowSaveFilterPopup] = useState<boolean>(false);
-
-
-  const showToast = (severity: "success" | "error", summary: string, detail: string) => {
-    toast.current?.show({
-      severity,
-      summary,
-      detail,
-      life: 3000,
-    });
-  };
-  // Get the kanban view data.
-  // const [triggerGetSolidEntitiesForKanban, { data: solidEntityKanbanViewData, isLoading, error }] = useLazyGetSolidKanbanEntitiesQuery();
-  const [triggerGetSolidEntities, { data: solidEntityKanbanViewData, isLoading, error }] = useLazyGetSolidEntitiesQuery();
-
-  // Delete mutation 
-  const [
-    deleteManySolidEntities,
-    {
-      isLoading: isSolidEntitiesDeleted,
-      isSuccess: isDeleteSolidEntitiesSucess,
-      isError: isSolidEntitiesDeleteError,
-      error: SolidEntitiesDeleteError,
-      data: DeletedSolidEntities,
-    },
-  ] = useDeleteMultipleSolidEntitiesMutation();
-  const [
-    patchKanbanView,
-    { isSuccess: isKanbanUpdateSuccessfull, isError: isKanbanUpdateError, error: kanbanUpdateError },
-  ] = usePatchUpdateSolidEntityMutation();
-
-  // After data is fetched populate the kanban view state so as to be able to render the data. 
-  useEffect(() => {
-    if (solidEntityKanbanViewData) {
-      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,
-          count: value.groupData.meta.totalRecords
-        };
-        return acc;
-      }, {});
-
-      setKanbanLoadMoreData(loadmoredata)
-      setLoading(false);
-    }
-  }, [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])
-
-  // Fetch data after toPopulate has been populated...
-  useEffect(() => {
-
-    if (solidKanbanViewMetaData) {
-
-      const swimlanesCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount || 5;
-      if (groupByFieldName && (toPopulate || toPopulateMedia)) {
-
-        const queryObject = queryStringToQueryObject();
-        let queryString = "";
-        if (searchParams) {
-
-          // Get Object from Url
-          const queryObject = qs.parse(searchParams,
-            {
-              decoder: str => decodeURIComponent(str),
-              allowDots: true,
-            }
-          );
-
-          const filters = {
-            $and: []
-          }
-          if (queryObject.s_filter) {
-            filters.$and.push(queryObject.s_filter);
-          }
-          if (queryObject.c_filter) {
-            filters.$and.push(queryObject.c_filter);
-          }
-
-          const queryData = {
-            offset: 0,
-            limit: Number(queryObject.limit) + Number(queryObject.offset),
-            fields: queryObject.fields || [`${groupByFieldName}`, `count(${groupByFieldName})`],
-            groupBy: queryObject.groupBy || groupByFieldName,
-            populateMedia: queryObject.populateMedia || toPopulateMedia,
-            populateGroup: queryObject.populateGroup || true,
-            groupFilter: {
-              limit: Number(queryObject.groupFilter.limit) + Number(queryObject.groupFilter.offset) || kanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsInSwimlane,
-              offset: 0,
-              filters: filters,
-              populate: queryObject.groupFilter.populate || toPopulate,
-              populateMedia: queryObject.groupFilter.populateMedia || toPopulateMedia
-            }
-            // sort: [`id:desc`],
-          };
-
-          setRecordsInSwimlane(queryData.limit);
-          setToPopulate(queryData.populate);
-          setToPopulateMedia(queryData.populateMedia);
-          setFilters(filters);
-          setQueryDataLoaded(true);
-
-          queryString = qs.stringify(queryData, {
-            encodeValuesOnly: true
-          });
-
-
-        } else {
-          const { recordsInSwimlane, toPopulate, toPopulateMedia } = initialFilterMethod();
-          const queryData = {
-            offset: 0,
-            limit: swimlanesCount,
-            fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
-            groupBy: groupByFieldName,
-            populateMedia: toPopulateMedia,
-            populateGroup: true,
-            groupFilter: {
-              limit: kanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsInSwimlane || 10,
-              offset: 0,
-              filters: filters,
-              populate: toPopulate,
-              populateMedia: toPopulateMedia
-            }
-            // sort: [`id:desc`],
-          };
-          setRecordsInSwimlane(recordsInSwimlane);
-          setToPopulate(toPopulate);
-          setToPopulateMedia(toPopulateMedia);
-
-          // fields=status&groupBy=status&fields=count(status)&populateGroup=true
-          queryString = qs.stringify(queryData, {
-            encodeValuesOnly: true
-          });
-
-          setQueryDataLoaded(true)
-        }
-
-        triggerGetSolidEntities(queryString);
-        setSelectedRecords([]);
-      }
-    }
-  }, [isDeleteSolidEntitiesSucess, groupByFieldName, solidKanbanViewMetaData]);
-
-
-  // clickable link allowing one to open the detail / form view.
-  const detailsBodyTemplate = (solidViewData: any) => {
-    return (
-      <Link href={`${editButtonUrl}/${solidViewData.id}`} rel="noopener noreferrer" className="text-sm font-bold p-0" style={{ color: "#12415D" }}>
-        <i className="pi pi-pencil" style={{ fontSize: "1rem" }}></i>
-      </Link>
-    );
-  };
-
-  // handle bulk deletion
-  const deleteBulk = () => {
-    let deleteList: any = [];
-    selectedRecords.forEach((element: any) => {
-      deleteList.push(element.id);
-    });
-    console.log(deleteList);
-    deleteManySolidEntities(deleteList);
-    setDialogVisible(false);
-  };
-
-  // handle closing of the delete dialog...
-  const onDeleteClose = () => {
-    setDialogVisible(false);
-    setSelectedRecords([]);
-  }
-
-  const handleLoadMore = async (groupByField: string) => {
-    const { offset, limit, records } = kanbanLoadMoreData[groupByField];
-    const newLoadMoreData = kanbanLoadMoreData;
-    kanbanLoadMoreData[groupByField].offset = offset + limit;
-    try {
-      const queryData = {
-        offset: offset + limit,
-        limit: limit,
-        populate: toPopulate,
-        populateMedia: toPopulateMedia,
-        populateGroup: true,
-        filters: {
-          [groupByFieldName]: {
-            $in: [groupByField],
-          },
-          ...filters
-        }
-      }
-
-
-      const queryString = qs.stringify(queryData, {
-        encodeValuesOnly: true
-      });
-      // router.push(`?${queryString}`);
-      const data: any = await triggerGetSolidEntities(queryString);
-      const newRecords = data.data.records;
-      const currentData = kanbanViewData;
-      const mergeData = (
-        kanbanViewData: any[],
-        newRecords: any[],
-        groupByField: string
-      ) => {
-        // Find the group matching the specified groupByField
-        const originalData = structuredClone(kanbanViewData);
-        const targetGroup = originalData.find(
-          (group: any) => group.groupName === groupByField
-        );
-        if (targetGroup) {
-          const { groupData } = targetGroup;
-
-          if (targetGroup.groupData) {
-            // Extract existing records
-            const existingRecords = targetGroup.groupData.records;
-            const updatedRecords = [...existingRecords, ...newRecords];
-            targetGroup.groupData.records = updatedRecords
-
-
-            // Update the meta data (you can adjust this logic as needed)
-            groupData.meta.prevPage = groupData.meta.currentPage
-            groupData.meta.currentPage = groupData.meta.currentPage + 1
-            groupData.meta.nextPage = groupData.meta.currentPage + 1
-          }
-        }
-        return originalData;
-      };
-
-
-      const updatedData = mergeData(kanbanViewData, newRecords, groupByField);
-      setKanbanViewData(updatedData);
-      const loadmoredata = Object.entries(updatedData).reduce((acc: any, [key, value]: any) => {
-        acc[value.groupName] = {
-          offset: (value.groupData.meta.currentPage - 1) * value.groupData.meta.perPage,
-          limit: value.groupData.meta.perPage,
-          count: value.groupData.meta.totalRecords
-        };
-        return acc;
-      }, {});
-      setKanbanLoadMoreData(loadmoredata)
-
-    } catch (error) {
-      console.error("Failed to load more data:", error);
-    }
-  };
-
-
-  // Handle drag-and-drop functionality
-  const onDragEnd = async (result: DropResult): void => {
-    const { source, destination } = result;
-    if (!destination) return;
-
-    const sourceGroupName = source.droppableId;
-    const destinationGroupName = destination.droppableId;
-
-    // Find the source and destination groups
-    const sourceGroupIndex = kanbanViewData.findIndex((group: any) => group.groupName === sourceGroupName);
-    const destinationGroupIndex = kanbanViewData.findIndex((group: any) => group.groupName === destinationGroupName);
-
-    if (sourceGroupIndex === -1 || destinationGroupIndex === -1) return;
-
-    // If dragging within the same group
-    if (sourceGroupName === destinationGroupName) {
-      setKanbanViewData((prevData: typeof kanbanViewData) =>
-        prevData.map((group: any) => {
-          if (group.groupName === sourceGroupName) {
-            const updatedRecords = [...group.groupData.records];
-            const [movedItem] = updatedRecords.splice(source.index, 1); // Remove the item
-            updatedRecords.splice(destination.index, 0, movedItem); // Insert at the new position
-
-            return {
-              ...group,
-              groupData: {
-                ...group.groupData,
-                records: updatedRecords,
-              },
-            };
-          }
-          return group;
-        })
-      );
-      return;
-    }
-
-    // Deep clone the source and destination groups
-    const sourceGroup = JSON.parse(JSON.stringify(kanbanViewData[sourceGroupIndex]));
-    const destinationGroup = JSON.parse(JSON.stringify(kanbanViewData[destinationGroupIndex]));
-
-    // Clone the records for immutability
-    const sourceRecords = [...sourceGroup.groupData.records];
-    const destinationRecords = [...destinationGroup.groupData.records];
-
-    // Remove the item from the source
-    const [movedItem] = sourceRecords.splice(source.index, 1);
-
-    // Create a mutable copy of the moved item
-    const updatedItem = { ...movedItem, status: destinationGroupName };
-
-    // Add the updated item to the destination
-    destinationRecords.splice(destination.index, 0, updatedItem);
-
-    // Update the group data
-    sourceGroup.groupData.records = sourceRecords;
-    destinationGroup.groupData.records = destinationRecords;
-
-    // Update the kanbanViewData state
-    try {
-      const formData = new FormData();
-      formData.append(groupByFieldName, destinationGroupName);
-      const kanbanUpdateResponse = await patchKanbanView({ id: +movedItem.id, data: formData }).unwrap();
-
-      if (kanbanUpdateResponse?.statusCode === 200) {
-        showToast("success", "Success", "Kanban View Updated!");
-        // Update the kanbanViewData state
-        setKanbanViewData((prevData: typeof kanbanViewData) =>
-          prevData.map((group: any) => {
-            if (group.groupName === sourceGroupName) {
-              return sourceGroup;
-            }
-            if (group.groupName === destinationGroupName) {
-              return destinationGroup;
-            }
-            return group;
-          })
-        );
-      } else {
-        showToast("error", "Duplicate Key", kanbanUpdateResponse?.error);
-      }
-    } catch (error: any) {
-      // 6. Handle 500 or network errors
-      console.error("API error:", error);
-      showToast("error", "Something went wrong", error?.data?.message || "Something went wrong");
-    }
-  };
-
-
-  // Handle SwimLane Pagination
-  const handleSwimLanePagination = async () => {
-
-    if (solidKanbanViewMetaData) {
-
-      const swimlanesCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount || 5;
-      const queryData = {
-        offset: swimLaneCurrentPageNumber * swimlanesCount,
-        limit: swimlanesCount,
-        fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
-        groupBy: groupByFieldName,
-        populateMedia: toPopulateMedia,
-        populateGroup: true,
-        groupFilter: {
-          limit: recordsInSwimlane,
-          offset: 0,
-          filters: filters,
-          populate: toPopulate,
-          populateMedia: toPopulateMedia
-
-        }
-        // sort: [`id:desc`],
-      };
-      // fields=status&groupBy=status&fields=count(status)&populateGroup=true
-      const queryString = qs.stringify(queryData, {
-        encodeValuesOnly: true
-      });
-
-      //Push  to Router
-      router.push(`?${queryString}`);
-
-
-      const data: any = await triggerGetSolidEntities(queryString);
-      if (data && data?.data?.groupRecords.length > 0) {
-        const updatedData = [...kanbanViewData, ...data.data.groupRecords];
-        setKanbanViewData(updatedData);
-      }
-      setSwimLaneCurrentPageNumber(swimLaneCurrentPageNumber + 1)
-    }
-  }
-
-
-  // Handle the custom filter and Search Filter
-  const handleApplyCustomFilter = async (transformedFilter: any) => {
-
-    if (solidKanbanViewMetaData) {
-
-
-      const queryfilter = {
-        $and: [
-        ]
-      }
-      if (transformedFilter.s_filter) {
-        queryfilter.$and.push(transformedFilter.s_filter)
-      }
-      if (transformedFilter.c_filter) {
-        queryfilter.$and.push(transformedFilter.c_filter)
-      }
-
-      const customFilter = transformedFilter;
-      const updatedFilter = { ...(filters || {}), ...(queryfilter || {}) };
-      setFilters((prevFilters) => ({ ...(prevFilters || {}), ...(queryfilter || {}) }));
-
-      const swimlanesCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount || 5;
-
-      if (toPopulate) {
-        const queryData = {
-          offset: 0,
-          limit: swimlanesCount,
-          fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
-          groupBy: groupByFieldName,
-          populateGroup: true,
-          groupFilter: {
-            limit: recordsInSwimlane,
-            offset: 0,
-            filters: updatedFilter,
-            populate: toPopulate,
-            populateMedia: toPopulateMedia
-          }
-        };
-        const queryString = qs.stringify(queryData, {
-          encodeValuesOnly: true
-        });
-
-        // s_filter and c_filter format that needs to be passed to the router
-        // only present if handleCustomFilter is applied
-        if (customFilter) {
-          let url
-          const urlData = queryData;
-          delete urlData.filters;
-          urlData.s_filter = customFilter.s_filter || {};
-          urlData.c_filter = customFilter.c_filter || {};
-          queryObjectToQueryString(urlData);
-        }
-
-
-        const data: any = await triggerGetSolidEntities(queryString);
-
-        // Update the kanban view data with the new data based on filter
-        if (data && data?.data?.groupRecords.length > 0) {
-          const updatedData = [...data.data.groupRecords];
-          setKanbanViewData(updatedData);
-        }
-        setSelectedRecords([]);
-
-      }
-    }
-
-  }
-
-  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";
-      const viewModes = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.length > 0 && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.map((view: any) => { return { label: capitalize(view), value: view } });
-      setViewModes(viewModes);
-      if (createActionUrl) {
-        setCreateButtonUrl(createActionUrl)
-      }
-      if (editActionUrl) {
-        setEditButtonUrl(editActionUrl)
-      }
-    }
-  }, [solidKanbanViewMetaData])
-
-  const kanbanViewTitle = solidKanbanViewMetaData?.data?.solidView?.displayName
-
-  return (
-    <div className="page-parent-wrapper">
-      <Toast ref={toast} />
-      <div className="page-header">
-        <div className="flex gap-3 align-items-center">
-          <p className="m-0 view-title">{kanbanViewTitle}</p>
-          {solidKanbanViewMetaData?.data?.solidView?.layout?.attrs.enableGlobalSearch === true &&
-            // <SolidGlobalSearchElement viewData={solidKanbanViewMetaData} handleApplyCustomFilter={handleApplyCustomFilter} ></SolidGlobalSearchElement>
-            <SolidGlobalSearchElement showSaveFilterPopup={showSaveFilterPopup} setShowSaveFilterPopup={setShowSaveFilterPopup} ref={solidGlobalSearchElementRef} viewData={solidKanbanViewMetaData} handleApplyCustomFilter={handleApplyCustomFilter}  ></SolidGlobalSearchElement>
-
-          }
-        </div>
-        <div className="flex align-items-center gap-3">
-          {actionsAllowed.includes(`${createPermission(params.modelName)}`) && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs.create !== false &&
-            <SolidCreateButton url={createButtonUrl} />
-          }
-
-          {actionsAllowed.includes(`${deletePermission(params.modelName)}`) && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs.delete !== false && selectedRecords.length > 0 && <Button
-            type="button"
-            label="Delete"
-            size="small"
-            onClick={() => setDialogVisible(true)}
-            className="small-button"
-            severity="danger"
-          />}
-          <Button
-            type="button"
-            size="small"
-            icon="pi pi-refresh"
-            severity="secondary"
-            outlined
-            onClick={() => {
-              window.location.reload()
-            }}
-          />
-          <SolidKanbanViewConfigure
-            solidKanbanViewMetaData={solidKanbanViewMetaData}
-            actionsAllowed={actionsAllowed}
-            viewModes={viewModes}
-            setLayoutDialogVisible={setLayoutDialogVisible}
-            setShowSaveFilterPopup={setShowSaveFilterPopup}
-          />
-          {/* <SolidConfigureLayoutElement></SolidConfigureLayoutElement> */}
-        </div>
-      </div>
-      <style>{`.p-datatable .p-datatable-loading-overlay {background-color: rgba(0, 0, 0, 0.0);}`}</style>
-      {solidKanbanViewMetaData && kanbanViewData &&
-        <KanbanBoard groupedView={groupedView} kanbanViewData={kanbanViewData} solidKanbanViewMetaData={solidKanbanViewMetaData?.data} setKanbanViewData={setKanbanViewData} handleLoadMore={handleLoadMore} onDragEnd={onDragEnd} handleSwimLanePagination={handleSwimLanePagination} setLightboxUrls={setLightboxUrls} setOpenLightbox={setOpenLightbox} editButtonUrl={editButtonUrl}></KanbanBoard>
-      }
-
-      <Dialog
-        visible={isDialogVisible}
-        header="Confirm Delete"
-        modal
-        footer={() => (
-          <div className="flex justify-content-center">
-            <Button label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={deleteBulk} />
-            <Button label="No" icon="pi pi-times" className='small-button' onClick={onDeleteClose} />
-          </div>
-        )}
-        onHide={() => setDialogVisible(false)}
-      >
-        <p>Are you sure you want to delete the selected records?</p>
-      </Dialog>
-      {openLightbox &&
-        <Lightbox
-          open={openLightbox}
-          plugins={[Counter, Download]}
-          close={() => setOpenLightbox(false)}
-          slides={lightboxUrls}
-        />
-      }
-      <Dialog
-        visible={isLayoutDialogVisible}
-        header="Change Kanban Layout"
-        modal
-        onHide={() => setLayoutDialogVisible(false)}
-        contentStyle={{
-          width: 800
-        }}
-      >
-        <KanbanUserViewLayout solidKanbanViewMetaData={solidKanbanViewMetaData} setLayoutDialogVisible={setLayoutDialogVisible} />
-      </Dialog>
-    </div>
-  );
-};
-