@solidxai/core-ui 0.1.4-beta.0 → 0.1.4-beta.2

package/dist/components/core/tree/SolidTreeView.js

@@ -54,7 +54,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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import { Toast } from "primereact/toast";
 import { useDispatch, useSelector } from "react-redux";
@@ -81,10 +81,10 @@ import CozyImage from '../../../resources/images/layout/images/cozy.png';
 import ComfortableImage from '../../../resources/images/layout/images/comfortable.png';
 import { Divider } from "primereact/divider";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
-import { getSingularAndPlural } from "../../../helpers/helpers";
 import { getFilterObjectFromLocalStorage, setFilterObjectToLocalStorage } from "../list/SolidListView";
 import { HomePageModuleSvg } from "../../Svg/HomePageModuleSvg";
 import { getExtensionFunction } from "../../../helpers/registry";
+import { Tooltip } from "primereact/tooltip";
 var DEFAULT_PAGE_SIZE = 25;
 // ─── Component ────────────────────────────────────────────────────────────────
 export var SolidTreeView = forwardRef(function (params, ref) {
@@ -222,6 +222,12 @@ export var SolidTreeView = forwardRef(function (params, ref) {
     var activeGroupingRules = useMemo(function () { return (groupingRules || []).filter(function (rule) { return !!(rule === null || rule === void 0 ? void 0 : rule.fieldName); }); }, [groupingRules]);
     useEffect(function () { latestFiltersRef.current = filters; }, [filters]);
     useEffect(function () { latestFilterPredicatesRef.current = filterPredicates; }, [filterPredicates]);
+    useEffect(function () {
+        var _a;
+        if (solidTreeViewMetaData) {
+            setViewModes((_a = solidTreeViewMetaData === null || solidTreeViewMetaData === void 0 ? void 0 : solidTreeViewMetaData.data) === null || _a === void 0 ? void 0 : _a.viewModes);
+        }
+    }, [solidTreeViewMetaData]);
     useEffect(function () {
         var _a, _b, _c, _d, _e, _f;
         var solidFieldsMetadata = (_a = solidTreeViewMetaData === null || solidTreeViewMetaData === void 0 ? void 0 : solidTreeViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidFieldsMetadata;
@@ -502,10 +508,10 @@ export var SolidTreeView = forwardRef(function (params, ref) {
                     mergedFilters = mergeFiltersWithImplicit(implicitFilters);
                     if (mergedFilters)
                         queryData.filters = mergedFilters;
-                    dynamicHeader = (_c = (_b = (_a = solidTreeViewMetaData === null || solidTreeViewMetaData === void 0 ? void 0 : solidTreeViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.onBeforeTreeLoad;
+                    dynamicHeader = (_c = (_b = (_a = solidTreeViewMetaData === null || solidTreeViewMetaData === void 0 ? void 0 : solidTreeViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.onBeforeTreeDataLoad;
                     dynamicExtensionFunction = null;
                     event = {
-                        type: "onBeforeTreeLoad",
+                        type: "onBeforeTreeDataLoad",
                         level: ruleIndex,
                         levelFieldName: rule.fieldName,
                         fieldsMetadata: (_d = solidTreeViewMetaData === null || solidTreeViewMetaData === void 0 ? void 0 : solidTreeViewMetaData.data) === null || _d === void 0 ? void 0 : _d.solidFieldsMetadata,
@@ -537,7 +543,7 @@ export var SolidTreeView = forwardRef(function (params, ref) {
                     return [3 /*break*/, 4];
                 case 3:
                     err_1 = _f.sent();
-                    console.error("Error executing onBeforeTreeLoad extension:", err_1);
+                    console.error("Error executing onBeforeTreeDataLoad extension:", err_1);
                     return [3 /*break*/, 4];
                 case 4:
                     queryString = qs.stringify(queryData, { encodeValuesOnly: true });
@@ -565,10 +571,10 @@ export var SolidTreeView = forwardRef(function (params, ref) {
                     mergedFilters = mergeFiltersWithImplicit(implicitFilters);
                     if (mergedFilters)
                         queryData.filters = mergedFilters;
-                    dynamicHeader = (_c = (_b = (_a = solidTreeViewMetaData === null || solidTreeViewMetaData === void 0 ? void 0 : solidTreeViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.onBeforeTreeLoad;
+                    dynamicHeader = (_c = (_b = (_a = solidTreeViewMetaData === null || solidTreeViewMetaData === void 0 ? void 0 : solidTreeViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.onBeforeTreeDataLoad;
                     dynamicExtensionFunction = null;
                     event = {
-                        type: "onBeforeTreeLoad",
+                        type: "onBeforeTreeDataLoad",
                         level: groupPath.length,
                         levelFieldName: groupPath[groupPath.length - 1].fieldName,
                         fieldsMetadata: (_d = solidTreeViewMetaData === null || solidTreeViewMetaData === void 0 ? void 0 : solidTreeViewMetaData.data) === null || _d === void 0 ? void 0 : _d.solidFieldsMetadata,
@@ -600,7 +606,7 @@ export var SolidTreeView = forwardRef(function (params, ref) {
                     return [3 /*break*/, 4];
                 case 3:
                     err_2 = _f.sent();
-                    console.error("Error executing onBeforeTreeLoad extension:", err_2);
+                    console.error("Error executing onBeforeTreeDataLoad extension:", err_2);
                     return [3 /*break*/, 4];
                 case 4:
                     queryString = qs.stringify(queryData, { encodeValuesOnly: true });
@@ -1022,9 +1028,10 @@ export var SolidTreeView = forwardRef(function (params, ref) {
                 return null;
             var originalBody = (_b = listColumn === null || listColumn === void 0 ? void 0 : listColumn.props) === null || _b === void 0 ? void 0 : _b.body;
             var originalProps = (listColumn === null || listColumn === void 0 ? void 0 : listColumn.props) || {};
+            var mergedColumnStyle = __assign({ minWidth: "12rem" }, (originalProps.style || {}));
             return (_jsx(Column, { field: (_c = originalProps.field) !== null && _c !== void 0 ? _c : fieldMetadata.name, header: originalProps.header, 
                 // sortable
-                style: originalProps.style, className: originalProps.className, headerClassName: originalProps.headerClassName, bodyClassName: originalProps.bodyClassName, align: originalProps.align, alignHeader: originalProps.alignHeader, body: function (node, options) {
+                style: mergedColumnStyle, className: originalProps.className, headerClassName: originalProps.headerClassName, bodyClassName: originalProps.bodyClassName, align: originalProps.align, alignHeader: originalProps.alignHeader, body: function (node, options) {
                     var _a, _b;
                     var rowData = (_a = node === null || node === void 0 ? void 0 : node.data) !== null && _a !== void 0 ? _a : node;
                     var nodeMeta = rowData === null || rowData === void 0 ? void 0 : rowData.__treeMeta;
@@ -1065,7 +1072,9 @@ export var SolidTreeView = forwardRef(function (params, ref) {
         if ((nodeMeta === null || nodeMeta === void 0 ? void 0 : nodeMeta.nodeType) !== "group")
             return _jsx("span", { children: "\u00A0" });
         var label = (_a = nodeMeta.groupLabel) !== null && _a !== void 0 ? _a : "";
-        return _jsx("span", { className: "font-semibold", children: label });
+        var truncateAfter = 30;
+        return (_jsxs("div", { className: "flex align-items-center", children: [_jsx("div", { className: "solid-table-row", style: { maxWidth: "".concat(truncateAfter, "ch") }, children: _jsx("span", { className: "font-semibold", children: label }) }), truncateAfter && label.length > truncateAfter &&
+                    _jsxs(_Fragment, { children: [_jsx(Tooltip, { target: ".solid-field-tooltip-icon" }), _jsx("i", { className: "pi pi-info-circle solid-field-tooltip-icon", "data-pr-tooltip": label })] })] }));
     };
     // ─── Root pagination bar ──────────────────────────────────────────────────
     var RootPaginationBar = function () {
@@ -1115,7 +1124,7 @@ export var SolidTreeView = forwardRef(function (params, ref) {
                                         ((_s = (_r = (_q = solidTreeViewMetaData === null || solidTreeViewMetaData === void 0 ? void 0 : solidTreeViewMetaData.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.delete) !== false &&
                                         selectedRecords.length > 0 && (_jsx(Button, { type: "button", label: "Delete", size: "small", onClick: function () { return setDeleteRecordsDialogVisible(true); }, className: "small-button", severity: "danger" })), _jsx(Button, { type: "button", size: "small", icon: "pi pi-refresh", severity: "secondary", className: "solid-icon-button", outlined: true, onClick: function () { void loadRootGroups(getPagination("root").offset); } }), showArchived && (_jsx(Button, { type: "button", icon: "pi pi-refresh", label: "Recover", size: "small", severity: "secondary", className: "hidden lg:flex solid-icon-button ", onClick: function () { return setRecoverDialogVisible(true); } })), params.embeded === false &&
                                         ((_t = solidTreeViewLayout === null || solidTreeViewLayout === void 0 ? void 0 : solidTreeViewLayout.attrs) === null || _t === void 0 ? void 0 : _t.configureView) !== false && (_jsx(SolidListViewConfigure, { listViewMetaData: solidTreeViewMetaData, solidListViewLayout: solidTreeViewLayout, setShowArchived: setShowArchived, showArchived: showArchived, viewData: solidTreeViewMetaData, sizeOptions: sizeOptions, setSize: setSize, size: size, viewModes: viewModes, params: params, actionsAllowed: actionsAllowed, selectedRecords: selectedRecords, setDialogVisible: setDeleteRecordsDialogVisible, setShowSaveFilterPopup: setShowSaveFilterPopup, filters: filters, handleFetchUpdatedRecords: handleFetchUpdatedRecords, setRecoverDialogVisible: setRecoverDialogVisible }))] })] }), ((_w = (_v = (_u = solidTreeViewMetaData === null || solidTreeViewMetaData === void 0 ? void 0 : solidTreeViewMetaData.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.enableGlobalSearch) === true &&
-                        showGlobalSearchElement && (_jsx("div", { className: "flex lg:hidden", children: _jsx(SolidGlobalSearchElement, { viewType: "tree", showSaveFilterPopup: showSaveFilterPopup, setShowSaveFilterPopup: setShowSaveFilterPopup, ref: solidGlobalSearchElementRef, viewData: solidTreeViewMetaData, handleApplyCustomFilter: handleApplyCustomFilter }) }))] }), _jsx("style", { children: ".p-datatable .p-datatable-loading-overlay, .p-treetable .p-treetable-loading-overlay {background-color: rgba(0, 0, 0, 0.0);}" }), _jsx("div", { className: "solid-datatable-wrapper solid-treetable-wrapper flex-1 min-h-0", children: activeGroupingRules.length === 0 ? (_jsxs("div", { className: "flex flex-column align-items-center justify-content-center h-full p-6 text-center", children: [_jsx("div", { className: "mb-4", style: { opacity: 0.1 }, children: _jsx(HomePageModuleSvg, {}) }), _jsx("h3", { className: "m-0 mb-2", style: { color: "var(--solid-dark-title)", fontWeight: 700, fontSize: '1.5rem' }, children: "Tree View" }), _jsxs("p", { className: "m-0 text-sl", style: { maxWidth: '35rem', lineHeight: '1.5', color: 'var(--text-color)' }, children: ["To visualize your data in a hierarchical structure, please apply a ", _jsx("strong", { children: "Grouping Rule" }), " from the Global Search bar above."] })] })) : (_jsxs(TreeTable, { value: treeNodes, lazy: true, loading: treeLoading, expandedKeys: expandedKeys, onToggle: function (event) { return setExpandedKeys(event.value); }, onExpand: handleNodeExpand, scrollable: true, tableClassName: "solid-data-table", selectionMode: "checkbox", selectionKeys: selectedNodeKeys, sortField: sortField, sortOrder: sortOrder, removableSort: true, onSort: function (e) {
+                        showGlobalSearchElement && (_jsx("div", { className: "flex lg:hidden", children: _jsx(SolidGlobalSearchElement, { viewType: "tree", showSaveFilterPopup: showSaveFilterPopup, setShowSaveFilterPopup: setShowSaveFilterPopup, ref: solidGlobalSearchElementRef, viewData: solidTreeViewMetaData, handleApplyCustomFilter: handleApplyCustomFilter }) }))] }), _jsx("style", { children: "\n       \n      " }), _jsx("div", { className: "solid-datatable-wrapper solid-treetable-wrapper flex-1 min-h-0 overflow-auto", children: activeGroupingRules.length === 0 ? (_jsxs("div", { className: "flex flex-column align-items-center justify-content-center h-full p-6 text-center", children: [_jsx("div", { className: "mb-4", style: { opacity: 0.1 }, children: _jsx(HomePageModuleSvg, {}) }), _jsx("h3", { className: "m-0 mb-2", style: { color: "var(--solid-dark-title)", fontWeight: 700, fontSize: '1.5rem' }, children: "Tree View" }), _jsxs("p", { className: "m-0 text-sl", style: { maxWidth: '35rem', lineHeight: '1.5', color: 'var(--text-color)' }, children: ["To visualize your data in a hierarchical structure, please apply a ", _jsx("strong", { children: "Grouping Rule" }), " from the Global Search bar above."] })] })) : (_jsxs(TreeTable, { value: treeNodes, lazy: true, loading: treeLoading, expandedKeys: expandedKeys, onToggle: function (event) { return setExpandedKeys(event.value); }, onExpand: handleNodeExpand, scrollable: true, tableStyle: { minWidth: "max-content" }, tableClassName: "solid-data-table", resizableColumns: true, columnResizeMode: "expand", selectionMode: "checkbox", selectionKeys: selectedNodeKeys, sortField: sortField, sortOrder: sortOrder, removableSort: true, onSort: function (e) {
                         setSortField(e.sortField);
                         setSortOrder(e.sortOrder);
                     }, onSelectionChange: function (e) {
@@ -1131,8 +1140,8 @@ export var SolidTreeView = forwardRef(function (params, ref) {
                             });
                             return next;
                         });
-                    }, children: [_jsx(Column, { field: "__group", header: "Group", sortable: true, expander: function (node) { var _a, _b; return ((_b = (_a = node === null || node === void 0 ? void 0 : node.data) === null || _a === void 0 ? void 0 : _a.__treeMeta) === null || _b === void 0 ? void 0 : _b.nodeType) === "group"; }, body: groupColumnBody, style: { minWidth: "18rem" } }, "tree-group-column"), renderColumnsDynamically(), renderAggregateColumns(), _jsx(Column, { header: "", style: { width: "20rem" }, body: function (node) {
-                                var _a, _b, _c, _d, _e;
+                    }, children: [_jsx(Column, { field: "__group", header: "Group", sortable: true, expander: function (node) { var _a, _b; return ((_b = (_a = node === null || node === void 0 ? void 0 : node.data) === null || _a === void 0 ? void 0 : _a.__treeMeta) === null || _b === void 0 ? void 0 : _b.nodeType) === "group"; }, body: groupColumnBody, style: { minWidth: "18rem", display: "flex", alignItems: "center" } }, "tree-group-column"), renderColumnsDynamically(), renderAggregateColumns(), _jsx(Column, { header: "", style: { width: "20rem" }, body: function (node) {
+                                var _a, _b, _c, _d;
                                 var rowData = node === null || node === void 0 ? void 0 : node.data;
                                 var nodeMeta = rowData === null || rowData === void 0 ? void 0 : rowData.__treeMeta;
                                 if ((nodeMeta === null || nodeMeta === void 0 ? void 0 : nodeMeta.nodeType) !== "group")
@@ -1161,7 +1170,7 @@ export var SolidTreeView = forwardRef(function (params, ref) {
                                         // Use displayName if available, fallback to fieldName
                                         return (_c = (_b = fieldMeta === null || fieldMeta === void 0 ? void 0 : fieldMeta.displayName) !== null && _b !== void 0 ? _b : fieldMeta === null || fieldMeta === void 0 ? void 0 : fieldMeta.name) !== null && _c !== void 0 ? _c : fieldName;
                                     })();
-                                return (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.2rem", justifyContent: "flex-end" }, onClick: function (e) { return e.stopPropagation(); }, children: [_jsxs("span", { style: { fontSize: "0.9rem", color: "var(--text-color-secondary)", whiteSpace: "nowrap" }, children: [pagEntry.offset + 1, "\u2013", Math.min(pagEntry.offset + pagEntry.limit, pagEntry.total), " of ", pagEntry.total, " ", (_e = getSingularAndPlural(ofLabel).toPlural) !== null && _e !== void 0 ? _e : ofLabel, " in ", inLabel] }), _jsx(Button, { type: "button", icon: "pi pi-angle-left", size: "small", rounded: true, outlined: true, disabled: !canPrev || treeLoading, style: { padding: 0, border: "none", width: "2rem" }, className: "small-button", onClick: function () { return handleNodePageChange(nodeKey, "prev"); } }), _jsx(Button, { type: "button", icon: "pi pi-angle-right", size: "small", rounded: true, outlined: true, disabled: !canNext || treeLoading, style: { padding: 0, border: "none", width: "2rem" }, className: "small-button", onClick: function () { return handleNodePageChange(nodeKey, "next"); } })] }));
+                                return (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.2rem", justifyContent: "flex-end" }, onClick: function (e) { return e.stopPropagation(); }, children: [_jsx(Button, { type: "button", icon: "pi pi-angle-left", size: "small", rounded: true, outlined: true, disabled: !canPrev || treeLoading, style: { padding: 0, border: "none", width: "2rem" }, className: "small-button", onClick: function () { return handleNodePageChange(nodeKey, "prev"); } }), _jsx(Button, { type: "button", icon: "pi pi-angle-right", size: "small", rounded: true, outlined: true, disabled: !canNext || treeLoading, style: { padding: 0, border: "none", width: "2rem" }, className: "small-button", onClick: function () { return handleNodePageChange(nodeKey, "next"); } })] }));
                             } }, "tree-last-frozen-column")] })) }), _jsx(RootPaginationBar, {}), _jsxs(Dialog, { visible: isDeleteRecordsDialogVisible, header: "Confirm Delete", onHide: function () { return setDeleteRecordsDialogVisible(false); }, headerClassName: "py-2", contentClassName: "px-0 pb-0", 
                 // style={{ width: '20vw' }}
                 breakpoints: { '1199px': '30rem', '550px': '85vw' }, children: [_jsx(Divider, { className: "m-0" }), _jsxs("div", { className: "p-4", children: [_jsx("p", { className: "m-0 solid-primary-title", style: { fontSize: 16 }, children: "Are you sure you want to delete the selected records?" }), _jsxs("div", { className: "flex align-items-center gap-2 mt-3", children: [_jsx(Button, { label: "Delete", severity: "danger", size: "small", autoFocus: true, onClick: deleteBulk }), _jsx(Button, { label: "Cancel", size: "small", onClick: onDeleteClose, outlined: true, className: 'bg-primary-reverse' })] })] })] }), _jsx(Dialog, { visible: isRecoverDialogVisible, header: "Confirm Recover", modal: true, className: "solid-confirm-dialog", footer: function () { return (_jsxs("div", { className: "flex justify-content-center", children: [_jsx(Button, { label: "Yes", icon: "pi pi-check", severity: "danger", autoFocus: true, onClick: recoverAll }), _jsx(Button, { label: "No", icon: "pi pi-times", onClick: function () { return setRecoverDialogVisible(false); } })] })); }, onHide: function () { return setRecoverDialogVisible(false); }, children: _jsx("p", { children: "Are you sure you want to recover all records?" }) })] }));