Merge remote-tracking branch 'origin/feat/post-comment-notification' into feat/post-comment-notification

lib/views/_form.html

@@ -30,11 +30,11 @@
     <div class="form-inline page-form-setting d-flex align-items-center" id="page-form-setting" data-slack-configured="{{ slackConfigured() }}">
       {% if slackConfigured() %}
       <span class="input-group input-group-sm input-group-slack extended-setting m-r-5">
-        <div class="input-group-addon">
+        <label class="input-group-addon">
           <img id="slack-mark-white" src="/images/icons/slack/mark-monochrome_white.svg" width="18" height="18">
           <img id="slack-mark-black" src="/images/icons/slack/mark-monochrome_black.svg" width="18" height="18">
           <input class="" type="checkbox" name="pageForm[notify][slack][on]" value="1">
-        </div>
+        </label>
         <input class="form-control" type="text" name="pageForm[notify][slack][channel]" value="{{ page.extended.slack|default('') }}" placeholder="slack-channel-name"
           id="page-form-slack-channel"
           data-toggle="popover"

resource/js/components/PageComment/CommentForm.js

@@ -34,6 +34,8 @@ export default class CommentForm extends React.Component {
     this.state = {
       comment: '',
       isMarkdown: true,
+      isNotification: false,
+      notifSlackChannel: '',
       html: '',
       key: 1,
       isUploadable,
@@ -43,8 +45,10 @@ export default class CommentForm extends React.Component {
 
     this.growiRenderer = new GrowiRenderer(this.props.crowi, this.props.crowiOriginRenderer, {mode: 'comment'});
 
+    this.init = this.init.bind(this);
     this.updateState = this.updateState.bind(this);
     this.updateStateCheckbox = this.updateStateCheckbox.bind(this);
+    this.updateChannel =this.updateChannel.bind(this);
     this.postComment = this.postComment.bind(this);
     this.renderHtml = this.renderHtml.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
@@ -52,15 +56,55 @@ export default class CommentForm extends React.Component {
     this.onUpload = this.onUpload.bind(this);
   }
 
+  componentWillMount() {
+    const pageId = this.props.pageId;
+
+    if (pageId) {
+      this.init();
+    }
+
+    this.retrieveData = this.retrieveData.bind(this);
+  }
+
+  init() {
+    if (!this.props.pageId) {
+      return ;
+    }
+    this.retrieveData();
+  }
+
+  /**
+   * Load data of comments and store them in state
+   */
+  retrieveData() {
+    // get data (desc order array)
+    this.props.crowi.apiGet('/pages.updatePost', {path: this.props.pagePath})
+    .then(res => {
+      if (res.ok) {
+        this.setState({notifSlackChannel: res.updatePost.join(',')});
+      }
+    });
+  }
+
   updateState(value) {
     this.setState({comment: value});
   }
 
   updateStateCheckbox(event) {
     const value = event.target.checked;
-    this.setState({isMarkdown: value});
-    // changeMode
-    this.refs.editor.setGfmMode(value);
+    const name = event.target.name;
+    if (name === "isMarkdown") {
+      this.setState({isMarkdown: value});
+      // changeMode
+      this.refs.editor.setGfmMode(value);
+    }
+    if ( name === "slack") {
+      this.setState({isNotification: value})
+    }
+  }
+
+  updateChannel(value) {
+    this.setState({notifSlackChannel: value})
   }
 
   handleSelect(key) {
@@ -243,10 +287,29 @@ export default class CommentForm extends React.Component {
                       <input type="checkbox" id="comment-form-is-markdown" name="isMarkdown" checked={this.state.isMarkdown} value="1" onChange={this.updateStateCheckbox} /> Markdown
                     </label>
                   }
+
                   <div style={{flex: 1}}></div>{/* spacer */}
                   { this.state.errorMessage &&
                     <span className="text-danger text-right mr-2">{this.state.errorMessage}</span>
                   }
+                  <div className="form-inline d-flex align-items-center" id="comment-form-setting">
+                    <span className="input-group input-group-sm input-group-slack extended-setting m-r-5">
+                      <label className="input-group-addon">
+                        <img id="slack-mark-white" src="/images/icons/slack/mark-monochrome_white.svg" width="18" height="18"/>
+                        <img id="slack-mark-black" src="/images/icons/slack/mark-monochrome_black.svg" width="18" height="18"/>
+                        <input className="comment-form-slack" type="checkbox" name="slack" value="1" onChange={this.updateStateCheckbox}/>
+                      </label>
+                      <input className="form-control" type="text" value={this.state.notifSlackChannel} placeholder="slack-channel-name"
+                        id="comment-form-slack-channel"
+                        data-toggle="popover"
+                        title="Slack通知"
+                        data-content="通知するにはチェックを入れてください。カンマ区切りで複数チャンネルに通知することができます。"
+                        data-trigger="focus"
+                        data-placement="top"
+                        onChange={e => this.updateChannel(e.target.value)}
+                      />
+                    </span>
+                  </div>
                   <Button type="submit" value="Submit" bsStyle="primary" className="fcbtn btn btn-sm btn-primary btn-outline btn-rounded btn-1b">
                     Comment
                   </Button>
@@ -260,6 +323,8 @@ export default class CommentForm extends React.Component {
   }
 }
 
+
+
 CommentForm.propTypes = {
   crowi: PropTypes.object.isRequired,
   crowiOriginRenderer: PropTypes.object.isRequired,

resource/styles/agile-admin/inverse/colors/_apply-colors-dark.scss

@@ -162,3 +162,12 @@ legend {
     }
   }
 }
+
+/*
+ * GROWI comment form
+ */
+ .comment-form {
+  #slack-mark-black {
+    display: none;
+  }
+}

resource/styles/agile-admin/inverse/colors/_apply-colors-light.scss

@@ -78,3 +78,12 @@
     }
   }
 }
+
+/*
+ * GROWI comment form
+ */
+ .comment-form {
+  #slack-mark-white {
+    display: none;
+  }
+}

resource/styles/scss/_notification.scss

@@ -0,0 +1,10 @@
+// Slack
+.input-group-slack {
+  .input-group-addon {
+    padding: 2px 8px;
+    line-height: 1em;
+    img, input {
+      vertical-align: middle;
+    }
+  }
+}

resource/styles/scss/_on-edit.scss

@@ -113,18 +113,6 @@ body.on-edit {
           width: 100px;
         }
       }
-
-      // slack
-      .input-group-slack {
-        .input-group-addon {
-          padding: 2px 8px;
-          line-height: 1em;
-          img, input {
-            vertical-align: middle;
-          }
-        }
-      }
-
     }
   }
 

resource/styles/scss/style.scss

@@ -26,6 +26,7 @@
 @import 'layout_crowi_sidebar';
 @import 'layout_growi';
 @import 'login';
+@import 'notification';
 @import 'on-edit';
 @import 'page_list';
 @import 'page';