diff --git a/packages/asc-web-components/row/index.js b/packages/asc-web-components/row/index.js index 8b1238004d2..da0bf8d1e77 100644 --- a/packages/asc-web-components/row/index.js +++ b/packages/asc-web-components/row/index.js @@ -12,6 +12,7 @@ import { StyledContent, StyledRow, } from "./styled-row"; +import Loader from "../loader"; class Row extends React.Component { constructor(props) { @@ -71,19 +72,23 @@ class Row extends React.Component { this.cm.current.show(e); }; - const { onRowClick, ...rest } = this.props; + const { onRowClick, inProgress, ...rest } = this.props; return ( - {renderCheckbox && ( - - - + {inProgress ? ( + + ) : ( + renderCheckbox && ( + + + + ) )} {renderElement && ( @@ -150,6 +155,7 @@ Row.propTypes = { /** Accepts css style */ style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), sectionWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + inProgress: PropTypes.bool, }; Row.defaultProps = { diff --git a/packages/asc-web-components/row/styled-row.js b/packages/asc-web-components/row/styled-row.js index 970f92a0715..758d139be2c 100644 --- a/packages/asc-web-components/row/styled-row.js +++ b/packages/asc-web-components/row/styled-row.js @@ -27,6 +27,10 @@ const StyledRow = styled.div` justify-content: flex-start; align-items: center; align-content: center; + + .row-loader { + padding: 16px 12px 12px 0px; + } `; StyledRow.defaultProps = { theme: Base }; diff --git a/packages/asc-web-components/table-container/StyledTableContainer.js b/packages/asc-web-components/table-container/StyledTableContainer.js index 6270c9b990b..60cd8875149 100644 --- a/packages/asc-web-components/table-container/StyledTableContainer.js +++ b/packages/asc-web-components/table-container/StyledTableContainer.js @@ -197,6 +197,10 @@ const StyledTableRow = styled.div` ? `${props.theme.dragAndDrop.acceptBackground} !important` : "none"}; } + + .table-container_row-loader { + display: inline-flex; + } `; const StyledTableCell = styled.div` diff --git a/packages/asc-web-components/table-container/TableRow.js b/packages/asc-web-components/table-container/TableRow.js index 73b2699275e..0ee6de6114f 100644 --- a/packages/asc-web-components/table-container/TableRow.js +++ b/packages/asc-web-components/table-container/TableRow.js @@ -5,6 +5,7 @@ import TableCell from "./TableCell"; import ContextMenu from "../context-menu"; import ContextMenuButton from "../context-menu-button"; import Checkbox from "../checkbox"; +import Loader from "../loader"; const TableRow = (props) => { const { @@ -20,6 +21,7 @@ const TableRow = (props) => { style, selectionProp, hasAccess, + inProgress, ...rest } = props; @@ -60,12 +62,22 @@ const TableRow = (props) => { style={style} className={`${selectionProp?.className} table-container_row-checkbox-wrapper`} > -
{element}
- + {inProgress ? ( + + ) : ( + <> +
{element}
+ + + )} {children}
@@ -116,6 +128,7 @@ TableRow.propTypes = { className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), style: PropTypes.object, hasAccess: PropTypes.bool, + inProgress: PropTypes.bool, }; export default TableRow; diff --git a/products/ASC.Files/Client/src/HOCs/withFileActions.js b/products/ASC.Files/Client/src/HOCs/withFileActions.js index 2c8d5c4f701..d7c686458dc 100644 --- a/products/ASC.Files/Client/src/HOCs/withFileActions.js +++ b/products/ASC.Files/Client/src/HOCs/withFileActions.js @@ -54,13 +54,13 @@ export default function withFileActions(WrappedFileItem) { setStartDrag, isPrivacy, isTrashFolder, - onSelectItem, item, setBufferSelection, isActive, + inProgress, } = this.props; - const { id, isFolder, isThirdPartyFolder } = item; + const { isThirdPartyFolder } = item; const notSelectable = e.target.classList.contains("not-selectable"); const isFileName = e.target.classList.contains("item-file-name"); @@ -68,23 +68,16 @@ export default function withFileActions(WrappedFileItem) { if ( isPrivacy || isTrashFolder || - (!draggable && !isFileName && !isActive) - ) - return e; - - if ( + (!draggable && !isFileName && !isActive) || window.innerWidth < 1025 || notSelectable || isMobile || - isThirdPartyFolder + isThirdPartyFolder || + inProgress ) { return e; } - // if (!draggable) { - // id !== -1 && onSelectItem({ id, isFolder }); - // } - const mouseButton = e.which ? e.which !== 1 : e.button @@ -338,6 +331,8 @@ export default function withFileActions(WrappedFileItem) { viewAs, bufferSelection, setBufferSelection, + activeFiles, + activeFolders, } = filesStore; const { startUpload } = uploadDataStore; const { type, extension, id } = fileActionStore; @@ -361,6 +356,10 @@ export default function withFileActions(WrappedFileItem) { const canConvert = docserviceStore.canConvert(item.fileExst); const canViewedDocs = docserviceStore.canViewedDocs(item.fileExst); + const inProgress = + activeFiles.findIndex((x) => x === item.id) !== -1 || + activeFolders.findIndex((x) => x === item.id && item.isFolder) !== -1; + const isActive = bufferSelection && bufferSelection.id === item.id && @@ -410,6 +409,7 @@ export default function withFileActions(WrappedFileItem) { isItemsSelected: selection.length > 0, setNewBadgeCount, isActive, + inProgress, setBufferSelection, bufferSelection, }; diff --git a/products/ASC.Files/Client/src/components/dialogs/ConflictResolveDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/ConflictResolveDialog/index.js index e5a02ba6e41..21bcf2921e1 100644 --- a/products/ASC.Files/Client/src/components/dialogs/ConflictResolveDialog/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/ConflictResolveDialog/index.js @@ -19,6 +19,8 @@ const ConflictResolveDialog = (props) => { conflictResolveDialogData, items, itemOperationToFolder, + activeFiles, + setActiveFiles, } = props; const { @@ -54,12 +56,15 @@ const ConflictResolveDialog = (props) => { const conflictResolveType = getResolveType(); let newFileIds = fileIds; + let newActiveFiles = activeFiles; if (conflictResolveType === ConflictResolveType.Skip) { for (let item of items) { newFileIds = newFileIds.filter((x) => x.id === item.id); + newActiveFiles = newActiveFiles.filter((f) => f === item.id); } } + setActiveFiles(newActiveFiles); if (!folderIds.length && !newFileIds.length) return onClose(); const data = { @@ -168,7 +173,7 @@ const ConflictResolveDialog = (props) => { ); }; -export default inject(({ dialogsStore, uploadDataStore }) => { +export default inject(({ dialogsStore, uploadDataStore, filesStore }) => { const { conflictResolveDialogVisible: visible, setConflictResolveDialogVisible, @@ -177,6 +182,7 @@ export default inject(({ dialogsStore, uploadDataStore }) => { } = dialogsStore; const { itemOperationToFolder } = uploadDataStore; + const { activeFiles, setActiveFiles } = filesStore; return { items, @@ -184,6 +190,8 @@ export default inject(({ dialogsStore, uploadDataStore }) => { conflictResolveDialogData, setConflictResolveDialogVisible, itemOperationToFolder, + activeFiles, + setActiveFiles, }; })( withRouter( diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js index f580a1b7fd4..9151f72f54f 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js @@ -60,6 +60,13 @@ const StyledSimpleFilesRow = styled(Row)` !props.isThirdPartyFolder && (props.checked || props.isActive) && "url(images/cursor.palm.svg), auto"}; + ${(props) => + props.inProgress && + css` + pointer-events: none; + /* cursor: wait; */ + `} + margin-top: -2px; ${(props) => @@ -119,6 +126,7 @@ const SimpleFilesRow = (props) => { isEdit, showShare, isActive, + inProgress, } = props; const sharedButton = @@ -162,6 +170,7 @@ const SimpleFilesRow = (props) => { contextButtonSpacerWidth={displayShareButton} dragging={dragging && isDragging} isActive={isActive} + inProgress={inProgress} isThirdPartyFolder={item.isThirdPartyFolder} > + props.inProgress && + css` + pointer-events: none; + /* cursor: wait; */ + `} } .table-container_element { @@ -177,6 +184,7 @@ const FilesTableRow = (props) => { isActive, onHideContextMenu, onFilesClick, + inProgress, } = props; const sharedButton = @@ -246,6 +254,7 @@ const FilesTableRow = (props) => { {...contextOptionsProps} checked={checkedProps} isActive={isActive} + inProgress={inProgress} onHideContextMenu={onHideContextMenu} isThirdPartyFolder={item.isThirdPartyFolder} onDoubleClick={onFilesClick} diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FileTile.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FileTile.js index f8dd9616a51..1dfc9310b8e 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FileTile.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FileTile.js @@ -37,6 +37,7 @@ const FilesTile = (props) => { showShare, isActive, isEdit, + inProgress, } = props; const temporaryExtension = @@ -93,6 +94,7 @@ const FilesTile = (props) => { {...contextOptionsProps} contextButtonSpacerWidth={displayShareButton} isActive={isActive} + inProgress={inProgress} isEdit={isEdit} >
; @@ -42,6 +43,12 @@ const checkedStyle = css` const StyledTile = styled.div` cursor: ${(props) => (!props.isRecycleBin ? "pointer" : "default")}; + ${(props) => + props.inProgress && + css` + pointer-events: none; + /* cursor: wait; */ + `} min-height: 57px; width: 100%; border: 1px solid #d0d5da; @@ -160,6 +167,10 @@ const StyledTile = styled.div` min-width: ${isMobile ? "36px" : "28px"}; } + .tile-folder-loader { + padding-top: 4px; + } + .styled-content { padding-left: 10px; @@ -177,6 +188,7 @@ const StyledTile = styled.div` ${(props) => !props.dragging && props.isDesktop && + !props.inProgress && css` .checkbox { opacity: 1; @@ -223,6 +235,11 @@ const StyledFileTileBottom = styled.div` padding-right: 0; min-height: 56px; box-sizing: border-box; + + .tile-file-loader { + padding-top: 4px; + padding-left: 3px; + } `; const StyledContent = styled.div` @@ -338,6 +355,7 @@ class Tile extends React.PureComponent { isRecycleBin, item, isActive, + inProgress, isEdit, } = this.props; const { isFolder, id, fileExst } = item; @@ -381,25 +399,37 @@ class Tile extends React.PureComponent { isRecycleBin={isRecycleBin} checked={checked} isActive={isActive} + inProgress={inProgress} isDesktop={isDesktop} > {isFolder || (!fileExst && id === -1) ? ( <> {renderElement && !(!fileExst && id === -1) && !isEdit && ( -
- - {element} - - -
+ <> + {!inProgress ? ( +
+ + {element} + + + +
+ ) : ( + + )} + )} {id !== -1 && !isEdit && ( -
-
- {element} -
- -
+ <> + {!inProgress ? ( +
+
+ {element} +
+ +
+ ) : ( + + )} + )} { + updateCurrentFolder = (fileIds, folderIds) => { const { clearSecondaryProgressData, } = this.uploadDataStore.secondaryProgressDataStore; const { filter, fetchFiles } = this.filesStore; - fetchFiles(this.selectedFolderStore.id, filter, true, true).finally(() => - setTimeout(() => clearSecondaryProgressData(), TIMEOUT) - ); + fetchFiles(this.selectedFolderStore.id, filter, true, true).finally(() => { + this.uploadDataStore.clearActiveOperations(fileIds, folderIds); + setTimeout(() => clearSecondaryProgressData(), TIMEOUT); + }); }; deleteAction = async (translations, newSelection = null) => { const { isRecycleBinFolder, isPrivacyFolder } = this.treeFoldersStore; - - const selection = newSelection ? newSelection : this.filesStore.selection; - + const { addActiveItems } = this.filesStore; + const { + secondaryProgressDataStore, + loopFilesOperations, + clearActiveOperations, + } = this.uploadDataStore; const { setSecondaryProgressBarData, clearSecondaryProgressData, - } = this.uploadDataStore.secondaryProgressDataStore; + } = secondaryProgressDataStore; + + const selection = newSelection ? newSelection : this.filesStore.selection; setSecondaryProgressBarData({ icon: "trash", @@ -101,22 +107,27 @@ class FilesActionStore { i++; } + addActiveItems(fileIds); + addActiveItems(null, folderIds); + if (folderIds.length || fileIds.length) { this.isMediaOpen(); try { await removeFiles(folderIds, fileIds, deleteAfter, immediately).then( async (res) => { + if (res[0]?.error) return Promise.reject(res[0].error); const data = res[0] ? res[0] : null; const pbData = { icon: "trash", label: translations.deleteOperation, }; - await this.uploadDataStore.loopFilesOperations(data, pbData); - this.updateCurrentFolder(); + await loopFilesOperations(data, pbData); + this.updateCurrentFolder(fileIds, folderIds); } ); } catch (err) { + clearActiveOperations(fileIds, folderIds); setSecondaryProgressBarData({ visible: true, alert: true, @@ -128,10 +139,20 @@ class FilesActionStore { }; emptyTrash = async (translations) => { + const { + secondaryProgressDataStore, + loopFilesOperations, + clearActiveOperations, + } = this.uploadDataStore; const { setSecondaryProgressBarData, clearSecondaryProgressData, - } = this.uploadDataStore.secondaryProgressDataStore; + } = secondaryProgressDataStore; + const { addActiveItems, files, folders } = this.filesStore; + + const fileIds = files.map((f) => f.id); + const folderIds = folders.map((f) => f.id); + addActiveItems(fileIds, folderIds); setSecondaryProgressBarData({ icon: "trash", @@ -143,15 +164,17 @@ class FilesActionStore { try { await emptyTrash().then(async (res) => { + if (res[0]?.error) return Promise.reject(res[0].error); const data = res[0] ? res[0] : null; const pbData = { icon: "trash", label: translations.deleteOperation, }; - await this.uploadDataStore.loopFilesOperations(data, pbData); - this.updateCurrentFolder(); + await loopFilesOperations(data, pbData); + this.updateCurrentFolder(fileIds, folderIds); }); } catch (err) { + clearActiveOperations(fileIds, folderIds); setSecondaryProgressBarData({ visible: true, alert: true, @@ -164,10 +187,16 @@ class FilesActionStore { downloadFilesOperation = () => {}; downloadFiles = async (fileConvertIds, folderIds, label) => { + const { + clearActiveOperations, + secondaryProgressDataStore, + } = this.uploadDataStore; const { setSecondaryProgressBarData, clearSecondaryProgressData, - } = this.uploadDataStore.secondaryProgressDataStore; + } = secondaryProgressDataStore; + + const { addActiveItems } = this.filesStore; setSecondaryProgressBarData({ icon: "file", @@ -177,6 +206,9 @@ class FilesActionStore { alert: false, }); + const fileIds = fileConvertIds.map((f) => f.key || f); + addActiveItems(fileIds, folderIds); + try { await downloadFiles(fileConvertIds, folderIds).then(async (res) => { const data = res[0] ? res[0] : null; @@ -190,6 +222,8 @@ class FilesActionStore { ? data : await this.uploadDataStore.loopFilesOperations(data, pbData); + clearActiveOperations(fileIds, folderIds); + if (item.url) { window.location.href = item.url; } else { @@ -202,6 +236,7 @@ class FilesActionStore { setTimeout(() => clearSecondaryProgressData(), TIMEOUT); }); } catch (err) { + clearActiveOperations(fileIds, folderIds); setSecondaryProgressBarData({ visible: true, alert: true, @@ -294,10 +329,14 @@ class FilesActionStore { }; deleteItemAction = async (itemId, translations, isFile, isThirdParty) => { + const { + secondaryProgressDataStore, + clearActiveOperations, + } = this.uploadDataStore; const { setSecondaryProgressBarData, clearSecondaryProgressData, - } = this.uploadDataStore.secondaryProgressDataStore; + } = secondaryProgressDataStore; if ( this.settingsStore.confirmDelete || this.treeFoldersStore.isPrivacyFolder || @@ -316,6 +355,7 @@ class FilesActionStore { try { await this.deleteItemOperation(isFile, itemId, translations); } catch (err) { + clearActiveOperations(isFile && [itemId], !isFile && [itemId]); setSecondaryProgressBarData({ visible: true, alert: true, @@ -327,26 +367,32 @@ class FilesActionStore { }; deleteItemOperation = (isFile, itemId, translations) => { + const { addActiveItems } = this.filesStore; + const pbData = { icon: "trash", label: translations.deleteOperation, }; if (isFile) { + addActiveItems([itemId]); this.isMediaOpen(); return deleteFile(itemId) .then(async (res) => { + if (res[0]?.error) return Promise.reject(res[0].error); const data = res[0] ? res[0] : null; await this.uploadDataStore.loopFilesOperations(data, pbData); - this.updateCurrentFolder(); + this.updateCurrentFolder([itemId]); }) .then(() => toastr.success(translations.successRemoveFile)); } else { + addActiveItems(null, [itemId]); return deleteFolder(itemId) .then(async (res) => { + if (res[0]?.error) return Promise.reject(res[0].error); const data = res[0] ? res[0] : null; await this.uploadDataStore.loopFilesOperations(data, pbData); - this.updateCurrentFolder(); + this.updateCurrentFolder(null, [itemId]); }) .then(() => toastr.success(translations.successRemoveFolder)); } @@ -383,6 +429,7 @@ class FilesActionStore { setSecondaryProgressBarData, } = this.uploadDataStore.secondaryProgressDataStore; + //TODO: duplicate for folders? const folderIds = []; const fileIds = []; item.fileExst ? fileIds.push(item.id) : folderIds.push(item.id); @@ -397,6 +444,8 @@ class FilesActionStore { alert: false, }); + this.filesStore.addActiveItems(fileIds, folderIds); + return this.uploadDataStore.copyToAction( this.selectedFolderStore.id, folderIds, @@ -577,7 +626,10 @@ class FilesActionStore { setConflictResolveDialogVisible, setConflictResolveDialogItems, } = this.dialogsStore; - const { setBufferSelection } = this.filesStore; + const { setBufferSelection, addActiveItems } = this.filesStore; + + addActiveItems(fileIds); + addActiveItems(null, folderIds); let conflicts; diff --git a/products/ASC.Files/Client/src/store/FilesStore.js b/products/ASC.Files/Client/src/store/FilesStore.js index c860e297087..33298bfb5e1 100644 --- a/products/ASC.Files/Client/src/store/FilesStore.js +++ b/products/ASC.Files/Client/src/store/FilesStore.js @@ -50,6 +50,8 @@ class FilesStore { selected = "close"; filter = FilesFilter.getDefault(); //TODO: FILTER loadTimeout = null; + activeFiles = []; + activeFolders = []; constructor( authStore, @@ -75,6 +77,32 @@ class FilesStore { this.filesSettingsStore = filesSettingsStore; } + addActiveItems = (files, folders) => { + if (folders && folders.length) { + if (!this.activeFolders.length) { + this.setActiveFolders(folders); + } else { + folders.map((item) => this.activeFolders.push(item)); + } + } + + if (files && files.length) { + if (!this.activeFiles.length) { + this.setActiveFiles(files); + } else { + files.map((item) => this.activeFiles.push(item)); + } + } + }; + + setActiveFiles = (activeFiles) => { + this.activeFiles = activeFiles; + }; + + setActiveFolders = (activeFolders) => { + this.activeFolders = activeFolders; + }; + setIsLoaded = (isLoaded) => { this.isLoaded = isLoaded; }; @@ -190,6 +218,12 @@ class FilesStore { }; getFilesChecked = (file, selected) => { + if (!file.parentId) { + if (this.activeFiles.includes(file.id)) return false; + } else { + if (this.activeFolders.includes(file.id)) return false; + } + const type = file.fileType; switch (selected) { case "all": @@ -1483,8 +1517,9 @@ class FilesStore { : splitValue.slice(1).join("_"); if (fileType === "file") { - newSelection.push(this.files.find((f) => f.id == id)); - } else { + this.activeFiles.findIndex((f) => f == id) === -1 && + newSelection.push(this.files.find((f) => f.id == id)); + } else if (this.activeFolders.findIndex((f) => f == id) === -1) { const selectableFolder = this.folders.find((f) => f.id == id); selectableFolder.isFolder = true; newSelection.push(selectableFolder); diff --git a/products/ASC.Files/Client/src/store/UploadDataStore.js b/products/ASC.Files/Client/src/store/UploadDataStore.js index c64ad3e77f2..fae73d87e79 100644 --- a/products/ASC.Files/Client/src/store/UploadDataStore.js +++ b/products/ASC.Files/Client/src/store/UploadDataStore.js @@ -728,8 +728,6 @@ class UploadDataStore { if (!this.primaryProgressDataStore.alert) { this.primaryProgressDataStore.clearPrimaryProgressData(); } - // !this.primaryProgressDataStore.alert && - // this.primaryProgressDataStore.clearPrimaryProgressData(); if (this.uploadPanelVisible || this.primaryProgressDataStore.alert) { uploadData.files = this.files; @@ -754,7 +752,6 @@ class UploadDataStore { setSecondaryProgressBarData, clearSecondaryProgressData, } = this.secondaryProgressDataStore; - const { clearPrimaryProgressData } = this.primaryProgressDataStore; return copyToFolder( destFolderId, @@ -769,7 +766,7 @@ class UploadDataStore { const data = res[0] ? res[0] : null; const pbData = { icon: "duplicate" }; return this.loopFilesOperations(data, pbData).then(() => - this.moveToCopyTo(destFolderId, pbData, true) + this.moveToCopyTo(destFolderId, pbData, true, fileIds, folderIds) ); }) .catch((err) => { @@ -777,7 +774,7 @@ class UploadDataStore { visible: true, alert: true, }); - setTimeout(() => clearPrimaryProgressData(), TIMEOUT); + this.clearActiveOperations(fileIds, folderIds); setTimeout(() => clearSecondaryProgressData(), TIMEOUT); return Promise.reject(err); }); @@ -790,7 +787,6 @@ class UploadDataStore { conflictResolveType, deleteAfter ) => { - const { clearPrimaryProgressData } = this.primaryProgressDataStore; const { setSecondaryProgressBarData, clearSecondaryProgressData, @@ -807,7 +803,7 @@ class UploadDataStore { const data = res[0] ? res[0] : null; const pbData = { icon: "move" }; return this.loopFilesOperations(data, pbData).then(() => - this.moveToCopyTo(destFolderId, pbData, false) + this.moveToCopyTo(destFolderId, pbData, false, fileIds, folderIds) ); }) .catch((err) => { @@ -815,7 +811,7 @@ class UploadDataStore { visible: true, alert: true, }); - setTimeout(() => clearPrimaryProgressData(), TIMEOUT); + this.clearActiveOperations(fileIds, folderIds); setTimeout(() => clearSecondaryProgressData(), TIMEOUT); return Promise.reject(err); }); @@ -860,13 +856,12 @@ class UploadDataStore { }; loopFilesOperations = async (data, pbData) => { - const label = this.secondaryProgressDataStore.label; - const { clearSecondaryProgressData, setSecondaryProgressBarData, } = this.secondaryProgressDataStore; + const label = this.secondaryProgressDataStore.label; let progress = data.progress; if (!data) { @@ -881,7 +876,7 @@ class UploadDataStore { const item = await this.getOperationProgress(data.id); operationItem = item; progress = item ? item.progress : 100; - finished = item.finished; + finished = item ? item.finished : true; setSecondaryProgressBarData({ icon: pbData.icon, @@ -895,7 +890,7 @@ class UploadDataStore { return operationItem; }; - moveToCopyTo = (destFolderId, pbData, isCopy) => { + moveToCopyTo = (destFolderId, pbData, isCopy, fileIds, folderIds) => { const { treeFolders, setTreeFolders } = this.treeFoldersStore; const { fetchFiles, filter } = this.filesStore; const { @@ -914,10 +909,12 @@ class UploadDataStore { if (!isCopy || destFolderId === this.selectedFolderStore.id) { fetchFiles(this.selectedFolderStore.id, filter, true, true).finally( () => { + this.clearActiveOperations(fileIds, folderIds); setTimeout(() => clearSecondaryProgressData(), TIMEOUT); } ); } else { + this.clearActiveOperations(fileIds, folderIds); setSecondaryProgressBarData({ icon: pbData.icon, label: pbData.label || label, @@ -950,6 +947,25 @@ class UploadDataStore { }); return promise; }; + + clearActiveOperations = (fileIds, folderIds) => { + const { + activeFiles, + activeFolders, + setActiveFiles, + setActiveFolders, + } = this.filesStore; + + const newActiveFiles = activeFiles.filter((el) => !fileIds.includes(el)); + const newActiveFolders = activeFolders.filter( + (el) => !folderIds.includes(el) + ); + + setTimeout(() => { + setActiveFiles(newActiveFiles); + setActiveFolders(newActiveFolders); + }, TIMEOUT); + }; } export default UploadDataStore;