add-external

Author: yinjianfei-user

frontend/src/pages/sdoc/sdoc-editor/external-operations.js

@@ -6,13 +6,16 @@ import { Utils } from '../../../utils/utils';
 import toaster from '../../../components/toast';
 import InternalLinkDialog from '../../../components/dialog/internal-link-dialog';
 import ShareDialog from '../../../components/dialog/share-dialog';
+import CreateFile from '../../../components/dialog/create-file-dialog';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
   docPath: PropTypes.string.isRequired,
   docName: PropTypes.string.isRequired,
   docPerm: PropTypes.string.isRequired,
   isStarred: PropTypes.bool.isRequired,
+  direntList: PropTypes.array.isRequired,
+  dirPath: PropTypes.string.isRequired,
   toggleStar: PropTypes.func.isRequired,
   unmarkDraft: PropTypes.func.isRequired
 };
@@ -25,6 +28,7 @@ class ExternalOperations extends React.Component {
       isShowInternalLinkDialog: false,
       isShowShareDialog: false,
       internalLink: '',
+      isShowCreateFileDialog: false,
     };
   }
 
@@ -36,13 +40,15 @@ class ExternalOperations extends React.Component {
     this.unsubscribeShare = eventBus.subscribe(EXTERNAL_EVENT.SHARE_SDOC, this.onShareToggle);
     this.unsubscribeShare = eventBus.subscribe(EXTERNAL_EVENT.FREEZE_DOCUMENT, this.onFreezeDocument);
     this.unsubscribeShare = eventBus.subscribe(EXTERNAL_EVENT.UNFREEZE, this.unFreeze);
+    this.unsubscribeCreateSdocFile = eventBus.subscribe(EXTERNAL_EVENT.CREATE_SDOC_FILE, this.onCreateSdocFile);
   }
 
   componentWillUnmount() {
     this.unsubscribeInternalLinkEvent();
     this.unsubscribeStar();
     this.unsubscribeUnmark();
     this.unsubscribeShare();
+    this.unsubscribeCreateSdocFile();
   }
 
   onInternalLinkToggle = (options) => {
@@ -107,9 +113,31 @@ class ExternalOperations extends React.Component {
     });
   };
 
+  onCreateSdocFile = () => {
+    this.setState({
+      isShowCreateFileDialog: !this.state.isShowCreateFileDialog
+    });
+  };
+
+  checkDuplicatedName = (newName) => {
+    let direntList = this.props.direntList;
+    let isDuplicated = direntList.some(object => {
+      return object.name === newName;
+    });
+    return isDuplicated;
+  };
+
+  onAddFile = (filePath, isMarkdownDraft, isSdocDraft) => {
+    let repoID = this.props.repoID;
+    seafileAPI.createFile(repoID, filePath, isMarkdownDraft).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  };
+
   render() {
-    const { repoID, docPath, docName, docPerm } = this.props;
-    const { isShowInternalLinkDialog, isShowShareDialog, internalLink } = this.state;
+    const { repoID, docPath, docName, docPerm, dirPath } = this.props;
+    const { isShowInternalLinkDialog, isShowShareDialog, internalLink, isShowCreateFileDialog } = this.state;
     return (
       <>
         {isShowInternalLinkDialog && (
@@ -130,6 +158,15 @@ class ExternalOperations extends React.Component {
             toggleDialog={this.onShareToggle}
           />
         )}
+        {isShowCreateFileDialog && (
+          <CreateFile
+            parentPath={dirPath}
+            fileType='.sdoc'
+            onAddFile={this.onAddFile}
+            checkDuplicatedName={this.checkDuplicatedName}
+            toggleDialog={this.onCreateSdocFile}
+          />
+        )}
       </>
     );
   }

frontend/src/pages/sdoc/sdoc-editor/index.js

@@ -1,6 +1,8 @@
 import React, { Fragment } from 'react';
 import { SimpleEditor } from '@seafile/sdoc-editor';
 import ExternalOperations from './external-operations';
+import { seafileAPI } from '../../../utils/seafile-api';
+import Dirent from '../../../models/dirent';
 import { Utils } from '../../../utils/utils';
 
 export default class SdocEditor extends React.Component {
@@ -10,11 +12,13 @@ export default class SdocEditor extends React.Component {
     const { isStarred, isSdocDraft } = window.app.pageOptions;
     this.state = {
       isStarred: isStarred,
-      isDraft: isSdocDraft
+      isDraft: isSdocDraft,
+      direntList: []
     };
   }
 
   componentDidMount() {
+    this.getDirentList();
     const { docName } = window.seafile;
     const fileIcon = Utils.getFileIconUrl(docName, 192);
     document.getElementById('favicon').href = fileIcon;
@@ -28,9 +32,36 @@ export default class SdocEditor extends React.Component {
     this.setState({isDraft: false});
   };
 
+  getDirPath = () => {
+    const { docPath } = window.seafile;
+    const index = docPath.lastIndexOf('/');
+    if (index) {
+      return docPath.slice(0, index);
+    }
+    return '/';
+  };
+
+  getDirentList = () => {
+    const { repoID } = window.seafile;
+    const path = this.getDirPath();
+    seafileAPI.listDir(repoID, path, {'with_thumbnail': true}).then(res => {
+      let direntList = [];
+      res.data.dirent_list.forEach(item => {
+        let dirent = new Dirent(item);
+        direntList.push(dirent);
+      });
+      this.setState({
+        direntList: direntList
+      });
+    }).catch((err) => {
+      Utils.getErrorMsg(err, true);
+    });
+  };
+
   render() {
     const { repoID, docPath, docName, docPerm } = window.seafile;
-    const { isStarred, isDraft } = this.state;
+    const { isStarred, isDraft, direntList } = this.state;
+    const dirPath = this.getDirPath();
     return (
       <Fragment>
         <SimpleEditor isStarred={isStarred} isDraft={isDraft} />
@@ -40,6 +71,8 @@ export default class SdocEditor extends React.Component {
           docName={docName}
           docPerm={docPerm}
           isStarred={isStarred}
+          direntList={direntList}
+          dirPath={dirPath}
           toggleStar={this.toggleStar}
           unmarkDraft={this.unmarkDraft}
         />