root path show file_tag && tagged_files_count (#2715)

frontend/src/components/dir-view/dir-panel.js

@@ -12,6 +12,7 @@ import DirentDetail from '../dirent-detail/dirent-details';
 import FileUploader from '../file-uploader/file-uploader';
 import ModalPortal from '../modal-portal';
 import LibDecryptDialog from '../dialog/lib-decrypt-dialog';
+import FileTagsViewer from '../../components/filetags-viewer';
 
 const propTypes = {
   currentRepoInfo: PropTypes.object,
@@ -46,6 +47,7 @@ const propTypes = {
   updateDirent: PropTypes.func.isRequired,
   onSearchedClick: PropTypes.func.isRequired,
   onFileUploadSuccess: PropTypes.func.isRequired,
+  usedRepoTags: PropTypes.array.isRequired,
 };
 
 class DirPanel extends React.Component {
@@ -171,6 +173,15 @@ class DirPanel extends React.Component {
                   onTabNavClick={this.props.onTabNavClick}
                 />
               </div>
+              {(this.props.usedRepoTags.length > 0 && this.props.path === '/') && (
+                <div className="tags-summary-bar">
+                  <FileTagsViewer
+                    repoID={this.props.repoID}
+                    currentPath={this.props.path}
+                    usedRepoTags={this.props.usedRepoTags}
+                  />
+                </div>
+              )}
               <div className="cur-view-content">
                 {this.props.errorMsg ?
                  <p className="error text-center">{this.props.errorMsg}</p> :

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

@@ -9,6 +9,7 @@ import toaster from '../toast';
 import DirPanel from './dir-panel';
 import Dirent from '../../models/dirent';
 import FileTag from '../../models/file-tag';
+import RepoTag from '../../models/repo-tag';
 import RepoInfo from '../../models/repo-info';
 
 const propTypes = {
@@ -37,6 +38,7 @@ class DirView extends React.Component {
       selectedDirentList: [],
       dirID: '',
       errorMsg: '',
+      usedRepoTags: [],
     };
     window.onpopstate = this.onpopstate;
     this.lastModifyTime = new Date();
@@ -54,6 +56,16 @@ class DirView extends React.Component {
     let location = decodeURIComponent(window.location.href);
     let repoID = this.props.repoID;
     collabServer.watchRepo(repoID, this.onRepoUpdateEvent);
+    seafileAPI.listRepoTags(repoID).then(res => {
+      let usedRepoTags = [];
+      res.data.repo_tags.forEach(item => {
+        let usedRepoTag = new RepoTag(item);
+        if (usedRepoTag.fileCount > 0) {
+          usedRepoTags.push(usedRepoTag);
+        }
+      });
+      this.setState({usedRepoTags: usedRepoTags});
+    });
     seafileAPI.getRepoInfo(repoID).then(res => {
       let repoInfo = new RepoInfo(res.data);
       this.setState({
@@ -122,6 +134,10 @@ class DirView extends React.Component {
     })
   }
 
+  updateUsedRepoTags = (newUsedRepoTags) => {
+    this.setState({usedRepoTags: newUsedRepoTags});
+  }
+
   updateDirentList = (filePath) => {
     let repoID = this.state.repoID;
     this.setState({isDirentListLoading: true});
@@ -368,6 +384,17 @@ class DirView extends React.Component {
       });
       this.updateDirent(dirent, 'file_tags', fileTags);
     });
+
+    seafileAPI.listRepoTags(repoID).then(res => {
+      let usedRepoTags = [];
+      res.data.repo_tags.forEach(item => {
+        let usedRepoTag = new RepoTag(item);
+        if (usedRepoTag.fileCount > 0) {
+          usedRepoTags.push(usedRepoTag);
+        }
+      });
+      this.updateUsedRepoTags(usedRepoTags);
+    });
   }
 
   onMenuClick = () => {
@@ -549,6 +576,7 @@ class DirView extends React.Component {
         onFileUploadSuccess={this.onFileUploadSuccess}
         libNeedDecrypt={this.state.libNeedDecrypt}
         onLibDecryptDialog={this.onLibDecryptDialog}
+        usedRepoTags={this.state.usedRepoTags}
       />
     );
   }

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

@@ -426,7 +426,7 @@ class DirentListItem extends React.Component {
               <a href={dirent.type === 'dir' ? dirHref : fileHref} onClick={this.onItemClick}>{dirent.name}</a>
             }
           </td>
-          <td>
+          <td className="tag-list-title">
             {(dirent.type !== 'dir' && dirent.file_tags) && (
               <Fragment>
                 <div id={`tag-list-title-${toolTipID}`} className="dirent-item tag-list tag-list-stacked">

frontend/src/components/filetags-viewer.js

@@ -0,0 +1,74 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import ModalPortal from './modal-portal';
+import { Modal } from 'reactstrap';
+import ListTaggedFilesDialog from './dialog/list-taggedfiles-dialog';
+
+const propTypes = {
+  repoID: PropTypes.string.isRequired,
+  currentPath: PropTypes.string.isRequired,
+  usedRepoTags: PropTypes.array.isRequired,
+};
+
+class FileTagsViewer extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      usedRepoTags: [],
+      currentTag: null,
+      isListTaggedFileShow: false,
+    };
+  }
+
+  onListTaggedFiles = (currentTag) => {
+    this.setState({
+      currentTag: currentTag,
+      isListTaggedFileShow: !this.state.isListTaggedFileShow,
+    });
+  }
+
+  onCloseDialog = () => {
+    this.setState({
+      isListTaggedFileShow: false
+    });
+  }
+
+  render() {
+    let {usedRepoTags, repoID} = this.props;
+
+    return (
+      <Fragment>
+        <ul className="used-tag-list">
+          {usedRepoTags.map((usedRepoTag) => {
+            return (
+              <li key={usedRepoTag.id} className="used-tag-item">
+                <span className={`used-tag bg-${usedRepoTag.color}`}></span>
+                <span className="used-tag-name" title={usedRepoTag.name}>{usedRepoTag.name}</span>
+                <span className="used-tag-files" onClick={this.onListTaggedFiles.bind(this, usedRepoTag)}>
+                  {usedRepoTag.fileCount > 1 ? usedRepoTag.fileCount + ' files' : usedRepoTag.fileCount + ' file'}
+                </span>
+              </li>
+            );
+          })}
+        </ul>
+        {this.state.isListTaggedFileShow && (
+          <ModalPortal>
+            <Modal isOpen={true}>
+              <ListTaggedFilesDialog
+                repoID={repoID}
+                currentTag={this.state.currentTag}
+                onClose={this.onCloseDialog}
+                toggleCancel={this.onListTaggedFiles}
+              />
+            </Modal>
+          </ModalPortal>
+        )}
+      </Fragment>
+    );
+  }
+}
+
+FileTagsViewer.propTypes = propTypes;
+
+export default FileTagsViewer;