import and export sdoc (#6508)

* import and export sdoc

* rebase and optimize

* update

* optimize code

* update iconfont

* update seafile-js version

* update

---------

Co-authored-by: 杨顺强 <978987373@qq.com>

frontend/src/components/cur-dir-path/dir-path.js

@@ -35,6 +35,7 @@ const propTypes = {
   filePermission: PropTypes.string,
   onFileTagChanged: PropTypes.func.isRequired,
   onItemMove: PropTypes.func.isRequired,
+  loadDirentList: PropTypes.func.isRequired,
 };
 
 class DirPath extends React.Component {
@@ -178,6 +179,7 @@ class DirPath extends React.Component {
                 onAddFolder={this.props.onAddFolder}
                 onUploadFile={this.props.onUploadFile}
                 onUploadFolder={this.props.onUploadFolder}
+                loadDirentList={this.props.loadDirentList}
               >
                 <span className="path-file-name">{item}</span>
               </DirOperationToolBar>
@@ -264,6 +266,7 @@ class DirPath extends React.Component {
             onAddFolder={this.props.onAddFolder}
             onUploadFile={this.props.onUploadFile}
             onUploadFolder={this.props.onUploadFolder}
+            loadDirentList={this.props.loadDirentList}
           >
             <span className="path-repo-name">{repoName}</span>
           </DirOperationToolBar> :

frontend/src/components/cur-dir-path/index.js

@@ -32,6 +32,7 @@ const propTypes = {
   repoTags: PropTypes.array.isRequired,
   onFileTagChanged: PropTypes.func.isRequired,
   onItemMove: PropTypes.func.isRequired,
+  loadDirentList: PropTypes.func.isRequired,
 };
 
 class CurDirPath extends React.Component {
@@ -77,6 +78,7 @@ class CurDirPath extends React.Component {
           onFileTagChanged={this.props.onFileTagChanged}
           repoTags={this.props.repoTags}
           onItemMove={this.props.onItemMove}
+          loadDirentList={this.props.loadDirentList}
         />
         {!this.props.isDesktop && this.props.direntList.length > 0 &&
         <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}

frontend/src/components/dialog/tip-dailog.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Loading } from 'dtable-ui-component';
+import PropTypes from 'prop-types';
+import { Modal, ModalBody, ModalHeader } from 'reactstrap';
+
+function TipDialog({ modalTitle, modalTip }) {
+  return (
+    <Modal isOpen={true}>
+      <ModalHeader>{modalTitle}</ModalHeader>
+      <ModalBody className='d-flex flex-column justify-content-center align-terms-center' style={{ height: '180px' }}>
+        <Loading />
+        <div className='d-flex justify-content-center mt-6'>{modalTip}</div>
+      </ModalBody>
+    </Modal>
+  );
+}
+
+TipDialog.propTypes = {
+  modalTitle: PropTypes.string.isRequired,
+  modalTip: PropTypes.string.isRequired,
+};
+
+export default TipDialog;

frontend/src/components/dirent-grid-view/dirent-grid-view.js

@@ -314,10 +314,24 @@ class DirentGridView extends React.Component {
 
   exportDocx = () => {
     const serviceUrl = window.app.config.serviceURL;
+    let dirent = this.state.activeDirent ? this.state.activeDirent : '';
+    if (!dirent) {
+      return;
+    }
     let repoID = this.props.repoID;
-    let filePath = this.getDirentPath(this.props.dirent);
-    let exportToDocxUrl = serviceUrl + '/repo/sdoc_export_to_docx/' + repoID + '/?file_path=' + filePath;
-    window.location.href = exportToDocxUrl;
+    let filePath = this.getDirentPath(dirent);
+    window.location.href = serviceUrl + '/repo/sdoc_export_to_docx/' + repoID + '/?file_path=' + filePath;
+  };
+
+  exportSdoc = () => {
+    const serviceUrl = window.app.config.serviceURL;
+    let dirent = this.state.activeDirent ? this.state.activeDirent : '';
+    if (!dirent) {
+      return;
+    }
+    let repoID = this.props.repoID;
+    let filePath = this.getDirentPath(dirent);
+    window.location.href = serviceUrl + '/lib/' + repoID + '/file/' + filePath + '?dl=1';
   };
 
   onMenuItemClick = (operation, currentObject, event) => {
@@ -356,6 +370,9 @@ class DirentGridView extends React.Component {
       case 'Export docx':
         this.exportDocx();
         break;
+      case 'Export sdoc':
+        this.exportSdoc();
+        break;
       case 'Convert to sdoc':
         this.onItemConvert(currentObject, event, 'sdoc');
         break;

frontend/src/components/dirent-list-view/dirent-list-item.js

@@ -237,6 +237,14 @@ class DirentListItem extends React.Component {
     window.location.href = exportToDocxUrl;
   };
 
+  exportSdoc = () => {
+    const serviceUrl = window.app.config.serviceURL;
+    let repoID = this.props.repoID;
+    let filePath = this.getDirentPath(this.props.dirent);
+    let exportToSdocUrl = serviceUrl + '/lib/' + repoID + '/file/' + filePath + '?dl=1';
+    window.location.href = exportToSdocUrl;
+  };
+
   closeSharedDialog = () => {
     this.setState({ isShareDialogShow: !this.state.isShareDialogShow });
   };
@@ -293,6 +301,9 @@ class DirentListItem extends React.Component {
       case 'Export docx':
         this.exportDocx();
         break;
+      case 'Export sdoc':
+        this.exportSdoc();
+        break;
       case 'Convert to sdoc':
         this.onItemConvert(event, 'sdoc');
         break;

frontend/src/components/toolbar/dir-operation-toolbar.js

@@ -7,6 +7,9 @@ import ModalPortal from '../modal-portal';
 import CreateFolder from '../../components/dialog/create-folder-dialog';
 import CreateFile from '../../components/dialog/create-file-dialog';
 import ShareDialog from '../../components/dialog/share-dialog';
+import toaster from '../toast';
+import { seafileAPI } from '../../utils/seafile-api';
+import TipDialog from '../dialog/tip-dailog';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -22,7 +25,8 @@ const propTypes = {
   onUploadFile: PropTypes.func.isRequired,
   onUploadFolder: PropTypes.func.isRequired,
   direntList: PropTypes.array.isRequired,
-  children: PropTypes.object
+  children: PropTypes.object,
+  loadDirentList: PropTypes.func
 };
 
 class DirOperationToolbar extends React.Component {
@@ -37,8 +41,10 @@ class DirOperationToolbar extends React.Component {
       operationMenuStyle: '',
       isDesktopMenuOpen: false,
       isSubMenuShown: false,
-      isMobileOpMenuOpen: false
+      isMobileOpMenuOpen: false,
+      isImportingSdoc: false,
     };
+    this.fileInputRef = React.createRef();
   }
 
   toggleDesktopOpMenu = () => {
@@ -156,6 +162,38 @@ class DirOperationToolbar extends React.Component {
     }
   };
 
+  onUploadSdoc = (e) => {
+    this.fileInputRef.current.click();
+  };
+
+  uploadSdoc = (e) => {
+    // no file selected
+    if (!this.fileInputRef.current.files.length) {
+      return;
+    }
+    // check file extension
+    let fileName = this.fileInputRef.current.files[0].name;
+    if (fileName.substr(fileName.lastIndexOf('.') + 1) != 'sdoczip') {
+      toaster.warning(gettext('Please choose a .sdoczip file.'), { hasCloseButton: true, duration: null });
+      return;
+    }
+    this.setState({ isImportingSdoc: true });
+    const file = this.fileInputRef.current.files[0];
+    let { repoID, path } = this.props;
+    seafileAPI.importSdoc(file, repoID, path).then((res) => {
+      this.props.loadDirentList(path);
+
+    }).catch((error) => {
+      let errMsg = Utils.getErrorMsg(error);
+      toaster.danger(errMsg);
+    }).finally(() => {
+      this.fileInputRef.current.value = '';
+      setTimeout(() => {
+        this.setState({ isImportingSdoc: false });
+      }, 500);
+    });
+  };
+
   render() {
     let { path, repoName, userPerm } = this.props;
 
@@ -185,6 +223,10 @@ class DirOperationToolbar extends React.Component {
             'icon': 'upload-files',
             'text': gettext('Upload Folder'),
             'onClick': this.onUploadFolder
+          }, {
+            'icon': 'import-sdoc',
+            'text': gettext('Import sdoc'),
+            'onClick': this.onUploadSdoc
           });
         } else {
           opList.push({
@@ -355,6 +397,12 @@ class DirOperationToolbar extends React.Component {
             />
           </ModalPortal>
         }
+        {this.state.isImportingSdoc && (
+          <TipDialog modalTitle={gettext('Import sdoc')} modalTip={gettext('Importing sdoc, please wait...')}/>
+        )}
+        <div>
+          <input className="d-none" type="file" onChange={this.uploadSdoc} ref={this.fileInputRef} />
+        </div>
       </Fragment>
     );
   }