update comment panel

frontend/src/components/dir-view-mode/dir-list-view.js

@@ -38,6 +38,7 @@ const propTypes = {
   onItemsCopy: PropTypes.func.isRequired,
   onItemsDelete: PropTypes.func.isRequired,
   onFileTagChanged: PropTypes.func,
+  showDirentDetail: PropTypes.func.isRequired,
 };
 
 class DirListView extends React.Component {
@@ -96,6 +97,7 @@ class DirListView extends React.Component {
           onAddFile={this.props.onAddFile}
           onAddFolder={this.props.onAddFolder}
           onFileTagChanged={this.props.onFileTagChanged}
+          showDirentDetail={this.props.showDirentDetail}
         />
       </Fragment>
     );

frontend/src/components/dirent-detail/detail-comments-list.js

@@ -0,0 +1,226 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { processor } from '@seafile/seafile-editor/dist/utils/seafile-markdown2html';
+import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import '../../css/comments-list.css';
+
+const { username } = window.app.pageOptions;
+
+const DetailCommentListPropTypes = {
+  repoID: PropTypes.string.isRequired,
+  filePath: PropTypes.string.isRequired,
+};
+
+class DetailCommentList extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      commentsList: [],
+    };
+  }
+
+  componentDidMount() {
+    this.listComments();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.filePath !== this.props.filePath) {
+      this.listComments(nextProps.filePath);
+    }
+  }
+
+  listComments = (filePath) => {
+    seafileAPI.listComments(this.props.repoID, (filePath || this.props.filePath)).then((res) => {
+      this.setState({ commentsList: res.data.comments });
+    });
+  }
+
+  handleCommentChange = (event) => {
+    this.setState({ comment: event.target.value });
+  }
+
+  submitComment = () => {
+    let comment = this.refs.commentTextarea.value;
+    const { repoID, filePath } = this.props;
+    if (comment.trim()) {
+      seafileAPI.postComment(repoID, filePath, comment.trim()).then(() => {
+        this.listComments();
+      });
+    }
+    this.refs.commentTextarea.value = '';
+  }
+
+  resolveComment = (event) => {
+    const { repoID } = this.props;
+    seafileAPI.updateComment(repoID, event.target.id, 'true').then(() => {
+      this.listComments();
+    });
+  }
+
+  deleteComment = (event) => {
+    const { repoID } = this.props;
+    seafileAPI.deleteComment(repoID, event.target.id).then(() => {
+      this.listComments();
+    });
+  }
+
+  editComment = (commentID, newComment) => {
+    const { repoID } = this.props;
+    seafileAPI.updateComment(repoID, commentID, null, null, newComment).then(() => {
+      this.listComments();
+    });
+  }
+
+  render() {
+    return (
+      <div className="seafile-comment detail-comments h-100 w-100">
+        <ul className="seafile-comment-list">
+          {this.state.commentsList.length > 0 &&
+            this.state.commentsList.map((item, index = 0, arr) => {
+              let oldTime = (new Date(item.created_at)).getTime();
+              let time = moment(oldTime).format('YYYY-MM-DD HH:mm');
+              return (
+                <React.Fragment key={item.id}>
+                  <CommentItem
+                    item={item} time={time} deleteComment={this.deleteComment}
+                    resolveComment={this.resolveComment} editComment={this.editComment}
+                  />
+                </React.Fragment>
+              );
+            })
+          }
+          {(this.state.commentsList.length == 0 ) &&
+            <li className="comment-vacant">{gettext('No comment yet.')}</li>}
+        </ul>
+        <div className="seafile-comment-footer">
+          <textarea
+            className="add-comment-input" ref="commentTextarea" placeholder={gettext('Add a comment.')}
+            clos="100" rows="3" warp="virtual"
+          ></textarea>
+          <Button className="submit-comment" color="success" size="sm" onClick={this.submitComment}>{gettext('Submit')}</Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+DetailCommentList.propTypes = DetailCommentListPropTypes;
+
+const commentItemPropTypes = {
+  time: PropTypes.string.isRequired,
+  item: PropTypes.object.isRequired,
+  deleteComment: PropTypes.func.isRequired,
+  resolveComment: PropTypes.func.isRequired,
+  editComment: PropTypes.func.isRequired,
+};
+
+class CommentItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      dropdownOpen: false,
+      html: '',
+      newComment: this.props.item.comment,
+      editable: false,
+    };
+  }
+
+  componentWillMount() {
+    this.convertComment(this.props.item.comment);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.convertComment(nextProps.item.comment);
+  }
+
+  convertComment = (mdFile) => {
+    processor.process(mdFile).then((result) => {
+      let html = String(result);
+      this.setState({ html: html });
+    });
+  }
+
+  toggleDropDownMenu = () => {
+    this.setState({ dropdownOpen: !this.state.dropdownOpen });
+  }
+
+  toggleEditComment = () => {
+    this.setState({ editable: !this.state.editable });
+  }
+
+  updateComment = (event) => {
+    const newComment = this.state.newComment;
+    if (this.props.item.comment !== newComment) {
+      this.props.editComment(event.target.id, newComment);
+    }
+    this.toggleEditComment();
+  }
+
+  handleCommentChange = (event) => {
+    this.setState({ newComment: event.target.value });
+  }
+
+  renderInfo = (item) => {
+    return (
+      <Fragment>
+        <img className="avatar" src={item.avatar_url} alt=""/>
+        <div className="reviewer-info">
+          <div className="reviewer-name ellipsis">{item.user_name}</div>
+          <div className="review-time">{this.props.time}</div>
+        </div>
+      </Fragment>
+    );
+  }
+
+  render() {
+    const item = this.props.item;
+    if (this.state.editable) {
+      return(
+        <li className="seafile-comment-item" id={item.id}>
+          <div className="seafile-comment-info">
+            {this.renderInfo(item)}
+          </div>
+          <div className="seafile-edit-comment">
+            <textarea className="edit-comment-input" value={this.state.newComment}
+              onChange={this.handleCommentChange} clos="100" rows="3" warp="virtual"
+            ></textarea>
+            <Button className="comment-btn" color="success" size="sm" onClick={this.updateComment} id={item.id}>{gettext('Update')}</Button>{' '}
+            <Button className="comment-btn" color="secondary" size="sm" onClick={this.toggleEditComment}> {gettext('Cancel')}</Button>
+          </div>
+        </li>
+      );
+    }
+    return (
+      <li className={item.resolved ? 'seafile-comment-item seafile-comment-item-resolved' : 'seafile-comment-item'} id={item.id}>
+        <div className="seafile-comment-info">
+          {this.renderInfo(item)}
+          <Dropdown isOpen={this.state.dropdownOpen} size="sm" className="seafile-comment-dropdown" toggle={this.toggleDropDownMenu}>
+            <DropdownToggle className="seafile-comment-dropdown-btn"><i className="fas fa-ellipsis-v"></i></DropdownToggle>
+            <DropdownMenu>
+              {item.user_email === username &&
+                <DropdownItem onClick={this.props.deleteComment} className="delete-comment" id={item.id}>{gettext('Delete')}</DropdownItem>
+              }
+              {item.user_email === username &&
+                <DropdownItem onClick={this.toggleEditComment} className="edit-comment" id={item.id}>{gettext('Edit')}</DropdownItem>
+              }
+              {!item.resolved &&
+                <DropdownItem onClick={this.props.resolveComment} className="seafile-comment-resolved"
+                  id={item.id}>{gettext('Mark as resolved')}</DropdownItem>
+              }
+            </DropdownMenu>
+          </Dropdown>
+        </div>
+        <div className="seafile-comment-content" dangerouslySetInnerHTML={{ __html: this.state.html }}></div>
+      </li>
+    );
+  }
+}
+
+CommentItem.propTypes = commentItemPropTypes;
+
+export default DetailCommentList;

frontend/src/components/dirent-detail/dirent-details.js

@@ -1,5 +1,8 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
+import DetailCommentList from './detail-comments-list';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import Dirent from '../../models/dirent';
@@ -15,6 +18,7 @@ const propTypes = {
   currentRepoInfo: PropTypes.object.isRequired,
   onItemDetailsClose: PropTypes.func.isRequired,
   onFileTagChanged: PropTypes.func.isRequired,
+  direntDetailPanelTab: PropTypes.string,
 };
 
 class DirentDetail extends React.Component {
@@ -27,9 +31,16 @@ class DirentDetail extends React.Component {
       fileTagList: [],
       relatedFiles: [],
       folderDirent: null,
+      activeTab: 'info',
     };
   }
 
+  componentWillMount() {
+    if (this.props.direntDetailPanelTab) {
+      this.tabItemClick(this.props.direntDetailPanelTab);
+    }
+  }
+
   componentDidMount() {
     let { dirent, path, repoID } = this.props;
     this.loadDirentInfo(dirent, path, repoID);
@@ -38,6 +49,9 @@ class DirentDetail extends React.Component {
   componentWillReceiveProps(nextProps) {
     let { dirent, path, repoID } = nextProps;
     this.loadDirentInfo(dirent, path, repoID);
+    if (this.props.direntDetailPanelTab) {
+      this.tabItemClick(this.props.direntDetailPanelTab);
+    }
   }
 
   loadDirentInfo = (dirent, path, repoID) => {
@@ -109,34 +123,50 @@ class DirentDetail extends React.Component {
     this.updateDetailView(dirent, direntPath);
   }
 
-  render() {
-    let { dirent } = this.props;
-    let { folderDirent } = this.state;
-    if (!dirent && !folderDirent) {
-      return '';
+  tabItemClick = (tab) => {
+    if (this.state.activeTab !== tab) {
+      this.setState({ activeTab: tab });
     }
+  }
 
-    let smallIconUrl = dirent ? Utils.getDirentIcon(dirent) : Utils.getDirentIcon(folderDirent);
-    let bigIconUrl = dirent ? Utils.getDirentIcon(dirent, true) : Utils.getDirentIcon(folderDirent, true);
-    const isImg = dirent ? Utils.imageCheck(dirent.name) : Utils.imageCheck(folderDirent.name);
-    if (isImg) {
-      bigIconUrl = siteRoot + 'thumbnail/' + this.props.repoID + '/1024/' + dirent.name;
+  renderNavItem = (showTab) => {
+    switch(showTab) {
+      case 'info':
+        return (
+          <NavItem className="nav-item w-50">
+            <NavLink className={classnames({ active: this.state.activeTab === 'info' })} onClick={() => { this.tabItemClick('info');}}>
+              <i className="fas fa-info-circle"></i>
+            </NavLink>
+          </NavItem>
+        );
+      case 'comments':
+        return (
+          <NavItem className="nav-item w-50">
+            <NavLink className={classnames({ active: this.state.activeTab === 'comments' })} onClick={() => {this.tabItemClick('comments');}}>
+              <i className="fa fa-comments"></i>
+            </NavLink>
+          </NavItem>
+        );
     }
-    let direntName = dirent ? dirent.name : folderDirent.name;
+  }
 
+  renderHeader = (smallIconUrl, direntName) => {
     return (
-      <div className="detail-container">
-        <div className="detail-header">
-          <div className="detail-control sf2-icon-x1" onClick={this.props.onItemDetailsClose}></div>
-          <div className="detail-title dirent-title">
-            <img src={smallIconUrl} width="24" height="24" alt="" />{' '}
-            <span className="name ellipsis" title={direntName}>{direntName}</span>
-          </div>
+      <div className="detail-header">
+        <div className="detail-control sf2-icon-x1" onClick={this.props.onItemDetailsClose}></div>
+        <div className="detail-title dirent-title">
+          <img src={smallIconUrl} width="24" height="24" alt="" />{' '}
+          <span className="name ellipsis" title={direntName}>{direntName}</span>
         </div>
+      </div>
+    );
+  }
+
+  renderDetailBody = (bigIconUrl, folderDirent) => {
+    return (
+      <Fragment>
         <div className="detail-body dirent-info">
-          <div className="img">
-            <img src={bigIconUrl} className="thumbnail" alt="" />
-          </div>
+          <div className="img"><img src={bigIconUrl} className="thumbnail" alt="" /></div>
           {this.state.direntDetail && 
             <div className="dirent-table-container">
               <DetailListView 
@@ -154,9 +184,49 @@ class DirentDetail extends React.Component {
             </div>
           }
         </div>
-      </div>
+      </Fragment>
     );
   }
+
+  render() {
+    let { dirent } = this.props;
+    let { folderDirent } = this.state;
+    if (!dirent && !folderDirent) {
+      return '';
+    }
+    let smallIconUrl = dirent ? Utils.getDirentIcon(dirent) : Utils.getDirentIcon(folderDirent);
+    let bigIconUrl = dirent ? Utils.getDirentIcon(dirent, true) : Utils.getDirentIcon(folderDirent, true);
+    const isImg = dirent ? Utils.imageCheck(dirent.name) : Utils.imageCheck(folderDirent.name);
+    if (isImg) {
+      bigIconUrl = siteRoot + 'thumbnail/' + this.props.repoID + '/1024/' + dirent.name;
+    }
+    let direntName = dirent ? dirent.name : folderDirent.name;
+
+    if (dirent && dirent.type === 'file') {
+      return (
+        <div className="detail-container">
+          {this.renderHeader(smallIconUrl, direntName)}
+          <Nav tabs className="mx-0">{this.renderNavItem('info')}{this.renderNavItem('comments')}</Nav>
+          <TabContent activeTab={this.state.activeTab}>
+            <TabPane tabId="info">{this.renderDetailBody(bigIconUrl, folderDirent)}</TabPane>
+            <TabPane tabId="comments" className="comments h-100">
+              <DetailCommentList
+                repoID={this.props.repoID}
+                filePath={this.props.path + dirent.name}
+              />
+            </TabPane>
+          </TabContent>
+        </div>
+      );
+    } else {
+      return (
+        <div className="detail-container">
+          {this.renderHeader(smallIconUrl, direntName)}
+          {this.renderDetailBody(bigIconUrl, folderDirent)}
+        </div>
+      );
+    }
+  }
 }
 
 DirentDetail.propTypes = propTypes;

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

@@ -48,6 +48,7 @@ const propTypes = {
   getDirentItemMenuList: PropTypes.func.isRequired,
   onFileTagChanged: PropTypes.func,
   enableDirPrivateShare: PropTypes.bool.isRequired,
+  showDirentDetail: PropTypes.func.isRequired,
 };
 
 class DirentListItem extends React.Component {
@@ -210,7 +211,7 @@ class DirentListItem extends React.Component {
         this.onLockItem();
         break;
       case 'Comment':
-        this.onComnentItem();
+        this.props.showDirentDetail('comments');
         break;
       case 'History':
         this.onHistory();
@@ -288,10 +289,6 @@ class DirentListItem extends React.Component {
     });
   }
 
-  onComnentItem = () => {
-
-  }
-
   onHistory = () => {
     let repoID = this.props.repoID;
     let filePath = this.getDirentPath(this.props.dirent);

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

@@ -47,6 +47,7 @@ const propTypes = {
   onFileTagChanged: PropTypes.func,
   enableDirPrivateShare: PropTypes.bool.isRequired,
   isGroupOwnedRepo: PropTypes.bool.isRequired,
+  showDirentDetail: PropTypes.func.isRequired,
 };
 
 class DirentListView extends React.Component {
@@ -642,6 +643,7 @@ class DirentListView extends React.Component {
                   activeDirent={this.state.activeDirent}
                   onFileTagChanged={this.props.onFileTagChanged}
                   getDirentItemMenuList={this.getDirentItemMenuList}
+                  showDirentDetail={this.props.showDirentDetail}
                 />
               );
             })}