@solidstarters/solid-core-ui 1.1.38 → 1.1.40

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

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 "use client";
 import { createPermission, deletePermission, updatePermission } from "@/helpers/permissions";
 import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
@@ -13,6 +15,19 @@ 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";
+
+
 
 type SolidKanbanViewParams = {
   moduleName: string;
@@ -27,12 +42,26 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
   // 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();
-  useEffect(() => {
+  const [openLightbox, setOpenLightbox] = useState(false);
+  const [lightboxUrls, setLightboxUrls] = useState({});
+
 
+
+  useEffect(() => {
     const fetchPermissions = async () => {
       if (params.modelName) {
         const permissionNames = [
@@ -93,6 +122,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
 
     const initialFilters: any = {};
     const toPopulate: string[] = [];
+    const toPopulateMedia: string[] = [];
     function extractFields(node: any, result: any = []) {
       if (node.type === "field") {
         result.push(node);
@@ -135,28 +165,41 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       if (fieldMetadata.type === 'relation' && fieldMetadata.relationType === 'many-to-one') {
         toPopulate.push(fieldMetadata.name);
       }
+      if (fieldMetadata.type === 'mediaSingle' || fieldMetadata.relationType === 'mediaMultiple') {
+        toPopulateMedia.push(fieldMetadata.name);
+      }
     }
     // setFilters(initialFilters);
-    setRows(kanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsCount ? kanbanViewMetaData?.data?.solidView?.layout?.attrs.recordsCount : 25)
-    setToPopulate(toPopulate);
+    const rows = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsInSwimlane ? solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsInSwimlane : 25;
+    // setToPopulate(toPopulate);
+    // setToPopulateMedia(toPopulateMedia);
+    return { rows, toPopulate, toPopulateMedia }
   }
 
+
+  // Initial Filter data 
   useEffect(() => {
 
     if (solidKanbanViewMetaData) {
       setKanbanViewMetaData(solidKanbanViewMetaData);
-      initialFilterMethod()
+      const { rows, toPopulate, toPopulateMedia } = initialFilterMethod()
+      setRows(rows);
+      setToPopulate(toPopulate);
+      setToPopulateMedia(toPopulateMedia);
+      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 [filterValues, setFilterValues] = useState([{ field: '', operator: '', value: '' }]);
-  const [first, setFirst] = useState(0);
   const [rows, setRows] = useState(25);
   const [selectedRecords, setSelectedRecords] = useState<any[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
@@ -170,6 +213,18 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
   // 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();
+
 
   // After data is fetched populate the kanban view state so as to be able to render the data. 
   useEffect(() => {
@@ -190,18 +245,6 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
     }
   }, [solidEntityKanbanViewData]);
 
-  // Delete mutation 
-  const [
-    deleteManySolidEntities,
-    {
-      isLoading: isSolidEntitiesDeleted,
-      isSuccess: isDeleteSolidEntitiesSucess,
-      isError: isSolidEntitiesDeleteError,
-      error: SolidEntitiesDeleteError,
-      data: DeletedSolidEntities,
-    },
-  ] = useDeleteMultipleSolidEntitiesMutation();
-
 
 
 
@@ -212,8 +255,8 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
     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 (solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.swimlanesCount) {
+        setColumnsCount(solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount)
       }
       if (createActionUrl) {
         setCreateButtonUrl(createActionUrl)
@@ -221,23 +264,24 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       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 columnsToLoadCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount || 5;
+      if (groupByFieldName &&( toPopulate || toPopulateMedia)) {
+
         const queryData = {
           offset: 0,
           limit: columnsToLoadCount,
           fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
           groupBy: groupByFieldName,
-          populate: toPopulate,
+          populateMedia: toPopulateMedia,
           populateGroup: true,
           groupFilter: {
-            limit: kanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsCount,
+            limit: kanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsInSwimlane || 10,
             offset: 0,
-            filters: filters
+            filters: filters,
+            populate: toPopulate,
+            populateMedia: toPopulateMedia
           }
           // sort: [`id:desc`],
         };
@@ -250,54 +294,56 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
         setSelectedRecords([]);
       }
     }
-
-  }, [isDeleteSolidEntitiesSucess, toPopulate, solidKanbanViewMetaData]);
+  }, [isDeleteSolidEntitiesSucess, toPopulate, groupByFieldName,solidKanbanViewMetaData]);
 
 
 
 
   // clear Filter
 
-  const clearFilter = async () => {
-    if (solidKanbanViewMetaData) {
-      // 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()
-  };
+  // const clearFilter = async () => {
+  //   if (solidKanbanViewMetaData) {
+  //     // initialFilterMethod()
+  //   }
+  //   setFilters(null);
+  //   if (solidKanbanViewMetaData) {
+  //     
+  //     const columnsToLoadCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount || 5;
+
+  //     if (toPopulate || toPopulateMedia) {
+
+  //       const queryData = {
+  //         offset: 0,
+  //         limit: columnsToLoadCount,
+  //         fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
+  //         groupBy: groupByFieldName,
+  //         populate: toPopulate,
+  //         populateMedia: toPopulateMedia,
+  //         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()
+  // };
 
 
 
@@ -317,6 +363,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
     selectedRecords.forEach((element: any) => {
       deleteList.push(element.id);
     });
+    console.log(deleteList);
     deleteManySolidEntities(deleteList);
     setDialogVisible(false);
   };
@@ -327,11 +374,11 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
     setSelectedRecords([]);
   }
 
-  const handleLoadMore = async (status: string) => {
-    const { offset, limit, records } = kanbanLoadMoreData[status];
+  const handleLoadMore = async (groupByField: string) => {
+    const { offset, limit, records } = kanbanLoadMoreData[groupByField];
     const newLoadMoreData = kanbanLoadMoreData;
-    kanbanLoadMoreData[status].offset = offset + limit;
-    const groupByFieldName = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.groupBy;
+    kanbanLoadMoreData[groupByField].offset = offset + limit;
+
     try {
       // const queryData = {
       //   offset: 0,
@@ -346,9 +393,12 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       const queryData = {
         offset: offset + limit,
         limit: limit,
+        populate:toPopulate,
+        populateMedia: toPopulateMedia,
+        populateGroup: true,
         filters: {
           [groupByFieldName]: {
-            $in: [status],
+            $in: [groupByField],
           },
           ...filters
         }
@@ -365,12 +415,12 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       const mergeData = (
         kanbanViewData: any[],
         newRecords: any[],
-        status: string
+        groupByField: string
       ) => {
-        // Find the group matching the specified status
+        // Find the group matching the specified groupByField
         const originalData = structuredClone(kanbanViewData);
         const targetGroup = originalData.find(
-          (group: any) => group.groupName === status
+          (group: any) => group.groupName === groupByField
         );
         if (targetGroup) {
           const { groupData } = targetGroup;
@@ -394,7 +444,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       };
 
 
-      const updatedData = mergeData(kanbanViewData, newRecords, status);
+      const updatedData = mergeData(kanbanViewData, newRecords, groupByField);
       setKanbanViewData(updatedData);
       const loadmoredata = Object.entries(updatedData).reduce((acc: any, [key, value]: any) => {
         acc[value.groupName] = {
@@ -426,6 +476,29 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
 
     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]));
@@ -462,22 +535,25 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
   };
 
 
+
   const handleSwimLinPagination = async () => {
 
     if (solidKanbanViewMetaData) {
-      const groupByFieldName = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.groupBy;
-      const columnsToLoadCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.pageSize || 5;
+
+      const columnsToLoadCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount || 5;
       const queryData = {
         offset: swimLaneCurrentPageNumber * columnsToLoadCount,
         limit: columnsToLoadCount,
         fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
         groupBy: groupByFieldName,
-        populate: toPopulate,
         populateGroup: true,
         groupFilter: {
           limit: rows,
           offset: 0,
-          filters: filters
+          filters: filters,
+          populate: toPopulate,
+          populateMedia: toPopulateMedia
+
         }
         // sort: [`id:desc`],
       };
@@ -497,8 +573,8 @@ 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;
+
+    const columnsToLoadCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount || 5;
     setFilters(filters)
 
     if (toPopulate) {
@@ -507,12 +583,14 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
         limit: columnsToLoadCount,
         fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
         groupBy: groupByFieldName,
-        populate: toPopulate,
         populateGroup: true,
         groupFilter: {
           limit: rows,
           offset: 0,
-          filters: filters
+          filters: filters,
+          populate: toPopulate,
+          populateMedia: toPopulateMedia
+
         }
         // sort: [`id:desc`],
       };
@@ -553,7 +631,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
 
 
   return (
-    <div className="page-parent-wrapper">
+    <>
       <div className="flex gap-3 mb-4 align-items-center justify-content-between kanban-view">
         <div className="flex gap-3 mb-4 align-items-center" >
 
@@ -569,7 +647,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
             className="small-button"
             severity="danger"
           />}
-          {isFilterApplied &&
+          {/* {isFilterApplied &&
             <Button
               type="button"
               icon="pi pi-filter-slash"
@@ -579,7 +657,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
               onClick={clearFilter}
               className="small-button"
             />
-          }
+          } */}
 
           {solidKanbanViewMetaData?.data?.solidView?.layout?.attrs.enableGlobalSearch === true &&
             // <SolidGlobalSearchElement viewData={solidKanbanViewMetaData} handleApplyCustomFilter={handleApplyCustomFilter} ></SolidGlobalSearchElement>
@@ -588,12 +666,25 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
           }
         </div>
 
+        {/* <SolidListViewConfigure
+          setShowArchived={setShowArchived}
+          showArchived={showArchived}
+          viewData={solidKanbanViewMetaData}
+          sizeOptions={sizeOptions}
+          setSize={setSize}
+          size={size}
+          viewModes={viewModes}
+          params={params}
+          actionsAllowed={actionsAllowed}
+          selectedRecords={selectedRecords}
+          setDialogVisible={setDialogVisible}
+        ></SolidListViewConfigure> */}
         {/* <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} handleSwimLinPagination={handleSwimLinPagination}></KanbanBoard>
+        <KanbanBoard groupedView={groupedView} kanbanViewData={kanbanViewData} solidKanbanViewMetaData={solidKanbanViewMetaData?.data} setKanbanViewData={setKanbanViewData} handleLoadMore={handleLoadMore} onDragEnd={onDragEnd} handleSwimLinPagination={handleSwimLinPagination} setLightboxUrls={setLightboxUrls} setOpenLightbox={setOpenLightbox} ></KanbanBoard>
       }
 
       <Dialog
@@ -610,7 +701,15 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       >
         <p>Are you sure you want to delete the selected records?</p>
       </Dialog>
-    </div>
+      {openLightbox &&
+        <Lightbox
+          open={openLightbox}
+          plugins={[Counter, Download]}
+          close={() => setOpenLightbox(false)}
+          slides={lightboxUrls}
+        />
+      }
+    </>
   );
 };
 

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

@@ -0,0 +1,163 @@
+"use client";
+import SolidBigintKanbanField from "./kanban-fields/SolidBigintKanbanField";
+import SolidBooleanKanbanField from "./kanban-fields/SolidBooleanKanbanField";
+import SolidComputedKanbanField from "./kanban-fields/SolidComputedKanbanField";
+import SolidDateKanbanField from "./kanban-fields/SolidDateKanbanField";
+import SolidDatetimeKanbanField from "./kanban-fields/SolidDatetimeKanbanField";
+import SolidDecimalKanbanField from "./kanban-fields/SolidDecimalKanbanField";
+import SolidExternalIdKanbanField from "./kanban-fields/SolidExternalIdKanbanField";
+import SolidFloatKanbanField from "./kanban-fields/SolidFloatKanbanField";
+import SolidIntKanbanField from "./kanban-fields/SolidIntKanbanField";
+import SolidLongTextKanbanField from "./kanban-fields/SolidLongTextKanbanField";
+import SolidMediaMultipleKanbanField from "./kanban-fields/SolidMediaMultipleKanbanField";
+import SolidMediaSingleKanbanField from "./kanban-fields/SolidMediaSingleKanbanField";
+import SolidRelationKanbanField from "./kanban-fields/SolidRelationKanbanField";
+import SolidRichTextKanbanField from "./kanban-fields/SolidRichTextKanbanField";
+import SolidSelectionDynamicKanbanField from "./kanban-fields/SolidSelectionDynamicKanbanField";
+import SolidSelectionStaticKanbanField from "./kanban-fields/SolidSelectionStaticKanbanField";
+import SolidShortTextKanbanField from "./kanban-fields/SolidShortTextKanbanField";
+import SolidTimeKanbanField from "./kanban-fields/SolidTimeKanbanField";
+import SolidUuidKanbanField from "./kanban-fields/SolidUuidKanbanField";
+
+export type SolidKanbanViewFieldsParams = {
+    solidKanbanViewMetaData: any;
+    fieldMetadata: any,
+    fieldLayout: any,
+    data: any,
+    setLightboxUrls?: any,
+        setOpenLightbox?:any
+};
+
+export const getNumberOfInputs = (matchMode: any): number | null => {
+    if (matchMode.label && matchMode.label === 'Not In') {
+        matchMode = 'notIn';
+    }
+
+    switch (matchMode) {
+        case 'between':
+            return 2;
+        case 'in':
+        case 'notIn':
+            return null;
+        case 'startsWith':
+        case 'contains':
+        case 'notContains':
+        case 'endsWith':
+        case 'equals':
+        case 'notEquals':
+        case 'lt':
+        case 'lte':
+        case 'gt':
+        case 'gte':
+            return 1;
+        default:
+            return 1; // Default to single input if no specific match is found
+    }
+}
+
+// // @ts-ignore
+// const components = require.context('./kanban-fields', false, /Solid.*Column\.tsx$/);
+
+// // Define a function to dynamically load components based on type
+// const loadComponentByType = async (type: string) => {
+//     try {
+//         const componentName = `./kanban-fields/Solid${type.charAt(0).toUpperCase() + type.slice(1)}Column.tsx`;
+
+//         // Dynamically import the component based on type
+//         const componentModule = await import(componentName);
+
+//         return componentModule.default;
+//     } catch (error) {
+//         console.error(`Failed to load component for type: ${type}`, error);
+//         return null;
+//     }
+// };
+
+export const SolidKanbanViewFields = ({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data, setLightboxUrls, setOpenLightbox }: SolidKanbanViewFieldsParams) => {
+
+    // And finally we can implement additional switching logic based on certain special fields. 
+    if (fieldMetadata.name === 'id') {
+        return SolidIntKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+
+    if (fieldMetadata.type === 'int') {
+        return SolidIntKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    if (fieldMetadata.type === 'bigint') {
+        return SolidBigintKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    if (fieldMetadata.type === 'float') {
+        return SolidFloatKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    if (fieldMetadata.type === 'decimal') {
+        return SolidDecimalKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    if (fieldMetadata.type === 'shortText') {
+        return SolidShortTextKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data,setLightboxUrls, setOpenLightbox });
+    }
+    if (fieldMetadata.type === 'longText') {
+        return SolidLongTextKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    if (fieldMetadata.type === 'richText') {
+        return SolidRichTextKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    if (fieldMetadata.type === 'boolean') {
+        return SolidBooleanKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    if (fieldMetadata.type === 'date') {
+        return SolidDateKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    if (fieldMetadata.type === 'datetime') {
+        return SolidDatetimeKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    if (fieldMetadata.type === 'time') {
+        return SolidTimeKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    if (fieldMetadata.type === 'relation') {
+        return SolidRelationKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    if (fieldMetadata.type === 'mediaSingle') {
+        return SolidMediaSingleKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data ,setLightboxUrls, setOpenLightbox});
+    }
+    if (fieldMetadata.type === 'mediaMultiple') {
+        return SolidMediaMultipleKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data,setLightboxUrls, setOpenLightbox });
+    }
+    if (fieldMetadata.type === 'selectionStatic') {
+        return SolidSelectionStaticKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    if (fieldMetadata.type === 'selectionDynamic') {
+        return SolidSelectionDynamicKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    if (fieldMetadata.type === 'computed') {
+        return SolidComputedKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    if (fieldMetadata.type === 'externalId') {
+        return SolidExternalIdKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    if (fieldMetadata.type === 'uuid') {
+        return SolidUuidKanbanField({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    }
+    // // Load everything else based on type and dynamically.
+    // else {
+    //     const ComponentFound = await loadComponentByType(fieldMetadata.type);
+    //     const ComponentNotFound = ({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data }: SolidKanbanViewFieldsParams) => (
+    //         <Column
+    //             key={fieldMetadata.name}
+    //             field={fieldMetadata.name}
+    //             header={fieldMetadata.displayName}
+    //             className="text-sm"
+    //             sortable={false}
+    //             filter={false}
+    //             showFilterOperator={false}
+    //             body={() => (<span>Type not supported</span>)}
+    //             style={{ minWidth: "12rem" }}
+    //             headerClassName="table-header-fs"
+    //         ></Column>
+    //     );
+
+    //     return ComponentFound ? ComponentFound({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data }) : ComponentNotFound({ solidKanbanViewMetaData, fieldMetadata, fieldLayout,data });
+    // }
+
+    // TODO: we can implement additional switching logic based on the widget type being used to render the list view data.
+
+};