@topconsultnpm/sdkui-react-beta 6.17.26 → 6.17.28

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { LayoutModes, DcmtTypeListCacheService, PlatformObjectValidator, MetadataDataTypes, QueryOperators, DataListCacheService, MetadataDataDomains, SDK_Localizator, UserListCacheService } from '@topconsultnpm/sdk-ts-beta';
 import styled from 'styled-components';
@@ -14,6 +14,7 @@ import TMMetadataEditor, { useMetadataEditableList } from '../../editors/TMMetad
 import { colorOperator, StyledItemWrapper, StyledRowItem } from '../../query/TMQueryEditor';
 import { TMMidViewer } from '../../viewers/TMMidViewer';
 import { AdvancedMenuButtons } from '../../editors/TMMetadataValues';
+import { useResizeObserver } from '../../../hooks/useResizeObserver';
 const StyledMetadataListItem = styled.div `
     padding: 5px;
     border-radius: 8px;
@@ -35,6 +36,15 @@ const TMSearchQueryEditor = ({ qd, dcmtTypesList = [], isExpertMode = SDKUI_Glob
     const [focusedTidMid, setFocusedTidMid] = useState();
     const deviceType = useDeviceType();
     let initialMaxItems = deviceType === DeviceType.MOBILE ? 8 : 12;
+    const [isCompactView, setIsCompactView] = useState(deviceType === DeviceType.MOBILE);
+    const { ref, width } = useResizeObserver();
+    useEffect(() => {
+        if (deviceType === DeviceType.MOBILE)
+            return;
+        if (width === 0)
+            return;
+        setIsCompactView(width < 340);
+    }, [width]);
     useEffect(() => {
         onFocusedMetadataChanged?.(focusedTidMid);
     }, [focusedTidMid]);
@@ -83,10 +93,10 @@ const TMSearchQueryEditor = ({ qd, dcmtTypesList = [], isExpertMode = SDKUI_Glob
         }
     }, [qd, onQdChanged]);
     const itemsToRender = qd?.where?.slice(0, showAllMdWhere ? qd.where.length : initialMaxItems) ?? [];
-    return (_jsx(_Fragment, { children: deviceType === DeviceType.MOBILE ?
-            _jsx("div", { style: { overflow: 'auto', display: 'flex', flexDirection: 'column', height: '100%', padding: '5px', gap: '5px' }, children: itemsToRender.map((wi, index) => (_jsx(WhereItemRow, { whereItem: wi, index: index, dcmtTypesList: dcmtTypesList, isExpertMode: isExpertMode, isSelected: false, isEditable: isEditableList(wi.mid), currentEditingMID: currentEditingMID, queryParamsDynDataList: dynDataListsToBeRefreshed.find(o => o.mid === wi.mid)?.queryParams ?? [], onItemChange: handleWhereItemChanged, onItemSelect: handleItemSelect, onAdvancedMenuClick: handleAdvancedMenuClick, onCascadeRefreshDynDataLists: handleCascadeRefresh, onCascadeUpdateMIDs: handleCascadeUpdate, onHideMobileEditor: () => setCurrentEditingMID(0) }, `${wi.tid}_${wi.mid}_${index}`))) })
+    return (_jsx("div", { ref: ref, style: { width: '100%', minWidth: '100%', height: '100%', overflow: 'auto', display: 'flex', flexDirection: 'column' }, children: isCompactView ?
+            _jsx("div", { style: { overflow: 'auto', display: 'flex', flexDirection: 'column', height: '100%', padding: '5px', gap: '5px' }, children: itemsToRender.map((wi, index) => (_jsx(WhereItemRow, { whereItem: wi, index: index, dcmtTypesList: dcmtTypesList, isExpertMode: isExpertMode, isSelected: false, isEditable: isEditableList(wi.mid), currentEditingMID: currentEditingMID, queryParamsDynDataList: dynDataListsToBeRefreshed.find(o => o.mid === wi.mid)?.queryParams ?? [], onItemChange: handleWhereItemChanged, onItemSelect: handleItemSelect, onAdvancedMenuClick: handleAdvancedMenuClick, onCascadeRefreshDynDataLists: handleCascadeRefresh, onCascadeUpdateMIDs: handleCascadeUpdate, onHideMobileEditor: () => setCurrentEditingMID(0), isCompactView: true }, `${wi.tid}_${wi.mid}_${index}`))) })
             :
-                _jsx("div", { style: { display: 'grid', borderRadius: '8px', alignItems: 'center', overflow: 'auto', padding: '5px', gap: '8px', gridTemplateColumns: 'minmax(0, max-content) minmax(0, max-content) minmax(50%, 1fr) minmax(0, max-content)' }, children: itemsToRender.map((wi, index) => (_jsx(WhereItemRow, { whereItem: wi, index: index, dcmtTypesList: dcmtTypesList, isExpertMode: isExpertMode, isSelected: false, isEditable: isEditableList(wi.mid), currentEditingMID: currentEditingMID, queryParamsDynDataList: dynDataListsToBeRefreshed.find(o => o.mid === wi.mid)?.queryParams ?? [], onItemChange: handleWhereItemChanged, onItemSelect: handleItemSelect, onAdvancedMenuClick: handleAdvancedMenuClick, onCascadeRefreshDynDataLists: handleCascadeRefresh, onCascadeUpdateMIDs: handleCascadeUpdate, onHideMobileEditor: () => setCurrentEditingMID(0) }, `${wi.tid}_${wi.mid}_${index}`))) }) }));
+                _jsx("div", { style: { display: 'grid', borderRadius: '8px', alignItems: 'center', overflow: 'auto', padding: '5px', gap: '8px', gridTemplateColumns: 'minmax(0, max-content) minmax(0, max-content) minmax(50%, 1fr) minmax(0, max-content)' }, children: itemsToRender.map((wi, index) => (_jsx(WhereItemRow, { whereItem: wi, index: index, dcmtTypesList: dcmtTypesList, isExpertMode: isExpertMode, isSelected: false, isEditable: isEditableList(wi.mid), currentEditingMID: currentEditingMID, queryParamsDynDataList: dynDataListsToBeRefreshed.find(o => o.mid === wi.mid)?.queryParams ?? [], onItemChange: handleWhereItemChanged, onItemSelect: handleItemSelect, onAdvancedMenuClick: handleAdvancedMenuClick, onCascadeRefreshDynDataLists: handleCascadeRefresh, onCascadeUpdateMIDs: handleCascadeUpdate, onHideMobileEditor: () => setCurrentEditingMID(0), isCompactView: false }, `${wi.tid}_${wi.mid}_${index}`))) }) }));
 };
 export default React.memo(TMSearchQueryEditor);
 const TMSearchWhereItemEditor = React.memo(({ whereItem, queryParamsDynDataList, index, isSelected, isEditableList, autoFocus, openChooserBySingleClick, onValueChanged, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs }) => {
@@ -246,8 +256,7 @@ const TMSearchWhereItemViewer = React.memo(({ isSelected = false, whereItem, sho
                         // ? <>{numberOfOperands == 11 ? whereItem.value1?.split(',').map((item: string) => !item.startsWith("'") ? item : item.slice(1, -1)).join(",") : whereItem.value1}</>
                         : _jsxs(_Fragment, { children: [displayMetadataValue(md, whereItem.value1, ""), numberOfOperands == 2 && (whereItem.value2 && whereItem.value2 != '' ? ` - ${displayMetadataValue(md, whereItem.value2, "")}` : ' - ?')] }) })] }));
 });
-const WhereItemRow = React.memo(({ whereItem, index, dcmtTypesList, isExpertMode, isSelected, isEditable, currentEditingMID, queryParamsDynDataList, onItemChange, onItemSelect, onAdvancedMenuClick, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs, onHideMobileEditor }) => {
-    const deviceType = useDeviceType();
+const WhereItemRow = React.memo(({ whereItem, index, dcmtTypesList, isExpertMode, isSelected, isEditable, currentEditingMID, queryParamsDynDataList, isCompactView, onItemChange, onItemSelect, onAdvancedMenuClick, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs, onHideMobileEditor }) => {
     const dropDownMenuRef = useRef(null);
     // Trova il metadata descriptor per l'item corrente
     const md = useMemo(() => {
@@ -345,7 +354,7 @@ const WhereItemRow = React.memo(({ whereItem, index, dcmtTypesList, isExpertMode
         return whereItem.operator === getDefaultOperator(md.dataDomain, md.dataType) ? 'green' : TMColors.tertiary;
     };
     // --- Rendering ---
-    if (deviceType === DeviceType.MOBILE) {
+    if (isCompactView) {
         return (_jsx(StyledMetadataListItem, { id: `wi-item-${whereItem.mid}`, onClick: () => onItemSelect(whereItem.tid, whereItem.mid), onFocus: () => onItemSelect(whereItem.tid, whereItem.mid), "$backgroundColor": !PlatformObjectValidator.WhereItemHasValues(whereItem) ? `${TMColors.primary}66` : 'rgba(236, 202, 156, 1)', "$hoverColor": !PlatformObjectValidator.WhereItemHasValues(whereItem) ? `${TMColors.primary}33` : 'rgba(236, 202, 156, .5)', children: _jsx(TMSearchWhereItemCard, { isSelected: isSelected, index: index, whereItem: whereItem, showEditor: currentEditingMID === whereItem.mid, isEditableList: isEditable, queryParamsDynDataList: queryParamsDynDataList, onWhereItemChange: onItemChange, onHideEditor: onHideMobileEditor, onCascadeRefreshDynDataLists: onCascadeRefreshDynDataLists, onCascadeUpdateMIDs: onCascadeUpdateMIDs }) }));
     }
     return (_jsxs(React.Fragment, { children: [_jsx("div", { id: `wi-item-${whereItem.mid}`, style: { gridColumn: 1 }, children: _jsx(TMMidViewer, { color: TMColors.primaryColor, isMetadataSelected: isSelected, showIcon: true, tid_mid: { tid: whereItem?.tid, mid: whereItem?.mid, aliasTID: whereItem?.alias } }) }), _jsx("div", { style: { gridColumn: 2, paddingLeft: '5px', paddingRight: '5px' }, children: _jsx(TMDropDownMenu, { backgroundColor: colorOperator, color: getOperatorColor(), items: queryOperatorsItems, content: _jsx(StyledItemWrapper, { children: LocalizeQueryOperators(whereItem.operator) }) }) }), _jsxs("div", { style: { gridColumn: 3, position: 'relative' }, onClick: () => onItemSelect(whereItem.tid, whereItem.mid), onFocus: () => onItemSelect(whereItem.tid, whereItem.mid), children: [_jsx(TMSearchWhereItemEditor, { isSelected: isSelected, openChooserBySingleClick: !isSelected, whereItem: whereItem, index: index, isEditableList: isEditable, queryParamsDynDataList: queryParamsDynDataList, onValueChanged: (values) => {

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

@@ -4,7 +4,7 @@ import { PlatformObjectValidator, WhereItem, SDK_Localizator, OrderByItem, Selec
 import styled from 'styled-components';
 import TMSearchQueryEditor from './TMSearchQueryEditor';
 import Toppy from '../../../assets/Toppy-generico.png';
-import { getDcmtTypesByQdAsync, SDKUI_Localizator, getQD, IconMenuVertical, IconAddCircleOutline, IconEdit, IconEasy, IconAdvanced, deepCompare, IconSearch, IconClear, getDefaultOperator, prepareQdForSearchAsync, IsParametricQuery, SDKUI_Globals, IconArrowRight, IconMenuCAArchive } from '../../../helper';
+import { getDcmtTypesByQdAsync, SDKUI_Localizator, getQD, IconMenuVertical, IconAddCircleOutline, IconEdit, IconEasy, IconAdvanced, deepCompare, IconSearch, IconClear, getDefaultOperator, prepareQdForSearchAsync, IsParametricQuery, SDKUI_Globals, IconArrowRight, IconMenuCAArchive, getListMaxItems } from '../../../helper';
 import { useQueryParametersDialog } from '../../../hooks/useQueryParametersDialog';
 import { FormModes } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
@@ -22,7 +22,6 @@ import { TMMetadataChooserForm } from '../../choosers/TMMetadataChooser';
 import TMQueryEditor from '../../query/TMQueryEditor';
 import TMSavedQueryForm from './TMSavedQueryForm';
 import { AdvancedMenuButtons } from '../../editors/TMMetadataValues';
-import TMShowAllOrMaxItemsButton from '../../base/TMShowAllOrMaxItemsButton';
 const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, SQD, inputMids, onSearchCompleted, onSqdSaved, onBack, onClosePanel, allowMaximize = true, onMaximizePanel, onBackToResult, passToArchiveCallback }) => {
     const [confirmQueryParams, ConfirmQueryParamsDialog] = useQueryParametersDialog();
     const [qd, setQd] = useState();
@@ -272,6 +271,9 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
         }
         setQd({ ...qd, orderBy: newOrderBy });
     }, [qd, fromDTD?.metadata, SQD?.masterTID]);
+    const captionText = showAllMdWhere ? SDKUI_Localizator.ShowLess : SDKUI_Localizator.ShowAll;
+    let maxItems = getListMaxItems(deviceType ?? DeviceType.DESKTOP);
+    const diff = (qd?.where?.length ?? 0) - maxItems;
     return (_jsxs(_Fragment, { children: [_jsxs(TMPanel, { title: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, onBack: onBack, onActiveChanged: handlePanelActiveChanged, toolbar: _jsx(_Fragment, { children: (SQD && !showSqdForm) ?
                         _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, { color: 'white' }), showTooltip: false, onClick: () => setIsQueryPanelActive(true) }), items: [
                                 ...(showBackToResultButton ? [{ icon: _jsx(IconArrowRight, {}), text: "Vai a risultato", onClick: () => { onBackToResult?.(); } }] : []),
@@ -286,8 +288,31 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
                         : _jsx(_Fragment, {}) }), children: [_jsx(ConfirmQueryParamsDialog, {}), SQD
                         ? _jsxs("div", { style: { height: '100%', width: '100%', position: 'relative', display: 'flex', flexDirection: 'column', gap: 5 }, children: [showAdvancedSearch
                                     ? _jsx(TMQueryEditor, { formMode: FormModes.Update, showToolbar: false, inputData: qd, validateSelect: true, showApply: false, onQDChanged: handleQdChanged })
-                                    : _jsx(TMSearchQueryEditor, { qd: qd, dcmtTypesList: dcmtTypesList, isExpertMode: isExpertMode, showAllMdWhere: showAllMdWhere, onQdChanged: handleQdChanged, onFocusedMetadataChanged: setFocusedTidMid, onAdvancedMenuClick: handleAdvancedMenuClick }), _jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '80px', padding: '15px', position: 'relative' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconSearch, {}), showTooltip: false, width: 'auto', caption: SDKUI_Localizator.Search, advancedColor: '#4A96D2', onClick: handleSearchButtonClick }), _jsx(TMButton, { btnStyle: 'advanced', advancedType: 'primary', showTooltip: false, caption: SDKUI_Localizator.Clear, icon: _jsx(IconClear, {}), width: 'auto', advancedColor: 'white', color: 'primaryOutline', onClick: clearFilters })] }), (!showAdvancedSearch && qd?.where && qd?.where?.length > initialMaxItems) &&
-                                            _jsx(TMShowAllOrMaxItemsButton, { showAll: showAllMdWhere, dataSourceLength: qd?.where?.length, onClick: () => { setShowAllMdWhere(!showAllMdWhere); } })] }), showFiltersConfig &&
+                                    : _jsx(TMSearchQueryEditor, { qd: qd, dcmtTypesList: dcmtTypesList, isExpertMode: isExpertMode, showAllMdWhere: showAllMdWhere, onQdChanged: handleQdChanged, onFocusedMetadataChanged: setFocusedTidMid, onAdvancedMenuClick: handleAdvancedMenuClick }), _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '80px', padding: '15px', position: 'relative' }, children: _jsxs("div", { style: {
+                                            display: 'flex',
+                                            justifyContent: 'space-between',
+                                            alignItems: 'center',
+                                            flexWrap: 'wrap',
+                                            gap: '10px',
+                                            padding: '15px',
+                                            width: '100%',
+                                            boxSizing: 'border-box'
+                                        }, children: [_jsxs("div", { style: {
+                                                    display: 'flex',
+                                                    justifyContent: 'center',
+                                                    alignItems: 'center',
+                                                    gap: '10px',
+                                                    flex: '1 1 auto',
+                                                    minWidth: 0,
+                                                }, children: [_jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconSearch, {}), showTooltip: false, width: 'auto', caption: SDKUI_Localizator.Search, advancedColor: '#4A96D2', onClick: handleSearchButtonClick }), _jsx(TMButton, { btnStyle: 'advanced', advancedType: 'primary', showTooltip: false, caption: SDKUI_Localizator.Clear, icon: _jsx(IconClear, {}), width: 'auto', advancedColor: 'white', color: 'primaryOutline', onClick: clearFilters })] }), (!showAdvancedSearch && qd?.where && qd.where.length > initialMaxItems) && (_jsx("div", { style: { flex: '0 0 auto' }, children: _jsx(TMButton, { width: '120px', btnStyle: isMobile ? 'icon' : 'advanced', advancedColor: TMColors.button_primary, caption: captionText, showTooltip: false, icon: isMobile ? (_jsx("div", { style: {
+                                                            backgroundColor: TMColors.button_primary,
+                                                            minWidth: '30px',
+                                                            minHeight: '30px',
+                                                            borderRadius: '10px',
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            justifyContent: 'center',
+                                                        }, children: _jsx("p", { style: { color: 'white', margin: 0 }, children: showAllMdWhere ? `-${diff}` : `+${diff}` }) })) : (_jsx("p", { style: { color: 'white', margin: 0 }, children: showAllMdWhere ? `-${diff}` : `+${diff}` })), onClick: () => setShowAllMdWhere(!showAllMdWhere) }) }))] }) }), showFiltersConfig &&
                                     _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, height: '500px', width: '600px', allowSysMetadata: true, qd: qd, selectedIDs: qd?.where?.map((w) => ({ tid: w.tid, mid: w.mid })), onClose: handleCloseFiltersConfig, onChoose: handleChooseFilters }), showOutputConfig &&
                                     _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, height: '500px', width: '600px', allowSysMetadata: true, qd: qd, selectedIDs: qd?.select?.map((item) => ({ tid: item.tid, mid: item.mid })), onClose: handleCloseOutputConfig, onChoose: handleChooseOutput }), showOrderByConfig &&
                                     _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, height: '500px', width: '600px', allowSysMetadata: true, qd: qd, selectedIDs: qd?.orderBy?.map((item) => ({ tid: item.tid, mid: item.mid })), onClose: handleCloseOrderByConfig, onChoose: handleChooseOrderBy })] })

package/package.json

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