@topconsultnpm/sdkui-react-beta 6.15.68 → 6.15.71

package/lib/components/base/TMCounterContainer.d.ts

@@ -1,4 +1,5 @@
 export declare enum CounterItemKey {
+    allItems = "allItems",
     visibleItems = "visibleItems",
     selectedItems = "selectedItems"
 }

package/lib/components/base/TMCounterContainer.js

@@ -38,6 +38,8 @@ const Counter = styled.div `
 /* Enum for possible counter item keys */
 export var CounterItemKey;
 (function (CounterItemKey) {
+    /* Key for all item count */
+    CounterItemKey["allItems"] = "allItems";
     /* Key for visible item count */
     CounterItemKey["visibleItems"] = "visibleItems";
     /* Key for selected item count */

package/lib/components/base/TMDataGrid.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import DataGrid, { Column, HeaderFilter, Selection, Scrolling, LoadPanel, SearchPanel, Pager, Sorting, Paging, FilterPanel, ColumnChooser, Grouping, GroupPanel, Summary, Editing, FilterRow, StateStoring, RowDragging, MasterDetail } from 'devextreme-react/data-grid';
 import DataSource from 'devextreme/data/data_source';
-import { IconSelected, IconVisible, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
+import { IconAll, IconSelected, IconVisible, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
 import TMCounterContainer, { CounterItemKey } from './TMCounterContainer';
 ;
 export var TMDataGridPageSize;
@@ -26,19 +26,24 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     const internalRef = React.useRef(null);
     useImperativeHandle(ref, () => internalRef.current);
     const [counterValues, setCounterValues] = useState(new Map());
-    const [recordCount, setRecordCount] = useState(0);
+    const [totalRecordCount, setTotalRecordCount] = useState(0);
+    const [visibleItemsCount, setVisibleItemsCount] = useState(0);
     useEffect(() => {
         const count = getRecordCount(dataSource);
-        setRecordCount(count);
+        setTotalRecordCount(count);
     }, [dataSource]);
     // Creating a ref to store the timestamp of the last selection change
     const lastSelectionChangeTime = useRef(Date.now());
     useEffect(() => {
         if (counterConfig.show) {
             const defaultCounterItems = new Map([
+                [
+                    CounterItemKey.allItems,
+                    { key: CounterItemKey.allItems, show: true, caption: SDKUI_Localizator.All, value: totalRecordCount, icon: _jsx(IconAll, {}), order: -1 }
+                ],
                 [
                     CounterItemKey.visibleItems,
-                    { key: CounterItemKey.visibleItems, show: true, caption: SDKUI_Localizator.VisibleItems, value: recordCount, icon: _jsx(IconVisible, {}), order: 0 }
+                    { key: CounterItemKey.visibleItems, show: true, caption: SDKUI_Localizator.VisibleItems, value: visibleItemsCount, icon: _jsx(IconVisible, {}), order: 0 }
                 ],
                 [
                     CounterItemKey.selectedItems,
@@ -59,7 +64,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
             }));
             setCounterValues(sortedCounterItems);
         }
-    }, [counterConfig, recordCount, selectedRowKeys]);
+    }, [counterConfig, visibleItemsCount, selectedRowKeys]);
     // Handle selection changes and invoke callback if provided
     const onSelectionChangedCallback = useCallback((e) => {
         lastSelectionChangeTime.current = Date.now(); // Store current time of selection change
@@ -153,21 +158,28 @@ const TMDataGrid = React.forwardRef((props, ref) => {
             });
         }
     }, [showSearchPanel, searchPanelToolbarPosition]);
-    /* const onContentReadyCallback = (e: DataGridTypes.ContentReadyEvent<any, any>) => {
+    // Memoized callback that runs when the DataGrid content is ready
+    const onContentReadyCallback = useCallback((e) => {
+        // If event is undefined, exit early (safety check)
+        if (e === undefined)
+            return;
+        // Call the external onContentReady callback if it was provided
         onContentReady?.(e);
-        if (!internalRef.current) return;
-        if(counterConfig.show === false || counterConfig.items === undefined) return;
-        setRecordCount(internalRef.current.instance().getVisibleRows().length);
-    } */
+        // If ref to the DataGrid is not set yet, exit early
+        if (!internalRef.current)
+            return;
+        // Update state with the current number of visible rows in the DataGrid
+        setVisibleItemsCount(internalRef.current.instance().getVisibleRows().length);
+    }, [onContentReady]);
     return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { style: { width: "100%", height: counterConfig.show ? "calc(100% - 25px)" : "100%" }, children: _jsxs(DataGrid, { ref: internalRef, id: id, className: 'tm-datagrid', 
                     // main properties
                     keyExpr: keyExpr, dataSource: dataSource, selectedRowKeys: selectedRowKeys, focusedRowEnabled: focusedRowEnabled, hoverStateEnabled: hoverStateEnabled, 
                     // events and callbacks
-                    onSelectionChanged: onSelectionChangedCallback, onRowDblClick: onRowDblClickCallback, onRowPrepared: onRowPrepared, onContextMenuPreparing: onContextMenuPreparingCallback, onToolbarPreparing: onToolbarPreparingCallback, onFocusedRowChanged: onFocusedRowChanged, onRowClick: onRowClick, onCellClick: onCellClick, onCellDblClick: onCellDblClick, onOptionChanged: onOptionChanged, onContentReady: onContentReady, onInitialized: onInitialized, customizeColumns: customizeColumns, onEditorPreparing: onEditorPreparing, onCellPrepared: onCellPrepared, onRowUpdating: onRowUpdating, onRowExpanded: onRowExpanded, onRowCollapsed: onRowCollapsed, onRowUpdated: onRowUpdated, onSaved: onSaved, onEditCanceled: onEditCanceled, onEditingStart: onEditingStart, onEditingChange: onEditingChange, onKeyDown: onKeyDown, 
+                    onSelectionChanged: onSelectionChangedCallback, onRowDblClick: onRowDblClickCallback, onRowPrepared: onRowPrepared, onContextMenuPreparing: onContextMenuPreparingCallback, onToolbarPreparing: onToolbarPreparingCallback, onFocusedRowChanged: onFocusedRowChanged, onRowClick: onRowClick, onCellClick: onCellClick, onCellDblClick: onCellDblClick, onOptionChanged: onOptionChanged, onContentReady: onContentReadyCallback, onInitialized: onInitialized, customizeColumns: customizeColumns, onEditorPreparing: onEditorPreparing, onCellPrepared: onCellPrepared, onRowUpdating: onRowUpdating, onRowExpanded: onRowExpanded, onRowCollapsed: onRowCollapsed, onRowUpdated: onRowUpdated, onSaved: onSaved, onEditCanceled: onEditCanceled, onEditingStart: onEditingStart, onEditingChange: onEditingChange, onKeyDown: onKeyDown, 
                     // other properties
                     disabled: disabled, autoNavigateToFocusedRow: autoNavigateToFocusedRow, focusedRowKey: focusedRowKey, columnHidingEnabled: columnHidingEnabled, columnResizingMode: columnResizingMode, columnAutoWidth: columnAutoWidth, allowColumnResizing: allowColumnResizing, allowColumnReordering: allowColumnReordering, showBorders: showBorders, showRowLines: showRowLines, showColumnLines: showColumnLines, showColumnHeaders: showColumnHeaders, rowAlternationEnabled: rowAlternationEnabled, wordWrapEnabled: wordWrapEnabled, noDataText: noDataText, 
                     // styles
-                    width: width, height: height, style: { userSelect: 'none' }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), columnChooser && _jsx(ColumnChooser, { ...columnChooser }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), pager && _jsx(Pager, { ...pager, visible: recordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) })] });
+                    width: width, height: height, style: { userSelect: 'none' }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), columnChooser && _jsx(ColumnChooser, { ...columnChooser }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), pager && _jsx(Pager, { ...pager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) })] });
 });
 export default TMDataGrid;
 const getRecordCount = (dataSource) => {

package/lib/components/features/search/TMSavedQuerySelector.js

@@ -25,8 +25,18 @@ const StyledSqdItem = styled.div `
     white-space: nowrap;
     text-overflow: ellipsis;
 
-    &:hover {
+   &:hover {
         cursor: pointer;
+        background: linear-gradient(
+            270deg,
+            rgba(70, 181, 162, 0.15) 16%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(54, 129, 173, 0.15) 54%,
+            rgba(51, 104, 165, 0.15) 72%,
+            rgba(47, 84, 157, 0.15) 88%,
+            rgba(48, 79, 153, 0.15) 100%
+        );
     }
 
     .info-icon {

package/lib/components/features/search/TMTreeSelector.js

@@ -286,4 +286,18 @@ const StyledTreeListWrapper = styled.div `
 	.dx-selection td {
 		background: oklch(from var(--dx-color-primary) l c h / .2) !important;
 	}
+
+    .dx-data-row:hover {
+        cursor: pointer;
+        background: linear-gradient(
+            270deg,
+            rgba(70, 181, 162, 0.15) 16%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(54, 129, 173, 0.15) 54%,
+            rgba(51, 104, 165, 0.15) 72%,
+            rgba(47, 84, 157, 0.15) 88%,
+            rgba(48, 79, 153, 0.15) 100%
+        );
+    }
 `;

package/lib/components/grids/TMRecentsManager.js

@@ -22,6 +22,16 @@ const StyledRecentTidItem = styled.div `
 
     &:hover {
         cursor: pointer;
+        background: linear-gradient(
+            270deg,
+            rgba(70, 181, 162, 0.15) 16%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(54, 129, 173, 0.15) 54%,
+            rgba(51, 104, 165, 0.15) 72%,
+            rgba(47, 84, 157, 0.15) 88%,
+            rgba(48, 79, 153, 0.15) 100%
+        );
     }
 
     .info-icon {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react-beta",
-  "version": "6.15.68",
+  "version": "6.15.71",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",