@topconsultnpm/sdkui-react-beta 6.10.13 → 6.10.15

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

@@ -0,0 +1,22 @@
+export declare enum CounterItemKey {
+    visibleItems = "visibleItems",
+    selectedItems = "selectedItems"
+}
+export interface ITMCounterItemData {
+    key?: string;
+    show: boolean;
+    caption?: string;
+    icon?: JSX.Element;
+    value?: number | string;
+    order?: number;
+}
+export interface ITMCounterContainerProps {
+    show?: boolean;
+    items?: Map<string, ITMCounterItemData>;
+    bgColorContainer?: string;
+    bgColorItem?: string;
+    textColorItem?: string;
+    hoverColorItem?: string;
+}
+declare const TMCounterContainer: (props: ITMCounterContainerProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export default TMCounterContainer;

package/lib/components/base/TMCounterContainer.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import TMTooltip from './TMTooltip';
+/* Styled container component that holds all counter items */
+const Container = styled.div `
+    background: ${({ bgColor }) => bgColor || 'linear-gradient(to right, #f8f9fa, #e9ecef)'};
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 4px 8px;
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
+    gap: 8px;
+`;
+/* Styled counter item component with customizable styles */
+const Counter = styled.div `
+    display: flex;
+    align-items: center;
+    border-right: 1px solid rgba(211, 211, 211, 0.5);
+    padding: 4px 10px;
+    gap: 8px;
+    transition: all 0.3s ease-in-out;
+    cursor: pointer;
+    background: ${({ color }) => color || 'rgba(255, 255, 255, 0.6)'};
+    
+    &:hover {
+        background: ${({ hoverColor }) => hoverColor || '#ff9800'};
+        transform: translateY(-2px);
+        box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.15);
+        
+        svg, span {
+            color: #fff;
+        }
+    }
+
+    &:last-child {
+        border-right: none;
+    }
+
+    svg {
+        color: ${({ textColor }) => textColor || '#495057'};
+        transition: color 0.3s ease-in-out;
+    }
+
+    span {
+        color: ${({ textColor }) => textColor || '#495057'};
+        transition: color 0.3s ease-in-out;
+    }
+`;
+/* Enum for possible counter item keys */
+export var CounterItemKey;
+(function (CounterItemKey) {
+    /* Key for visible item count */
+    CounterItemKey["visibleItems"] = "visibleItems";
+    /* Key for selected item count */
+    CounterItemKey["selectedItems"] = "selectedItems";
+})(CounterItemKey || (CounterItemKey = {}));
+;
+;
+const TMCounterContainer = (props) => {
+    const { items, bgColorContainer, hoverColorItem, bgColorItem, textColorItem } = props;
+    return (items && _jsx(Container, { bgColor: bgColorContainer, children: [...items.values()].map((item) => {
+            if (!item.show)
+                return null;
+            return _jsx(TMTooltip, { content: item.caption ?? '', children: _jsxs(Counter, { bgColor: bgColorContainer, color: bgColorItem, hoverColor: hoverColorItem, textColor: textColorItem, children: [item.icon ?? null, _jsx("span", { children: item.value?.toString() ?? '' })] }) }, item.key ?? '');
+        }) }));
+};
+export default TMCounterContainer;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { IColumnProps, IDataGridOptions } from 'devextreme-react/data-grid';
+import dxDataGrid from 'devextreme/ui/data_grid';
+import { ITMCounterContainerProps } from './TMCounterContainer';
+export interface TMDataGridContextMenuItem {
+    text: string;
+    icon: string;
+    onClick?: (param?: any) => void;
+    operationType?: 'singleRow' | 'multiRow';
+    disabled?: boolean;
+    id?: string;
+    items?: Array<TMDataGridContextMenuItem>;
+    beginGroup?: boolean;
+}
+export declare enum TMDataGridPageSize {
+    Small = 30,
+    Medium = 50,
+    Large = 100
+}
+export interface TMDataGridProps<T> extends IDataGridOptions {
+    dataColumns: Array<IColumnProps>;
+    focusedRowKey: number | undefined;
+    selectedRowKeys?: Array<number>;
+    pageSize?: TMDataGridPageSize;
+    searchPanelToolbarPosition?: 'before' | 'default';
+    showHeaderFilter?: boolean;
+    showFilterPanel?: boolean;
+    showLoadPanel?: boolean;
+    showColumnChooser?: boolean;
+    showSearchPanel?: boolean;
+    showGroupPanel?: boolean;
+    counterConfig?: ITMCounterContainerProps;
+}
+declare const TMDataGrid: React.ForwardRefExoticComponent<TMDataGridProps<unknown> & React.RefAttributes<dxDataGrid<any, any>>>;
+export default TMDataGrid;

package/lib/components/base/TMDataGrid.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import DataGrid, { Column, HeaderFilter, Selection, Scrolling, LoadPanel, SearchPanel, Pager, Sorting, Paging, FilterPanel, ColumnChooser, Grouping, GroupPanel, Summary, Editing, FilterRow, StateStoring, RowDragging } from 'devextreme-react/data-grid';
+import DataSource from 'devextreme/data/data_source';
+import { IconSelected, IconVisible, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
+import TMCounterContainer, { CounterItemKey } from './TMCounterContainer';
+;
+export var TMDataGridPageSize;
+(function (TMDataGridPageSize) {
+    TMDataGridPageSize[TMDataGridPageSize["Small"] = 30] = "Small";
+    TMDataGridPageSize[TMDataGridPageSize["Medium"] = 50] = "Medium";
+    TMDataGridPageSize[TMDataGridPageSize["Large"] = 100] = "Large";
+})(TMDataGridPageSize || (TMDataGridPageSize = {}));
+const TMDataGrid = React.forwardRef((props, ref) => {
+    const { 
+    // main properties
+    keyExpr = 'id', dataSource, focusedRowEnabled = true, hoverStateEnabled = true, focusedRowKey, selectedRowKeys = [], 
+    // custom options
+    dataColumns = [], pageSize = TMDataGridPageSize.Large, showHeaderFilter = true, showFilterPanel = false, showLoadPanel = true, showSearchPanel = true, searchPanelToolbarPosition = 'before', counterConfig = {
+        show: false,
+        items: new Map()
+    }, 
+    // events and callbacks
+    onSelectionChanged, onFocusedRowChanged, onRowDblClick, onRowClick, onCellClick, onOptionChanged, onContentReady, onContextMenuPreparing, onInitialized, onEditorPreparing, onCellPrepared, onRowPrepared, onRowUpdating, onRowExpanded, onRowCollapsed, onRowUpdated, onSaved, onEditCanceled, onEditingStart, onEditingChange, customizeColumns, scrolling = { mode: 'standard', useNative: SDKUI_Globals.dataGridUseNativeScrollbar }, paging = { enabled: true, pageSize: pageSize }, pager = { visible: true, showInfo: true, showNavigationButtons: true }, selection = { mode: 'multiple', showCheckBoxesMode: "always", selectAllMode: "allPages" }, sorting, summary, stateStoring, columnChooser, grouping, groupPanel, filterRow, headerFilter, editing, rowDragging, 
+    // other properties
+    disabled = false, autoNavigateToFocusedRow = true, columnResizingMode = 'widget', columnHidingEnabled = true, columnAutoWidth = true, allowColumnResizing = true, allowColumnReordering = true, showBorders = true, showRowLines = true, showColumnLines = false, showColumnHeaders = true, rowAlternationEnabled = false, wordWrapEnabled = false, 
+    // styles
+    width = '100%', height = '100%', } = props;
+    const [counterValues, setCounterValues] = useState(new Map());
+    const [recordCount, setRecordCount] = useState(0);
+    useEffect(() => {
+        const count = getRecordCount(dataSource);
+        setRecordCount(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.visibleItems,
+                    { key: CounterItemKey.visibleItems, show: true, caption: SDKUI_Localizator.VisibleItems, value: recordCount, icon: _jsx(IconVisible, {}), order: 0 }
+                ],
+                [
+                    CounterItemKey.selectedItems,
+                    { key: CounterItemKey.selectedItems, show: true, caption: SDKUI_Localizator.SelectedItems, value: selectedRowKeys.length, icon: _jsx(IconSelected, {}), order: 1 }
+                ]
+            ]);
+            const mergedCounterItems = new Map(defaultCounterItems);
+            counterConfig.items?.forEach((value, key) => { mergedCounterItems.set(key.toString(), value); });
+            // Convert map to array and sort by order, then caption alphabetically
+            const sortedCounterItems = new Map([...mergedCounterItems.entries()]
+                .sort((a, b) => {
+                const aValue = a[1]; // Extract value
+                const bValue = b[1];
+                if ((aValue.order ?? 0) === (bValue.order ?? 0)) {
+                    return (aValue.caption ?? '').localeCompare(bValue.caption ?? '');
+                }
+                return (aValue.order ?? 0) - (bValue.order ?? 0);
+            }));
+            setCounterValues(sortedCounterItems);
+        }
+    }, [counterConfig, recordCount, selectedRowKeys]);
+    // Handle selection changes and invoke callback if provided
+    const onSelectionChangedCallback = useCallback((e) => {
+        lastSelectionChangeTime.current = Date.now(); // Store current time of selection change
+        if (onSelectionChanged)
+            onSelectionChanged(e);
+    }, [onSelectionChanged]);
+    // Handle row double-click event
+    const onRowDblClickCallback = useCallback((e) => {
+        if (Date.now() - lastSelectionChangeTime.current < 300) {
+            // Skip the double-click if selection has changed recently
+            return;
+        }
+        if (onRowDblClick)
+            onRowDblClick(e);
+    }, [onRowDblClick]);
+    // Update context menu items based on operation type (single row or multi row)
+    const updateContextMenuItems = useCallback((items, rowID) => {
+        return items.map(item => {
+            // Determine if item is explicitly disabled; default to `false` if not provided
+            let disabled = item.disabled ?? false;
+            // Variable to determine if the item should be disabled based on row selection
+            let disabledCalculation = false;
+            // Get the active row ID, prioritizing `focusedRowKey` if `focusedRowEnabled` is true
+            const id = focusedRowEnabled ? focusedRowKey : rowID;
+            // Disable items based on their operation type and selection state
+            if (item.operationType === 'singleRow') {
+                // A single-row operation requires exactly one row to be selected
+                disabledCalculation = selectedRowKeys.length > 1 || id === undefined;
+            }
+            if (item.operationType === 'multiRow') {
+                // A multi-row operation requires at least one selected row
+                disabledCalculation = selectedRowKeys.length === 0 && id === undefined;
+            }
+            return {
+                ...item,
+                disabled: disabled || disabledCalculation, // An item is disabled if it's explicitly set to `true` or if the calculation above determines so
+                // Define the behavior when the menu item is clicked
+                onClick: () => {
+                    // If there is no click handler defined, exit early
+                    if (!item.onClick)
+                        return;
+                    if (item.operationType === 'singleRow' && id !== undefined) {
+                        // For single-row operations, call onItemClick with the row ID
+                        item.onClick(id);
+                    }
+                    else if (item.operationType === 'multiRow' && id !== undefined) {
+                        // For multi-row operations, determine the appropriate argument
+                        if (selectedRowKeys.length > 0) {
+                            // If multiple rows are selected, pass all selected row IDs
+                            item.onClick(selectedRowKeys);
+                        }
+                        else if (id !== undefined) {
+                            // If no rows are selected but `id` exists, pass it as an array
+                            item.onClick([id]);
+                        }
+                    }
+                    else {
+                        // For general operations without a specific row selection
+                        item.onClick();
+                    }
+                },
+                // Recursively update nested menu items, if present
+                items: item.items ? updateContextMenuItems(item.items, id) : undefined,
+            };
+        });
+    }, [focusedRowEnabled, focusedRowKey, selectedRowKeys]);
+    // Handle context menu preparation
+    const onContextMenuPreparingCallback = useCallback((e) => {
+        if (e === undefined)
+            return;
+        if (onContextMenuPreparing)
+            onContextMenuPreparing(e);
+        if (e.target === 'content') {
+            e.items = e.items || [];
+            if (e.items.length > 0) {
+                const rowId = e.row?.key;
+                const updatedContextMenuItems = updateContextMenuItems(e.items, rowId);
+                e.items = [...updatedContextMenuItems];
+            }
+        }
+    }, [updateContextMenuItems, onContextMenuPreparing]);
+    // Handle toolbar preparation, especially for the search panel
+    const onToolbarPreparingCallback = useCallback((e) => {
+        if (e === undefined || e.toolbarOptions === undefined || e.toolbarOptions.items === undefined)
+            return;
+        if (showSearchPanel && searchPanelToolbarPosition === 'before') {
+            e.toolbarOptions.items.forEach((item) => {
+                if (item.name === "searchPanel") {
+                    item.location = "before";
+                }
+            });
+        }
+    }, []);
+    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: ref, 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, 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, 
+                    // 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, 
+                    // 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 }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), pager && _jsx(Pager, { ...pager, visible: recordCount > pageSize })] }) }), 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) => {
+    if (Array.isArray(dataSource)) {
+        return dataSource.length; // For array
+    }
+    if (dataSource instanceof DataSource) {
+        return dataSource.totalCount(); // For DataSource instance
+    }
+    return 0; // Default case when neither condition is met
+};

package/lib/components/index.d.ts

@@ -54,4 +54,5 @@ export * from "./viewers/TMTidViewer";
 export * from "./viewers/TMMidViewer";
 export * from "./viewers/TMDataListItemViewer";
 export * from "./base/TMDeviceProvider";
+export { default as TMDataGrid } from "./base/TMDataGrid";
 export { default as TMAreaManager } from "./base/TMAreaManager";

package/lib/components/index.js

@@ -66,4 +66,5 @@ export * from "./viewers/TMMidViewer";
 export * from "./viewers/TMDataListItemViewer";
 //TMDeviceProvider
 export * from "./base/TMDeviceProvider";
+export { default as TMDataGrid } from "./base/TMDataGrid";
 export { default as TMAreaManager } from "./base/TMAreaManager";

package/lib/helper/SDKUI_Localizator.d.ts

@@ -305,6 +305,7 @@ export declare class SDKUI_Localizator {
     static get View_Metadato(): "Anzeige (Methadaten)" | "Visualization (metadata)" | "Visualización (metadato)" | "Visualisation (métadonnée)" | "Display (metadados)" | "Visualizzazione (metadato)";
     static get ViewWithCheckOption(): "Kontrolle über Archivierung und Bearbeitung" | "Check on archive and update" | "Control en almacenamiento y modificación" | "Contrôle de l'archivage et la modifie" | "Controle de arquivamento e edição" | "Controllo su archiviazione e modifica";
     static get Visible(): "Sichtbar" | "Visible" | "Visibles" | "Visibiles" | "Visíveis" | "Visibili";
+    static get VisibleItems(): "sichtbare Elemente" | "Visible items" | "elementos visibles" | "éléments visibles" | "itens visíveis" | "Elementi visibili";
     static get WelcomeTo(): "Willkommen bei {{0}}" | "Welcome to {{0}}" | "Bienvenido a {{0}}" | "Bienvenue sur {{0}}" | "Bem-vindo à {{0}}" | "Benvenuto su {{0}}";
     static get WorkflowApproval(): "Workflow-Genehmigung" | "Workflow approval" | "Aprobación de flujo de trabajo" | "Approbation de workflow" | "Aprovação de fluxo de trabalho" | "Approvazione workflow";
     static get Yes(): "Ja" | "Yes" | "Sí" | "Oui" | "Sim" | "Sì";

package/lib/helper/SDKUI_Localizator.js

@@ -3008,6 +3008,16 @@ export class SDKUI_Localizator {
             default: return "Visibili";
         }
     }
+    static get VisibleItems() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "sichtbare Elemente";
+            case CultureIDs.En_US: return "Visible items";
+            case CultureIDs.Es_ES: return "elementos visibles";
+            case CultureIDs.Fr_FR: return "éléments visibles";
+            case CultureIDs.Pt_PT: return "itens visíveis";
+            default: return "Elementi visibili";
+        }
+    }
     static get WelcomeTo() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Willkommen bei {{0}}";

package/package.json

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