From 72bc996a1a045b9c2e42fa52dd5a618128bab315 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 31 Jul 2020 11:14:37 +0300 Subject: [PATCH] Web: Files: added file operations to contextMenu, refactoring --- .../pages/Home/Section/Body/index.js | 117 +++++++++++++----- .../pages/Home/Section/Header/index.js | 1 - .../Client/src/components/pages/Home/index.js | 2 +- .../panels/SharingPanel/SharingPanel.js | 43 +++---- .../panels/SharingPanel/SharingRow.js | 4 +- 5 files changed, 103 insertions(+), 64 deletions(-) diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js index 261ba9dcb6..520bb67c83 100644 --- a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js +++ b/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) => { - const { id, fileExst } = item; + onClickRename = () => { + 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 => { - let currentItem = item; - if (this.state.showSharingPanel) { - currentItem = null; - } - this.setState({ - currentItem, - showSharingPanel: !this.state.showSharingPanel, - }); - } + onClickShare = () => this.setState({showSharingPanel: !this.state.showSharingPanel}); - onClickLinkForPortal = item => { - const { settings } = this.props; + onClickLinkForPortal = () => { + 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 => { - return window.open(item.viewUrl, "_blank"); + onClickDownload = () => { + 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 && ( + + )} + + {showCopyPanel && ( + + )} {tooltipLabel} {viewAs === "tile" @@ -1176,6 +1230,7 @@ class SectionBodyContent extends React.Component { {...checkedProps} {...contextOptionsProps} needForUpdate={this.needForUpdate} + onSelectItem={this.onSelectItem.bind(this, item)} > @@ -1283,6 +1337,7 @@ export default connect( setDragging, setDragItem, setMediaViewerData, - setProgressBarData + setProgressBarData, + setSelection } )(withRouter(withTranslation()(SectionBodyContent))); diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js index 084bb667e5..692a48ab12 100644 --- a/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js +++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js @@ -524,7 +524,6 @@ class SectionHeaderContent extends React.Component { {showSharingPanel && ( diff --git a/products/ASC.Files/Client/src/components/pages/Home/index.js b/products/ASC.Files/Client/src/components/pages/Home/index.js index 75effb2ff1..6721ceb3e0 100644 --- a/products/ASC.Files/Client/src/components/pages/Home/index.js +++ b/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) { diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingPanel.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingPanel.js index 80448d3635..ec4642d3b8 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingPanel.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingPanel.js @@ -103,19 +103,11 @@ class SharingPanelComponent extends React.Component { } } - if (!selectedItems.length) { - if (selectedItems.fileExst) { - fileIds.push(selectedItems.id); + for (let item of selectedItems) { + if (item.fileExst) { + fileIds.push(item.id); } else { - folderIds.push(selectedItems.id); - } - } else { - for (let item of selectedItems) { - if (item.fileExst) { - fileIds.push(item.id); - } else { - folderIds.push(item.id); - } + 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) { - if (selectedItems.fileExst) { - fileId.push(selectedItems.id); - } else { - folderId.push(selectedItems.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); - } + 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)); diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js index 1f05f5b4bf..bb498a5b04 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js @@ -29,9 +29,7 @@ const SharingRow = (props) => { onShowEmbeddingPanel, } = props; - const linkVisible = - (selection && selection.length === 1 && item.shareLink) || - (!selection.length && item.shareLink); + const linkVisible = selection && selection.length === 1 && item.shareLink; const onCopyInternalLink = () => { const internalLink = selection.webUrl ? selection.webUrl : selection[0].webUrl;