@topconsultnpm/sdkui-react 6.21.0-dev1.25 → 6.21.0-dev1.27

package/lib/components/index.d.ts

@@ -62,6 +62,7 @@ export { default as TMBlogAttachments } from './grids/TMBlogAttachments';
 export { default as TMBlogCommentForm } from './features/blog/TMBlogCommentForm';
 export * from './query/TMQueryEditor';
 export * from './query/TMQuerySummary';
+export * from './query/TMQueryCountButton';
 export { default as TMToppyDraggableHelpCenter } from './features/assistant/TMToppyDraggableHelpCenter';
 export * from './features/documents/TMDcmtForm';
 export * from './features/documents/TMDcmtIcon';

package/lib/components/index.js

@@ -68,6 +68,7 @@ export { default as TMBlogCommentForm } from './features/blog/TMBlogCommentForm'
 //query
 export * from './query/TMQueryEditor';
 export * from './query/TMQuerySummary';
+export * from './query/TMQueryCountButton';
 //assistant
 export { default as TMToppyDraggableHelpCenter } from './features/assistant/TMToppyDraggableHelpCenter';
 //documents

package/lib/components/query/TMQueryCountButton.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { QueryDescriptor, QueryParameterDescriptor } from '@topconsultnpm/sdk-ts';
+interface ITMQueryCountButton {
+    qd?: QueryDescriptor;
+    lastparams: QueryParameterDescriptor[] | undefined;
+    disabled?: boolean;
+    showSpinner: boolean;
+    onLastQueryParamsChanged?: (params: QueryParameterDescriptor[]) => void;
+}
+declare const TMQueryCountButton: React.FunctionComponent<ITMQueryCountButton>;
+export default TMQueryCountButton;

package/lib/components/query/TMQueryCountButton.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import TMButton from '../base/TMButton';
+import { getQueryCountAsync, IconCount, IsParametricQuery, SDKUI_Localizator } from '../../helper';
+import { useQueryParametersDialog } from '../../hooks/useQueryParametersDialog';
+const TMQueryCountButton = ({ qd, lastparams, disabled, showSpinner, onLastQueryParamsChanged }) => {
+    const [confirmQueryParams, ConfirmQueryParamsDialog] = useQueryParametersDialog();
+    const getQueryCountLocalAsync = async () => {
+        if (qd == undefined)
+            return;
+        let qdLocal = { ...qd };
+        const whereCopy = qdLocal.where?.map((curItem) => ({ ...curItem }));
+        if (IsParametricQuery(qd)) {
+            const qdParams = await confirmQueryParams(qdLocal, lastparams);
+            if (!qdParams || qdParams.length <= 0)
+                return;
+            for (const qpd of qdParams) {
+                let wi = whereCopy?.find(o => o.value1 == qpd.name);
+                if (wi)
+                    wi.value1 = wi.value1?.replace(wi.value1, !qpd.value ? '' : qpd.value.toString());
+                else {
+                    wi = whereCopy?.find(o => o.value2 == qpd.name);
+                    if (wi)
+                        wi.value2 = wi.value2?.replace(wi.value2, !qpd.value ? '' : qpd.value.toString());
+                }
+            }
+            onLastQueryParamsChanged?.(qdParams ?? []);
+        }
+        await getQueryCountAsync({ ...qdLocal, where: whereCopy }, showSpinner);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Count, icon: _jsx(IconCount, {}), disabled: disabled, onClick: async () => await getQueryCountLocalAsync() }), _jsx(ConfirmQueryParamsDialog, {})] }));
+};
+export default TMQueryCountButton;

package/lib/components/query/TMQueryEditor.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { SDK_Localizator, AccessLevels, OnJoinItem, JoinTypes, PlatformObjectValidator, MetadataDataDomains, DcmtTypeListCacheService, JoinItem, MetadataDataTypes, OrderByItem, QueryFunctions, QueryOperators, ResultTypes, SelectItem, SDK_Globals, UserListCacheService, WhereItem, SearchEngine, SelectItemVisibilities, DataListCacheService, QueryValidatorOptions, TMPropertyNames, AppModules, LayoutModes } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
 import Accordion, { Item } from 'devextreme-react/accordion';
-import { SDKUI_Localizator, IconSearch, IconCount, getQueryCountAsync, calcIsModified, IconClear, IconAddCircleOutline, IconDotsVerticalCircleOutline, IconHide, IconShow, IconDraggabledots, genUniqueId, LocalizeQueryOperators, LocalizeQueryFunctions, LocalizeQueryJoinTypes, IconArchiveDoc, IconArrowRight, SDKUI_Globals } from '../../helper';
+import { SDKUI_Localizator, IconSearch, calcIsModified, IconClear, IconAddCircleOutline, IconDotsVerticalCircleOutline, IconHide, IconShow, IconDraggabledots, genUniqueId, LocalizeQueryOperators, LocalizeQueryFunctions, LocalizeQueryJoinTypes, IconArchiveDoc, IconArrowRight, SDKUI_Globals } from '../../helper';
 import { displayMetadataValue, getDcmtTypesByQdAsync, getTIDsByQd, IsParametricQuery, prepareQdForSearchAsync } from '../../helper/queryHelper';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { FormModes, SearchResultContext } from '../../ts';
@@ -30,6 +30,7 @@ import TMMetadataEditor from '../editors/TMMetadataEditor';
 import { ContextMenu } from '../NewComponents/ContextMenu';
 import { useQueryParametersDialog } from '../../hooks/useQueryParametersDialog';
 import TMSearchResult from '../features/search/TMSearchResult';
+import TMQueryCountButton from './TMQueryCountButton';
 export const StyledRowItem = styled.div ` display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin-bottom: 5px; gap: 3px; `;
 export const StyledItemWrapper = styled.div ` border-radius: ${props => props.$borderRadius ?? '4px'}; padding: 4px; font-size: 1rem; user-select: none; width: max-content; `;
 export const StyledAccordionItemContainer = styled.div ` width: 100%; padding: 2px; display: flex; flex-direction: column; overflow-x: auto; align-items: flex-start; margin-left: 5px; gap: 3px; max-height: 300px; `;
@@ -732,26 +733,7 @@ const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDis
         }
     };
     // #endregion
-    const getQueryCountLocalAsync = async (qd, showSpinner) => {
-        if (IsParametricQuery(qd)) {
-            const qdParams = await confirmQueryParams(qd, lastQdParams);
-            setLastQdParams(qdParams);
-            if (!qdParams || qdParams.length <= 0)
-                return;
-            for (const qpd of qdParams) {
-                let wi = qd.where?.find(o => o.value1 == qpd.name);
-                if (wi)
-                    wi.value1 = wi.value1?.replace(wi.value1, !qpd.value ? '' : qpd.value.toString());
-                else {
-                    wi = qd.where?.find(o => o.value2 == qpd.name);
-                    if (wi)
-                        wi.value2 = wi.value2?.replace(wi.value2, !qpd.value ? '' : qpd.value.toString());
-                }
-            }
-        }
-        await getQueryCountAsync(qd, showSpinner);
-    };
-    return (_jsxs(_Fragment, { children: [_jsxs(TMApplyForm, { isModal: false, formMode: formMode, isModified: calcIsModified(formData, formDataOrig), exception: exception, validationItems: validationItems, hasNavigation: false, customToolbarElements: _jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Search, color: 'tertiary', icon: _jsx(IconSearch, {}), disabled: errorsCount > 0, onClick: async () => await onSearchAsync(formData) }), _jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Count, icon: _jsx(IconCount, {}), disabled: errorsCount > 0, onClick: () => getQueryCountLocalAsync(formData, true) }), SDK_Globals.tmSession?.SessionDescr?.appModuleID == AppModules.SURFER && _jsx(TMButton, { caption: "Passa ad archiviazione", icon: _jsx(IconArchiveDoc, {}), btnStyle: 'toolbar', fontSize: '1.3rem', onClick: () => { ShowAlert({ message: "TODO Passa ad archiviazione", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }), SDK_Globals.tmSession?.SessionDescr?.appModuleID == AppModules.SURFER && _jsx(TMButton, { caption: "Vai a risultato", icon: _jsx(IconArrowRight, {}), btnStyle: 'toolbar', fontSize: '1.3rem', onClick: () => { ShowAlert({ message: "TODO Vai a risultato", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } })] }), showToolbar: showToolbar, showApply: showApply, showUndo: showUndo, showBack: showBack, onApply: () => applyData(), onClose: () => onClose?.(), onUndo: () => setFormData(formDataOrig), children: [_jsxs(Accordion, { elementAttr: { class: 'tm-query-dx-accordion' }, height: height, multiple: true, collapsible: true, repaintChangesOnly: true, deferRendering: false, animationDuration: 0, onContentReady: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(TMApplyForm, { isModal: false, formMode: formMode, isModified: calcIsModified(formData, formDataOrig), exception: exception, validationItems: validationItems, hasNavigation: false, customToolbarElements: _jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Search, color: 'tertiary', icon: _jsx(IconSearch, {}), disabled: errorsCount > 0, onClick: async () => await onSearchAsync(formData) }), _jsx(TMQueryCountButton, { qd: { ...formData }, lastparams: lastQdParams, onLastQueryParamsChanged: (params) => { setLastQdParams(params); }, disabled: errorsCount > 0, showSpinner: true }), SDK_Globals.tmSession?.SessionDescr?.appModuleID == AppModules.SURFER && _jsx(TMButton, { caption: "Passa ad archiviazione", icon: _jsx(IconArchiveDoc, {}), btnStyle: 'toolbar', fontSize: '1.3rem', onClick: () => { ShowAlert({ message: "TODO Passa ad archiviazione", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }), SDK_Globals.tmSession?.SessionDescr?.appModuleID == AppModules.SURFER && _jsx(TMButton, { caption: "Vai a risultato", icon: _jsx(IconArrowRight, {}), btnStyle: 'toolbar', fontSize: '1.3rem', onClick: () => { ShowAlert({ message: "TODO Vai a risultato", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } })] }), showToolbar: showToolbar, showApply: showApply, showUndo: showUndo, showBack: showBack, onApply: () => applyData(), onClose: () => onClose?.(), onUndo: () => setFormData(formDataOrig), children: [_jsxs(Accordion, { elementAttr: { class: 'tm-query-dx-accordion' }, height: height, multiple: true, collapsible: true, repaintChangesOnly: true, deferRendering: false, animationDuration: 0, onContentReady: (e) => {
                             let items = e.component.option("items");
                             if (items && items.length > 0) {
                                 for (let i = 0; i < items.length; i++) {

package/lib/components/query/TMQuerySummary.js

@@ -5,10 +5,11 @@ import { QueryDescriptor, ResultTypes, TMScopeNames } from '@topconsultnpm/sdk-t
 import { FontSize } from '../../utils/theme';
 import TMQueryEditor from './TMQueryEditor';
 import TMButton from '../base/TMButton';
-import { getQueryCountAsync, IconCount, IconEraser, IconPencil, SDKUI_Localizator } from '../../helper';
+import { IconEraser, IconPencil, SDKUI_Localizator } from '../../helper';
 import TMVilViewer from '../base/TMVilViewer';
 import { FormModes } from '../../ts';
 import TMModal from '../base/TMModal';
+import TMQueryCountButton from './TMQueryCountButton';
 // #region Style
 const StyledWrapper = styled.div `
     display: flex;
@@ -28,7 +29,7 @@ const TMQuerySummary = ({ children, qd, validateSelect = true, validateOrderBy =
     const [showEditor, setShowEditor] = useState(false);
     const validationItemsQd = validationItems.filter(o => o.PropertyScopes.includes(TMScopeNames.qd) || o.PropertyName == TMScopeNames.qd);
     const useInternalEditor = onEditClick === undefined;
-    return (_jsxs(StyledWrapper, { children: [_jsxs(StyledQueryToolbar, { children: [_jsx(TMButton, { caption: SDKUI_Localizator.QueryDefine, icon: _jsx(IconPencil, { fontSize: 16 }), btnStyle: 'toolbar', onClick: () => onEditClick ? onEditClick() : setShowEditor(true) }), _jsx(TMButton, { caption: SDKUI_Localizator.QueryCount, icon: _jsx(IconCount, { fontSize: 16 }), disabled: validationItemsQd.filter(o => o.ResultType == ResultTypes.ERROR).length > 0, btnStyle: 'toolbar', onClick: () => getQueryCountAsync(qd, true) }), _jsx(TMButton, { caption: SDKUI_Localizator.QueryClear, icon: _jsx(IconEraser, { fontSize: 16 }), btnStyle: 'toolbar', onClick: () => onValueChanged?.(new QueryDescriptor()) }), children] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: '100%', overflowX: 'auto' }, children: [qd && qd.from &&
+    return (_jsxs(StyledWrapper, { children: [_jsxs(StyledQueryToolbar, { children: [_jsx(TMButton, { caption: SDKUI_Localizator.QueryDefine, icon: _jsx(IconPencil, { fontSize: 16 }), btnStyle: 'toolbar', onClick: () => onEditClick ? onEditClick() : setShowEditor(true) }), _jsx(TMQueryCountButton, { qd: { ...qd }, lastparams: [], disabled: validationItemsQd.filter(o => o.ResultType == ResultTypes.ERROR).length > 0, showSpinner: true }), _jsx(TMButton, { caption: SDKUI_Localizator.QueryClear, icon: _jsx(IconEraser, { fontSize: 16 }), btnStyle: 'toolbar', onClick: () => onValueChanged?.(new QueryDescriptor()) }), children] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: '100%', overflowX: 'auto' }, children: [qd && qd.from &&
                         _jsx(TMQueryEditor, { formMode: FormModes.ReadOnly, inputData: qd, showDistinct: showDistinct, isModal: false, showToolbar: false, validateSelect: validateSelect, validateOrderBy: validateOrderBy, raiseWarningForOnlyMetadataDcmtTypes: raiseWarningForOnlyMetadataDcmtTypes }), _jsx("div", { style: { padding: '0px 5px' }, children: _jsx(TMVilViewer, { vil: validationItemsQd }) })] }), useInternalEditor && showEditor &&
                 _jsx(TMModal, { title: SDKUI_Localizator.QueryDefine, children: _jsx(TMQueryEditor, { formMode: FormModes.Update, inputData: qd, isModal: true, showDistinct: showDistinct, raiseWarningForOnlyMetadataDcmtTypes: raiseWarningForOnlyMetadataDcmtTypes, validateSelect: validateSelect, validateOrderBy: validateOrderBy, onApplied: (newValue) => onValueChanged?.(newValue), onClose: () => { setShowEditor(false); } }) })] }));
 };

package/lib/hooks/useQueryParametersDialog.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { QueryParameterDescriptor } from '@topconsultnpm/sdk-ts';
-import { TMModal, TMTextBox, TMButton } from "../components";
+import { TMModal, TMTextBox, TMButton, TMCard, StyledDivHorizontal } from "../components";
 import { IconApply, IconCloseOutline, SDKUI_Localizator } from "../helper";
-import { TMColors } from "../utils/theme";
+import { TMColors, TMMargin } from "../utils/theme";
 const paramPrefix = "{@QueryParam";
 export const useQueryParametersDialog = () => {
     const [promise, setPromise] = useState(null);
@@ -56,15 +56,15 @@ export const useQueryParametersDialog = () => {
     };
     const ConfirmQueryParamsDialog = () => {
         return (open ?
-            _jsx(TMModal, { title: SDKUI_Localizator.QueryParamBind, height: "max-content", width: "400px", onClose: handleClose, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '5px', padding: '10px', height: '100%' }, children: [qdParams.map((qdp, index) => {
-                            return (_jsx(TMTextBox, { placeHolder: `${SDKUI_Localizator.EnterValue} ...`, label: qdp.name, autoFocus: index == 0, value: qdp.value ?? '', onValueChanged: (e) => {
+            _jsx(TMModal, { title: SDKUI_Localizator.QueryParamBind, height: `${qdParams.length > 0 ? (qdParams.length * 73) + 73 : 100}px`, width: "400px", onClose: handleClose, children: _jsxs(TMCard, { scrollX: true, height: "100%", children: [qdParams.map((qdp, index) => {
+                            return (_jsx(TMTextBox, { elementStyle: { marginBottom: TMMargin.smallMargin }, placeHolder: `${SDKUI_Localizator.EnterValue} ...`, label: qdp.name, autoFocus: index == 0, value: qdp.value ?? '', onValueChanged: (e) => {
                                     let newQdp = qdParamsOut.find(o => o.id == qdp.id);
                                     if (newQdp)
                                         newQdp.value = e.target.value;
                                     else
                                         qdParamsOut.push({ id: qdp.id, name: qdp.name, value: e.target.value });
                                 } }, qdp.id));
-                        }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '5px', paddingTop: '10px', justifyContent: 'flex-end', alignItems: 'center', height: '50px' }, children: [_jsx(TMButton, { btnStyle: "advanced", showTooltip: false, icon: _jsx(IconApply, {}), caption: "OK", advancedColor: TMColors.tertiary, onClick: handleConfirm }), _jsx(TMButton, { btnStyle: "advanced", showTooltip: false, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Cancel, onClick: handleCancel })] })] }) })
+                        }), _jsxs(StyledDivHorizontal, { style: { gap: 10, marginBottom: TMMargin.smallMargin, width: '100%', alignItems: 'center' }, children: [_jsx(TMButton, { btnStyle: "advanced", showTooltip: false, icon: _jsx(IconApply, {}), caption: "OK", advancedColor: TMColors.tertiary, onClick: handleConfirm }), _jsx(TMButton, { btnStyle: "advanced", showTooltip: false, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Cancel, onClick: handleCancel })] })] }) })
             : _jsx(_Fragment, {}));
     };
     return [confirmQueryParams, ConfirmQueryParamsDialog];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.21.0-dev1.25",
+    "version": "6.21.0-dev1.27",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",