From 0af388d9744bca3664570f180179360cb1b3d272 Mon Sep 17 00:00:00 2001
From: Michael An <37589122+Michael18811380328@users.noreply.github.com>
Date: Wed, 16 Jan 2019 11:49:00 +0800
Subject: [PATCH] [add]related-files and file-tags (#2829)

---
 frontend/package.json                         |   1 -
 .../components/dialog/edit-filetag-dialog.js  |   1 +
 frontend/src/index.js                         |   1 -
 frontend/src/markdown-editor.js               | 188 ++++++++++++++++--
 seahub/templates/view_file_markdown.html      |   8 +-
 5 files changed, 176 insertions(+), 23 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 48334f7649..44bc4029b3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -32,7 +32,6 @@
     "react-select": "^2.1.1",
     "reactstrap": "^6.4.0",
     "seafile-js": "^0.2.57",
-    "seafile-ui": "^0.1.10",
     "socket.io-client": "^2.2.0",
     "sw-precache-webpack-plugin": "0.11.4",
     "unified": "^7.0.0",
diff --git a/frontend/src/components/dialog/edit-filetag-dialog.js b/frontend/src/components/dialog/edit-filetag-dialog.js
index c20957c4ff..75249c2b2d 100644
--- a/frontend/src/components/dialog/edit-filetag-dialog.js
+++ b/frontend/src/components/dialog/edit-filetag-dialog.js
@@ -4,6 +4,7 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import RepoTag from '../../models/repo-tag';
+require('../../css/repo-tag.css');
 
 const TagItemPropTypes = {
   repoTag: PropTypes.object.isRequired,
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 48dc4e4923..ae36729082 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -7,7 +7,6 @@ import i18n from './i18n';
 import './assets/css/fa-solid.css';
 import './assets/css/fa-regular.css';
 import './assets/css/fontawesome.css';
-import 'seafile-ui';
 import './index.css';
 
 let lang = window.app.pageOptions.lang;
diff --git a/frontend/src/markdown-editor.js b/frontend/src/markdown-editor.js
index fc35817d8d..d3e6311c0b 100644
--- a/frontend/src/markdown-editor.js
+++ b/frontend/src/markdown-editor.js
@@ -4,6 +4,12 @@ import 'whatwg-fetch';
 import { SeafileAPI } from 'seafile-js';
 import { Utils } from './utils/utils';
 import cookie from 'react-cookies';
+import ModalPortal from './components/modal-portal';
+import { Modal } from 'reactstrap';
+import EditFileTagDialog from './components/dialog/edit-filetag-dialog';
+import ListRelatedFileDialog from './components/dialog/list-related-file-dialog';
+import AddRelatedFileDialog from './components/dialog/add-related-file-dialog';
+import Dirent from './models/dirent';
 let repoID = window.app.pageOptions.repoID;
 let repoName = window.app.pageOptions.repoName;
 let filePath = window.app.pageOptions.filePath;
@@ -262,6 +268,14 @@ class EditorUtilities {
   fileMetaData() {
     return seafileAPI.fileMetaData(repoID, filePath);
   }
+
+  listFileTags = () => {
+    return seafileAPI.listFileTags(repoID, filePath);
+  }
+
+  listRepoTags = () => {
+    return seafileAPI.listRepoTags(repoID);
+  }
 }
 
 const editorUtilities = new EditorUtilities();
@@ -286,9 +300,58 @@ class MarkdownEditor extends React.Component {
       },
       collabServer: seafileCollabServer ? seafileCollabServer : null,
       relatedFiles: [],
+      fileTagList: [],
+      dirent: {},
+      showRelatedFileDialog: false,
+      showEditFileTagDialog: false,
+      showAddRelatedFileDialog: false,
+      showMarkdownEditorDialog: false,
     };
   }
 
+  toggleCancel = () => {
+    this.setState({
+      showRelatedFileDialog: false,
+      showEditFileTagDialog: false,
+      showAddRelatedFileDialog: false,
+      showMarkdownEditorDialog: false,
+    });
+  }
+
+  closeAddRelatedFileDialog = () => {
+    this.setState({
+      showAddRelatedFileDialog: false,
+      showRelatedFileDialog: true,
+    });
+  }
+
+  addRelatedFileToggle = () => {
+    this.setState({
+      showRelatedFileDialog: false,
+      showAddRelatedFileDialog: true,
+    });
+  }
+
+  openDialogs = (option) => {
+    switch(option)
+    {
+      case 'related_files':
+        this.setState({
+          showRelatedFileDialog: true,
+          showMarkdownEditorDialog: true,
+        });
+        break;
+      case 'tags':
+        this.setState({
+          showEditFileTagDialog: true,
+          showMarkdownEditorDialog: true,
+        });
+        break;
+      default:
+        return;
+    }
+  }
+
   componentDidMount() {
 
     seafileAPI.getFileInfo(repoID, filePath).then((res) => {
@@ -317,14 +380,60 @@ class MarkdownEditor extends React.Component {
         });
       });
     });
+    this.listRelatedFiles();
+    this.listFileTags();
+    this.listDirent();
+  }
 
+  listRelatedFiles = () => {
     seafileAPI.listRelatedFiles(repoID, filePath).then(res => {
       this.setState({
         relatedFiles: res.data.related_files
-      })
+      });
     });
   }
 
+  listFileTags = () => {
+    seafileAPI.listFileTags(repoID, filePath).then(res => {
+      let fileTagList = res.data.file_tags;
+      for (let i = 0, length = fileTagList.length; i < length; i++) {
+        fileTagList[i].id = fileTagList[i].file_tag_id;
+      }
+      this.setState({
+        fileTagList: fileTagList
+      });
+    });
+  }
+
+  listDirent = () => {
+    seafileAPI.listDir(repoID, dirPath).then(res => {
+      let direntList = [];
+      res.data.forEach(item => {
+        if (this.props.isShowFile === true) {
+          let dirent = new Dirent(item);
+          direntList.push(dirent);
+        } else {
+          if (item.type === 'dir') {
+            let dirent = new Dirent(item);
+            direntList.push(dirent);
+          }
+        }
+      });
+      direntList = Utils.sortDirents(direntList, 'name', 'asc');
+      this.setState({
+        dirent: direntList[0]
+      });
+    });
+  }
+
+  onRelatedFileChange = () => {
+    this.listRelatedFiles();
+  }
+
+  onFileTagChanged = () => {
+    this.listFileTags();
+  }
+
   render() {
     if (this.state.loading) {
       return (
@@ -334,24 +443,65 @@ class MarkdownEditor extends React.Component {
       );
     } else if (this.state.mode === 'editor') {
       return (
-        <SeafileEditor
-          fileInfo={this.state.fileInfo}
-          markdownContent={this.state.markdownContent}
-          editorUtilities={editorUtilities}
-          userInfo={this.state.collabServer ? userInfo : null}
-          collabServer={this.state.collabServer}
-          showFileHistory={true}
-          mode={mode}
-          draftID={draftID}
-          reviewID={reviewID}
-          reviewStatus={reviewStatus}
-          isDraft={isDraft}
-          hasDraft={hasDraft}
-          shareLinkExpireDaysMin={shareLinkExpireDaysMin}
-          shareLinkExpireDaysMax={shareLinkExpireDaysMax}
-          relatedFiles={this.state.relatedFiles}
-          siteRoot={siteRoot}
-        />
+        <React.Fragment>
+          <SeafileEditor
+            fileInfo={this.state.fileInfo}
+            markdownContent={this.state.markdownContent}
+            editorUtilities={editorUtilities}
+            userInfo={this.state.collabServer ? userInfo : null}
+            collabServer={this.state.collabServer}
+            showFileHistory={true}
+            mode={mode}
+            draftID={draftID}
+            reviewID={reviewID}
+            reviewStatus={reviewStatus}
+            isDraft={isDraft}
+            hasDraft={hasDraft}
+            shareLinkExpireDaysMin={shareLinkExpireDaysMin}
+            shareLinkExpireDaysMax={shareLinkExpireDaysMax}
+            relatedFiles={this.state.relatedFiles}
+            siteRoot={siteRoot}
+            openDialogs={this.openDialogs}
+            fileTagList={this.state.fileTagList}
+          />
+          {this.state.showMarkdownEditorDialog && (
+            <ModalPortal>
+              <Modal isOpen={true}>
+                {
+                  this.state.showRelatedFileDialog &&
+                  <ListRelatedFileDialog
+                    repoID={repoID}
+                    filePath={filePath}
+                    relatedFiles={this.state.relatedFiles}
+                    toggleCancel={this.toggleCancel}
+                    addRelatedFileToggle={this.addRelatedFileToggle}
+                    onRelatedFileChange={this.onRelatedFileChange}
+                  />
+                }
+                {
+                  this.state.showEditFileTagDialog &&
+                  <EditFileTagDialog
+                    repoID={repoID}
+                    filePath={filePath}
+                    fileTagList={this.state.fileTagList}
+                    toggleCancel={this.toggleCancel}
+                    onFileTagChanged={this.onFileTagChanged}
+                  />
+                }
+                {
+                  this.state.showAddRelatedFileDialog &&
+                  <AddRelatedFileDialog
+                    repoID={repoID}
+                    filePath={filePath}
+                    toggleCancel={this.closeAddRelatedFileDialog}
+                    dirent={this.state.dirent}
+                    onRelatedFileChange={this.onRelatedFileChange}
+                  />
+                }
+              </Modal>
+            </ModalPortal>
+          )}
+        </React.Fragment>
       );
     }   
   }
diff --git a/seahub/templates/view_file_markdown.html b/seahub/templates/view_file_markdown.html
index 80a94ebef3..1e22c496c3 100644
--- a/seahub/templates/view_file_markdown.html
+++ b/seahub/templates/view_file_markdown.html
@@ -1,15 +1,18 @@
 {% load render_bundle from webpack_loader %}
-{% load static seahub_tags %}
+{% load static seahub_tags i18n %}
 <!DOCTYPE html>
-<html>
+<html lang="{{ LANGUAGE_CODE }}">
     <head>
          <meta charset="UTF-8" />
          <title>{{ filename }}</title>
 
          <link rel="shortcut icon" href="{{ MEDIA_URL }}{{ favicon_path }}" />
+         <link rel="stylesheet" type="text/css" href="{% static "css/seafile-ui.css" %}" />
+         <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seahub_react.css?t=1398068110" />
     </head>
     <body>
          <div id="root"></div>
+         <div id="modal-wrapper"></div>
          <script type="text/javascript">
            window.app = {
               config: {
@@ -43,6 +46,7 @@
              }
           }
          </script>
+         <script src="{{ STATIC_URL }}scripts/i18n/{{ LANGUAGE_CODE }}/djangojs.js"></script>
          {% render_bundle 'markdownEditor' %}
     </body>
 </html>