Web: Files: moved convert dialog to store

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 && (
-            <ConvertDialog
-              visible={showConvertDialog}
-              onClose={this.setConvertDialogVisible}
-              onConvert={this.onConvert}
-            />
-          )}
-          <WrappedComponent badgesComponent={badgesComponent} {...this.props} />
-        </>
+        <WrappedComponent badgesComponent={badgesComponent} {...this.props} />
       );
     }
   }

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 && (
       <ConflictResolveDialog key="conflict-resolve-dialog" />
     ),
+    convertDialogVisible && <ConvertDialog key="convert-dialog" />,
   ];
 };
 
@@ -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));

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

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 && (
-          <ConvertDialog visible={convertDialogVisible} />
-        )}
-
         <MediaViewer />
         <DragTooltip />
         <PageLayout
@@ -311,7 +306,6 @@ export default inject(
     auth,
     filesStore,
     uploadDataStore,
-    dialogsStore,
     selectedFolderStore,
     treeFoldersStore,
   }) => {
@@ -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,

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;

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

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,