Bugfix/loader for file operations

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 (
       <StyledRow ref={this.row} {...rest} onContextMenu={onContextMenu}>
-        {renderCheckbox && (
-          <StyledCheckbox className="not-selectable">
-            <Checkbox
-              className="checkbox"
-              isChecked={checked}
-              isIndeterminate={indeterminate}
-              onChange={changeCheckbox}
-            />
-          </StyledCheckbox>
+        {inProgress ? (
+          <Loader className="row-loader" type="oval" size="16px" />
+        ) : (
+          renderCheckbox && (
+            <StyledCheckbox className="not-selectable">
+              <Checkbox
+                className="checkbox"
+                isChecked={checked}
+                isIndeterminate={indeterminate}
+                onChange={changeCheckbox}
+              />
+            </StyledCheckbox>
+          )
         )}
         {renderElement && (
           <StyledElement onClick={onRowClick} className="styled-element">
@@ -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 = {

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 };
 

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`

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`}
       >
-        <div className="table-container_element">{element}</div>
-        <Checkbox
-          className="table-container_row-checkbox"
-          onChange={onChange}
-          isChecked={checked}
-        />
+        {inProgress ? (
+          <Loader
+            className="table-container_row-loader"
+            type="oval"
+            size="16px"
+          />
+        ) : (
+          <>
+            <div className="table-container_element">{element}</div>
+            <Checkbox
+              className="table-container_row-checkbox"
+              onChange={onChange}
+              isChecked={checked}
+            />
+          </>
+        )}
       </TableCell>
       {children}
       <div>
@@ -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;

products/ASC.Files/Client/src/HOCs/withFileActions.js

@@ -54,37 +54,30 @@ 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");
 
       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,
       };

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,13 +182,16 @@ export default inject(({ dialogsStore, uploadDataStore }) => {
   } = dialogsStore;
 
   const { itemOperationToFolder } = uploadDataStore;
+  const { activeFiles, setActiveFiles } = filesStore;
 
   return {
     items,
     visible,
     conflictResolveDialogData,
     setConflictResolveDialogVisible,
     itemOperationToFolder,
+    activeFiles,
+    setActiveFiles,
   };
 })(
   withRouter(

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}
         >
           <FilesRowContent

products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js

@@ -61,6 +61,13 @@ const StyledTableRow = styled(TableRow)`
       !props.isThirdPartyFolder &&
       (props.checked || props.isActive) &&
       "url(images/cursor.palm.svg), auto"};
+
+    ${(props) =>
+      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}

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}
         >
           <FilesTileContent