@topconsultnpm/sdkui-react 6.22.0-dev3.12 → 6.22.0-dev3.14

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

@@ -21,6 +21,8 @@ export interface TMTabPanelProps {
     closable?: boolean;
     /** Se false disabilita la rinomina su questo tab. Default true. */
     renamable?: boolean;
+    /** Se false il tab non si trascina e non accetta il rilascio di altri: resta al suo posto. Default true. */
+    movable?: boolean;
     children?: React.ReactNode;
 }
 /** Contenitore dichiarativo di un tab: figlio diretto di TMTabControl, non renderizza nulla di suo. */
@@ -70,6 +72,9 @@ export interface TMTabControlProps {
     contentStyle?: React.CSSProperties;
     /** Stile del contenitore esterno. */
     style?: React.CSSProperties;
+    /** Contenuto del chiamante in coda alla barra, a destra dei tab: es. i pulsanti di azione della pagina.
+        Fa parte della barra, quindi con hideBarWhenSingle e un solo tab non viene mostrato. */
+    toolbar?: React.ReactNode;
     children: React.ReactNode;
 }
 declare const TMTabControl: React.FC<TMTabControlProps>;

package/lib/components/base/TMTabControl.js

@@ -18,10 +18,11 @@ import { getAppModuleButtonColors, getAppModuleGradient, IconAdd, IconCloseOutli
 //   I tab non attivi restano sempre montati e solo spostati fuori schermo: nulla si ricarica ne perde stato.
 //   onTabClose        -> mostra la 'x' sui tab e la voce Chiudi nel menu contestuale.
 //   onTabRename       -> doppio clic (o voce Rinomina) per modificare il titolo in linea.
-//   onTabReorder      -> tab spostabili con il trascinamento.
+//   onTabReorder      -> tab spostabili con il trascinamento; il singolo tab si blocca con movable={false}.
 //   tabMenuItems      -> voci del chiamante nel menu del tasto destro sul tab, prima di Rinomina e Chiudi.
 //   contentAnimation  -> effetto del contenuto al cambio tab: 'fade' (default), 'slide', 'zoom' o 'none'.
 //   swipeEnabled      -> su touch si cambia tab trascinando il contenuto di lato.
+//   toolbar           -> contenuto del chiamante in coda alla barra, a destra dei tab (azioni di pagina).
 //
 // Da tastiera, con il focus sulla barra: frecce destra/giu al tab successivo, sinistra/su al precedente,
 // Home ed End al primo e all'ultimo. I tab disabilitati vengono saltati.
@@ -90,7 +91,7 @@ const VARIANTS = {
         joins: false
     })
 };
-/** Contenitore della barra: frecce ai lati e striscia dei tab in mezzo. */
+/** Contenitore della barra: frecce ai lati, striscia dei tab in mezzo ed eventuale toolbar in coda. */
 const TabsHeader = styled.div `
     display: flex;
     align-items: flex-end;
@@ -152,6 +153,16 @@ const AddButton = styled.button `
     &:active { background: ${({ $v }) => $v.buttonActive}; }
     &:focus, &:focus-visible { outline: none; }
 `;
+/** Contenuto libero del chiamante in coda alla barra: azioni di pagina allineate a destra dei tab.
+    E' position: relative cosi un menu a tendina del chiamante puo posizionarsi rispetto a quest'area. */
+const TabsToolbar = styled.div `
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-bottom: 3px;
+    padding-left: 8px;
+    position: relative;
+`;
 /** Area del contenuto: fa da riferimento ai pannelli nascosti, che restano montati ma non impaginati. */
 const ContentArea = styled.div `
     position: relative;
@@ -341,7 +352,7 @@ const shortenLabel = (label) => {
 /** Contenitore dichiarativo di un tab: figlio diretto di TMTabControl, non renderizza nulla di suo. */
 export const TMTabPanel = ({ children }) => _jsx(_Fragment, { children: children });
 const TMTabControl = (props) => {
-    const { selectedId, defaultSelectedId, onSelectedIdChange, hideBarWhenSingle = false, onTabClose, closableWhenSingle = false, onTabRename, onTabReorder, onTabAdd, tabMenuItems, addCaption = SDKUI_Localizator.AddTab, renameCaption = SDKUI_Localizator.Rename, closeCaption = SDKUI_Localizator.Close, closeOtherCaption = SDKUI_Localizator.CloseOtherTabs, variant = 'module', textColor, idleTextColor, contentAnimation = 'none', animationDuration = 300, swipeEnabled = true, contentStyle, style, children } = props;
+    const { selectedId, defaultSelectedId, onSelectedIdChange, hideBarWhenSingle = false, onTabClose, closableWhenSingle = false, onTabRename, onTabReorder, onTabAdd, tabMenuItems, addCaption = SDKUI_Localizator.AddTab, renameCaption = SDKUI_Localizator.Rename, closeCaption = SDKUI_Localizator.Close, closeOtherCaption = SDKUI_Localizator.CloseOtherTabs, variant = 'module', textColor, idleTextColor, contentAnimation = 'none', animationDuration = 300, swipeEnabled = true, contentStyle, style, toolbar, children } = props;
     const v = useMemo(() => VARIANTS[variant](), [variant]);
     const titleColor = textColor ?? v.textColor;
     const titleIdleColor = idleTextColor ?? v.idleTextColor;
@@ -578,11 +589,11 @@ const TMTabControl = (props) => {
                                         tabIndex: isActive ? 0 : -1, 
                                         // Con il titolo accorciato il nome per esteso lo mostra gia il tooltip
                                         title: canRename && !shortLabel ? 'Doppio clic per rinominare' : undefined, $active: isActive, $textColor: titleColor, $idleColor: titleIdleColor, disabled: p.props.disabled, onClick: () => handleSelect(p.props.id), onDoubleClick: () => canRename && setEditingId(p.props.id), children: [shortLabel ?? p.props.label, (p.props.badge ?? 0) > 0 && _jsx(TabBadge, { $color: p.props.badgeColor ?? '#E53935', children: p.props.badge })] }));
-                                    return (_jsxs(React.Fragment, { children: [showSeparator && _jsx(TabSeparator, { $v: v }), _jsxs(TabItem, { "data-tab-id": p.props.id, $v: v, $active: isActive, $dragging: dragId === p.props.id, draggable: !!onTabReorder && editingId !== p.props.id, 
+                                    return (_jsxs(React.Fragment, { children: [showSeparator && _jsx(TabSeparator, { $v: v }), _jsxs(TabItem, { "data-tab-id": p.props.id, $v: v, $active: isActive, $dragging: dragId === p.props.id, draggable: !!onTabReorder && p.props.movable !== false && editingId !== p.props.id, 
                                                 // Tipo MIME privato invece di 'text/plain': il tab non e rilasciabile fuori dalla barra
                                                 // (barra indirizzi, campi di ricerca, altre applicazioni) scrivendoci dentro il suo id
-                                                onDragStart: (e) => { setDragId(p.props.id); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData(TAB_DRAG_MIME, p.props.id); }, onDragOver: (e) => { if (!dragId || dragId === p.props.id)
-                                                    return; e.preventDefault(); e.dataTransfer.dropEffect = 'move'; setDropId(p.props.id); }, onDragLeave: () => setDropId(prev => prev === p.props.id ? undefined : prev), onDrop: (e) => { e.preventDefault(); if (dragId && dragId !== p.props.id)
+                                                onDragStart: (e) => { setDragId(p.props.id); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData(TAB_DRAG_MIME, p.props.id); }, onDragOver: (e) => { if (!dragId || dragId === p.props.id || p.props.movable === false)
+                                                    return; e.preventDefault(); e.dataTransfer.dropEffect = 'move'; setDropId(p.props.id); }, onDragLeave: () => setDropId(prev => prev === p.props.id ? undefined : prev), onDrop: (e) => { e.preventDefault(); if (dragId && dragId !== p.props.id && p.props.movable !== false)
                                                     onTabReorder?.(dragId, p.props.id); setDragId(undefined); setDropId(undefined); }, onDragEnd: () => { setDragId(undefined); setDropId(undefined); }, onContextMenu: (e) => openMenu(e, p.props.id), children: [editingId === p.props.id
                                                         // In rinomina: Invio conferma, Esc annulla, uscendo dal campo si conferma
                                                         ? _jsx(RenameInput, { autoFocus: true, defaultValue: String(p.props.label), onFocus: (e) => e.currentTarget.select(), onBlur: (e) => commitRename(p.props.id, e.currentTarget.value), onKeyDown: (e) => {
@@ -595,7 +606,7 @@ const TMTabControl = (props) => {
                                                             // width: auto annulla il max-content del tooltip, che impedirebbe al titolo di restringersi
                                                             ? _jsx(TMTooltip, { content: labelText, parentStyle: { display: 'flex', minWidth: 0 }, childStyle: { width: 'auto', minWidth: 0 }, children: tabButton })
                                                             : tabButton, canClose && _jsx(CloseButton, { $color: isActive ? v.textColor : v.idleTextColor, type: 'button', tabIndex: isActive ? 0 : -1, title: closeCaption, onClick: () => onTabClose?.(p.props.id), children: "\u00D7" }), isDropTarget && _jsx(DropMark, { $side: draggedIndex > index ? 'left' : 'right' })] })] }, p.props.id));
-                                }), onTabAdd && _jsx(AddButton, { $v: v, type: 'button', title: addCaption, onClick: onTabAdd, children: _jsx(IconAdd, { fontSize: 18 }) })] }), arrows.right && _jsx(NavButton, { $v: v, type: 'button', tabIndex: -1, onClick: () => scrollTabs(1), children: _jsx(IconRight, { fontSize: 18 }) })] }), menu.visible && menuItems.length > 0 &&
+                                }), onTabAdd && _jsx(AddButton, { $v: v, type: 'button', title: addCaption, onClick: onTabAdd, children: _jsx(IconAdd, { fontSize: 18 }) })] }), arrows.right && _jsx(NavButton, { $v: v, type: 'button', tabIndex: -1, onClick: () => scrollTabs(1), children: _jsx(IconRight, { fontSize: 18 }) }), toolbar && _jsx(TabsToolbar, { children: toolbar })] }), menu.visible && menuItems.length > 0 &&
                 _jsx(TMContextMenu, { items: menuItems, externalControl: { visible: menu.visible, position: menu.position, onClose: closeMenu } }), _jsx(ContentArea, { onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: mountedPanels.map(p => {
                     const isActive = p.props.id === activeId;
                     return (_jsx(ContentPane, { role: 'tabpanel', "aria-hidden": !isActive, $active: isActive, $anim: animation, $duration: animationDuration, $phase: animPhase, 

package/lib/components/features/search/TMSearchResult.d.ts

@@ -23,6 +23,11 @@ interface ITMSearchResultProps {
     openDcmtFormAsModal?: boolean;
     showSearchResultSidebar?: boolean;
     showDcmtFormSidebar?: boolean;
+    /** Mostra accanto alla griglia il selettore dei tipi documento trovati:
+     * su desktop sono affiancati (30/70),
+     * su mobile si naviga a step tra selettore e risultati.
+     * Se il risultato ha un solo tipo documento il selettore resta chiuso
+     * e lo spazio va tutto alla griglia, riapribile dal menu "Altro" */
     showSelector?: boolean;
     showToolbarHeader?: boolean;
     showBackButton?: boolean;

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

@@ -362,6 +362,7 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
             allowRelations,
             showTodoDcmtForm,
             graphometricManager,
+            showSelector,
         },
         tasks: {
             allTasks: allTasks,
@@ -621,11 +622,11 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
     }, [currentMetadataValues]);
     const getTitleHeader = () => {
         let counters = (showSelector && disableAccordionIfSingleCategory && searchResults.length > 1) ? getSearchResultCountersSingleCategory(searchResults) : "";
-        if (title)
-            return title + counters;
         // Nome del tipo documento selezionato, accodato al titolo
         const selectedDcmtTypeName = selectedSearchResult?.fromName ?? (searchResults?.length === 1 ? searchResults[0]?.fromName : undefined);
         const withSelectedDcmtTypeName = (baseTitle) => selectedDcmtTypeName ? `${baseTitle} - ${selectedDcmtTypeName}` : baseTitle;
+        if (title)
+            return withSelectedDcmtTypeName(title) + counters;
         let titleHeader = withSelectedDcmtTypeName('Ricerca per metadati');
         switch (context) {
             case SearchResultContext.MASTER_DETAIL:
@@ -770,7 +771,7 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
     const tmSearchResult = useMemo(() => (!searchResults || searchResults.length <= 0)
         ? _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%' }, children: [_jsx(IconBoard, { fontSize: 96 }), showNoDcmtFoundMessage && _jsx("div", { style: { fontSize: "15px", marginTop: "10px" }, children: SDKUI_Localizator.NoDcmtFound }), openAddDocumentForm && _jsx("div", { style: { marginTop: "10px" }, children: _jsx(TMButton, { fontSize: "15px", icon: _jsx("i", { className: 'dx-icon-share' }), caption: SDKUI_Localizator.Share, onClick: openAddDocumentForm }) })] })
         :
-            _jsxs(_Fragment, { children: [_jsxs(TMLayoutItem, { height: '100%', children: [_jsxs("div", { ref: floatingBarContainerRef, style: { position: 'relative', height: '100%', width: '100%' }, children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: Gutters.getGutters(), separatorActiveColor: 'transparent', separatorColor: 'transparent', min: ['0', '0'], showSeparator: showSelector && !isSteppedLayout && !isSelectorCollapsed, start: splitterSizes, children: [showSelector ?
+            _jsxs(_Fragment, { children: [_jsxs(TMLayoutItem, { height: '100%', children: [_jsxs("div", { ref: floatingBarContainerRef, style: { position: 'relative', height: '100%', width: '100%' }, children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: isSteppedLayout ? 'hidden' : 'visible', separatorSize: Gutters.getGutters(), separatorActiveColor: 'transparent', separatorColor: 'transparent', min: ['0', '0'], showSeparator: showSelector && !isSteppedLayout && !isSelectorCollapsed, start: splitterSizes, children: [showSelector ?
                                                 _jsx(TMLayoutItem, { children: _jsx(TMSearchResultSelector, { searchResults: currentSearchResults, disableAccordionIfSingleCategory: disableAccordionIfSingleCategory, selectedTID: selectedSearchResultTID, selectedSearchResult: selectedSearchResult, autoSelectFirst: !isMobile || hasSingleDcmtType, onSelectionChanged: onSearchResultSelectionChanged }) })
                                                 :
                                                     _jsx(_Fragment, {}), _jsx(TMLayoutItem, { children: _jsx(TMSearchResultGrid, { openInOffice: openInOffice, fromDTD: fromDTD, operationItems: operationItems, allUsers: allUsers, inputFocusedItem: focusedItem, inputSelectedItems: selectedItems, showExportForm: showExportForm, onFocusedItemChanged: handleFocusedItemChangedFromGrid, onDownloadDcmtsAsync: async (inputDcmts, downloadType, downloadMode, _y, confirmAttachments) => await downloadDcmtsAsync({ inputDcmts, downloadType, downloadMode, onFileDownloaded: onFileOpened, confirmAttachments }), lastUpdateSearchTime: lastUpdateSearchTime, searchResult: searchResults.length > 1 ? selectedSearchResult : searchResults[0], onSelectionChanged: (items) => { setSelectedItems(items); }, onDblClick: () => openFormHandler(LayoutModes.Update), showSearchTMDatagrid: showSearchTMDatagrid, onVisibleItemChanged: setVisibleItems, updateDataColumnsFromDataGrid: updateDataColumnsFromDataGrid, updateDataSourceFromDataGrid: updateDataSourceFromDataGrid, updateSelectedRowKeysFromDataGrid: updateSelectedRowKeysFromDataGrid, disableAutoFocus: autoFocusFirstRow === false && isFirstAutoFocusRef.current, dcmtsReturned: dcmtsReturned, dcmtsFound: dcmtsFound, showCounterConfig: showCounterConfig, counterConfig: counterConfig, showActionsColumn: showActionsColumn, compactPager: compactPager, onRowActionRequest: requestRowAction }) })] }), renderFloatingBar] }), _jsx(TMToppyDraggableHelpCenter, { usePortal: toppyHelpCenterUsePortal, isVisible: isToppyHelpCenterVisible, content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { dtd: fromDTD, deviceType: deviceType, onApprove: () => {

package/lib/hooks/useDocumentOperations.d.ts

@@ -63,6 +63,7 @@ export interface UIConfigProps {
     toppyHelpCenterUsePortal?: boolean;
     inputDcmtFormLayoutMode?: LayoutModes;
     graphometricManager?: IGraphometricManagerProp;
+    showSelector?: boolean;
 }
 export interface TasksProps {
     allTasks?: Array<TaskDescriptor>;

package/lib/hooks/useDocumentOperations.js

@@ -86,7 +86,7 @@ export const useDocumentOperations = (props) => {
     const { dataColumns, dataSource, selectedRowKeys, } = exportData ?? {};
     const { visibleItems = [], onRefreshSearchAsyncDatagrid, onRefreshDataRowsAsync, refreshFocusedDataRowAsync, onRefreshBlogDatagrid, onRefreshPreviewDatagrid, refreshOperationsTrigger = 0, onRefreshOperationsDatagrid, } = datagridUtility ?? {};
     const { approvalVID, dcmtDataRowForCicoStatus, selectedDcmtSearchResultRelations, dcmtTIDHasDetailRelations = false, dcmtTIDHasMasterRelations = false, updateCurrentDcmt, onCloseDcmtForm, onRefreshBlogForm, onRefreshPreviewForm, taskFormDialogComponent, s4TViewerDialogComponent } = dcmtUtility ?? {};
-    const { floatingBarContainerRef, customButtonsLayout, workingGroupContext, openS4TViewer = false, openDcmtFormAsModal = false, showDcmtFormSidebar = true, allowFloatingBar = true, enablePinIcons = true, allowRelations = true, showTodoDcmtForm = false, showToppyDraggableHelpCenter = true, toppyHelpCenterUsePortal = false, editPdfForm = false, inputDcmtFormLayoutMode = LayoutModes.Update, graphometricManager, } = uiConfig;
+    const { floatingBarContainerRef, customButtonsLayout, workingGroupContext, openS4TViewer = false, openDcmtFormAsModal = false, showDcmtFormSidebar = true, allowFloatingBar = true, enablePinIcons = true, allowRelations = true, showTodoDcmtForm = false, showToppyDraggableHelpCenter = true, toppyHelpCenterUsePortal = false, editPdfForm = false, inputDcmtFormLayoutMode = LayoutModes.Update, graphometricManager, showSelector = false, } = uiConfig;
     const { allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback } = tasks;
     const { 
     // Refresh operations (data consistency)
@@ -1073,7 +1073,7 @@ export const useDocumentOperations = (props) => {
             ]
         };
     };
-    const canToggleDcmtTypesSelection = !isMobile && context === SearchResultContext.WORKFLOW_APPROVE;
+    const canToggleDcmtTypesSelection = !isMobile && showSelector && currentSearchResults?.length === 1;
     const otherOperationsMenuItem = () => {
         return {
             id: 'oth',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.22.0-dev3.12",
+    "version": "6.22.0-dev3.14",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",