Show file tags (#2509)

frontend/src/components/dialog/create-tag-dialog.js

@@ -64,10 +64,12 @@ class CreateTagDialog extends React.Component {
       <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}>{gettext('New Tag')}</ModalHeader>
         <ModalBody>
-          <div className="tag-create">
-            <p>{gettext('Name')}</p>
-            <Input onKeyPress={this.handleKeyPress} innerRef={input => {this.newInput = input;}} placeholder={gettext('name')} value={this.state.tagName} onChange={this.inputNewName}/>
-            <div className="form-group color-chooser">
+          <div role="form" className="tag-create">
+            <div className="form-group">
+              <label className="form-label">{gettext('Name')}</label>
+              <Input onKeyPress={this.handleKeyPress} innerRef={input => {this.newInput = input;}} placeholder={gettext('name')} value={this.state.tagName} onChange={this.inputNewName}/>
+            </div>
+            <div className="form-group">
               <label className="form-label">{gettext('Select a color')}</label>
               <div className="row gutters-xs">
                 {colorList.map((item, index)=>{

frontend/src/components/dialog/edit-filetag-dialog.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { repoID, gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import RepoTag from '../../models/repo-tag';
+
+const propTypes = {
+  filePath: PropTypes.string.isRequired,
+  fileTagList: PropTypes.array.isRequired,
+  onFileTagChanged: PropTypes.func.isRequired,
+  toggleCancel: PropTypes.func.isRequired,
+};
+
+class EditFileTagDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      repotagList: [],
+    };
+  }
+
+  componentDidMount() {
+    this.getRepoTagList();
+  }
+
+  getRepoTagList = () => {
+    seafileAPI.listRepoTags(repoID).then(res => {
+      let repotagList = [];
+      res.data.repo_tags.forEach(item => {
+        let repoTag = new RepoTag(item);
+        repotagList.push(repoTag);
+      });
+      this.setState({
+        repotagList: repotagList,
+      });
+    });
+  }
+
+  getRepoTagIdList = () => {
+    let repoTagIdList = [];
+    let fileTagList = this.props.fileTagList;
+    fileTagList.map((fileTag) => {
+      repoTagIdList.push(fileTag.repo_tag_id);
+    });
+    return repoTagIdList;
+  }
+
+  editFileTag = (repoTag) => {
+    let repoTagIdList = this.getRepoTagIdList();
+    if (repoTagIdList.indexOf(repoTag.id) === -1) {
+      let id = repoTag.id;
+      let filePath = this.props.filePath;
+      seafileAPI.addFileTag(repoID, filePath, id).then(() => {
+        repoTagIdList = this.getRepoTagIdList();
+      });
+    } else {
+      let fileTag = null;
+      let fileTagList = this.props.fileTagList;
+      for(let i = 0; i < fileTagList.length; i++) {
+        if (fileTagList[i].repo_tag_id === repoTag.id) {
+          fileTag = fileTagList[i];
+          break;
+        }
+      } 
+      seafileAPI.deleteFileTag(repoID, fileTag.id).then(() => {
+        repoTagIdList = this.getRepoTagIdList();
+      });
+    }
+    this.props.onFileTagChanged();
+  }
+
+  toggle = () => {
+    this.props.toggleCancel();
+  }
+
+  render() {
+    let repoTagIdList = this.getRepoTagIdList();
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle}>{gettext('File Tags')}</ModalHeader>
+        <ModalBody>
+          {
+            <ul className="tag-list tag-list-container">
+              {this.state.repotagList.map((repoTag) => {
+                return (
+                  <li key={repoTag.id} className="tag-list-item" onClick={this.editFileTag.bind(this, repoTag)}>
+                    <div className={`tag-demo bg-${repoTag.color}`}>
+                      <span>{repoTag.name}</span>
+                      {repoTagIdList.indexOf(repoTag.id) > -1 &&
+                        <i className="fas fa-check tag-operation"></i>
+                      }
+                    </div>
+                  </li>
+                );
+              })}
+            </ul>
+          }
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={this.toggle}>{gettext('Close')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+EditFileTagDialog.propTypes = propTypes;
+
+export default EditFileTagDialog;

frontend/src/components/dialog/list-tag-dialog.js

@@ -18,9 +18,10 @@ class TagListItem extends React.Component {
   }
 
   render() {
+    let color = this.props.item.color;
     return(
       <li className="tag-list-item">
-        <span className="tag-demo" style={{background: this.props.item.color}}>{this.props.item.name}</span>
+        <span className={`tag-demo bg-${color}`}>{this.props.item.name}</span>
         <i className="tag-edit fa fa-pencil" onClick={this.onTagUpdate}></i>
       </li>
     );
@@ -64,7 +65,7 @@ class ListTagDialog extends React.Component {
     return (
       <Fragment>
         <Modal isOpen={true} toggle={this.toggle}>
-          <ModalHeader toggle={this.toggle}>{gettext('Tag List')}</ModalHeader>
+          <ModalHeader toggle={this.toggle}>{gettext('Tags')}</ModalHeader>
           <ModalBody>
             {
               this.state.repotagList.length === 0 && 

frontend/src/components/dialog/update-tag-dialog.js

@@ -78,9 +78,11 @@ class UpdateTagDialog extends React.Component {
           <ModalHeader toggle={this.toggle}>{gettext('Edit Tag')}</ModalHeader>
           <ModalBody>
             <div className="tag-edit">
-              <p>{gettext('Name:')}</p>
-              <Input onKeyPress={this.handleKeyPress} innerRef={input => {this.newInput = input;}} placeholder="newName" value={this.state.newName} onChange={this.inputNewName}/>
-              <div className="form-group color-chooser">
+              <div className="form-group">
+                <label className="form-label">{gettext('Name')}</label>
+                <Input onKeyPress={this.handleKeyPress} innerRef={input => {this.newInput = input;}} placeholder="newName" value={this.state.newName} onChange={this.inputNewName}/>
+              </div>
+              <div className="form-group">
                 <label className="form-label">{gettext('Select a color')}</label>
                 <div className="row gutters-xs">
                   {colorList.map((item, index)=>{