read slack channels at page load

lib/form/comment.js

@@ -10,6 +10,6 @@ module.exports = form(
   field('commentForm.comment_position').trim().toInt(),
   field('commentForm.is_markdown').trim().toBooleanStrict(),
 
-  field('slackNotificationForm.isNotification').trim().toBooleanStrict().required(),
-  field('slackNotificationForm.notifSlackChannel').trim(),
+  field('slackNotificationForm.isSlackEnabled').trim().toBooleanStrict().required(),
+  field('slackNotificationForm.slackChannels').trim(),
 );

lib/routes/comment.js

@@ -78,11 +78,11 @@ module.exports = function(crowi, app) {
     });
 
     // slack notification
-    if (slackNotificationForm.isNotification) {
+    if (slackNotificationForm.isSlackEnabled) {
       try {
         const user = await User.findUserByUsername(req.user.username);
         const path = page.path;
-        const channels = slackNotificationForm.notifSlackChannel;
+        const channels = slackNotificationForm.slackChannels;
 
         channels.split(',').map(function(chan) {
           crowi.slack.postComment(createdComment, user, chan, path);

lib/routes/page.js

@@ -10,6 +10,7 @@ module.exports = function(crowi, app) {
     , Bookmark = crowi.model('Bookmark')
     , UserGroupRelation = crowi.model('UserGroupRelation')
     , PageGroupRelation = crowi.model('PageGroupRelation')
+    , UpdatePost = crowi.model('UpdatePost')
     , ApiResponse = require('../util/apiResponse')
     , interceptorManager = crowi.getInterceptorManager()
     , pagePathUtil = require('../util/pagePathUtil')
@@ -227,7 +228,6 @@ module.exports = function(crowi, app) {
   };
 
   actions.pageShowForCrowiPlus = function(req, res) {
-    var UpdatePost = crowi.model('UpdatePost');
     var path = getPathFromRequest(req);
 
     var limit = 50;
@@ -255,6 +255,7 @@ module.exports = function(crowi, app) {
       tree: [],
       pageRelatedGroup: null,
       template: null,
+      slack: '',
     };
 
     var pageTeamplate = 'customlayout-selector/page';
@@ -354,6 +355,15 @@ module.exports = function(crowi, app) {
 
             return;
           })
+          .then(() => {
+            return UpdatePost.findSettingsByPath(renderVars.path)
+              .then(function(data) {
+                data = data.map(e => e.channel);
+                renderVars.slack = data.join(',');
+              }).catch(function(err) {
+                debug('Error occured in getting slack channels', err);
+              });
+          })
           .then(function() {
             return interceptorManager.process('beforeRenderPage', req, res, renderVars);
           })

lib/views/_form.html

@@ -35,7 +35,7 @@
           <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">
         </label>
-        <input class="form-control" type="text" name="pageForm[notify][slack][channel]" value="{{ page.extended.slack|default('') }}" placeholder="slack-channel-name"
+        <input class="form-control" type="text" name="pageForm[notify][slack][channel]" value="{{ slack }}" placeholder="slack-channel-name"
           id="page-form-slack-channel"
           data-toggle="popover"
           title="Slack通知"

lib/views/widget/page_content.html

@@ -6,7 +6,7 @@
   data-page-revision-id="{% if revision %}{{ revision._id.toString() }}{% endif %}"
   data-page-revision-created="{% if revision %}{{ revision.createdAt|datetz('U') }}{% endif %}"
   data-page-is-seen="{% if page and page.isSeenUser(user) %}1{% else %}0{% endif %}"
-  data-slack-channels="{{ page.extended.slack|default('') }}"
+  data-slack-channels="{{ slack }}"
   >
 
   {% include 'page_alerts.html' %}

resource/js/components/PageComment/CommentForm.js

@@ -41,7 +41,7 @@ export default class CommentForm extends React.Component {
       isUploadableFile,
       errorMessage: undefined,
       hasSlackConfig: config.hasSlackConfig,
-      isNotification: false,
+      isSlackEnabled: false,
       slackChannels: this.props.slackChannels,
     };
 
@@ -75,7 +75,7 @@ export default class CommentForm extends React.Component {
   }
 
   onSlackOnChange(value) {
-    this.setState({isNotification: value});
+    this.setState({isSlackEnabled: value});
   }
 
   onChannelChange(value) {
@@ -99,7 +99,7 @@ export default class CommentForm extends React.Component {
         is_markdown: this.state.isMarkdown,
       },
       slackNotificationForm: {
-        isNotification: this.state.isNotification,
+        isSlackEnabled: this.state.isSlackEnabled,
         slackChannels: this.state.slackChannels,
       }
     })
@@ -113,6 +113,7 @@ export default class CommentForm extends React.Component {
         html: '',
         key: 1,
         errorMessage: undefined,
+        isSlackEnabled: false,
       });
       // reset value
       this.refs.editor.setValue('');
@@ -273,6 +274,7 @@ export default class CommentForm extends React.Component {
                       pagePath={this.props.pagePath}
                       onSlackOnChange={this.onSlackOnChange}
                       onChannelChange={this.onChannelChange}
+                      isSlackEnabled={this.state.isSlackEnabled}
                       slackChannels={this.state.slackChannels}
                     />
                   }

resource/js/components/SlackNotification.js

@@ -16,7 +16,7 @@ export default class SlackNotification extends React.Component {
     super(props);
 
     this.state = {
-      isNotification: false,
+      isSlackEnabled: this.props.isSlackEnabled,
       slackChannels: this.props.slackChannels,
     };
 
@@ -26,9 +26,9 @@ export default class SlackNotification extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     this.setState({
+      isSlackEnabled: nextProps.isSlackEnabled,
       slackChannels: nextProps.slackChannels
     });
-    console.log('next props');
   }
 
   updateState(value) {
@@ -38,7 +38,7 @@ export default class SlackNotification extends React.Component {
 
   updateStateCheckbox(event) {
     const value = event.target.checked;
-    this.setState({isNotification: value});
+    this.setState({isSlackEnabled: value});
     this.props.onSlackOnChange(value);
   }
 
@@ -49,7 +49,7 @@ export default class SlackNotification extends React.Component {
           <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}/>
+            <input className="comment-form-slack" type="checkbox" name="slack" value="1" checked={this.state.isSlackEnabled} onChange={this.updateStateCheckbox}/>
           </label>
           <input className="form-control" type="text" value={this.state.slackChannels} placeholder="slack-channel-name"
             id="comment-form-slack-channel"
@@ -74,5 +74,6 @@ SlackNotification.propTypes = {
   pagePath: PropTypes.string,
   onChannelChange: PropTypes.func.isRequired,
   onSlackOnChange: PropTypes.func.isRequired,
+  isSlackEnabled: PropTypes.bool,
   slackChannels: PropTypes.string,
 };

resource/js/legacy/crowi-form.js

@@ -4,14 +4,14 @@ var pagePath= $('#content-main').data('path');
 require('bootstrap-select');
 
 // show/hide
-function FetchPagesUpdatePostAndInsert(path) {
-  $.get('/_api/pages.updatePost', {path: path}, function(res) {
-    if (res.ok) {
-      var $slackChannels = $('#page-form-slack-channel');
-      $slackChannels.val(res.updatePost.join(','));
-    }
-  });
-}
+// function FetchPagesUpdatePostAndInsert(path) {
+//   $.get('/_api/pages.updatePost', {path: path}, function(res) {
+//     if (res.ok) {
+//       var $slackChannels = $('#page-form-slack-channel');
+//       $slackChannels.val(res.updatePost.join(','));
+//     }
+//   });
+// }
 
 var slackConfigured = $('#page-form-setting').data('slack-configured');
 
@@ -29,15 +29,15 @@ if (!pageId) {
 $('a[data-toggle="tab"][href="#edit-form"]').on('show.bs.tab', function() {
   $('body').addClass('on-edit');
 
-  if (slackConfigured) {
-    var $slackChannels = $('#page-form-slack-channel');
-    var slackChannels = $slackChannels.val();
-    // if slackChannels is empty, then fetch default (admin setting)
-    // if not empty, it means someone specified this setting for the page.
-    if (slackChannels === '') {
-      FetchPagesUpdatePostAndInsert(pagePath);
-    }
-  }
+  // if (slackConfigured) {
+  //   var $slackChannels = $('#page-form-slack-channel');
+  //   var slackChannels = $slackChannels.val();
+  //   // if slackChannels is empty, then fetch default (admin setting)
+  //   // if not empty, it means someone specified this setting for the page.
+  //   if (slackChannels === '') {
+  //     FetchPagesUpdatePostAndInsert(pagePath);
+  //   }
+  // }
 });
 
 $('a[data-toggle="tab"][href="#edit-form"]').on('hide.bs.tab', function() {