From 0551bf6b9846abcf791698d4ca6e1c80d8f3cd69 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 31 May 2021 15:44:44 +0300 Subject: [PATCH] Web: Files: moved convert dialog to store --- .../ASC.Files/Client/src/HOCs/withBadges.js | 56 +++++-------- .../src/components/FilesPanels/index.js | 5 ++ .../components/dialogs/ConvertDialog/index.js | 16 +++- .../ASC.Files/Client/src/pages/Home/index.js | 9 --- .../Client/src/store/DialogsStore.js | 5 ++ .../Client/src/store/UploadDataStore.js | 78 +++++++++---------- products/ASC.Files/Client/src/store/index.js | 14 ++-- 7 files changed, 89 insertions(+), 94 deletions(-) diff --git a/products/ASC.Files/Client/src/HOCs/withBadges.js b/products/ASC.Files/Client/src/HOCs/withBadges.js index 312d0c9901..9fb0b2a692 100644 --- a/products/ASC.Files/Client/src/HOCs/withBadges.js +++ b/products/ASC.Files/Client/src/HOCs/withBadges.js @@ -17,10 +17,6 @@ import config from "../../package.json"; export default function withBadges(WrappedComponent) { class WithBadges extends React.Component { - constructor(props) { - super(props); - this.state = { showConvertDialog: false }; - } onClickLock = () => { const { item, lockFileAction, isAdmin } = this.props; const { locked, id, access } = item; @@ -74,26 +70,23 @@ export default function withBadges(WrappedComponent) { } }; - setConvertDialogVisible = () => - this.setState({ showConvertDialog: !this.state.showConvertDialog }); - - onConvert = () => { - const { item, t, setSecondaryProgressBarData } = this.props; - setSecondaryProgressBarData({ - icon: "file", - visible: true, - percent: 0, - label: t("Convert"), - alert: false, - }); - this.setState({ showConvertDialog: false }, () => - convertFile(item.id).then((convertRes) => { - if (convertRes && convertRes[0] && convertRes[0].progress !== 100) { - this.getConvertProgress(item.id); - } - }) - ); - }; + // onConvert = () => { + // const { item, t, setSecondaryProgressBarData } = this.props; + // setSecondaryProgressBarData({ + // icon: "file", + // visible: true, + // percent: 0, + // label: t("Convert"), + // alert: false, + // }); + // this.setState({ showConvertDialog: false }, () => + // convertFile(item.id).then((convertRes) => { + // if (convertRes && convertRes[0] && convertRes[0].progress !== 100) { + // this.getConvertProgress(item.id); + // } + // }) + // ); + // }; getConvertProgress = (fileId) => { const { @@ -148,7 +141,6 @@ export default function withBadges(WrappedComponent) { }); }; render() { - const { showConvertDialog } = this.state; const { t, item, @@ -157,6 +149,7 @@ export default function withBadges(WrappedComponent) { canConvert, onFilesClick, // from withFileAction HOC isAdmin, + setConvertDialogVisible, } = this.props; const { fileStatus, access } = item; @@ -182,22 +175,13 @@ export default function withBadges(WrappedComponent) { onClickFavorite={this.onClickFavorite} onShowVersionHistory={this.onShowVersionHistory} onBadgeClick={this.onBadgeClick} - setConvertDialogVisible={this.setConvertDialogVisible} + setConvertDialogVisible={setConvertDialogVisible} onFilesClick={onFilesClick} /> ); return ( - <> - {showConvertDialog && ( - - )} - - + ); } } diff --git a/products/ASC.Files/Client/src/components/FilesPanels/index.js b/products/ASC.Files/Client/src/components/FilesPanels/index.js index 2db0a47bef..84dde218d1 100644 --- a/products/ASC.Files/Client/src/components/FilesPanels/index.js +++ b/products/ASC.Files/Client/src/components/FilesPanels/index.js @@ -17,6 +17,7 @@ import { DownloadDialog, ThirdPartyDialog, ConflictResolveDialog, + ConvertDialog, } from "../dialogs"; const Panels = (props) => { @@ -36,6 +37,7 @@ const Panels = (props) => { thirdPartyDialogVisible, newFilesPanelVisible, conflictResolveDialogVisible, + convertDialogVisible, } = props; return [ @@ -68,6 +70,7 @@ const Panels = (props) => { conflictResolveDialogVisible && ( ), + convertDialogVisible && , ]; }; @@ -87,6 +90,7 @@ export default inject( thirdPartyDialogVisible, newFilesPanelVisible, conflictResolveDialogVisible, + convertDialogVisible, connectItem, //TODO: } = dialogsStore; @@ -110,6 +114,7 @@ export default inject( thirdPartyDialogVisible, newFilesPanelVisible, conflictResolveDialogVisible, + convertDialogVisible, }; } )(observer(Panels)); diff --git a/products/ASC.Files/Client/src/components/dialogs/ConvertDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/ConvertDialog/index.js index 8837b375c1..87c349649f 100644 --- a/products/ASC.Files/Client/src/components/dialogs/ConvertDialog/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/ConvertDialog/index.js @@ -24,7 +24,10 @@ class ConvertDialogComponent extends React.Component { this.setState({ hideMessage: !this.state.hideMessage }); onConvert = () => this.props.convertUploadedFiles(this.props.t); - onClose = () => this.props.setDialogVisible(this.props.t); + onClose = () => { + setConvertDialogVisible(false); + //this.props.setDialogVisible(this.props.t) + }; render() { const { t, visible } = this.props; @@ -83,13 +86,18 @@ class ConvertDialogComponent extends React.Component { const ConvertDialog = withTranslation("ConvertDialog")(ConvertDialogComponent); -export default inject(({ uploadDataStore, treeFoldersStore }) => { +export default inject(({ uploadDataStore, treeFoldersStore, dialogsStore }) => { const { setTreeFolders } = treeFoldersStore; - const { setDialogVisible, convertUploadedFiles } = uploadDataStore; + const { convertUploadedFiles } = uploadDataStore; + const { + convertDialogVisible: visible, + setConvertDialogVisible, + } = dialogsStore; return { setTreeFolders, - setDialogVisible, convertUploadedFiles, + visible, + setConvertDialogVisible, }; })(withRouter(observer(ConvertDialog))); diff --git a/products/ASC.Files/Client/src/pages/Home/index.js b/products/ASC.Files/Client/src/pages/Home/index.js index 82d83b0273..fda240ab1a 100644 --- a/products/ASC.Files/Client/src/pages/Home/index.js +++ b/products/ASC.Files/Client/src/pages/Home/index.js @@ -217,7 +217,6 @@ class PureHome extends React.Component { //console.log("Home render"); const { viewAs, - convertDialogVisible, fileActionId, firstLoad, isHeaderVisible, @@ -239,10 +238,6 @@ class PureHome extends React.Component { return ( <> - {convertDialogVisible && ( - - )} - { @@ -353,8 +347,6 @@ export default inject( isSecondaryProgressFinished: isProgressFinished, } = secondaryProgressDataStore; - const { convertDialogVisible } = dialogsStore; - const { setUploadPanelVisible, startUpload, uploaded } = uploadDataStore; const selectionLength = isProgressFinished ? selection.length : null; @@ -386,7 +378,6 @@ export default inject( secondaryProgressDataStoreIcon, secondaryProgressDataStoreAlert, - convertDialogVisible, selectionLength, isProgressFinished, selectionTitle, diff --git a/products/ASC.Files/Client/src/store/DialogsStore.js b/products/ASC.Files/Client/src/store/DialogsStore.js index 749164f30f..e44232bcf2 100644 --- a/products/ASC.Files/Client/src/store/DialogsStore.js +++ b/products/ASC.Files/Client/src/store/DialogsStore.js @@ -19,6 +19,7 @@ class DialogsStore { thirdPartyDialogVisible = false; newFilesPanelVisible = false; conflictResolveDialogVisible = false; + convertDialogVisible = false; removeItem = null; connectItem = null; @@ -160,6 +161,10 @@ class DialogsStore { setUnsubscribe = (unsubscribe) => { this.unsubscribe = unsubscribe; }; + + setConvertDialogVisible = (visible) => { + this.convertDialogVisible = visible; + }; } export default DialogsStore; diff --git a/products/ASC.Files/Client/src/store/UploadDataStore.js b/products/ASC.Files/Client/src/store/UploadDataStore.js index 3e599baff3..926390255c 100644 --- a/products/ASC.Files/Client/src/store/UploadDataStore.js +++ b/products/ASC.Files/Client/src/store/UploadDataStore.js @@ -18,6 +18,7 @@ class UploadDataStore { filesStore; secondaryProgressDataStore; primaryProgressDataStore; + dialogsStore; files = []; filesSize = 0; @@ -30,7 +31,6 @@ class UploadDataStore { uploaded = true; uploadPanelVisible = false; - convertDialogVisible = false; selectedUploadFile = []; @@ -40,7 +40,8 @@ class UploadDataStore { selectedFolderStore, filesStore, secondaryProgressDataStore, - primaryProgressDataStore + primaryProgressDataStore, + dialogsStore ) { makeAutoObservable(this); this.formatsStore = formatsStore; @@ -49,6 +50,7 @@ class UploadDataStore { this.filesStore = filesStore; this.secondaryProgressDataStore = secondaryProgressDataStore; this.primaryProgressDataStore = primaryProgressDataStore; + this.dialogsStore = dialogsStore; } selectUploadedFile = (file) => { @@ -128,47 +130,43 @@ class UploadDataStore { this.setUploadData(newUploadData); }; - setConvertDialogVisible = (convertDialogVisible) => { - this.convertDialogVisible = convertDialogVisible; - }; - getFilesToConvert = (files) => { const filesToConvert = files.filter((f) => f.action === "convert"); return filesToConvert; }; - setDialogVisible = (t) => { - this.setConvertDialogVisible(false); - const label = t("UploadingLabel", { - file: this.uploadedFiles, - totalFiles: this.files.length, - }); + // setDialogVisible = (t) => { + // this.dialogsStore.setConvertDialogVisible(false); + // const label = t("UploadingLabel", { + // file: this.uploadedFiles, + // totalFiles: this.files.length, + // }); - if (this.uploadStatus === null) { - this.primaryProgressDataStore.setPrimaryProgressBarData({ - icon: "upload", - label, - percent: 100, - visible: true, - alert: false, - }); - this.uploadData.uploadedFiles = 0; - this.uploadData.percent = 0; - //setUploadData(uploadData); - } else if (!this.files.length) { - this.primaryProgressDataStore.clearPrimaryProgressData(); - } else { - this.primaryProgressDataStore.setPrimaryProgressBarData({ - icon: "upload", - label, - percent: this.percent, - visible: true, - alert: false, - }); - this.uploadData.uploadStatus = "cancel"; - //setUploadData(uploadData); - } - }; + // if (this.uploadStatus === null) { + // this.primaryProgressDataStore.setPrimaryProgressBarData({ + // icon: "upload", + // label, + // percent: 100, + // visible: true, + // alert: false, + // }); + // this.uploadData.uploadedFiles = 0; + // this.uploadData.percent = 0; + // //setUploadData(uploadData); + // } else if (!this.files.length) { + // this.primaryProgressDataStore.clearPrimaryProgressData(); + // } else { + // this.primaryProgressDataStore.setPrimaryProgressBarData({ + // icon: "upload", + // label, + // percent: this.percent, + // visible: true, + // alert: false, + // }); + // this.uploadData.uploadStatus = "cancel"; + // //setUploadData(uploadData); + // } + // }; getNewPercent = (uploadedSize, indexOfFile) => { const newTotalSize = sumBy(this.files, (f) => f.file.size); @@ -204,7 +202,7 @@ class UploadDataStore { startConvertFiles = async (files, t) => { const total = files.length; - this.setConvertDialogVisible(false); + this.dialogsStore.setConvertDialogVisible(false); this.primaryProgressDataStore.setPrimaryProgressBarData({ icon: "file", @@ -286,6 +284,7 @@ class UploadDataStore { }; startUpload = (uploadFiles, folderId, t) => { + debugger; const { canConvert } = this.formatsStore.docserviceStore; let newFiles = this.files; @@ -297,6 +296,7 @@ class UploadDataStore { const parts = file.name.split("."); const ext = parts.length > 1 ? "." + parts.pop() : ""; const needConvert = canConvert(ext); + console.log("needConvert", needConvert); newFiles.push({ file: file, @@ -455,7 +455,7 @@ class UploadDataStore { /*const filesToConvert = this.getFilesToConvert(files); if (filesToConvert.length > 0) { // Ask to convert options - return dispatch(setConvertDialogVisible(true)); + return dispatch(this.dialogsStore.setConvertDialogVisible(true);); }*/ // All files has been uploaded and nothing to convert diff --git a/products/ASC.Files/Client/src/store/index.js b/products/ASC.Files/Client/src/store/index.js index 3f7015e364..034973db56 100644 --- a/products/ASC.Files/Client/src/store/index.js +++ b/products/ASC.Files/Client/src/store/index.js @@ -38,18 +38,20 @@ const mediaViewerDataStore = new MediaViewerDataStore(filesStore); const settingsStore = new SettingsStore(thirdPartyStore, treeFoldersStore); const secondaryProgressDataStore = new SecondaryProgressDataStore(); const primaryProgressDataStore = new PrimaryProgressDataStore(); + +const dialogsStore = new DialogsStore( + treeFoldersStore, + filesStore, + selectedFolderStore +); const uploadDataStore = new UploadDataStore( formatsStore, treeFoldersStore, selectedFolderStore, filesStore, secondaryProgressDataStore, - primaryProgressDataStore -); -const dialogsStore = new DialogsStore( - treeFoldersStore, - filesStore, - selectedFolderStore + primaryProgressDataStore, + dialogsStore ); const filesActionsStore = new FilesActionsStore( store.auth,