Merge pull request #928 from weseek/feat/add-message-to-tags-page

Feat/brush up tags page

resource/locales/ja/translation.json

@@ -113,7 +113,7 @@
   "The whitelist of registration permission E-mail address": "登録許可メールアドレスの<br>ホワイトリスト",
   "Selecting authentication mechanism": "認証機構選択",
   "Add tags for this page": "タグを付ける",
-
+  "You have no tag, You can set tags on pages": "使用中のタグがありません",
 
 
   "Show latest": "最新のページを表示",

src/client/js/app.js

@@ -298,7 +298,7 @@ const componentMappings = {
   'bookmark-button': <BookmarkButton pageId={pageId} crowi={crowi} />,
   'bookmark-button-lg': <BookmarkButton pageId={pageId} crowi={crowi} size="lg" />,
 
-  'tags-page': <TagsList crowi={crowi} />,
+  'tags-page': <I18nextProvider i18n={i18n}><TagsList crowi={crowi} /></I18nextProvider>,
 
   'create-page-name-input': <PagePathAutoComplete crowi={crowi} initializedPath={pagePath} addTrailingSlash />,
   'rename-page-name-input': <PagePathAutoComplete crowi={crowi} initializedPath={pagePath} />,

src/client/js/components/TagsList.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { withTranslation } from 'react-i18next';
 import Pagination from 'react-bootstrap/lib/Pagination';
 
-export default class TagsList extends React.Component {
+class TagsList extends React.Component {
 
   constructor(props) {
     super(props);
@@ -151,7 +152,8 @@ export default class TagsList extends React.Component {
   }
 
   render() {
-    const tagList = this.generateTagList(this.state.tagData);
+    const { t } = this.props;
+    const messageForNoTag = this.state.tagData.length ? null : <h3>{ t('You have no tag, You can set tags on pages') }</h3>;
 
     const paginationItems = [];
 
@@ -165,12 +167,18 @@ export default class TagsList extends React.Component {
     paginationItems.push(paginations);
     const nextLastItems = this.generateNextLast(activePage, totalPage);
     paginationItems.push(nextLastItems);
+    const pagination = this.state.tagData.length ? <Pagination>{paginationItems}</Pagination> : null;
 
     return (
-      <div>
-        <ul className="list-group tags-list">{tagList}</ul>
-        <div className="text-center">
-          <Pagination>{paginationItems}</Pagination>
+      <div className="text-center">
+        <div className="tag-list">
+          <ul className="list-group text-left">
+            {this.generateTagList(this.state.tagData)}
+          </ul>
+          {messageForNoTag}
+        </div>
+        <div className="tag-list-pagination">
+          {pagination}
         </div>
       </div>
     );
@@ -180,7 +188,10 @@ export default class TagsList extends React.Component {
 
 TagsList.propTypes = {
   crowi: PropTypes.object.isRequired,
+  t: PropTypes.func.isRequired, // i18next
 };
 
 TagsList.defaultProps = {
 };
+
+export default withTranslation()(TagsList);

src/server/models/page-tag-relation.js

@@ -43,13 +43,14 @@ class PageTagRelation {
     const offset = opt.offset || 0;
     const limit = opt.limit || 50;
 
-    const list = await this.aggregate()
+    const tags = await this.aggregate()
       .group({ _id: '$relatedTag', count: { $sum: 1 } })
-      .sort(sortOpt)
-      .skip(offset)
-      .limit(limit);
+      .sort(sortOpt);
 
-    return list;
+    const list = tags.slice(offset, offset + limit);
+    const totalCount = tags.length;
+
+    return { list, totalCount };
   }
 
 }

src/server/routes/tag.js

@@ -62,14 +62,14 @@ module.exports = function(crowi, app) {
 
     try {
       // get tag list contains id and count properties
-      const list = await PageTagRelation.createTagListWithCount(queryOptions);
-      const ids = list.map((obj) => { return obj._id });
+      const listData = await PageTagRelation.createTagListWithCount(queryOptions);
+      const ids = listData.list.map((obj) => { return obj._id });
 
       // get tag documents for add name data to the list
       const tags = await Tag.find({ _id: { $in: ids } });
 
       // add name property
-      result.data = list.map((elm) => {
+      result.data = listData.list.map((elm) => {
         const data = {};
         const tag = tags.find((tag) => { return (tag.id === elm._id.toString()) });
 
@@ -79,7 +79,7 @@ module.exports = function(crowi, app) {
         return data;
       });
 
-      result.totalCount = await Tag.count();
+      result.totalCount = listData.totalCount;
 
       return res.json(ApiResponse.success(result));
     }

src/server/views/layout-growi/widget/header.html

@@ -11,7 +11,9 @@
 
         <!-- [TODO] commentout Until the destination is decided -->
         <!-- <div id="revision-url" class="url-line"></div> -->
-        <div class="title" id="tag-label"></div>
+        {% if not forbidden %}
+          <div class="title" id="tag-label"></div>
+        {% endif %}
 
       </div>
       {% if page %}

src/server/views/tags.html

@@ -7,7 +7,7 @@
       {% block content_header %}
       <div class="header-wrap">
         <header id="page-header">
-          <h1 id="admin-title" class="title">Tags</h1>
+          <h1 id="admin-title" class="title">{{ t('Tags') }}</h1>
         </header>
       </div>
       {% endblock %}