add page tag form under pageEditor

src/client/js/components/PageTagForm.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ *
+ * @author Yuki Takei <yuki@weseek.co.jp>
+ *
+ * @export
+ * @class PageTagForm
+ * @extends {React.Component}
+ */
+
+export default class PageTagForm extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      pageTags: this.props.pageTags,
+    };
+
+    this.updateState = this.updateState.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      pageTags: nextProps.pageTags
+    });
+  }
+
+  getCurrentOptionsToSave() {
+    return Object.assign({}, this.state);
+  }
+
+  updateState(value) {
+    this.setState({pageTags: value});
+  }
+
+  render() {
+    return (
+      <div className="input-group input-group-sm input-group-slack extended-setting">
+        <input className="form-control" type="text" value={this.state.pageTags} placeholder="input tag name"
+          data-toggle="popover"
+          title="ページタグ"
+          data-content="タグ付けによりページをカテゴライズすることができます。"
+          data-trigger="focus"
+          data-placement="top"
+          onChange={e => this.updateState(e.target.value)}
+          />
+      </div>
+    );
+  }
+}
+
+PageTagForm.propTypes = {
+  crowi: PropTypes.object.isRequired,
+  pageId: PropTypes.string,
+  pagePath: PropTypes.string,
+  pageTags: PropTypes.string,
+};
+
+PageTagForm.defaultProps = {
+};

src/client/js/components/SavePageControls.jsx

@@ -7,6 +7,7 @@ import SplitButton  from 'react-bootstrap/es/SplitButton';
 import MenuItem from 'react-bootstrap/es/MenuItem';
 
 import SlackNotification from './SlackNotification';
+import PageTagForm from './PageTagForm';
 import GrantSelector from './SavePageControls/GrantSelector';
 
 class SavePageControls extends React.PureComponent {
@@ -28,8 +29,10 @@ class SavePageControls extends React.PureComponent {
 
   getCurrentOptionsToSave() {
     const slackNotificationOptions = this.refs.slackNotification.getCurrentOptionsToSave();
+    // const pageTagOptions = this.refs.pageTagForm.getCurrentOptionsToSave();
+    const pageTagOptions = '';
     const grantSelectorOptions = this.refs.grantSelector.getCurrentOptionsToSave();
-    return Object.assign(slackNotificationOptions, grantSelectorOptions);
+    return Object.assign(slackNotificationOptions, pageTagOptions, grantSelectorOptions);
   }
 
   /**
@@ -58,6 +61,14 @@ class SavePageControls extends React.PureComponent {
 
     return (
       <div className="d-flex align-items-center form-inline">
+        <div className="mr-2">
+          <PageTagForm
+            ref='PageTagForm'
+            crowi={this.props.crowi}
+            pageId={this.props.pageId}
+            pagePath={this.props.pagePath}
+            pageTags={this.props.pageTags} />
+      </div>
         <div className="mr-2">
           <SlackNotification
               ref='slackNotification'
@@ -102,6 +113,7 @@ SavePageControls.propTypes = {
   // for SlackNotification
   pagePath: PropTypes.string,
   slackChannels: PropTypes.string,
+  pageTags: PropTypes.string,
   // for GrantSelector
   grant: PropTypes.number,
   grantGroupId: PropTypes.string,