rendering tag-label-component

src/client/js/app.js

@@ -33,6 +33,7 @@ import PageStatusAlert from './components/PageStatusAlert';
 import RevisionPath from './components/Page/RevisionPath';
 import TagViewer from './components/Page/TagViewer';
 import RevisionUrl from './components/Page/RevisionUrl';
+import TagLabel from './components/Page/TagLabel';
 import BookmarkButton from './components/BookmarkButton';
 import LikeButton from './components/LikeButton';
 import PagePathAutoComplete from './components/PagePathAutoComplete';
@@ -310,8 +311,9 @@ if (pageId) {
 if (pagePath) {
   componentMappings.page = <Page crowi={crowi} crowiRenderer={crowiRenderer} markdown={markdown} pagePath={pagePath} onSaveWithShortcut={saveWithShortcut} />;
   componentMappings['revision-path'] = <RevisionPath pagePath={pagePath} crowi={crowi} />;
-  componentMappings['tag-viewer'] = <TagViewer crowi={crowi} pageId={pageId} sendTagData={setTagData} />;
-  componentMappings['revision-url'] = <RevisionUrl pageId={pageId} pagePath={pagePath} />;
+  // <!-- [TODO] once commentout -->
+  // componentMappings['revision-url'] = <RevisionUrl crowi={crowi} pageId={pageId} pagePath={pagePath} sendTagData={setTagData} />;
+  componentMappings['tag-label'] = <TagLabel crowi={crowi} pageId={pageId} sendTagData={setTagData} />;
 }
 
 Object.keys(componentMappings).forEach((key) => {

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

@@ -1,35 +1,114 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Modal from 'react-bootstrap/es/Modal';
+import Button from 'react-bootstrap/es/Button';
+import PageTagForm from '../PageTagForm';
 
 export default class TagLabel extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentPageTags: [],
+      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);
+
+  }
+
+  async componentWillMount() {
+    // set pageTag on button
+    const pageId = this.props.pageId;
+    if (pageId) {
+      const res = await this.props.crowi.apiGet('/pages.getPageTag', { pageId });
+      this.setState({ currentPageTags: res.tags });
+      this.props.sendTagData(res.tags);
+    }
+  }
+
+  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 });
+  }
+
   render() {
     const tags = [];
-    const tagListstyle = {
-      borderRadius: '5px',
+    const tagStyle = {
+      float: 'left',
+      color: 'gray',
+    };
+
+    const tagListStyle = {
+      border: 'none',
+      fontSize: '10px',
       marginLeft: '5px',
-      fontSize: '12px',
-      height: '20px',
-      padding: '0px 10px',
     };
 
-    if (this.props.currentPageTags.length === 0) {
-      return (
-        <div style={tagListstyle}>
-        tag is not set
-        </div>
-      );
-    }
+    const tagButtonStyle = {
+      cursor: 'pointer',
+      fontSize: '15px',
+      marginLeft: '15px',
+      marginRight: '10px',
+      paddingTop: '1px',
+      float: 'left',
+    };
+
 
-    for (let i = 0; i < this.props.currentPageTags.length; i++) {
+    const tagLinkStyle = {
+      marginLeft: '2px',
+      color: 'gray',
+      fontSize: '10px',
+    };
+
+    for (let i = 0; i < this.state.currentPageTags.length; i++) {
       tags.push(
-        <div style={tagListstyle} key={i.toString()} className="label label-info">{this.props.currentPageTags[i]}</div>,
+        <i style={tagListStyle} className="icon-tag"></i>,
+        <a key={i.toString()} style={tagLinkStyle}>{this.state.currentPageTags[i]}</a>,
       );
+
     }
 
     return (
-      <div>
+      <div style={tagStyle}>
+        <i
+          className="icon-wrench"
+          style={tagButtonStyle}
+          onClick={this.handleShowModal}
+        >
+        </i>
         {tags}
+        <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>
       </div>
     );
   }
@@ -37,5 +116,7 @@ export default class TagLabel extends React.Component {
 }
 
 TagLabel.propTypes = {
-  currentPageTags: PropTypes.array.isRequired,
+  crowi: PropTypes.object.isRequired,
+  pageId: PropTypes.string,
+  sendTagData: PropTypes.func.isRequired,
 };

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

@@ -11,6 +11,7 @@
         <!-- [TODO] GC-1391 activate -->
         <!-- <h1 class="title" id="tag-viewer"></h1> -->
         <div id="revision-url" class="url-line"></div>
+        <!-- <div class="title" id="tag-label"></div> -->
       </div>
       {% if page %}
       {% include '../../widget/header-buttons.html' %}