@solidstarters/solid-core-ui 1.1.38 → 1.1.41

package/dist/components/core/kanban/SolidKanbanView.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 "use client";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -55,7 +56,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createPermission, deletePermission, updatePermission } from "../../../helpers/permissions";
 import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
 import { useGetSolidViewLayoutQuery } from "../../../redux/api/solidViewApi";
@@ -69,15 +70,37 @@ 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 { 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";
 export var SolidKanbanView = function (params) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     var solidGlobalSearchElementRef = useRef();
     // TODO: The initial filter state will be created based on the fields which are present on this kanban view. 
     var _k = useState(), filters = _k[0], setFilters = _k[1];
     var _l = useState([]), toPopulate = _l[0], setToPopulate = _l[1];
-    var _m = useState([]), actionsAllowed = _m[0], setActionsAllowed = _m[1];
-    var _o = useState(false), showGlobalSearchElement = _o[0], setShowGlobalSearchElement = _o[1];
+    var _m = useState([]), toPopulateMedia = _m[0], setToPopulateMedia = _m[1];
+    var _o = useState([]), actionsAllowed = _o[0], setActionsAllowed = _o[1];
+    var _p = useState(false), showGlobalSearchElement = _p[0], setShowGlobalSearchElement = _p[1];
+    var _q = useState(false), showArchived = _q[0], setShowArchived = _q[1];
+    var sizeOptions = [
+        { label: 'Compact', value: 'small', image: CompactImage },
+        { label: 'Cozy', value: 'normal', image: CozyImage },
+        { label: 'Comfortable', value: 'large', image: ComfortableImage }
+    ];
+    var _r = useState(sizeOptions[1].value), size = _r[0], setSize = _r[1];
+    var _s = useState([]), viewModes = _s[0], setViewModes = _s[1];
+    var _t = useState(""), groupByFieldName = _t[0], setGroupByFieldName = _t[1];
+    var _u = useState(true), groupedView = _u[0], setGroupedView = _u[1];
     var triggerCheckIfPermissionExists = useLazyCheckIfPermissionExistsQuery()[0];
+    var _v = useState(false), openLightbox = _v[0], setOpenLightbox = _v[1];
+    var _w = useState({}), lightboxUrls = _w[0], setLightboxUrls = _w[1];
     useEffect(function () {
         var fetchPermissions = function () { return __awaiter(void 0, void 0, void 0, function () {
             var permissionNames, queryData, queryString, response;
@@ -115,14 +138,15 @@ export var SolidKanbanView = function (params) {
     var kanbanViewMetaDataQs = qs.stringify(__assign(__assign({}, params), { viewType: 'kanban' }), {
         encodeValuesOnly: true,
     });
-    var _p = useState({}), kanbanViewMetaData = _p[0], setKanbanViewMetaData = _p[1];
-    var _q = useGetSolidViewLayoutQuery(kanbanViewMetaDataQs), solidKanbanViewMetaData = _q.data, solidKanbanViewMetaDataError = _q.error, solidKanbanViewMetaDataIsLoading = _q.isLoading, solidKanbanViewMetaDataIsError = _q.isError;
+    var _x = useState({}), kanbanViewMetaData = _x[0], setKanbanViewMetaData = _x[1];
+    var _y = useGetSolidViewLayoutQuery(kanbanViewMetaDataQs), solidKanbanViewMetaData = _y.data, solidKanbanViewMetaDataError = _y.error, solidKanbanViewMetaDataIsLoading = _y.isLoading, solidKanbanViewMetaDataIsError = _y.isError;
     var initialFilterMethod = function () {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         var solidView = solidKanbanViewMetaData.data.solidView;
         var solidFieldsMetadata = solidKanbanViewMetaData.data.solidFieldsMetadata;
         var initialFilters = {};
         var toPopulate = [];
+        var toPopulateMedia = [];
         function extractFields(node, result) {
             if (result === void 0) { result = []; }
             if (node.type === "field") {
@@ -161,33 +185,52 @@ export var SolidKanbanView = function (params) {
             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(((_d = (_c = (_b = (_a = kanbanViewMetaData === null || kanbanViewMetaData === void 0 ? void 0 : kanbanViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.attrs) === null || _d === void 0 ? void 0 : _d.recordsCount) ? (_g = (_f = (_e = kanbanViewMetaData === null || kanbanViewMetaData === void 0 ? void 0 : kanbanViewMetaData.data) === null || _e === void 0 ? void 0 : _e.solidView) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.attrs.recordsCount : 25);
-        setToPopulate(toPopulate);
+        var rows = ((_d = (_c = (_b = (_a = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.attrs) === null || _d === void 0 ? void 0 : _d.recordsInSwimlane) ? (_h = (_g = (_f = (_e = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _e === void 0 ? void 0 : _e.solidView) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.attrs) === null || _h === void 0 ? void 0 : _h.recordsInSwimlane : 25;
+        // setToPopulate(toPopulate);
+        // setToPopulateMedia(toPopulateMedia);
+        return { rows: rows, toPopulate: toPopulate, toPopulateMedia: toPopulateMedia };
     };
+    // Initial Filter data 
     useEffect(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
         if (solidKanbanViewMetaData) {
             setKanbanViewMetaData(solidKanbanViewMetaData);
-            initialFilterMethod();
+            var _w = initialFilterMethod(), rows_1 = _w.rows, toPopulate_1 = _w.toPopulate, toPopulateMedia_1 = _w.toPopulateMedia;
+            setRows(rows_1);
+            setToPopulate(toPopulate_1);
+            setToPopulateMedia(toPopulateMedia_1);
+            var viewModes_1 = ((_d = (_c = (_b = (_a = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.attrs) === null || _d === void 0 ? void 0 : _d.allowedViews) && ((_h = (_g = (_f = (_e = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _e === void 0 ? void 0 : _e.solidView) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.attrs) === null || _h === void 0 ? void 0 : _h.allowedViews.length) > 0 && ((_m = (_l = (_k = (_j = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _j === void 0 ? void 0 : _j.solidView) === null || _k === void 0 ? void 0 : _k.layout) === null || _l === void 0 ? void 0 : _l.attrs) === null || _m === void 0 ? void 0 : _m.allowedViews.map(function (view) { return { label: capitalize(view), value: view }; }));
+            setViewModes(viewModes_1);
+            if (((_r = (_q = (_p = (_o = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _o === void 0 ? void 0 : _o.solidView) === null || _p === void 0 ? void 0 : _p.layout) === null || _q === void 0 ? void 0 : _q.attrs) === null || _r === void 0 ? void 0 : _r.grouped) !== false) {
+                setGroupByFieldName((_v = (_u = (_t = (_s = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _s === void 0 ? void 0 : _s.solidView) === null || _t === void 0 ? void 0 : _t.layout) === null || _u === void 0 ? void 0 : _u.attrs) === null || _v === void 0 ? void 0 : _v.groupBy);
+            }
+            else {
+                setGroupByFieldName("deletedTracker");
+                setGroupedView(false);
+            }
         }
     }, [solidKanbanViewMetaData]);
     // All kanban view state.
-    var _r = useState([]), kanbanViewData = _r[0], setKanbanViewData = _r[1];
-    var _s = useState({}), kanbanLoadMoreData = _s[0], setKanbanLoadMoreData = _s[1];
-    var _t = useState([{ field: '', operator: '', value: '' }]), filterValues = _t[0], setFilterValues = _t[1];
-    var _u = useState(0), first = _u[0], setFirst = _u[1];
-    var _v = useState(25), rows = _v[0], setRows = _v[1];
-    var _w = useState([]), selectedRecords = _w[0], setSelectedRecords = _w[1];
-    var _x = useState(true), loading = _x[0], setLoading = _x[1];
-    var _y = useState(false), isDialogVisible = _y[0], setDialogVisible = _y[1];
-    var _z = useState(), createButtonUrl = _z[0], setCreateButtonUrl = _z[1];
-    var _0 = useState(), editButtonUrl = _0[0], setEditButtonUrl = _0[1];
-    var _1 = useState(5), columnsCount = _1[0], setColumnsCount = _1[1];
-    var _2 = useState(1), swimLaneCurrentPageNumber = _2[0], setSwimLaneCurrentPageNumber = _2[1];
+    var _z = useState([]), kanbanViewData = _z[0], setKanbanViewData = _z[1];
+    var _0 = useState({}), kanbanLoadMoreData = _0[0], setKanbanLoadMoreData = _0[1];
+    var _1 = useState(25), rows = _1[0], setRows = _1[1];
+    var _2 = useState([]), selectedRecords = _2[0], setSelectedRecords = _2[1];
+    var _3 = useState(true), loading = _3[0], setLoading = _3[1];
+    var _4 = useState(false), isDialogVisible = _4[0], setDialogVisible = _4[1];
+    var _5 = useState(), createButtonUrl = _5[0], setCreateButtonUrl = _5[1];
+    var _6 = useState(), editButtonUrl = _6[0], setEditButtonUrl = _6[1];
+    var _7 = useState(5), columnsCount = _7[0], setColumnsCount = _7[1];
+    var _8 = useState(1), swimLaneCurrentPageNumber = _8[0], setSwimLaneCurrentPageNumber = _8[1];
     // Get the kanban view data.
     // const [triggerGetSolidEntitiesForKanban, { data: solidEntityKanbanViewData, isLoading, error }] = useLazyGetSolidKanbanEntitiesQuery();
-    var _3 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _3[0], _4 = _3[1], solidEntityKanbanViewData = _4.data, isLoading = _4.isLoading, error = _4.error;
+    var _9 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _9[0], _10 = _9[1], solidEntityKanbanViewData = _10.data, isLoading = _10.isLoading, error = _10.error;
+    // Delete mutation 
+    var _11 = useDeleteMultipleSolidEntitiesMutation(), deleteManySolidEntities = _11[0], _12 = _11[1], isSolidEntitiesDeleted = _12.isLoading, isDeleteSolidEntitiesSucess = _12.isSuccess, isSolidEntitiesDeleteError = _12.isError, SolidEntitiesDeleteError = _12.error, DeletedSolidEntities = _12.data;
     // After data is fetched populate the kanban view state so as to be able to render the data. 
     useEffect(function () {
         if (solidEntityKanbanViewData) {
@@ -206,16 +249,14 @@ export var SolidKanbanView = function (params) {
             setLoading(false);
         }
     }, [solidEntityKanbanViewData]);
-    // Delete mutation 
-    var _5 = useDeleteMultipleSolidEntitiesMutation(), deleteManySolidEntities = _5[0], _6 = _5[1], isSolidEntitiesDeleted = _6.isLoading, isDeleteSolidEntitiesSucess = _6.isSuccess, isSolidEntitiesDeleteError = _6.isError, SolidEntitiesDeleteError = _6.error, DeletedSolidEntities = _6.data;
     // Fetch data after toPopulate has been populated...
     useEffect(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17;
         if (solidKanbanViewMetaData) {
             var createActionUrl = ((_d = (_c = (_b = (_a = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.attrs) === null || _d === void 0 ? void 0 : _d.createAction) && ((_j = (_h = (_g = (_f = (_e = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _e === void 0 ? void 0 : _e.solidView) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.attrs) === null || _h === void 0 ? void 0 : _h.createAction) === null || _j === void 0 ? void 0 : _j.type) === "custom" ? (_p = (_o = (_m = (_l = (_k = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _k === void 0 ? void 0 : _k.solidView) === null || _l === void 0 ? void 0 : _l.layout) === null || _m === void 0 ? void 0 : _m.attrs) === null || _o === void 0 ? void 0 : _o.createAction) === null || _p === void 0 ? void 0 : _p.customComponent : "form/new";
             var editActionUrl = ((_t = (_s = (_r = (_q = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _q === void 0 ? void 0 : _q.solidView) === null || _r === void 0 ? void 0 : _r.layout) === null || _s === void 0 ? void 0 : _s.attrs) === null || _t === void 0 ? void 0 : _t.editAction) && ((_y = (_x = (_w = (_v = (_u = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _u === void 0 ? void 0 : _u.solidView) === null || _v === void 0 ? void 0 : _v.layout) === null || _w === void 0 ? void 0 : _w.attrs) === null || _x === void 0 ? void 0 : _x.editAction) === null || _y === void 0 ? void 0 : _y.type) === "custom" ? (_3 = (_2 = (_1 = (_0 = (_z = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _z === void 0 ? void 0 : _z.solidView) === null || _0 === void 0 ? void 0 : _0.layout) === null || _1 === void 0 ? void 0 : _1.attrs) === null || _2 === void 0 ? void 0 : _2.editAction) === null || _3 === void 0 ? void 0 : _3.customComponent : "form";
-            if ((_7 = (_6 = (_5 = (_4 = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _4 === void 0 ? void 0 : _4.solidView) === null || _5 === void 0 ? void 0 : _5.layout) === null || _6 === void 0 ? void 0 : _6.attrs) === null || _7 === void 0 ? void 0 : _7.pageSize) {
-                setColumnsCount((_10 = (_9 = (_8 = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data.solidView) === null || _8 === void 0 ? void 0 : _8.layout) === null || _9 === void 0 ? void 0 : _9.attrs) === null || _10 === void 0 ? void 0 : _10.pageSize);
+            if ((_7 = (_6 = (_5 = (_4 = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _4 === void 0 ? void 0 : _4.solidView) === null || _5 === void 0 ? void 0 : _5.layout) === null || _6 === void 0 ? void 0 : _6.attrs) === null || _7 === void 0 ? void 0 : _7.swimlanesCount) {
+                setColumnsCount((_10 = (_9 = (_8 = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data.solidView) === null || _8 === void 0 ? void 0 : _8.layout) === null || _9 === void 0 ? void 0 : _9.attrs) === null || _10 === void 0 ? void 0 : _10.swimlanesCount);
             }
             if (createActionUrl) {
                 setCreateButtonUrl(createActionUrl);
@@ -223,22 +264,21 @@ export var SolidKanbanView = function (params) {
             if (editActionUrl) {
                 setEditButtonUrl(editActionUrl);
             }
-        }
-        if (solidKanbanViewMetaData) {
-            var groupByFieldName = (_14 = (_13 = (_12 = (_11 = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _11 === void 0 ? void 0 : _11.solidView) === null || _12 === void 0 ? void 0 : _12.layout) === null || _13 === void 0 ? void 0 : _13.attrs) === null || _14 === void 0 ? void 0 : _14.groupBy;
-            var columnsToLoadCount = ((_17 = (_16 = (_15 = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data.solidView) === null || _15 === void 0 ? void 0 : _15.layout) === null || _16 === void 0 ? void 0 : _16.attrs) === null || _17 === void 0 ? void 0 : _17.pageSize) || 5;
-            if (toPopulate) {
+            var columnsToLoadCount = ((_13 = (_12 = (_11 = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data.solidView) === null || _11 === void 0 ? void 0 : _11.layout) === null || _12 === void 0 ? void 0 : _12.attrs) === null || _13 === void 0 ? void 0 : _13.swimlanesCount) || 5;
+            if (groupByFieldName && (toPopulate || toPopulateMedia)) {
                 var queryData = {
                     offset: 0,
                     limit: columnsToLoadCount,
                     fields: ["".concat(groupByFieldName), "count(".concat(groupByFieldName, ")")],
                     groupBy: groupByFieldName,
-                    populate: toPopulate,
+                    populateMedia: toPopulateMedia,
                     populateGroup: true,
                     groupFilter: {
-                        limit: (_21 = (_20 = (_19 = (_18 = kanbanViewMetaData === null || kanbanViewMetaData === void 0 ? void 0 : kanbanViewMetaData.data) === null || _18 === void 0 ? void 0 : _18.solidView) === null || _19 === void 0 ? void 0 : _19.layout) === null || _20 === void 0 ? void 0 : _20.attrs) === null || _21 === void 0 ? void 0 : _21.recordsCount,
+                        limit: ((_17 = (_16 = (_15 = (_14 = kanbanViewMetaData === null || kanbanViewMetaData === void 0 ? void 0 : kanbanViewMetaData.data) === null || _14 === void 0 ? void 0 : _14.solidView) === null || _15 === void 0 ? void 0 : _15.layout) === null || _16 === void 0 ? void 0 : _16.attrs) === null || _17 === void 0 ? void 0 : _17.recordsInSwimlane) || 10,
                         offset: 0,
-                        filters: filters
+                        filters: filters,
+                        populate: toPopulate,
+                        populateMedia: toPopulateMedia
                     }
                     // sort: [`id:desc`],
                 };
@@ -250,54 +290,46 @@ export var SolidKanbanView = function (params) {
                 setSelectedRecords([]);
             }
         }
-    }, [isDeleteSolidEntitiesSucess, toPopulate, solidKanbanViewMetaData]);
+    }, [isDeleteSolidEntitiesSucess, toPopulate, groupByFieldName, solidKanbanViewMetaData]);
     // clear Filter
-    var clearFilter = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var groupByFieldName, columnsToLoadCount, queryData, queryString, data, updatedData;
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        return __generator(this, function (_j) {
-            switch (_j.label) {
-                case 0:
-                    if (solidKanbanViewMetaData) {
-                        // initialFilterMethod()
-                    }
-                    setFilters(null);
-                    if (!solidKanbanViewMetaData) return [3 /*break*/, 2];
-                    groupByFieldName = (_d = (_c = (_b = (_a = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.attrs) === null || _d === void 0 ? void 0 : _d.groupBy;
-                    columnsToLoadCount = ((_g = (_f = (_e = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data.solidView) === null || _e === void 0 ? void 0 : _e.layout) === null || _f === void 0 ? void 0 : _f.attrs) === null || _g === void 0 ? void 0 : _g.pageSize) || 5;
-                    if (!toPopulate) return [3 /*break*/, 2];
-                    queryData = {
-                        offset: 0,
-                        limit: columnsToLoadCount,
-                        fields: ["".concat(groupByFieldName), "count(".concat(groupByFieldName, ")")],
-                        groupBy: groupByFieldName,
-                        populate: toPopulate,
-                        populateGroup: true,
-                        groupFilter: {
-                            limit: rows,
-                            offset: 0,
-                        }
-                        // sort: [`id:desc`],
-                    };
-                    queryString = qs.stringify(queryData, {
-                        encodeValuesOnly: true
-                    });
-                    return [4 /*yield*/, triggerGetSolidEntities(queryString)];
-                case 1:
-                    data = _j.sent();
-                    if (data && ((_h = data === null || data === void 0 ? void 0 : data.data) === null || _h === void 0 ? void 0 : _h.groupRecords.length) > 0) {
-                        updatedData = __spreadArray([], data.data.groupRecords, true);
-                        setKanbanViewData(updatedData);
-                    }
-                    setSelectedRecords([]);
-                    _j.label = 2;
-                case 2:
-                    // @ts-ignore
-                    solidGlobalSearchElementRef.current.clearFilter();
-                    return [2 /*return*/];
-            }
-        });
-    }); };
+    // 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()
+    // };
     // clickable link allowing one to open the detail / form view.
     var detailsBodyTemplate = function (solidViewData) {
         return (_jsx(Link, { href: "".concat(editButtonUrl, "/").concat(solidViewData.id), rel: "noopener noreferrer", className: "text-sm font-bold p-0", style: { color: "#12415D" }, children: _jsx("i", { className: "pi pi-pencil", style: { fontSize: "1rem" } }) }));
@@ -308,6 +340,7 @@ export var SolidKanbanView = function (params) {
         selectedRecords.forEach(function (element) {
             deleteList.push(element.id);
         });
+        console.log(deleteList);
         deleteManySolidEntities(deleteList);
         setDialogVisible(false);
     };
@@ -316,25 +349,26 @@ export var SolidKanbanView = function (params) {
         setDialogVisible(false);
         setSelectedRecords([]);
     };
-    var handleLoadMore = function (status) { return __awaiter(void 0, void 0, void 0, function () {
-        var _a, offset, limit, records, newLoadMoreData, groupByFieldName, queryData, queryString, data, newRecords, currentData, mergeData, updatedData, loadmoredata, error_1;
+    var handleLoadMore = function (groupByField) { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, offset, limit, records, newLoadMoreData, queryData, queryString, data, newRecords, currentData, mergeData, updatedData, loadmoredata, error_1;
         var _b;
-        var _c, _d, _e, _f;
-        return __generator(this, function (_g) {
-            switch (_g.label) {
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
-                    _a = kanbanLoadMoreData[status], offset = _a.offset, limit = _a.limit, records = _a.records;
+                    _a = kanbanLoadMoreData[groupByField], offset = _a.offset, limit = _a.limit, records = _a.records;
                     newLoadMoreData = kanbanLoadMoreData;
-                    kanbanLoadMoreData[status].offset = offset + limit;
-                    groupByFieldName = (_f = (_e = (_d = (_c = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _c === void 0 ? void 0 : _c.solidView) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.attrs) === null || _f === void 0 ? void 0 : _f.groupBy;
-                    _g.label = 1;
+                    kanbanLoadMoreData[groupByField].offset = offset + limit;
+                    _c.label = 1;
                 case 1:
-                    _g.trys.push([1, 3, , 4]);
+                    _c.trys.push([1, 3, , 4]);
                     queryData = {
                         offset: offset + limit,
                         limit: limit,
+                        populate: toPopulate,
+                        populateMedia: toPopulateMedia,
+                        populateGroup: true,
                         filters: __assign((_b = {}, _b[groupByFieldName] = {
-                            $in: [status],
+                            $in: [groupByField],
                         }, _b), filters)
                     };
                     queryString = qs.stringify(queryData, {
@@ -342,13 +376,13 @@ export var SolidKanbanView = function (params) {
                     });
                     return [4 /*yield*/, triggerGetSolidEntities(queryString)];
                 case 2:
-                    data = _g.sent();
+                    data = _c.sent();
                     newRecords = data.data.records;
                     currentData = kanbanViewData;
-                    mergeData = function (kanbanViewData, newRecords, status) {
-                        // Find the group matching the specified status
+                    mergeData = function (kanbanViewData, newRecords, groupByField) {
+                        // Find the group matching the specified groupByField
                         var originalData = structuredClone(kanbanViewData);
-                        var targetGroup = originalData.find(function (group) { return group.groupName === status; });
+                        var targetGroup = originalData.find(function (group) { return group.groupName === groupByField; });
                         if (targetGroup) {
                             var groupData = targetGroup.groupData;
                             if (targetGroup.groupData) {
@@ -364,7 +398,7 @@ export var SolidKanbanView = function (params) {
                         }
                         return originalData;
                     };
-                    updatedData = mergeData(kanbanViewData, newRecords, status);
+                    updatedData = mergeData(kanbanViewData, newRecords, groupByField);
                     setKanbanViewData(updatedData);
                     loadmoredata = Object.entries(updatedData).reduce(function (acc, _a) {
                         var key = _a[0], value = _a[1];
@@ -378,7 +412,7 @@ export var SolidKanbanView = function (params) {
                     setKanbanLoadMoreData(loadmoredata);
                     return [3 /*break*/, 4];
                 case 3:
-                    error_1 = _g.sent();
+                    error_1 = _c.sent();
                     console.error("Failed to load more data:", error_1);
                     return [3 /*break*/, 4];
                 case 4: return [2 /*return*/];
@@ -397,6 +431,21 @@ export var SolidKanbanView = function (params) {
         var destinationGroupIndex = kanbanViewData.findIndex(function (group) { return group.groupName === destinationGroupName; });
         if (sourceGroupIndex === -1 || destinationGroupIndex === -1)
             return;
+        // If dragging within the same group
+        if (sourceGroupName === destinationGroupName) {
+            setKanbanViewData(function (prevData) {
+                return prevData.map(function (group) {
+                    if (group.groupName === sourceGroupName) {
+                        var updatedRecords = __spreadArray([], group.groupData.records, true);
+                        var movedItem_1 = updatedRecords.splice(source.index, 1)[0]; // Remove the item
+                        updatedRecords.splice(destination.index, 0, movedItem_1); // Insert at the new position
+                        return __assign(__assign({}, group), { groupData: __assign(__assign({}, group.groupData), { records: updatedRecords }) });
+                    }
+                    return group;
+                });
+            });
+            return;
+        }
         // Deep clone the source and destination groups
         var sourceGroup = JSON.parse(JSON.stringify(kanbanViewData[sourceGroupIndex]));
         var destinationGroup = JSON.parse(JSON.stringify(kanbanViewData[destinationGroupIndex]));
@@ -426,25 +475,25 @@ export var SolidKanbanView = function (params) {
         });
     };
     var handleSwimLinPagination = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var groupByFieldName, columnsToLoadCount, queryData, queryString, data, updatedData;
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        return __generator(this, function (_j) {
-            switch (_j.label) {
+        var columnsToLoadCount, queryData, queryString, data, updatedData;
+        var _a, _b, _c, _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
                 case 0:
                     if (!solidKanbanViewMetaData) return [3 /*break*/, 2];
-                    groupByFieldName = (_d = (_c = (_b = (_a = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.attrs) === null || _d === void 0 ? void 0 : _d.groupBy;
-                    columnsToLoadCount = ((_g = (_f = (_e = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data.solidView) === null || _e === void 0 ? void 0 : _e.layout) === null || _f === void 0 ? void 0 : _f.attrs) === null || _g === void 0 ? void 0 : _g.pageSize) || 5;
+                    columnsToLoadCount = ((_c = (_b = (_a = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data.solidView) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.attrs) === null || _c === void 0 ? void 0 : _c.swimlanesCount) || 5;
                     queryData = {
                         offset: swimLaneCurrentPageNumber * columnsToLoadCount,
                         limit: columnsToLoadCount,
                         fields: ["".concat(groupByFieldName), "count(".concat(groupByFieldName, ")")],
                         groupBy: groupByFieldName,
-                        populate: toPopulate,
                         populateGroup: true,
                         groupFilter: {
                             limit: rows,
                             offset: 0,
-                            filters: filters
+                            filters: filters,
+                            populate: toPopulate,
+                            populateMedia: toPopulateMedia
                         }
                         // sort: [`id:desc`],
                     };
@@ -453,25 +502,24 @@ export var SolidKanbanView = function (params) {
                     });
                     return [4 /*yield*/, triggerGetSolidEntities(queryString)];
                 case 1:
-                    data = _j.sent();
-                    if (data && ((_h = data === null || data === void 0 ? void 0 : data.data) === null || _h === void 0 ? void 0 : _h.groupRecords.length) > 0) {
+                    data = _e.sent();
+                    if (data && ((_d = data === null || data === void 0 ? void 0 : data.data) === null || _d === void 0 ? void 0 : _d.groupRecords.length) > 0) {
                         updatedData = __spreadArray(__spreadArray([], kanbanViewData, true), data.data.groupRecords, true);
                         setKanbanViewData(updatedData);
                     }
                     setSwimLaneCurrentPageNumber(swimLaneCurrentPageNumber + 1);
-                    _j.label = 2;
+                    _e.label = 2;
                 case 2: return [2 /*return*/];
             }
         });
     }); };
     var handleApplyCustomFilter = function (filters) { return __awaiter(void 0, void 0, void 0, function () {
-        var groupByFieldName, columnsToLoadCount, queryData, queryString, data, updatedData;
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        return __generator(this, function (_j) {
-            switch (_j.label) {
+        var columnsToLoadCount, queryData, queryString, data, updatedData;
+        var _a, _b, _c, _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
                 case 0:
-                    groupByFieldName = (_d = (_c = (_b = (_a = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.attrs) === null || _d === void 0 ? void 0 : _d.groupBy;
-                    columnsToLoadCount = ((_g = (_f = (_e = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data.solidView) === null || _e === void 0 ? void 0 : _e.layout) === null || _f === void 0 ? void 0 : _f.attrs) === null || _g === void 0 ? void 0 : _g.pageSize) || 5;
+                    columnsToLoadCount = ((_c = (_b = (_a = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data.solidView) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.attrs) === null || _c === void 0 ? void 0 : _c.swimlanesCount) || 5;
                     setFilters(filters);
                     if (!toPopulate) return [3 /*break*/, 2];
                     queryData = {
@@ -479,12 +527,13 @@ export var SolidKanbanView = function (params) {
                         limit: columnsToLoadCount,
                         fields: ["".concat(groupByFieldName), "count(".concat(groupByFieldName, ")")],
                         groupBy: groupByFieldName,
-                        populate: toPopulate,
                         populateGroup: true,
                         groupFilter: {
                             limit: rows,
                             offset: 0,
-                            filters: filters
+                            filters: filters,
+                            populate: toPopulate,
+                            populateMedia: toPopulateMedia
                         }
                         // sort: [`id:desc`],
                     };
@@ -493,22 +542,22 @@ export var SolidKanbanView = function (params) {
                     });
                     return [4 /*yield*/, triggerGetSolidEntities(queryString)];
                 case 1:
-                    data = _j.sent();
-                    if (data && ((_h = data === null || data === void 0 ? void 0 : data.data) === null || _h === void 0 ? void 0 : _h.groupRecords.length) > 0) {
+                    data = _e.sent();
+                    if (data && ((_d = data === null || data === void 0 ? void 0 : data.data) === null || _d === void 0 ? void 0 : _d.groupRecords.length) > 0) {
                         updatedData = __spreadArray([], data.data.groupRecords, true);
                         setKanbanViewData(updatedData);
                     }
                     setSelectedRecords([]);
-                    _j.label = 2;
+                    _e.label = 2;
                 case 2: return [2 /*return*/];
             }
         });
     }); };
-    return (_jsxs("div", { className: "page-parent-wrapper", children: [_jsx("div", { className: "flex gap-3 mb-4 align-items-center justify-content-between kanban-view", children: _jsxs("div", { className: "flex gap-3 mb-4 align-items-center", children: [actionsAllowed.includes("".concat(createPermission(params.modelName))) && ((_c = (_b = (_a = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.attrs.create) !== false &&
-                            _jsx(SolidCreateButton, { url: createButtonUrl }), actionsAllowed.includes("".concat(deletePermission(params.modelName))) && ((_f = (_e = (_d = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _d === void 0 ? void 0 : _d.solidView) === null || _e === void 0 ? void 0 : _e.layout) === null || _f === void 0 ? void 0 : _f.attrs.delete) !== false && selectedRecords.length > 0 && _jsx(Button, { type: "button", label: "Delete", size: "small", onClick: function () { return setDialogVisible(true); }, className: "small-button", severity: "danger" }), isFilterApplied &&
-                            _jsx(Button, { type: "button", icon: "pi pi-filter-slash", label: "Clear", size: "small", outlined: true, onClick: clearFilter, className: "small-button" }), ((_j = (_h = (_g = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _g === void 0 ? void 0 : _g.solidView) === null || _h === void 0 ? void 0 : _h.layout) === null || _j === void 0 ? void 0 : _j.attrs.enableGlobalSearch) === true &&
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex gap-3 mb-4 align-items-center justify-content-between kanban-view", children: _jsxs("div", { className: "flex gap-3 mb-4 align-items-center", children: [actionsAllowed.includes("".concat(createPermission(params.modelName))) && ((_c = (_b = (_a = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.attrs.create) !== false &&
+                            _jsx(SolidCreateButton, { url: createButtonUrl }), actionsAllowed.includes("".concat(deletePermission(params.modelName))) && ((_f = (_e = (_d = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _d === void 0 ? void 0 : _d.solidView) === null || _e === void 0 ? void 0 : _e.layout) === null || _f === void 0 ? void 0 : _f.attrs.delete) !== false && selectedRecords.length > 0 && _jsx(Button, { type: "button", label: "Delete", size: "small", onClick: function () { return setDialogVisible(true); }, className: "small-button", severity: "danger" }), ((_j = (_h = (_g = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _g === void 0 ? void 0 : _g.solidView) === null || _h === void 0 ? void 0 : _h.layout) === null || _j === void 0 ? void 0 : _j.attrs.enableGlobalSearch) === true &&
                             // <SolidGlobalSearchElement viewData={solidKanbanViewMetaData} handleApplyCustomFilter={handleApplyCustomFilter} ></SolidGlobalSearchElement>
                             _jsx(SolidGlobalSearchElement, { ref: solidGlobalSearchElementRef, viewData: solidKanbanViewMetaData, handleApplyCustomFilter: handleApplyCustomFilter })] }) }), _jsx("style", { children: ".p-datatable .p-datatable-loading-overlay {background-color: rgba(0, 0, 0, 0.0);}" }), solidKanbanViewMetaData && kanbanViewData &&
-                _jsx(KanbanBoard, { kanbanViewData: kanbanViewData, solidViewMetaData: solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data, setKanbanViewData: setKanbanViewData, handleLoadMore: handleLoadMore, onDragEnd: onDragEnd, handleSwimLinPagination: handleSwimLinPagination }), _jsx(Dialog, { visible: isDialogVisible, header: "Confirm Delete", modal: true, footer: function () { return (_jsxs("div", { className: "flex justify-content-center", children: [_jsx(Button, { label: "Yes", icon: "pi pi-check", className: 'small-button', severity: "danger", autoFocus: true, onClick: deleteBulk }), _jsx(Button, { label: "No", icon: "pi pi-times", className: 'small-button', onClick: onDeleteClose })] })); }, onHide: function () { return setDialogVisible(false); }, children: _jsx("p", { children: "Are you sure you want to delete the selected records?" }) })] }));
+                _jsx(KanbanBoard, { groupedView: groupedView, kanbanViewData: kanbanViewData, solidKanbanViewMetaData: solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data, setKanbanViewData: setKanbanViewData, handleLoadMore: handleLoadMore, onDragEnd: onDragEnd, handleSwimLinPagination: handleSwimLinPagination, setLightboxUrls: setLightboxUrls, setOpenLightbox: setOpenLightbox }), _jsx(Dialog, { visible: isDialogVisible, header: "Confirm Delete", modal: true, footer: function () { return (_jsxs("div", { className: "flex justify-content-center", children: [_jsx(Button, { label: "Yes", icon: "pi pi-check", className: 'small-button', severity: "danger", autoFocus: true, onClick: deleteBulk }), _jsx(Button, { label: "No", icon: "pi pi-times", className: 'small-button', onClick: onDeleteClose })] })); }, onHide: function () { return setDialogVisible(false); }, children: _jsx("p", { children: "Are you sure you want to delete the selected records?" }) }), openLightbox &&
+                _jsx(Lightbox, { open: openLightbox, plugins: [Counter, Download], close: function () { return setOpenLightbox(false); }, slides: lightboxUrls })] }));
 };
 //# sourceMappingURL=SolidKanbanView.js.map