@topconsultnpm/sdkui-react-beta 6.10.52 → 6.10.54

package/lib/components/base/TMAreaManager.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import FileManager, { Column, Details, ItemView, Permissions, Notifications, ContextMenu, Toolbar, Item } from 'devextreme-react/file-manager';
 import { FileDescriptor, FileFormats, FileTransferModes, SDK_Localizator, SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
 import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
@@ -7,12 +7,11 @@ import FileSystemError from "devextreme/file_management/error";
 import Button from "devextreme/ui/button";
 import { alert, confirm } from "devextreme/ui/dialog";
 import { loadMessages } from 'devextreme/localization';
-import { Globalization, IconAll, IconSelected, SDKUI_Localizator } from '../../helper';
+import { Globalization, IconAll, IconCloud, IconSelected, SDKUI_Localizator } from '../../helper';
 import { TMExceptionBoxManager } from './TMPopUp';
 import ShowAlert from './TMAlert';
-import { IconFolder, IconPdf, IconTxt, IconXls, IconDocx, IconImage, IconZip, IconXml, IconMp4, IconEmail, IconPpt, IconSigned, IconExe, IconHtml, IconDwg, IconDicom, IconSlddrw } from '../../assets/thumbnails';
 import { TMLayoutWaitingContainer } from './TMWaitPanel';
-import TMCounterBar from './TMCounterBar';
+import TMCounterContainer, { CounterItemKey } from './TMCounterContainer';
 export class TMFileSystemItem {
     constructor() {
         this.name = "";
@@ -34,16 +33,18 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
     const [areas, setAreas] = useState([]);
     // State to maintain the Area Descriptor Name Set (Support area - left panel)
     const [areasRoots, setAreasRoots] = useState(new Set());
+    // State to store the file system items of the current directory's parent
+    const [parentDirectoryFileSystemItems, setParentDirectoryFileSystemItems] = useState([]);
     // State to maintain the selected area file (File System Item - right panel)
     const [areaFile, setAreaFile] = useState('');
     // State to maintain the selected area folder (File System Item - right panel)
     const [areaFolder, setAreaFolder] = useState('');
     // State to maintain the focused/clicked file system item (File System Item - right panel)
     const [focusedFileSystemItem, setFocusedFileSystemItem] = useState(undefined);
-    // State to maintain the number of total item into selected support area
-    const [counter, setCounter] = useState(0);
     // State to maintain the number of selected items)
     const [selectedItemsCount, setSelectedItemsCount] = useState(0);
+    // State to maintain the counter values (total item into selected support area and selected items)
+    const [counterValues, setCounterValues] = useState(new Map());
     // State to maintain the selection mode (File System Item - right panel)
     const [selectionMode, setSelectionMode] = useState('single');
     /* State to manage the Wait Panel */
@@ -72,6 +73,44 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
     const fileManagerRef = useRef(null);
     // Cache for uploaded file IDs, mapping file paths to their corresponding IDs
     let _cacheUploadFileId = new Map();
+    useEffect(() => {
+        const defaultCounterItems = new Map([
+            [
+                String(SDKUI_Localizator.AllItems),
+                {
+                    key: String(SDK_Localizator.Areas),
+                    show: true,
+                    caption: String(SDK_Localizator.Areas),
+                    value: areasRoots.size,
+                    icon: _jsx(IconCloud, {}),
+                    order: 0
+                }
+            ],
+            [
+                String(SDKUI_Localizator.All),
+                {
+                    key: String(SDKUI_Localizator.AllFilesAndFoldersInSupportArea),
+                    show: true,
+                    caption: String(SDKUI_Localizator.AllFilesAndFoldersInSupportArea),
+                    value: focusedFileSystemItem?.name === '' ? 0 : parentDirectoryFileSystemItems.length,
+                    icon: _jsx(IconAll, {}),
+                    order: 0
+                }
+            ],
+            [
+                String(CounterItemKey.selectedItems),
+                {
+                    key: String(CounterItemKey.selectedItems),
+                    show: true,
+                    caption: String(SDKUI_Localizator.SelectedItems),
+                    value: selectedItemsCount,
+                    icon: _jsx(IconSelected, {}),
+                    order: 1
+                }
+            ]
+        ]);
+        setCounterValues(defaultCounterItems);
+    }, [areasRoots, focusedFileSystemItem, parentDirectoryFileSystemItems, selectedItemsCount]);
     useEffect(() => {
         // If areaProvider is already set, exit early to prevent reinitialization
         if (areaProvider)
@@ -127,7 +166,6 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
         const btnSearchFile = document.querySelector(".dx-filemanager-wrapper [aria-label='Carica i files']");
         const instanceBtnSearchFile = Button.getInstance(btnSearchFile);
         if (currentRoute === '') {
-            initCounter();
             instanceBtnNewDir?.option("disabled", true);
             instanceBtnSearchFile?.option("disabled", true);
         }
@@ -165,12 +203,6 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
         setSelectionMode('multiple');
         fileManagerRef.current?.instance().refresh();
     }, [props.areaStatus]);
-    const initCounter = async () => {
-        const tms = props.tmSession ?? SDK_Globals.tmSession;
-        const adlist = await tms?.NewAreaEngine().RetrieveAllAsync();
-        if (adlist)
-            setCounter(adlist.length);
-    };
     const checkTargetDirectory = (operationType, e, data, resolve) => {
         const fileExists = !!data.find((x) => x.name === (operationType === 'copyOrMove' ? e.item.name : e.fileData.name));
         if (fileExists) {
@@ -434,6 +466,7 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
             // Set the areas
             setAreas(adlist);
             setAreasRoots(areasRootsName);
+            setParentDirectoryFileSystemItems([]);
         }
         else {
             // If the parent directory is not the root, retrieve files within the area
@@ -452,6 +485,7 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
                 fsi.size = file.size; // Store the file size
                 fileSystem.push(fsi); // Add the file system item to the list
             });
+            setParentDirectoryFileSystemItems(fileSystem);
         }
         // Return the constructed list of file system items (directories or files)
         return fileSystem;
@@ -515,7 +549,7 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
         let subFolder = e.directory.path.replace(ad.name + '/', '').replace(ad.name, '');
         setAreaFolder(getAreaPath(aid, subFolder));
         e.component.option("fileSystemProvider").getItems(e.directory).then((items) => {
-            setCounter(items.length);
+            setParentDirectoryFileSystemItems(items);
         });
     };
     const onSelectionChanged = async (e) => {
@@ -539,49 +573,49 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
         }
         setFocusedFileSystemItem(e.item);
     };
-    const customizeIcon = useCallback((fileSystemItem) => {
+    /* const customizeIcon = useCallback((fileSystemItem: FileSystemItem) => {
         if (fileSystemItem.isDirectory) {
-            return IconFolder;
+            return IconFolder
         }
         else {
-            const fileExtension = fileSystemItem.getFileExtension();
+            const fileExtension = fileSystemItem.getFileExtension()
             switch (fileExtension.toLowerCase()) {
                 case '.pdf':
-                    return IconPdf;
+                    return IconPdf
                 case '.xls':
                 case '.xlsx':
                 case '.csv':
-                    return IconXls;
+                    return IconXls
                 case '.txt':
-                    return IconTxt;
+                    return IconTxt
                 case '.xml':
-                    return IconXml;
+                    return IconXml
                 case '.dwg':
-                    return IconDwg;
+                    return IconDwg
                 case '.dcm':
-                    return IconDicom;
+                    return IconDicom
                 case '.slddrw':
-                    return IconSlddrw;
+                    return IconSlddrw
                 case '.mp4':
-                    return IconMp4;
+                    return IconMp4
                 case '.doc':
                 case '.docx':
                 case '.dotx':
                 case '.rtf':
-                    return IconDocx;
+                    return IconDocx
                 case '.ppt':
                 case '.pptx':
-                    return IconPpt;
+                    return IconPpt
                 case '.msg':
                 case '.eml':
-                    return IconEmail;
+                    return IconEmail
                 case '.exe':
-                    return IconExe;
+                    return IconExe
                 case '.htm':
                 case '.html':
-                    return IconHtml;
+                    return IconHtml
                 case '.p7m':
-                    return IconSigned;
+                    return IconSigned
                 case '.png':
                 case '.jpg':
                 case '.jpeg':
@@ -591,16 +625,16 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
                 case '.ico':
                 case '.gif':
                 case '.webp':
-                    return IconImage;
+                    return IconImage
                 case '.zip':
                 case '.rar':
                 case '.7z':
-                    return IconZip;
+                    return IconZip
                 default:
-                    return IconTxt;
+                    return IconTxt
             }
         }
-    }, []);
+    }, []); */
     const onSelectedFileOpened = async (e) => {
         if (props.isPathChooser)
             props.areaChoose();
@@ -632,7 +666,13 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
             alert(`"${e.name}" ${SDKUI_Localizator.FolderExist}`, SDKUI_Localizator.Attention);
         }
     };
-    const counters = [{ icon: _jsx(IconAll, {}), text: counter.toString(), tooltip: SDKUI_Localizator.AllItems }, { icon: _jsx(IconSelected, {}), text: selectedItemsCount.toString(), tooltip: SDKUI_Localizator.SelectedItems }];
-    return (_jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: [_jsxs(FileManager, { width: props.width, ref: fileManagerRef, height: props.height, onItemMoving: onItemCopying, onItemCopying: onItemCopying, onFileUploading: onFileUploading, fileSystemProvider: areaProvider, customizeThumbnail: customizeIcon, rootFolderName: SDK_Localizator.Areas, onSelectionChanged: onSelectionChanged, onDirectoryCreating: onDirectoryCreating, onFocusedItemChanged: onFocusedItemChanged, onSelectedFileOpened: onSelectedFileOpened, onContextMenuItemClick: onContextMenuItemClick, onItemMoved: () => setCounter(counter => counter + 1), onItemCopied: () => setCounter(counter => counter + 1), onItemDeleted: () => setCounter(counter => counter - 1), onFileUploaded: () => setCounter(counter => counter + 1), onCurrentDirectoryChanged: onCurrentDirectoryChanged, selectionMode: props.selectionMode === 'single' ? 'single' : selectionMode, children: [_jsxs(Toolbar, { children: [_jsx(Item, { name: "showNavPane", visible: true }), _jsx(Item, { name: "create", visible: true }), _jsx(Item, { name: "upload", visible: true }), _jsx(Item, { name: "separator", location: 'after' }), _jsx(Item, { name: "switchView", visible: true }), _jsx(Item, { name: "refresh", visible: true })] }), _jsx(ContextMenu, { items: ["create", "upload", "rename", "move", "copy", "delete", "refresh", "download"] }), _jsx(Permissions, { copy: focusedFileSystemItem && focusedFileSystemItem.name !== "" && !areasRoots.has(focusedFileSystemItem.name), move: focusedFileSystemItem && focusedFileSystemItem.name !== "" && !areasRoots.has(focusedFileSystemItem.name), create: focusedFileSystemItem && focusedFileSystemItem.name !== "", upload: focusedFileSystemItem && focusedFileSystemItem.name !== "", rename: focusedFileSystemItem && focusedFileSystemItem.name !== "" && !areasRoots.has(focusedFileSystemItem.name), delete: focusedFileSystemItem && focusedFileSystemItem.name !== "" && !areasRoots.has(focusedFileSystemItem.name), download: true }), _jsx(ItemView, { children: _jsxs(Details, { children: [_jsx(Column, { dataField: "thumbnail", cssClass: 'file-thumbnail' }, "thumbnail"), _jsx(Column, { dataField: "name", caption: SDKUI_Localizator.Name }, "name"), _jsx(Column, { dataField: 'size', width: '120px', alignment: 'center', dataType: 'number', caption: SDKUI_Localizator.File_Size }, "size"), _jsx(Column, { dataField: 'dateModified', width: '160px', alignment: 'center', dataType: 'datetime', caption: SDKUI_Localizator.Date_Modified }, "dateModified")] }) }), _jsx(Notifications, { showPopup: false })] }), _jsx(TMCounterBar, { items: counters })] }));
+    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsxs(FileManager, { width: props.width, ref: fileManagerRef, height: `calc(${props.height} - 30px)`, onItemMoving: onItemCopying, onItemCopying: onItemCopying, onFileUploading: onFileUploading, fileSystemProvider: areaProvider, 
+                    // customizeThumbnail={customizeIcon}
+                    rootFolderName: SDK_Localizator.Areas, onSelectionChanged: onSelectionChanged, onDirectoryCreating: onDirectoryCreating, onFocusedItemChanged: onFocusedItemChanged, onSelectedFileOpened: onSelectedFileOpened, onContextMenuItemClick: onContextMenuItemClick, 
+                    /* onItemMoved={() => setCounter(counter => counter + 1)}
+                    onItemCopied={() => setCounter(counter => counter + 1)}
+                    onItemDeleted={() => setCounter(counter => counter - 1)}
+                    onFileUploaded={() => setCounter(counter => counter + 1)} */
+                    onCurrentDirectoryChanged: onCurrentDirectoryChanged, selectionMode: props.selectionMode === 'single' ? 'single' : selectionMode, children: [_jsxs(Toolbar, { children: [_jsx(Item, { name: "showNavPane", visible: true }), _jsx(Item, { name: "create", visible: true }), _jsx(Item, { name: "upload", visible: true }), _jsx(Item, { name: "separator", location: 'after' }), _jsx(Item, { name: "switchView", visible: true }), _jsx(Item, { name: "refresh", visible: true })] }), _jsx(ContextMenu, { items: ["create", "upload", "rename", "move", "copy", "delete", "refresh", "download"] }), _jsx(Permissions, { copy: focusedFileSystemItem && focusedFileSystemItem.name !== "" && !areasRoots.has(focusedFileSystemItem.name), move: focusedFileSystemItem && focusedFileSystemItem.name !== "" && !areasRoots.has(focusedFileSystemItem.name), create: focusedFileSystemItem && focusedFileSystemItem.name !== "", upload: focusedFileSystemItem && focusedFileSystemItem.name !== "", rename: focusedFileSystemItem && focusedFileSystemItem.name !== "" && !areasRoots.has(focusedFileSystemItem.name), delete: focusedFileSystemItem && focusedFileSystemItem.name !== "" && !areasRoots.has(focusedFileSystemItem.name), download: true }), _jsx(ItemView, { children: _jsxs(Details, { children: [_jsx(Column, { dataField: "thumbnail", cssClass: 'file-thumbnail' }, "thumbnail"), _jsx(Column, { dataField: "name", caption: SDKUI_Localizator.Name }, "name"), _jsx(Column, { dataField: 'size', width: '120px', alignment: 'center', dataType: 'number', caption: SDKUI_Localizator.File_Size }, "size"), _jsx(Column, { dataField: 'dateModified', width: '160px', alignment: 'center', dataType: 'datetime', caption: SDKUI_Localizator.Date_Modified }, "dateModified")] }) }), _jsx(Notifications, { showPopup: false })] }), _jsx("div", { style: { width: "100%", height: "30px", overflowY: "hidden" }, children: _jsx(TMCounterContainer, { items: counterValues }) })] }) }));
 };
 export default TMAreaManager;

package/package.json

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