@topconsultnpm/sdkui-react-beta 6.10.19 → 6.10.21

package/lib/components/base/TMDataGrid.js

@@ -16,10 +16,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     // 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()
-    }, 
+    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

package/lib/components/base/TMRightSidebar.js

@@ -31,7 +31,7 @@ const TMRightSidebar = ({ items = [], onItemClick, selectedItem, showPanel = fal
             onItemClick && onItemClick(item.id, activeItems.has(item.id));
         }
     };
-    return (_jsx(SidebarContainer, { children: items.map((item, index) => (item.visible !== false && (_jsxs(StyledMenuItem, { "$disabled": item.disabled, style: { paddingTop: '10px', borderTop: item.beginGroup ? '2px solid #9c9c9c' : 'none' }, "$isHovered": hoveredItem === item.id, "$isSelected": item.isActive, onMouseEnter: () => setHoveredItem(item.id), onMouseLeave: () => setHoveredItem(null), onClick: () => item.onClick?.() ?? onClickHandler(item), children: [_jsx(StyledAnimatedComponentScaleColor, { "$delay": `${(index * 150) + 650}ms`, children: item.icon }), _jsx("span", { children: item.visibleName })] }, item.id)))) }));
+    return (_jsx(SidebarContainer, { children: items.map((item, index) => (item.visible !== false && (_jsxs(StyledMenuItem, { "$disabled": item.disabled, style: { paddingTop: '10px', borderTop: item.beginGroup ? '2px solid #9c9c9c' : 'none' }, "$isHovered": hoveredItem === item.id, "$isSelected": item.isActive, onMouseEnter: () => setHoveredItem(item.id), onMouseLeave: () => setHoveredItem(null), onClick: () => !item.disabled && (item.onClick?.() ?? onClickHandler(item)), children: [_jsx(StyledAnimatedComponentScaleColor, { "$delay": `${(index * 150) + 650}ms`, children: item.icon }), _jsx("span", { children: item.visibleName })] }, item.id)))) }));
 };
 export default TMRightSidebar;
 // Styled Components

package/lib/hooks/useForm.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { FormModes } from "../ts";
 import { TMExceptionBoxManager, TMSpinner } from "../components";
-import { AreaDescriptor, BasketTypeDescriptor, DataListDescriptor, DiskDescriptor, GroupDescriptor, JobEngine, JobTypes, LDAPDescriptor, LDAPProviders, MembershipConstraints, NumeratorDescriptor, ObjectClasses, ProcessEngine, ResultTypes, SavedQueryEngine, SDK_Globals, SignCertDescriptor, TaskDescriptor, TreeDescriptor, TSADescriptor, UserDescriptor } from "@topconsultnpm/sdk-ts-beta";
+import { AreaDescriptor, BasketTypeDescriptor, DataListDescriptor, DiskDescriptor, GroupDescriptor, JobEngine, JobTypes, LDAPDescriptor, LDAPProviders, MembershipConstraints, NumeratorDescriptor, ObjectClasses, ProcessEngine, ResultTypes, SavedQueryEngine, SDK_Globals, SignCertDescriptor, TaskDescriptor, TreeDescriptor, TSADescriptor, UserDescriptor, UserLevels, UserTypes } from "@topconsultnpm/sdk-ts-beta";
 import { PlatformObjectService } from "../services";
 import { SDKUI_Localizator, calcIsModified } from "../helper";
 export class SaveFormOptions {
@@ -15,6 +15,26 @@ export function useSaveForm(formMode, id, sfo, validator, onSaved, onStatusChang
     const [formDataOrig, setFormDataOrig] = useState();
     const [exception, setException] = useState();
     const [validationItems, setValidationItems] = useState([]);
+    // #region Normalize object
+    function normalizeGroup(d) {
+        d.membershipConstraint = MembershipConstraints.Mixed;
+        return d;
+    }
+    function normalizeLDAP(d) {
+        d.provider = LDAPProviders.MSActiveDirectory;
+        return d;
+    }
+    function normalizeSignCert(d) {
+        d.isAuto = 1;
+        return d;
+    }
+    function normalizeUser(d) {
+        d.level = UserLevels.Member;
+        d.type = UserTypes.TopMedia;
+        d.secureAuth = 1;
+        return d;
+    }
+    // #endregion
     const getDataAsync = async (id, fm) => {
         switch (fm) {
             case FormModes.Create:
@@ -23,22 +43,13 @@ export function useSaveForm(formMode, id, sfo, validator, onSaved, onStatusChang
                     case ObjectClasses.BasketType: return new BasketTypeDescriptor();
                     case ObjectClasses.Disk: return new DiskDescriptor();
                     case ObjectClasses.DataList: return new DataListDescriptor();
-                    case ObjectClasses.Group:
-                        let newGroup = new GroupDescriptor();
-                        newGroup.membershipConstraint = MembershipConstraints.Mixed;
-                        return newGroup;
-                    case ObjectClasses.LDAP:
-                        let newLdap = new LDAPDescriptor();
-                        newLdap.provider = LDAPProviders.MSActiveDirectory;
-                        return newLdap;
+                    case ObjectClasses.Group: return normalizeGroup(new GroupDescriptor());
+                    case ObjectClasses.LDAP: return normalizeLDAP(new LDAPDescriptor());
                     case ObjectClasses.Numerator: return new NumeratorDescriptor();
-                    case ObjectClasses.SignCert:
-                        let newSc = new SignCertDescriptor();
-                        newSc.isAuto = 1;
-                        return newSc;
+                    case ObjectClasses.SignCert: return normalizeSignCert(new SignCertDescriptor());
                     case ObjectClasses.Tree: return new TreeDescriptor();
                     case ObjectClasses.TSA: return new TSADescriptor();
-                    case ObjectClasses.User: return new UserDescriptor();
+                    case ObjectClasses.User: return normalizeUser(new UserDescriptor());
                     case ObjectClasses.Process: return ProcessEngine.NewProcessDescriptor();
                     case ObjectClasses.Job: return JobEngine.NewJobDescriptor(sfo.objType);
                     case ObjectClasses.SavedQuery: return SavedQueryEngine.NewSavedQueryDescriptor();

package/lib/stories/TMButton.stories.d.ts

@@ -1,4 +1,4 @@
 import { Meta } from '@storybook/react';
 declare const _default: Meta;
 export default _default;
-export declare const NormalButton: any;
+export declare const NormalTMButton: any;

package/lib/stories/TMButton.stories.js

@@ -1,28 +1,29 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import TMButton from '../components/base/TMButton';
 import { TMDeviceProvider } from '../components/base/TMDeviceProvider';
 import { IconCheck } from '../helper';
+import { sortArgTypes } from './TMStoriesUtils';
 export default {
+    // The title will determine how the component appears in the sidebar of Storybook
     title: 'Components/TMButton',
+    // Specifies the component that is being documented in this story
     component: TMButton,
-    decorators: [
-        (Story) => (_jsx(TMDeviceProvider, { children: _jsx(Story, {}) })),
-    ],
-    tags: ['autodocs'], // per indicare che vogliamo generare la documentazione
-    argTypes: {
-        // per ogni property, indicare la descrizione che si desidera mostrare nella documentazione
+    decorators: [(Story) => (_jsxs(TMDeviceProvider, { children: [" ", _jsx(Story, {}), " "] })),],
+    tags: ['autodocs'],
+    // Tags for categorizing the component within Storybook
+    argTypes: sortArgTypes({
         color: { description: 'The color of the button' },
-    },
+    }),
 };
+/******* 1. Default Template and Default TMButton *******/
 const Template = (args) => _jsx(TMButton, { ...args });
-// definiamo un prototipo che verrà mostrato nel browser (è possibile definirne altri, es.: AdvancedButton)
-export const NormalButton = Template.bind({});
-NormalButton.args = {
+export const NormalTMButton = Template.bind({});
+NormalTMButton.args = {
     caption: 'Click Me!',
     btnStyle: 'normal',
     icon: _jsx(IconCheck, {}),
-    // advancedColor: '#28a745',
     width: '120px',
     height: '40px',
+    showTooltip: false,
     onClick: () => alert('NormalButton clicked!')
 };

package/lib/stories/TMDataGrid.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta;
+export default _default;
+import 'devextreme/dist/css/dx.material.blue.light.css';
+import '/lib/css/tm-sdkui.css';
+export declare const DefaultTMDatagrid: any;
+/******* 2. Default Template and Datagrid with Search Panel to Right *******/
+export declare const TMDatagridWithSearchPanelToRight: any;
+/******* 3. Default Template and Datagrid with Counter enable *******/
+export declare const TMDatagridWithCounters: any;

package/lib/stories/TMDataGrid.stories.js

@@ -0,0 +1,310 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { TMDataGrid, TMDeviceProvider } from '../components';
+import { TMDataGridPageSize } from '../components/base/TMDataGrid';
+const generateData = (count) => {
+    const data = [];
+    for (let i = 1; i <= count; i++) {
+        data.push({
+            id: i,
+            name: `User ${i}`,
+            email: `user${i}@example.com`,
+            phone: `+1-555-000${i % 1000}`,
+            city: `City ${i % 100}`,
+            age: 20 + (i % 50),
+            gender: i % 2 === 0 ? "Male" : "Female",
+            address: `Street ${i}`,
+            country: `Country ${i % 5}`,
+            zipCode: `12345-${i % 100}`,
+            state: `State ${i % 10}`,
+            occupation: `Occupation ${i % 3}`,
+            company: `Company ${i % 10}`,
+            socialSecurityNumber: `SSN-${i % 10000}`,
+            birthDate: `199${(i % 30) + 1}-01-01`,
+            maritalStatus: i % 2 === 0 ? "Single" : "Married",
+            hobby: `Hobby ${i % 5}`,
+            profilePicture: `https://example.com/pic${i}.jpg`,
+            lastLogin: `2025-02-0${i % 10}`,
+            creditScore: 600 + (i % 400),
+            loyaltyPoints: i % 1000,
+            referralCode: `REF${i % 1000}`,
+            preferredLanguage: `Language ${i % 5}`,
+            subscriptionStatus: i % 2 === 0 ? "Active" : "Inactive",
+            device: `Device ${i % 5}`,
+            lastPurchaseDate: `2025-01-0${i % 10}`,
+            shippingAddress: `Address ${i}`,
+            preferredPaymentMethod: `Payment ${i % 3}`,
+            totalSpent: 100 + (i * 10),
+            referralCount: i % 50,
+            notes: `Notes about user ${i}`,
+            lastUpdated: `2025-02-0${i % 10}`,
+            emergencyContact: `Emergency ${i % 5}`,
+            jobTitle: `Job ${i % 10}`,
+            vehicle: `Vehicle ${i % 4}`,
+            bloodType: i % 4 === 0 ? "O" : i % 4 === 1 ? "A" : i % 4 === 2 ? "B" : "AB",
+            pet: i % 2 === 0 ? "Dog" : "Cat",
+            subscriptionPlan: `Plan ${i % 3}`,
+            favoriteColor: `Color ${i % 7}`,
+        });
+    }
+    return data;
+};
+// Default export for Storybook configuration for TMDataGrid component
+export default {
+    // The title will determine how the component appears in the sidebar of Storybook
+    title: 'Components/TMDataGrid',
+    // Specifies the component that is being documented in this story
+    component: TMDataGrid,
+    decorators: [(Story) => (_jsxs(TMDeviceProvider, { children: [" ", _jsx(Story, {}), " "] })),],
+    // Tags for categorizing the component within Storybook
+    tags: ['autodocs'],
+    // Description
+    description: 'A responsive, customizable data grid component for displaying tabular data efficiently.',
+    argTypes: sortArgTypes({
+        accessKey: {
+            description: "Specifies the shortcut key that sets focus on the UI component",
+            control: { type: 'text' },
+            type: { name: "string", required: false },
+        },
+        activeStateEnabled: {
+            description: "Specifies whether the UI component changes its visual state as a result of user interaction"
+        },
+        allowColumnReordering: {
+            description: "Specifies whether a user can reorder columns"
+        },
+        allowColumnResizing: {
+            description: "Specifies whether a user can resize columns"
+        },
+        autoNavigateToFocusedRow: {
+            description: "Automatically scrolls the component to the focused row when the focusedRowKey is changed. Incompatible with infinite scrolling mode"
+        },
+        cacheEnabled: {
+            description: "Specifies whether data should be cached"
+        },
+        cellHintEnabled: {
+            description: "Enables a hint that appears when a user hovers the mouse pointer over a cell with truncated content"
+        },
+        columnAutoWidth: {
+            description: "Specifies whether columns should adjust their widths to the content"
+        },
+        columnChooser: {
+            description: "Configures the column chooser"
+        },
+        columnFixing: {
+            description: "Configures column fixing"
+        },
+        columnHidingEnabled: {
+            description: "Specifies whether the UI component should hide columns to adapt to the screen or container size. Ignored if allowColumnResizing is true and columnResizingMode is 'widget'"
+        },
+        columnMinWidth: {
+            description: "Specifies the minimum width of columns"
+        },
+        columnResizingMode: {
+            description: "Specifies how the UI component resizes columns. Applies only if allowColumnResizing is true"
+        },
+        columns: {
+            description: "An array of grid columns"
+        },
+        columnWidth: {
+            description: "Specifies the width for all data columns. Has a lower priority than the column.width property"
+        },
+        customizeColumns: {
+            description: "Customizes columns after they are created"
+        },
+        dataRowComponent: {
+            description: "An alias for the dataRowTemplate property specified in React. Accepts a custom component"
+        },
+        dataRowRender: {
+            description: "An alias for the dataRowTemplate property specified in React. Accepts a rendering function"
+        },
+        dataRowTemplate: {
+            description: "Specifies a custom template for data rows"
+        },
+        dataSource: {
+            description: "Binds the UI component to data"
+        },
+        dateSerializationFormat: {
+            description: "Specifies the format in which date-time values should be sent to the server"
+        },
+        disabled: {
+            description: "Specifies whether the UI component responds to user interaction"
+        },
+        editing: {
+            description: "Configures editing"
+        },
+        elementAttr: {
+            description: "Specifies the global attributes to be attached to the UI component's container element"
+        },
+        errorRowEnabled: {
+            description: "Indicates whether to show the error row"
+        },
+        export: {
+            description: "Configures client-side exporting"
+        },
+        filterBuilder: {
+            description: "Configures the integrated filter builder"
+        },
+        filterBuilderPopup: {
+            description: "Configures the popup in which the integrated filter builder is shown"
+        },
+        filterPanel: {
+            description: "Configures the filter panel"
+        },
+        filterRow: {
+            description: "Configures the filter row"
+        },
+        filterSyncEnabled: {
+            description: "Specifies whether to synchronize the filter row, header filter, and filter builder"
+        },
+        filterValue: {
+            description: "Specifies a filter expression"
+        },
+        focusedColumnIndex: {
+            description: "The index of the column that contains the focused data cell"
+        },
+        focusedRowEnabled: {
+            description: "Specifies whether the focused row feature is enabled"
+        },
+        focusedRowIndex: {
+            description: "Specifies or indicates the focused data row's index"
+        },
+        focusedRowKey: {
+            description: "Specifies initially or currently focused grid row's key"
+        },
+        grouping: {
+            description: "Configures grouping"
+        },
+        groupPanel: {
+            description: "Configures the group panel"
+        },
+        headerFilter: {
+            description: "Configures the header filter feature"
+        },
+        height: {
+            description: "Specifies the UI component's height"
+        },
+        highlightChanges: {
+            description: "Specifies whether to highlight rows and cells with edited data. repaintChangesOnly should be true"
+        },
+        hint: {
+            description: "Specifies text for a hint that appears when a user pauses on the UI component"
+        },
+        hoverStateEnabled: {
+            description: "Specifies whether to highlight rows when a user moves the mouse pointer over them"
+        },
+        keyboardNavigation: {
+            description: "Configures keyboard navigation"
+        },
+        keyExpr: {
+            description: "Specifies the key property (or properties) that provide key values to access data items"
+        },
+        loadPanel: {
+            description: "Configures the load panel"
+        },
+        masterDetail: {
+            description: "Allows you to build a master-detail interface in the grid"
+        },
+        noDataText: {
+            description: "Specifies a text string shown when the DataGrid does not display any data"
+        },
+        pager: {
+            description: "Configures the pager"
+        },
+        paging: {
+            description: "Configures paging"
+        },
+        remoteOperations: {
+            description: "Notifies the DataGrid of the server's data processing operations"
+        },
+        renderAsync: {
+            description: "Specifies whether to render the filter row, command columns, and columns with showEditorAlways set to true after other elements"
+        },
+        rowAlternationEnabled: {
+            description: "Specifies whether rows should be shaded differently"
+        },
+        rowDragging: {
+            description: "Configures row reordering using drag and drop gestures"
+        },
+        rtlEnabled: {
+            description: "Switches the UI component to a right-to-left representation"
+        },
+        scrolling: {
+            description: "Configures scrolling"
+        },
+        searchPanel: {
+            description: "Configures the search panel"
+        },
+        selectedRowKeys: {
+            description: "Allows you to select rows or determine which rows are selected"
+        },
+        selection: {
+            description: "Configures runtime selection"
+        },
+        selectionFilter: {
+            description: "Specifies filters for the rows that must be selected initially"
+        },
+        showBorders: {
+            description: "Specifies whether the outer borders of the UI component are visible"
+        },
+        showColumnHeaders: {
+            description: "Specifies whether column headers are visible"
+        },
+        showColumnLines: {
+            description: "Specifies whether vertical lines that separate one column from another are visible"
+        },
+        showRowLines: {
+            description: "Specifies whether horizontal lines that separate one row from another are visible"
+        },
+        stateStoring: {
+            description: "Configures state storing"
+        },
+        summary: {
+            description: "Specifies the properties of the grid summary"
+        },
+        tabIndex: {
+            description: "Specifies the number of the element when the Tab key is used for navigating"
+        },
+        toolbar: {
+            description: "Configures the toolbar"
+        },
+        visible: {
+            description: "Specifies whether the UI component is visible"
+        },
+        width: {
+            description: "Specifies the UI component's width"
+        },
+        wordWrapEnabled: {
+            description: "Specifies whether text that does not fit into a column should be wrapped"
+        },
+    }),
+};
+// Importing the DevExtreme library's Material Design theme in light blue color scheme
+import 'devextreme/dist/css/dx.material.blue.light.css';
+// Importing custom styles for the tm-sdkui library
+import '/lib/css/tm-sdkui.css';
+import { sortArgTypes } from './TMStoriesUtils';
+/******* 1. Default Template and Default TMDatagrid *******/
+const DefaultTemplate = (args) => {
+    const dataSource = useMemo(() => generateData(5), []);
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    const [focusedRowKey, setFocusedRowKey] = useState(undefined);
+    const onSelectionChanged = useCallback((e) => {
+        setSelectedRowKeys(e.component.getSelectedRowKeys());
+    }, []);
+    const onFocusedRowChanged = useCallback((e) => {
+        setFocusedRowKey(e.row?.key);
+    }, []);
+    return (_jsx(TMDataGrid, { ...args, dataSource: dataSource, pageSize: TMDataGridPageSize.Small, keyExpr: "id", width: "100%", height: "100%", focusedRowEnabled: true, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged, selectedRowKeys: selectedRowKeys, onSelectionChanged: onSelectionChanged, columnResizingMode: 'widget', columnHidingEnabled: true, columnAutoWidth: true, allowColumnResizing: true, allowColumnReordering: true, style: { userSelect: "none" } }));
+};
+export const DefaultTMDatagrid = DefaultTemplate.bind({});
+DefaultTMDatagrid.args = {};
+/******* 2. Default Template and Datagrid with Search Panel to Right *******/
+export const TMDatagridWithSearchPanelToRight = DefaultTemplate.bind({});
+TMDatagridWithSearchPanelToRight.args = {
+    searchPanelToolbarPosition: 'default',
+};
+/******* 3. Default Template and Datagrid with Counter enable *******/
+export const TMDatagridWithCounters = DefaultTemplate.bind({});
+TMDatagridWithCounters.args = {
+    counterConfig: { show: true }
+};

package/lib/stories/TMStoriesUtils.d.ts

@@ -0,0 +1 @@
+export declare const sortArgTypes: (argTypes: Record<string, any>) => Record<string, any>;

package/lib/stories/TMStoriesUtils.js

@@ -0,0 +1,10 @@
+// Helper function to sort an object by its keys alphabetically
+export const sortArgTypes = (argTypes) => {
+    const sortedArgTypes = Object.keys(argTypes)
+        .sort()
+        .reduce((acc, key) => {
+        acc[key] = argTypes[key];
+        return acc;
+    }, {});
+    return sortedArgTypes;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react-beta",
-  "version": "6.10.19",
+  "version": "6.10.21",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -52,5 +52,4 @@
   "overrides": {
     "esbuild": "^0.25.0"
   }
-
 }