edit TagViewer

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from 'react-bootstrap/es/Button';
+import OverlayTrigger from 'react-bootstrap/es/OverlayTrigger';
+import Tooltip from 'react-bootstrap/es/Tooltip';
+import Modal from 'react-bootstrap/es/Modal';
+import PageTagForm from '../PageTagForm';
+
+/**
+ * show tag labels on view and edit tag button on edit
+ * tag labels on view is not implemented yet(GC-1391)
+ */
+export default class EditTagModal extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      newPageTags: [],
+      isOpenModal: false,
+    };
+
+    this.addNewTag = this.addNewTag.bind(this);
+    this.handleShowModal = this.handleShowModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  // receive new tag from PageTagForm component
+  addNewTag(newPageTags) {
+    this.setState({ newPageTags });
+  }
+
+  handleCloseModal() {
+    this.setState({ isOpenModal: false });
+  }
+
+  handleShowModal() {
+    this.setState({ isOpenModal: true });
+  }
+
+  handleSubmit() {
+    this.props.sendTagData(this.state.newPageTags);
+    this.setState({ isOpenModal: false });
+  }
+
+  render() {
+    const tagEditorButtonStyle = {
+      marginLeft: '0.2em',
+      padding: '0 2px',
+    };
+
+    return (
+      <span className="btn-tag-container">
+        <OverlayTrigger
+          key="tooltip"
+          placement="bottom"
+          overlay={(
+            <Tooltip id="tag-edit-button-tooltip" className="tag-tooltip">
+              {this.props.currentPageTags.length !== 0 ? this.props.currentPageTags.join() : 'tag is not set' }
+            </Tooltip>
+          )}
+        >
+          <Button
+            variant="primary"
+            onClick={this.handleShowModal}
+            className="btn btn-default btn-tag"
+            style={tagEditorButtonStyle}
+          >
+            <i className="fa fa-tags"></i>{this.props.currentPageTags.length}
+          </Button>
+        </OverlayTrigger>
+        <Modal show={this.state.isOpenModal} onHide={this.handleCloseModal} id="editTagModal">
+          <Modal.Header closeButton className="bg-primary">
+            <Modal.Title className="text-white">Page Tag</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <PageTagForm crowi={this.props.crowi} currentPageTags={this.props.currentPageTags} addNewTag={this.addNewTag} />
+          </Modal.Body>
+          <Modal.Footer>
+            <Button variant="primary" onClick={this.handleSubmit}>
+              Done
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      </span>
+    );
+  }
+
+}
+
+EditTagModal.propTypes = {
+  crowi: PropTypes.object.isRequired,
+  currentPageTags: PropTypes.array,
+  sendTagData: PropTypes.func,
+};

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

@@ -1,10 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Button from 'react-bootstrap/es/Button';
-import OverlayTrigger from 'react-bootstrap/es/OverlayTrigger';
-import Tooltip from 'react-bootstrap/es/Tooltip';
-import Modal from 'react-bootstrap/es/Modal';
-import PageTagForm from '../PageTagForm';
+// // [TODO] GC-1391
+// import TagLabel from '../TagLabel';
+import EditTagModal from './EditTagModal';
 
 /**
  * show tag labels on view and edit tag button on edit
@@ -16,15 +14,11 @@ export default class TagViewer extends React.Component {
     super(props);
 
     this.state = {
-      currentPageTags: [],
-      newPageTags: [],
-      isOpenModal: false,
+      // currentPageTags: [], // [TODO] GC-1391
+      revisionPageTags: [],
     };
 
-    this.addNewTag = this.addNewTag.bind(this);
-    this.handleShowModal = this.handleShowModal.bind(this);
-    this.handleCloseModal = this.handleCloseModal.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
+    this.sendTagData = this.sendTagData.bind(this);
   }
 
   async componentWillMount() {
@@ -32,67 +26,24 @@ export default class TagViewer extends React.Component {
     const pageId = this.props.pageId;
     if (pageId) {
       const res = await this.props.crowi.apiGet('/pages.getPageTag', { pageId });
-      this.setState({ currentPageTags: res.tags });
+      this.setState({
+        // currentPageTags: res.tags, // [TODO] GC-1391
+        revisionPageTags: res.tags,
+      });
     }
   }
 
-  // receive new tag from PageTagForm component
-  addNewTag(newPageTags) {
-    this.setState({ newPageTags });
-  }
-
-  handleCloseModal() {
-    this.setState({ isOpenModal: false });
-  }
-
-  handleShowModal() {
-    this.setState({ isOpenModal: true });
-  }
-
-  handleSubmit() {
-    this.props.sendTagData(this.state.newPageTags);
-    this.setState({ currentPageTags: this.state.newPageTags, isOpenModal: false });
+  sendTagData(newPageTags) {
+    this.setState({ revisionPageTags: newPageTags });
+    this.props.sendTagData(newPageTags);
   }
 
   render() {
-    const tagEditorButtonStyle = {
-      marginLeft: '0.2em',
-      padding: '0 2px',
-    };
-
     return (
-      <span className="btn-tag-container">
-        <OverlayTrigger
-          key="tooltip"
-          placement="bottom"
-          overlay={(
-            <Tooltip id="tag-edit-button-tooltip" className="tag-tooltip">
-              {this.state.currentPageTags.length !== 0 ? this.state.currentPageTags.join() : 'tag is not set' }
-            </Tooltip>
-          )}
-        >
-          <Button
-            variant="primary"
-            onClick={this.handleShowModal}
-            className="btn btn-default btn-tag"
-            style={tagEditorButtonStyle}
-          >
-            <i className="fa fa-tags"></i>{this.state.currentPageTags.length}
-          </Button>
-        </OverlayTrigger>
-        <Modal show={this.state.isOpenModal} onHide={this.handleCloseModal} id="editTagModal">
-          <Modal.Header closeButton className="bg-primary">
-            <Modal.Title className="text-white">Page Tag</Modal.Title>
-          </Modal.Header>
-          <Modal.Body>
-            <PageTagForm crowi={this.props.crowi} currentPageTags={this.state.currentPageTags} addNewTag={this.addNewTag} />
-          </Modal.Body>
-          <Modal.Footer>
-            <Button variant="primary" onClick={this.handleSubmit}>
-              Done
-            </Button>
-          </Modal.Footer>
-        </Modal>
+      <span className="tag-container">
+        {/* [TODO] GC-1391 */}
+        {/* <TagLabel currentPageTags={this.state.currentPageTags} /> */}
+        <EditTagModal crowi={this.props.crowi} currentPageTags={this.state.revisionPageTags} sendTagData={this.sendTagData} />
       </span>
     );
   }

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

@@ -9,7 +9,7 @@
       <div class="title-container">
         <h1 class="title" id="revision-path"></h1>
         <!-- [TODO] GC-1391 activate -->
-        <!-- <h1 class="title" id="tag-viewer"></h1> -->
+        <h1 class="title" id="tag-viewer"></h1>
         <div id="revision-url" class="url-line"></div>
       </div>
       {% if page %}