delete (#2558)

frontend/src/components/dialog/add-reviewer-dialog.js

@@ -93,6 +93,23 @@ class AddReviewerDialog extends React.Component {
     }
   }
 
+  deleteReviewer = (event) => {
+    let reviewer = event.target.getAttribute('name');
+    seafileAPI.deleteReviewer(this.props.reviewID, reviewer).then((res) => {
+      if (res.data === 200) {
+        let newReviewers = [];
+        for (let i = 0; i < this.state.reviewers.length; i ++) {
+          if (this.state.reviewers[i].user_email !== reviewer) {
+            newReviewers.push(this.state.reviewers[i]);
+          }
+        }
+        this.setState({
+          reviewers: newReviewers
+        });
+      }
+    });
+  }
+
   render() {
     return (
       <Modal isOpen={this.props.showReviewerDialog}>
@@ -118,9 +135,12 @@ class AddReviewerDialog extends React.Component {
             this.state.reviewers.map((item, index = 0, arr) => {
               return (
                 <div className="reviewer-select-info" key={index}>
+                  <div>
                     <img className="avatar reviewer-select-avatar" src={item.avatar_url} alt=""/>
                     <span className="reviewer-select-name">{item.user_name}</span>
                   </div>
+                  <i className="fa fa-times" name={item.user_email} onClick={this.deleteReviewer}></i>
+                </div>
               );
             })
           }

frontend/src/css/add-reviewer-dialog.css

@@ -1,5 +1,8 @@
 .reviewer-select-info {
   margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 .reviewer-select-avatar {
   margin-right: 10px;
@@ -14,3 +17,12 @@
 .reviewer-select .true__dropdown-indicator, .reviewer-select .true__indicator-separator {
   display: none;
 }
+.reviewer-select-info i {
+  opacity: 0;
+  margin-right: 10px;
+}
+.reviewer-select-info:hover i {
+  cursor: pointer;
+  opacity: 1;
+  color: #a4a4a4;
+}