file participants frontend

frontend/src/components/dialog/file-participant-dialog.js

@@ -0,0 +1,151 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {Modal, ModalHeader, ModalBody, ModalFooter, Button} from 'reactstrap';
+import {gettext} from '../../utils/constants';
+import UserSelect from '../user-select';
+import {seafileAPI} from '../../utils/seafile-api';
+import toaster from '../toast';
+
+
+class FileParticipantListItem extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOperationShow: false,
+    };
+  }
+
+  onMouseOver = () => {
+    this.setState({
+      isOperationShow: true,
+    });
+  };
+
+  onMouseLeave = () => {
+    this.setState({
+      isOperationShow: false,
+    });
+  };
+
+  render() {
+    return (
+      <div className="reviewer-select-info" style={{display: 'flex'}} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
+        <div className="d-flex">
+          <img className="avatar reviewer-select-avatar" src={this.props.participant.avatar_url} alt=""/>
+          <span className="reviewer-select-name ellipsis">{this.props.participant.name}</span>
+        </div>
+        {this.state.isOperationShow &&
+        <i
+          className="action-icon sf2-icon-x3"
+          title={gettext('Delete')}
+          onClick={this.props.deleteFileParticipant.bind(this, this.props.participant.email)}
+        ></i>
+        }
+      </div>
+    );
+  }
+}
+
+const fileParticipantListItemPropTypes = {
+  participant: PropTypes.object.isRequired,
+  deleteFileParticipant: PropTypes.func.isRequired,
+};
+
+FileParticipantListItem.propTypes = fileParticipantListItemPropTypes;
+
+
+class FileParticipantDialog extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedOption: null,
+    };
+  }
+
+  handleSelectChange = (option) => {
+    this.setState({selectedOption: option});
+  };
+
+  deleteFileParticipant = (email) => {
+    seafileAPI.deleteFileParticipant(this.props.repoID, this.props.filePath, email).then((res) => {
+      this.props.onRelatedFileChange(this.props.dirent, this.props.filePath);
+    }).catch((error) => {
+      this.handleError(error);
+    });
+    this.refs.userSelect.clearSelect();
+  };
+
+  addFileParticipant = () => {
+    if (!this.state.selectedOption || this.state.selectedOption.length === 0) {
+      return;
+    }
+    let email = this.state.selectedOption.email;
+    seafileAPI.addFileParticipant(this.props.repoID, this.props.filePath, email).then((res) => {
+      this.props.onRelatedFileChange(this.props.dirent, this.props.filePath);
+    }).catch((error) => {
+      this.handleError(error);
+    });
+    this.setState({
+      selectedOption: null,
+    });
+    this.refs.userSelect.clearSelect();
+  };
+
+  handleError = (e) => {
+    if (e.response) {
+      toaster.danger(e.response.data.error_msg || e.response.data.detail || gettext('Error'), {duration: 3});
+    } else {
+      toaster.danger(gettext('Please check the network.'), {duration: 3});
+    }
+  };
+
+  render() {
+    const renderParticipantList = this.props.fileParticipantList.map((participant, index) => {
+      return (
+        <FileParticipantListItem
+          key={index}
+          participant={participant}
+          deleteFileParticipant={this.deleteFileParticipant}
+        />
+      );
+    });
+
+    return (
+      <Modal isOpen={true} toggle={this.props.toggleFileParticipantDialog}>
+        <ModalHeader toggle={this.props.toggleFileParticipantDialog}>{gettext('Participants')}</ModalHeader>
+        <ModalBody>
+          <div className="add-reviewer"  style={{display: 'flex'}}>
+            <div style={{width: '385px'}}>
+              <UserSelect
+                ref="userSelect"
+                isMulti={false}
+                className="reviewer-select"
+                placeholder={gettext('Select users...')}
+                onSelectChange={this.handleSelectChange}
+              />
+            </div>
+            <Button className="btn btn-secondary" onClick={this.addFileParticipant}>{gettext('Submit')}</Button>
+          </div>
+          <div>
+            {renderParticipantList}
+          </div>
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+const fileParticipantDialogPropTypes = {
+  repoID: PropTypes.string.isRequired,
+  filePath: PropTypes.string.isRequired,
+  toggleFileParticipantDialog: PropTypes.func.isRequired,
+  fileParticipantList: PropTypes.array.isRequired,
+  onRelatedFileChange: PropTypes.func.isRequired,
+  dirent: PropTypes.object.isRequired,
+};
+
+FileParticipantDialog.propTypes = fileParticipantDialogPropTypes;
+
+export default FileParticipantDialog;

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

@@ -6,6 +6,7 @@ import { Utils } from '../../utils/utils';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import ModalPortal from '../modal-portal';
 import RelatedFileDialogs from '../dialog/related-file-dialogs';
+import FileParticipantDialog from '../dialog/file-participant-dialog';
 
 const propTypes = {
   repoInfo: PropTypes.object.isRequired,
@@ -18,6 +19,7 @@ const propTypes = {
   relatedFiles: PropTypes.array.isRequired,
   onFileTagChanged: PropTypes.func.isRequired,
   onRelatedFileChange: PropTypes.func.isRequired,
+  fileParticipantList: PropTypes.array.isRequired,
 };
 
 class DetailListView extends React.Component {
@@ -27,6 +29,7 @@ class DetailListView extends React.Component {
     this.state = {
       isEditFileTagShow: false,
       showRelatedFileDialog: false,
+      isFileParticipantDialogShow : false,
     };
   }
 
@@ -77,9 +80,15 @@ class DetailListView extends React.Component {
       showRelatedFileDialog: false,
     });
   }
+
+  toggleFileParticipantDialog = () => {
+    this.setState({
+      isFileParticipantDialogShow: !this.state.isFileParticipantDialogShow,
+    });
+  }
   
   render() {
-    let { direntType, direntDetail, fileTagList, relatedFiles } = this.props;
+    let { direntType, direntDetail, fileTagList, relatedFiles, fileParticipantList } = this.props;
     let position = this.getDirentPostion();
     let direntPath = this.getDirentPath();
     if (direntType === 'dir') {
@@ -137,6 +146,21 @@ class DetailListView extends React.Component {
                   <i className='fa fa-pencil-alt attr-action-icon' onClick={this.onListRelatedFileToggle}></i>
                 </td>
               </tr>
+              <tr className="file-related-files">
+                <th>{gettext('Participants')}</th>
+                <td>
+                  <ul>
+                    {fileParticipantList.map((fileParticipant, index) => {
+                      return (
+                        <li key={index}>
+                          <span>{fileParticipant.name}</span>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                  <i className='fa fa-pencil-alt attr-action-icon' onClick={this.toggleFileParticipantDialog}></i>
+                </td>
+              </tr>
             </tbody>
           </table>
           {this.state.showRelatedFileDialog &&
@@ -162,6 +186,17 @@ class DetailListView extends React.Component {
               onFileTagChanged={this.onFileTagChanged}
             />
           }
+          {
+            this.state.isFileParticipantDialogShow &&
+            <FileParticipantDialog
+              repoID={this.props.repoID}
+              filePath={direntPath}
+              dirent={this.props.dirent}
+              toggleFileParticipantDialog={this.toggleFileParticipantDialog}
+              fileParticipantList={this.props.fileParticipantList}
+              onRelatedFileChange={this.props.onRelatedFileChange}
+            />
+          }
         </Fragment>
       );
     }

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

@@ -32,6 +32,7 @@ class DirentDetail extends React.Component {
       relatedFiles: [],
       folderDirent: null,
       activeTab: 'info',
+      fileParticipantList: [],
     };
   }
 
@@ -109,6 +110,11 @@ class DirentDetail extends React.Component {
           });
         }
       });
+      seafileAPI.listFileParticipants(repoID, direntPath).then((res) => {
+        this.setState({
+          fileParticipantList: res.data.participant_list,
+        });
+      });
     } else {
       seafileAPI.getDirInfo(repoID, direntPath).then(res => {
         this.setState({
@@ -180,6 +186,7 @@ class DirentDetail extends React.Component {
                 relatedFiles={this.state.relatedFiles}
                 onFileTagChanged={this.props.onFileTagChanged}
                 onRelatedFileChange={this.onRelatedFileChange}
+                fileParticipantList={this.state.fileParticipantList}
               />
             </div>
           }