Merge branch 'feat/tag-list-page-for-master-merge' into feat/add-message-to-tags-page

# Conflicts:
#	src/client/js/components/TagsList.jsx

src/client/js/components/Page/TagLabel.jsx

@@ -15,6 +15,7 @@ class TagLabel extends React.Component {
       currentPageTags: [],
       newPageTags: [],
       isOpenModal: false,
+      isEditorMode: null,
     };
 
     this.addNewTag = this.addNewTag.bind(this);
@@ -44,27 +45,26 @@ class TagLabel extends React.Component {
   }
 
   handleShowModal() {
-    this.setState({ isOpenModal: true });
+    const isEditorMode = this.props.crowi.getCrowiForJquery().getCurrentEditorMode();
+    this.setState({ isOpenModal: true, isEditorMode });
   }
 
   async handleSubmit() {
-    // eslint-disable-next-line no-restricted-globals
-    const isPageEditor = location.href.slice(-5) === '#edit';
 
-    if (isPageEditor) { // set tag on draft on edit
+    if (this.state.isEditorMode) { // set tag on draft on edit
       this.props.sendTagData(this.state.newPageTags);
-      this.setState({ currentPageTags: this.state.newPageTags, isOpenModal: false });
     }
     else { // update tags without saving the page on view
       try {
         await this.props.crowi.apiPost('/tags.update', { pageId: this.props.pageId, tags: this.state.newPageTags });
-        this.setState({ currentPageTags: this.state.newPageTags, isOpenModal: false });
+        this.apiSuccessHandler();
       }
       catch (err) {
         this.apiErrorHandler(err);
+        return;
       }
-      this.apiSuccessHandler();
     }
+    this.setState({ currentPageTags: this.state.newPageTags, isOpenModal: false });
   }
 
   apiSuccessHandler() {
@@ -109,7 +109,7 @@ class TagLabel extends React.Component {
         )}
         {tags}
         <i
-          className="manage-tags icon-plus"
+          className="manage-tags ml-2 icon-plus"
           onClick={this.handleShowModal}
 
         >

src/client/js/components/PageTagForm.jsx

@@ -47,7 +47,7 @@ export default class PageTagForm extends React.Component {
   }
 
   handleSelect(e) {
-    if (e.keyCode === 32) {
+    if (e.keyCode === 32) { // '32' means ASCII code of 'space'
       e.preventDefault();
       const instance = this.typeahead.getInstance();
       const { initialItem } = instance.state;

src/client/js/components/TagsList.jsx

@@ -75,7 +75,8 @@ class TagsList extends React.Component {
     return tagData.map((data) => {
       return (
         <a key={data.name} href={`/_search?q=tag:${data.name}`} className="list-group-item">
-          <p className="float-left my-0">{data.name}</p>
+          <i className="icon-tag mr-2"></i>{data.name}
+          <span className="ml-4 list-tag-count label label-default text-muted">{data.count}</span>
         </a>
       );
     });

src/client/styles/scss/_tag.scss

@@ -1,21 +1,28 @@
-.manage-tags {
-  margin-left: 5px;
-  font-size: 12px;
-  cursor: pointer;
-}
+.tag-viewer {
+  .manage-tags {
+    font-size: 10px;
+    cursor: pointer;
+  }
 
-.tag-icon:not(:first-child) {
-  margin-left: 5px;
-}
+  .tag-icon:not(:first-child) {
+    margin-left: 5px;
+  }
 
-.display-of-notag,
-.tag-icon {
-  font-size: 10px;
+  .display-of-notag,
+  .tag-icon {
+    font-size: 10px;
+  }
+
+  .tag-name {
+    margin-left: 1px;
+    font-size: 10px;
+  }
 }
 
-.tag-name {
-  margin-left: 1px;
-  font-size: 10px;
+.tags-list {
+  .label.list-tag-count {
+    background: rgba(0, 0, 0, 0.08);
+  }
 }
 
 #editTagModal {

src/server/models/page.js

@@ -353,7 +353,7 @@ module.exports = function(crowi) {
     return (this.latestRevision == this.revision._id.toString());
   };
 
-  pageSchema.methods.getRelatedTagsById = async function() {
+  pageSchema.methods.findRelatedTagsById = async function() {
     const PageTagRelation = mongoose.model('PageTagRelation');
     const relations = await PageTagRelation.find({ relatedPage: this._id }).populate('relatedTag');
     return relations.map((relation) => { return relation.relatedTag.name });

src/server/routes/page.js

@@ -1074,7 +1074,7 @@ module.exports = function(crowi, app) {
     }
 
     await page.populateDataToShowRevision();
-    const originTags = await page.getRelatedTagsById();
+    const originTags = await page.findRelatedTagsById();
 
     req.body.path = newPagePath;
     req.body.body = page.revision.body;