# Improve/346 Disable group select-box when the user does not Choose the grant "Only inside the group"

* Change group select UI to React Component.(inprogress...)

lib/views/_form.html

@@ -46,10 +46,15 @@
       </span>
       {% endif %}
 
-      <div id="page-grant-selector"></div>
-      <!-- {% if forceGrant %}
+      {% if forceGrant %}
       <input type="hidden" name="pageForm[grant]" value="{{ forceGrant }}">
       {% else %}
+      <div>
+        <div id="page-grant-selector"></div>
+      </div>
+      <input type="hidden" name="pageForm[grant]" value="{{ pageForm.grant }}">
+      <input id="grant-group" type="hidden" name="pageForm[grantUserGroupId]" value="{% if pageForm.grant %}{{ pageForm.grant }}{% endif %}">
+<!--
       <select id="select-grant" name="pageForm[grant]" class="m-r-5 selectpicker btn-group-sm">
         {% for grantId, grantLabel in consts.pageGrants %}
         <option value="{{ grantId }}" {% if pageForm.grant|default(page.grant) == grantId %}selected{% endif %}>{{ t(grantLabel) }}</option>

resource/js/app.js

@@ -10,7 +10,7 @@ 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 GrantSelector, { UserGroup, PageGrant } from './components/PageEditor/GrantSelector';
 import Page             from './components/Page';
 import PageListSearch   from './components/PageListSearch';
 import PageHistory      from './components/PageHistory';
@@ -42,6 +42,7 @@ let pageRevisionCreatedAt = null;
 let pagePath;
 let pageContent = '';
 let markdown = '';
+let pageGrant = null;
 if (mainContent !== null) {
   pageId = mainContent.getAttribute('data-page-id');
   pageRevisionId = mainContent.getAttribute('data-page-revision-id');
@@ -158,6 +159,7 @@ if (pageEditorElem) {
         pageId={pageId} revisionId={pageRevisionId} pagePath={pagePath}
         markdown={markdown}
         editorOptions={editorOptions} previewOptions={previewOptions}
+        pageGrant={pageGrant}
         onSaveSuccess={onSaveSuccess} />,
     pageEditorElem
   );
@@ -182,20 +184,16 @@ if (pageEditorOptionsSelectorElem) {
   );
 }
 // render GrantSelector
+const userRelatedGroups = new UserGroup(crowi.userRelatedGroups);
 const pageEditorGrantSelectorElem = document.getElementById('page-grant-selector');
 if (pageEditorGrantSelectorElem) {
-  const userRelatedGroups = window.getElementById("user-related-group-data").value;
-  const pageGrant = window.getElementById("page-grant").value;
+  const pageGrant = document.getElementById("page-grant").value;
   ReactDOM.render(
     <GrantSelector crowi={crowi}
-      userRelatedGroups={userRelatedGroups} pageGrant={pageGrant}
-      onChange={(newPageGrant, newPreviewOptions) => { // set onChange event handler
+      userRelatedGroups={userRelatedGroups} pageGrant={new PageGrant(pageGrant)}
+      onChange={(newPageGrant) => { // set onChange event handler
         // set options
-        pageEditor.setEditorOptions(newEditorOptions);
-        pageEditor.setPreviewOptions(newPreviewOptions);
-        // save
-        crowi.saveEditorOptions(newEditorOptions);
-        crowi.savePreviewOptions(newPreviewOptions);
+        pageEditor.setGrant(newPageGrant);
       }} />,
     pageEditorGrantSelectorElem
   );

resource/js/components/PageEditor.js

@@ -10,6 +10,7 @@ import { EditorOptions, PreviewOptions } from './PageEditor/OptionsSelector';
 import Editor from './PageEditor/Editor';
 import Preview from './PageEditor/Preview';
 import scrollSyncHelper from './PageEditor/ScrollSyncHelper';
+import { PageGrant } from './PageEditor/GrantSelector';
 
 export default class PageEditor extends React.Component {
 
@@ -30,6 +31,7 @@ export default class PageEditor extends React.Component {
       isMathJaxEnabled,
       editorOptions: this.props.editorOptions,
       previewOptions: this.props.previewOptions,
+      pageGrant: this.props.pageGrant,
     };
 
     this.growiRenderer = new GrowiRenderer(this.props.crowi, this.props.crowiRenderer, {mode: 'editor'});
@@ -94,6 +96,15 @@ export default class PageEditor extends React.Component {
     this.setState({ previewOptions });
   }
 
+  /**
+   * set page grant
+   * @param {any} pageGrant
+   * @memberof PageEditor
+   */
+  setGrant(pageGrant) {
+    this.setState({ pageGrant });
+  }
+
   /**
    * the change event handler for `markdown` state
    * @param {string} value
@@ -109,6 +120,14 @@ export default class PageEditor extends React.Component {
   onSave() {
     let endpoint;
     let data;
+    let grantData;
+    let grantGroupId;
+    if (this.state.pageGrant != null) {
+      grantData = this.state.pageGrant.grant;
+      if (this.state.pageGrant.grantGroup != null) {
+        grantGroupId = this.state.pageGrant.grantGroup.userGroupId;
+      }
+    }
 
     // update
     if (this.state.pageId != null) {
@@ -117,6 +136,8 @@ export default class PageEditor extends React.Component {
         page_id: this.state.pageId,
         revision_id: this.state.revisionId,
         body: this.state.markdown,
+        grant: grantData,
+        grantUserGroupId: grantGroupId,
       };
     }
     // create
@@ -125,6 +146,8 @@ export default class PageEditor extends React.Component {
       data = {
         path: this.props.pagePath,
         body: this.state.markdown,
+        grant: grantData,
+        grantUserGroupId: grantGroupId,
       };
     }
 
@@ -399,4 +422,5 @@ PageEditor.propTypes = {
   onSaveSuccess: PropTypes.func,
   editorOptions: PropTypes.instanceOf(EditorOptions),
   previewOptions: PropTypes.instanceOf(PreviewOptions),
+  pageGrant: PropTypes.instanceOf(PageGrant),
 };

resource/js/components/PageEditor/GrantSelector.js

@@ -25,13 +25,16 @@ export default class GrantSelector extends React.Component {
       isGroupModalShown: false,
     }
 
-    this.availableGrants = {
-      1:'Public',
-      2:'Anyone with the linc',
+    this.availableGrants = [1, 2,/* 3,*/ 4, 5]
+
+    this.availableGrantLabels = {
+      1: 'Public',
+      2: 'Anyone with the linc',
       // 3:'Specified users only',
-      4:'Just me',
-      5:'Only inside the group',
+      4: 'Just me',
+      5: 'Only inside the group',
     }
+
     this.onChangeGrant = this.onChangeGrant.bind(this);
   }
 
@@ -40,7 +43,7 @@ export default class GrantSelector extends React.Component {
   }
 
   init() {
-    this.grantSelectorInputEl.value = this.state.editorOptions.theme;
+    this.grantSelectorInputEl.value = this.state.pageGrant.grant;
   }
 
   onChangeGrant(userGroup) {
@@ -75,20 +78,20 @@ export default class GrantSelector extends React.Component {
   }
 
   renderGrantSelector() {
-    const optionElems = this.availableGrants.map((entry) => {
-      return <option key={entry.key} value={entry.key}>{entry.value}</option>;
+    const grantElems = this.availableGrants.map((grant) => {
+      return <option key={grant} value={grant}>{this.availableGrantLabels[grant]}</option>;
     });
 
     const bsClassName = 'form-control-dummy'; // set form-control* to shrink width
 
     return (
       <FormGroup controlId="formControlsSelect">
-        <ControlLabel>Theme:</ControlLabel>
+        <ControlLabel>Grant:</ControlLabel>
         <FormControl componentClass="select" placeholder="select" bsClass={bsClassName} className="btn-group-sm selectpicker"
             onChange={this.onChangeGrant}
             inputRef={ el => this.grantSelectorInputEl=el }>
 
-          {optionElems}
+          {grantElems}
 
         </FormControl>
       </FormGroup>
@@ -186,7 +189,7 @@ export default class GrantSelector extends React.Component {
 
   render() {
     return <span>
-      <span className="m-l-5">{this.renderThemeSelector()}</span>
+      <span className="m-l-5">{this.renderGrantSelector()}</span>
     </span>
   }
 }

resource/js/util/Crowi.js

@@ -41,6 +41,7 @@ export default class Crowi {
     this.userById   = {};
     this.draft = {};
     this.editorOptions = {};
+    this.userRelatedGroups = {};
 
     this.recoverData();
   }