translate

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);
@@ -150,7 +151,12 @@ export default class TagsList extends React.Component {
   }
 
   render() {
-    const tagList = this.generateTagList(this.state.tagData);
+    const { t } = this.props;
+    const tagList = this.state.tagData.length ? (
+      <ul className="list-group">{this.generateTagList(this.state.tagData)}</ul>
+    ) : (
+      <h3>{ t('You have no tag, You can set tags on pages') }</h3>
+    );
 
     const paginationItems = [];
 
@@ -164,12 +170,15 @@ 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　mx-4">{tagList}</ul>
-        <div className="text-center">
-          <Pagination>{paginationItems}</Pagination>
+      <div className="text-center">
+        <div className="tag-list">
+          {tagList}
+        </div>
+        <div className="tag-list-pagination">
+          {pagination}
         </div>
       </div>
     );
@@ -179,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/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 %}