Web: Files: added file operations to contextMenu, refactoring

products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js

@@ -36,11 +36,12 @@ import {
   setDragItem,
   setMediaViewerData,
   setProgressBarData,
-  clearProgressData
+  clearProgressData,
+  setSelection
 } from '../../../../../store/files/actions';
 import { isFileSelected, getFileIcon, getFolderIcon, getFolderType, loopTreeFolders, isImage, isSound, isVideo } from '../../../../../store/files/selectors';
 import store from "../../../../../store/store";
-import { SharingPanel } from "../../../../panels";
+import { SharingPanel, OperationsPanel } from "../../../../panels";
 //import { getFilterByLocation } from "../../../../../helpers/converters";
 //import config from "../../../../../../package.json";
 
@@ -85,7 +86,8 @@ class SectionBodyContent extends React.Component {
     this.state = {
       editingId: null,
       showSharingPanel: false,
-      currentItem: null
+      showMoveToPanel: false,
+      showCopyPanel: false
     };
 
     this.tooltipRef = React.createRef();
@@ -143,6 +145,7 @@ class SectionBodyContent extends React.Component {
   } */
 
   shouldComponentUpdate(nextProps, nextState) {
+    const { showMoveToPanel, showCopyPanel } = this.state;
     if (this.state.showSharingPanel !== nextState.showSharingPanel) {
       return true;
     }
@@ -155,11 +158,15 @@ class SectionBodyContent extends React.Component {
       return true;
     }
 
+    if(showMoveToPanel !== nextState.showMoveToPanel || showCopyPanel !== nextState.showCopyPanel) {
+      return true;
+    }
+
     return false;
   }
 
-  onClickRename = (item) => {
+  onClickRename = () => {
-    const { id, fileExst } = item;
+    const { id, fileExst } = this.props.selection[0];
 
     this.setState({ editingId: id }, () => {
       this.props.setAction(
@@ -199,7 +206,8 @@ class SectionBodyContent extends React.Component {
     })
   }
 
-  onClickDelete = (item) => {
+  onClickDelete = () => {
+    const item = this.props.selection[0];
     item.fileExst
       ? this.onDeleteFile(item.id, item.folderId)
       : this.onDeleteFolder(item.id, item.parentId);
@@ -264,19 +272,11 @@ class SectionBodyContent extends React.Component {
       })
   }
 
-  onClickShare = item => {
+  onClickShare = () => this.setState({showSharingPanel: !this.state.showSharingPanel});
-    let currentItem = item;
-    if (this.state.showSharingPanel) {
-      currentItem = null;
-    }
-    this.setState({
-      currentItem,
-      showSharingPanel: !this.state.showSharingPanel,
-    });
-  }
 
-  onClickLinkForPortal = item => {
+  onClickLinkForPortal = () => {
-    const { settings } = this.props;
+    const { settings, selection } = this.props;
+    const item = selection[0];
     const isFile = !!item.fileExst;
     const { t } = this.props;
 
@@ -291,8 +291,8 @@ class SectionBodyContent extends React.Component {
     toastr.success(t("LinkCopySuccess"));
   }
 
-  onClickDownload = item => {
+  onClickDownload = () => {
-    return window.open(item.viewUrl, "_blank");
+    return window.open(this.props.selection[0].viewUrl, "_blank");
   }
 
   onClickLinkEdit = e => {
@@ -327,6 +327,20 @@ class SectionBodyContent extends React.Component {
       .finally(() => onLoading(false));
   }
 
+  onMoveAction = () => this.setState({ showMoveToPanel: !this.state.showMoveToPanel });
+  onCopyAction = () => this.setState({ showCopyPanel: !this.state.showCopyPanel });
+  onDuplicate = () => {
+    const { selection, selectedFolderId, setProgressBarData, t } = this.props;
+    const folderIds = [];
+    const fileIds = [];
+    selection[0].fileExst ? fileIds.push(selection[0].id) : folderIds.push(selection[0].id);
+    const conflictResolveType = 2; //Skip = 0, Overwrite = 1, Duplicate = 2
+    const deleteAfter = false;
+
+    setProgressBarData({ visible: true, percent: 0, label: t("CopyOperation")});
+    this.copyTo(selectedFolderId, folderIds, fileIds, conflictResolveType, deleteAfter);
+  }
+
   getFilesContextOptions = (item, viewer) => {
     const { t } = this.props;
 
@@ -364,7 +378,7 @@ class SectionBodyContent extends React.Component {
       {
         key: "sharing-settings",
         label: t("SharingSettings"),
-        onClick: this.onClickShare.bind(this, item),
+        onClick: this.onClickShare,
         disabled: isSharable
       },
       isFile
@@ -377,7 +391,7 @@ class SectionBodyContent extends React.Component {
       {
         key: "link-for-portal-users",
         label: t("LinkForPortalUsers"),
-        onClick: this.onClickLinkForPortal.bind(this, item),
+        onClick: this.onClickLinkForPortal,
         disabled: false
       },
       {
@@ -407,7 +421,7 @@ class SectionBodyContent extends React.Component {
         ? {
           key: "view",
           label: t("View"),
-          onClick: this.onMediaFileClick.bind(this, item.id),
+          onClick: this.onMediaFileClick,
           disabled: false
         }
         : null,
@@ -415,20 +429,38 @@ class SectionBodyContent extends React.Component {
         ? {
           key: "download",
           label: t("Download"),
-          onClick: this.onClickDownload.bind(this, item),
+          onClick: this.onClickDownload,
           disabled: false
         }
         : null,
+      {
+        key: "move",
+        label: t("MoveTo"),
+        onClick: this.onMoveAction,
+        disabled: false
+      },
+      {
+        key: "copy",
+        label: t("Copy"),
+        onClick: this.onCopyAction,
+        disabled: false
+      },
+      isFile && {
+        key: "duplicate",
+        label: t("Duplicate"),
+        onClick: this.onDuplicate,
+        disabled: false
+      },
       {
         key: "rename",
         label: t("Rename"),
-        onClick: this.onClickRename.bind(this, item),
+        onClick: this.onClickRename,
         disabled: false
       },
       {
         key: "delete",
         label: t("Delete"),
-        onClick: this.onClickDelete.bind(this, item),
+        onClick: this.onClickDelete,
         disabled: false
       },
     ];
@@ -729,7 +761,8 @@ class SectionBodyContent extends React.Component {
     this.props.setMediaViewerData(item);
   }
   onMediaFileClick = (id) => {
-    const item = { visible: true, id };
+    const itemId = typeof(id) !== "object" ? id : this.props.selection[0].id;
+    const item = { visible: true, id: itemId };
     this.props.setMediaViewerData(item);
   }
 
@@ -996,6 +1029,8 @@ class SectionBodyContent extends React.Component {
     }
   }
 
+  onSelectItem = item => this.props.setSelection([item]);
+
   render() {
     const {
       files,
@@ -1014,10 +1049,12 @@ class SectionBodyContent extends React.Component {
       mediaViewerVisible,
       currentMediaFileId,
       viewAs,
-      t
+      t,
+      loopFilesOperations
     } = this.props;
 
-    const { editingId, showSharingPanel, currentItem } = this.state;
+    const { editingId, showSharingPanel, showMoveToPanel, showCopyPanel } = this.state;
+    const operationsPanelProps = { onLoading, isLoading, loopFilesOperations };
 
     let items = [...folders, ...files];
 
@@ -1059,6 +1096,23 @@ class SectionBodyContent extends React.Component {
       this.renderEmptyFilterContainer()
     ) : (
           <>
+            {showMoveToPanel && (
+              <OperationsPanel
+                {...operationsPanelProps}
+                isCopy={false}
+                visible={showMoveToPanel}
+                onClose={this.onMoveAction}
+              />
+            )}
+
+            {showCopyPanel && (
+              <OperationsPanel
+                {...operationsPanelProps}
+                isCopy={true}
+                visible={showCopyPanel}
+                onClose={this.onCopyAction}
+              />
+            )}
             <CustomTooltip ref={this.tooltipRef}>{tooltipLabel}</CustomTooltip>
 
               {viewAs === "tile" 
@@ -1176,6 +1230,7 @@ class SectionBodyContent extends React.Component {
                           {...checkedProps}
                           {...contextOptionsProps}
                           needForUpdate={this.needForUpdate}
+                          onSelectItem={this.onSelectItem.bind(this, item)}
                         >
                           <FilesRowContent
                             item={item}
@@ -1211,7 +1266,6 @@ class SectionBodyContent extends React.Component {
             {showSharingPanel && (
               <SharingPanel
                 onLoading={onLoading}
-                selectedItems={currentItem}
                 onClose={this.onClickShare}
                 visible={showSharingPanel}
               />
@@ -1283,6 +1337,7 @@ export default connect(
     setDragging,
     setDragItem,
     setMediaViewerData,
-    setProgressBarData
+    setProgressBarData,
+    setSelection
   }
 )(withRouter(withTranslation()(SectionBodyContent)));

products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js

@@ -524,7 +524,6 @@ class SectionHeaderContent extends React.Component {
         {showSharingPanel && (
           <SharingPanel
             onLoading={onLoading}
-            selectedItems={selection}
             onClose={this.onOpenSharingPanel}
             visible={showSharingPanel}
           />

products/ASC.Files/Client/src/components/pages/Home/index.js

@@ -257,7 +257,7 @@ class PureHome extends React.Component {
           let foldersCount = data.current.foldersCount;
           loopTreeFolders(path, newTreeFolders, folders, foldersCount);
           
-              if (!isCopy) {
+              if (!isCopy || destFolderId === currentFolderId) {
                 fetchFiles(currentFolderId, filter, store.dispatch)
                   .then((data) => {
                     if (!isRecycleBinFolder) {

products/ASC.Files/Client/src/components/panels/SharingPanel/SharingPanel.js

@@ -103,19 +103,11 @@ class SharingPanelComponent extends React.Component {
       }
     }
     
-    if (!selectedItems.length) {
+    for (let item of selectedItems) {
-      if (selectedItems.fileExst) {
+      if (item.fileExst) {
-        fileIds.push(selectedItems.id);
+        fileIds.push(item.id);
       } else {
-        folderIds.push(selectedItems.id);
+        folderIds.push(item.id);
-      }
-    } else {
-      for (let item of selectedItems) {
-        if (item.fileExst) {
-          fileIds.push(item.id);
-        } else {
-          folderIds.push(item.id);
-        }
       }
     }
 
@@ -387,7 +379,7 @@ class SharingPanelComponent extends React.Component {
     arrayItems = this.removeDuplicateShareData(arrayItems);
     const baseShareData = JSON.parse(JSON.stringify(arrayItems));
 
-    const accessOptions = !this.props.selectedItems.length ? getAccessOption([this.props.selectedItems]) : getAccessOption(this.props.selectedItems);
+    const accessOptions = getAccessOption(this.props.selectedItems);
 
     this.setState(
       { baseShareData, shareDataItems: arrayItems, accessOptions },
@@ -409,20 +401,12 @@ class SharingPanelComponent extends React.Component {
     const folderId = [];
     const fileId = [];
 
-    if (!selectedItems.length) {
+    for (let item of selectedItems) {
-      if (selectedItems.fileExst) {
+      if (item.access === 1 || item.access === 0) {
-        fileId.push(selectedItems.id);
+        if (item.fileExst) {
-      } else {
+          fileId.push(item.id);
-        folderId.push(selectedItems.id);
+        } else {
-      }
+          folderId.push(item.id);
-    } else {
-      for (let item of selectedItems) {
-        if (item.access === 1 || item.access === 0) {
-          if (item.fileExst) {
-            fileId.push(item.id);
-          } else {
-            folderId.push(item.id);
-          }
         }
       }
     }
@@ -705,7 +689,10 @@ const SharingPanel = (props) => (
 );
 
 const mapStateToProps = (state) => {
-  return { isMyId: state.auth.user.id };
+  return { 
+    isMyId: state.auth.user.id,
+    selectedItems: state.files.selection
+  };
 };
 
 export default connect(mapStateToProps)(withRouter(SharingPanel));

products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js

@@ -29,9 +29,7 @@ const SharingRow = (props) => {
     onShowEmbeddingPanel,
   } = props;
 
-  const linkVisible =
+  const linkVisible = selection && selection.length === 1 && item.shareLink;
-    (selection && selection.length === 1 && item.shareLink) ||
-    (!selection.length && item.shareLink);
 
   const onCopyInternalLink = () => {
     const internalLink = selection.webUrl ? selection.webUrl : selection[0].webUrl;