WIP: impl SavePageControls component

lib/views/_form.html

@@ -14,26 +14,29 @@
 </div>
 {% endif %}
 
-<form action="/_/edit" id="page-form" method="post" class="{% if isUploadable() %}uploadable{% endif %} page-form">
-
+<!-- <form action="/_/edit" id="page-form" method="post" class="{% if isUploadable() %}uploadable{% endif %} page-form"> -->
+  <!--
   <input type="hidden" id="form-body" name="pageForm[body]" value="{% if pageForm.body %}{{ pageForm.body }}{% endif %}">
   <input type="hidden" name="pageForm[path]" value="{{ path | preventXss }}">
   <input type="hidden" name="pageForm[currentRevision]" value="{{ pageForm.currentRevision|default(page.revision._id.toString()) }}">
+   -->
   <div class="page-editor-footer d-flex flex-row align-items-center justify-content-between">
     <div>
       <div id="page-editor-options-selector" class="hidden-xs"></div>
     </div>
 
-    <div class="form-inline d-flex align-items-center" id="page-form-setting">
-      <div id="editor-slack-notification" class="mr-2"></div>
-      <div id="page-grant-selector"></div>
+    <div id="save-page-controls"
+      data-page-grant="{{ page.grant }}"
+      data-grant-group="{{ pageRelatedGroup._id.toString() }}"
+      data-grant-group-name="{{ pageRelatedGroup.name }}">
+      <!--
       <input type="hidden" id="page-grant" name="pageForm[grant]" value="{{ page.grant }}">
       <input type="hidden" id="grant-group" name="pageForm[grantUserGroupId]" value="{{ pageRelatedGroup._id.toString() }}">
       <input type="hidden" id="edit-form-csrf" name="_csrf" value="{{ csrf() }}">
-      <button type="submit" class="btn btn-primary btn-submit" id="edit-form-submit">{{ t('Update') }}</button>
+       -->
     </div>
   </div>
-</form>
-<input type="hidden" id="grant-group-name" value="{{ pageRelatedGroup.name }}">{# for storing group name #}
+<!-- </form> -->
+<!-- <input type="hidden" id="grant-group-name" value="{{ pageRelatedGroup.name }}">{# for storing group name #} -->
 <div class="file-module hidden">
 </div>

resource/js/app.js

@@ -15,14 +15,13 @@ import SearchPage       from './components/SearchPage';
 import PageEditor       from './components/PageEditor';
 import OptionsSelector  from './components/PageEditor/OptionsSelector';
 import { EditorOptions, PreviewOptions } from './components/PageEditor/OptionsSelector';
-import GrantSelector    from './components/PageEditor/GrantSelector';
+import SavePageControls from './components/SavePageControls';
 import PageEditorByHackmd from './components/PageEditorByHackmd';
 import Page             from './components/Page';
 import PageListSearch   from './components/PageListSearch';
 import PageHistory      from './components/PageHistory';
 import PageComments     from './components/PageComments';
 import CommentForm from './components/PageComment/CommentForm';
-import SlackNotification from './components/SlackNotification';
 import PageAttachment   from './components/PageAttachment';
 import SeenUserList     from './components/SeenUserList';
 import RevisionPath     from './components/Page/RevisionPath';
@@ -236,18 +235,18 @@ if (writeCommentElem) {
 }
 
 // render slack notification form
-const editorSlackElem = document.getElementById('editor-slack-notification');
-if (editorSlackElem) {
-  ReactDOM.render(
-    <SlackNotification
-      crowi={crowi}
-      pageId={pageId}
-      pagePath={pagePath}
-      isSlackEnabled={false}
-      slackChannels={slackChannels}
-      formName='pageForm' />,
-    editorSlackElem);
-}
+// const editorSlackElem = document.getElementById('editor-slack-notification');
+// if (editorSlackElem) {
+//   ReactDOM.render(
+//     <SlackNotification
+//       crowi={crowi}
+//       pageId={pageId}
+//       pagePath={pagePath}
+//       isSlackEnabled={false}
+//       slackChannels={slackChannels}
+//       formName='pageForm' />,
+//     editorSlackElem);
+// }
 
 // render OptionsSelector
 const pageEditorOptionsSelectorElem = document.getElementById('page-editor-options-selector');
@@ -267,34 +266,38 @@ if (pageEditorOptionsSelectorElem) {
   );
 }
 // render GrantSelector
-const pageEditorGrantSelectorElem = document.getElementById('page-grant-selector');
-if (pageEditorGrantSelectorElem) {
-  const grantElem = document.getElementById('page-grant');
-  const grantGroupElem = document.getElementById('grant-group');
-  const grantGroupNameElem = document.getElementById('grant-group-name');
-  /* eslint-disable no-inner-declarations */
-  function updateGrantElem(pageGrant) {
-    grantElem.value = pageGrant;
-  }
-  function updateGrantGroupElem(grantGroupId) {
-    grantGroupElem.value = grantGroupId;
-  }
-  function updateGrantGroupNameElem(grantGroupName) {
-    grantGroupNameElem.value = grantGroupName;
-  }
-  /* eslint-enable */
-  const pageGrant = +grantElem.value;
-  const pageGrantGroupId = grantGroupElem.value;
-  const pageGrantGroupName = grantGroupNameElem.value;
+// const pageEditorGrantSelectorElem = document.getElementById('page-grant-selector');
+// if (pageEditorGrantSelectorElem) {
+//   const grantElem = document.getElementById('page-grant');
+//   const grantGroupElem = document.getElementById('grant-group');
+//   const grantGroupNameElem = document.getElementById('grant-group-name');
+//   const pageGrant = +grantElem.value;
+//   const pageGrantGroupId = grantGroupElem.value;
+//   const pageGrantGroupName = grantGroupNameElem.value;
+//   ReactDOM.render(
+//     <I18nextProvider i18n={i18n}>
+//       <GrantSelector crowi={crowi}
+//         pageGrant={pageGrant} pageGrantGroupId={pageGrantGroupId} pageGrantGroupName={pageGrantGroupName}
+//         onChangePageGrant={updateGrantElem}
+//         onDeterminePageGrantGroupId={updateGrantGroupElem}
+//         onDeterminePageGrantGroupName={updateGrantGroupNameElem} />
+//     </I18nextProvider>,
+//     pageEditorGrantSelectorElem
+//   );
+// }
+// render SavePageControls
+const savePageControlsElem = document.getElementById('save-page-controls');
+if (savePageControlsElem) {
+  const pageGrant = +savePageControlsElem.dataset.pageGrant;
+  const pageGrantGroupId = savePageControlsElem.dataset.grantGroup;
+  const pageGrantGroupName = savePageControlsElem.dataset.grantGroupName;
   ReactDOM.render(
     <I18nextProvider i18n={i18n}>
-      <GrantSelector crowi={crowi}
-        pageGrant={pageGrant} pageGrantGroupId={pageGrantGroupId} pageGrantGroupName={pageGrantGroupName}
-        onChangePageGrant={updateGrantElem}
-        onDeterminePageGrantGroupId={updateGrantGroupElem}
-        onDeterminePageGrantGroupName={updateGrantGroupNameElem} />
+      <SavePageControls crowi={crowi}
+        pageId={pageId} pagePath={pagePath} slackChannels={slackChannels}
+        pageGrant={pageGrant} pageGrantGroupId={pageGrantGroupId} pageGrantGroupName={pageGrantGroupName} />
     </I18nextProvider>,
-    pageEditorGrantSelectorElem
+    savePageControlsElem
   );
 }
 

resource/js/components/SavePageControls.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
+
+import * as toastr from 'toastr';
+
+import SlackNotification from './SlackNotification';
+import GrantSelector from './SavePageControls/GrantSelector';
+
+class SavePageControls extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+    };
+
+    this.apiErrorHandler = this.apiErrorHandler.bind(this);
+  }
+
+  componentWillMount() {
+  }
+
+  save() {
+    const params = {
+    };
+    this.props.crowi.apiPost('/page.save', params)
+      .then(res => {
+        if (!res.ok) {
+          throw new Error(res.error);
+        }
+
+      })
+      .catch(this.apiErrorHandler)
+      .then(() => {
+      });
+  }
+
+  apiErrorHandler(error) {
+    toastr.error(error.message, 'Error occured', {
+      closeButton: true,
+      progressBar: true,
+      newestOnTop: false,
+      showDuration: '100',
+      hideDuration: '100',
+      timeOut: '3000',
+    });
+  }
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      <div className="d-flex align-items-center form-inline">
+        <div className="mr-2">
+          <SlackNotification
+            crowi={this.props.crowi}
+            pageId={this.props.pageId}
+            pagePath={this.props.pagePath}
+            isSlackEnabled={false}
+            slackChannels={this.props.slackChannels}
+            formName='pageForm' />
+        </div>
+
+        <div className="mr-2">
+          <GrantSelector crowi={this.props.crowi}
+            pageGrant={this.props.pageGrant}
+            pageGrantGroupId={this.props.pageGrantGroupId}
+            pageGrantGroupName={this.props.pageGrantGroupName} />
+        </div>
+
+        <button className="btn btn-primary btn-submit">{t('Save')}</button>
+      </div>
+    );
+  }
+}
+
+SavePageControls.propTypes = {
+  t: PropTypes.func.isRequired,               // i18next
+  crowi: PropTypes.object.isRequired,
+  // for SlackNotification
+  pageId: PropTypes.string,
+  pagePath: PropTypes.string,
+  slackChannels: PropTypes.string,
+  // for GrantSelector
+  pageGrant: PropTypes.number,
+  pageGrantGroupId: PropTypes.string,
+  pageGrantGroupName: PropTypes.string,
+};
+
+export default translate()(SavePageControls);

resource/js/components/PageEditor/GrantSelector.js → resource/js/components/SavePageControls/GrantSelector.js

@@ -120,36 +120,36 @@ class GrantSelector extends React.Component {
     }
 
     this.setState({ pageGrant, pageGrantGroup: null });
-    // dispatch event
-    this.dispatchOnChangePageGrant(pageGrant);
-    this.dispatchOnDeterminePageGrantGroup(null);
+    // // dispatch event
+    // this.dispatchOnChangePageGrant(pageGrant);
+    // this.dispatchOnDeterminePageGrantGroup(null);
   }
 
   groupListItemClickHandler(pageGrantGroup) {
     this.setState({ pageGrant: 5, pageGrantGroup });
 
-    // dispatch event
-    this.dispatchOnChangePageGrant(5);
-    this.dispatchOnDeterminePageGrantGroup(pageGrantGroup);
+    // // dispatch event
+    // this.dispatchOnChangePageGrant(5);
+    // this.dispatchOnDeterminePageGrantGroup(pageGrantGroup);
 
     // hide modal
     this.hideSelectGroupModal();
   }
 
-  dispatchOnChangePageGrant(pageGrant) {
-    if (this.props.onChangePageGrant != null) {
-      this.props.onChangePageGrant(pageGrant);
-    }
-  }
-
-  dispatchOnDeterminePageGrantGroup(pageGrantGroup) {
-    if (this.props.onDeterminePageGrantGroupId != null) {
-      this.props.onDeterminePageGrantGroupId(pageGrantGroup ? pageGrantGroup._id : '');
-    }
-    if (this.props.onDeterminePageGrantGroupName != null) {
-      this.props.onDeterminePageGrantGroupName(pageGrantGroup ? pageGrantGroup.name : '');
-    }
-  }
+  // dispatchOnChangePageGrant(pageGrant) {
+  //   if (this.props.onChangePageGrant != null) {
+  //     this.props.onChangePageGrant(pageGrant);
+  //   }
+  // }
+
+  // dispatchOnDeterminePageGrantGroup(pageGrantGroup) {
+  //   if (this.props.onDeterminePageGrantGroupId != null) {
+  //     this.props.onDeterminePageGrantGroupId(pageGrantGroup ? pageGrantGroup._id : '');
+  //   }
+  //   if (this.props.onDeterminePageGrantGroupName != null) {
+  //     this.props.onDeterminePageGrantGroupName(pageGrantGroup ? pageGrantGroup.name : '');
+  //   }
+  // }
 
   /**
    * Render grant selector DOM.
@@ -196,8 +196,8 @@ class GrantSelector extends React.Component {
 
     const bsClassName = 'form-control-dummy'; // set form-control* to shrink width
     return (
-      <FormGroup className="m-b-0">
-        <FormControl componentClass="select" placeholder="select" defaultValue={selectedValue} bsClass={bsClassName} className="btn-group-sm page-grant-selector selectpicker"
+      <FormGroup className="grant-selector m-b-0">
+        <FormControl componentClass="select" placeholder="select" defaultValue={selectedValue} bsClass={bsClassName} className="btn-group-sm selectpicker"
           onChange={this.changeGrantHandler}
           inputRef={ el => this.grantSelectorInputEl=el }>
 
@@ -252,7 +252,7 @@ class GrantSelector extends React.Component {
 
   render() {
     return <React.Fragment>
-      <div className="m-r-5">{this.renderGrantSelector()}</div>
+      {this.renderGrantSelector()}
       {this.renderSelectGroupModal()}
     </React.Fragment>;
   }
@@ -261,13 +261,9 @@ class GrantSelector extends React.Component {
 GrantSelector.propTypes = {
   t: PropTypes.func.isRequired,               // i18next
   crowi: PropTypes.object.isRequired,
-  isGroupModalShown: PropTypes.bool,
   pageGrant: PropTypes.number,
   pageGrantGroupId: PropTypes.string,
   pageGrantGroupName: PropTypes.string,
-  onChangePageGrant: PropTypes.func,
-  onDeterminePageGrantGroupId: PropTypes.func,
-  onDeterminePageGrantGroupName: PropTypes.func,
 };
 
 export default translate()(GrantSelector);

resource/js/components/SlackNotification.js

@@ -33,13 +33,19 @@ export default class SlackNotification extends React.Component {
 
   updateState(value) {
     this.setState({slackChannels: value});
-    this.props.onChannelChange(value);
+    // dispatch event
+    if (this.props.onChannelChange != null) {
+      this.props.onChannelChange(value);
+    }
   }
 
   updateStateCheckbox(event) {
     const value = event.target.checked;
     this.setState({isSlackEnabled: value});
-    this.props.onSlackOnChange(value);
+    // dispatch event
+    if (this.props.onSlackOnChange != null) {
+      this.props.onSlackOnChange(value);
+    }
   }
 
   render() {
@@ -70,9 +76,9 @@ SlackNotification.propTypes = {
   crowi: PropTypes.object.isRequired,
   pageId: PropTypes.string,
   pagePath: PropTypes.string,
-  onChannelChange: PropTypes.func,
-  onSlackOnChange: PropTypes.func,
   isSlackEnabled: PropTypes.bool,
   slackChannels: PropTypes.string,
   formName: PropTypes.string,
+  onChannelChange: PropTypes.func,
+  onSlackOnChange: PropTypes.func,
 };

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

@@ -296,10 +296,8 @@ body.on-edit {
       background-color: $bodycolor;
     }
 
-    .page-form {
-      .page-editor-footer {
-        border-top-color: $border;
-      }
+    .page-editor-footer {
+      border-top-color: $border;
     }
   }
 }

resource/styles/scss/_on-edit.scss

@@ -1,9 +1,9 @@
 @import 'editor-overlay';
 
 body:not(.on-edit) {
-  // hide #page-form
-  #page-form {
-    display: none;
+  // hide .page-editor-footer
+  .page-editor-footer {
+    display: none !important;
   }
 }
 
@@ -242,7 +242,7 @@ body.on-edit {
       }
     }
 
-    #page-grant-selector {
+    .grant-selector {
       .btn-group {
         min-width: 150px;
       }