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

* Fix code based on review feedback.

resource/js/app.js

@@ -188,6 +188,8 @@ const userRelatedGroups = JSON.parse(document.getElementById('user-related-group
   return new UserGroup(value);
 })
 const pageEditorGrantSelectorElem = document.getElementById('page-grant-selector');
+const pageGrantElem = document.getElementById("page-grant");
+const pageGrantGroupElem = document.getElementById("grant-group");
 if (pageEditorGrantSelectorElem) {
   pageGrant = new PageGrant();
   pageGrant.grant = document.getElementById("page-grant").value;
@@ -203,7 +205,8 @@ if (pageEditorGrantSelectorElem) {
       userRelatedGroups={userRelatedGroups} pageGrant={pageGrant}
       onChange={(newPageGrant) => { // set onChange event handler
         // set options
-        pageEditor.setGrant(newPageGrant);
+        pageGrantElem.value = newPageGrant.grant;
+        pageGrantGroupElem.value = newPageGrant.grantGroup.userGroupId || '';
       }} />,
     pageEditorGrantSelectorElem
   );

resource/js/components/PageEditor.js

@@ -10,7 +10,6 @@ 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 {
 
@@ -31,7 +30,6 @@ 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'});
@@ -96,15 +94,6 @@ 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
@@ -422,5 +411,4 @@ PageEditor.propTypes = {
   onSaveSuccess: PropTypes.func,
   editorOptions: PropTypes.instanceOf(EditorOptions),
   previewOptions: PropTypes.instanceOf(PreviewOptions),
-  pageGrant: PropTypes.instanceOf(PageGrant),
 };

resource/js/components/PageEditor/GrantSelector.js

@@ -47,22 +47,11 @@ export default class GrantSelector extends React.Component {
     this.grantSelectorInputEl.value = this.state.pageGrant.grant;
   }
 
-  updateElementValue() {
-    console.log(this.state.pageGrant);
-    if (this.state.pageGrant != null) {
-      document.getElementById("page-grant").value = this.state.pageGrant.grant;
-      if (this.state.pageGrant.grantGroup != null) {
-        document.getElementById("grant-group").value = this.state.pageGrant.grantGroup.grantGroupId;
-      }
-    }
-  }
-
   onChangeGrant(grant) {
     const newValue = this.grantSelectorInputEl.value;
     const newGrant = Object.assign(this.state.pageGrant, {grant: newValue});
     this.setState({ pageGrant: newGrant });
 
-    this.updateElementValue();
     // dispatch event
     this.dispatchOnChange();
   }

resource/js/legacy/crowi-form.js

@@ -45,36 +45,6 @@
     $('body').removeClass('on-edit');
   });
 
-  $('#select-grant > option').on('click', function() {
-    var $selectGrant = $('#select-grant > option');
-    var selectGrant = $selectGrant.val();
-    console.log(selectGrant);
-    if (selectGrant === '5') {
-      console.log('show modal');
-      $('#select-grant-group').modal('show');
-    }
-    else {
-      $('#select-grant-pre').val(selectGrant);
-      $('#grant-group').val("");
-    }
-  });
-
-  $('#grant-group').on('change', function($event) {
-    var $grantGroup = $('#grant-group');
-    var grantGroup = $grantGroup.val();
-    console.log(grantGroup);
-    if (grantGroup != null && grantGroup != "") {
-      var $groupGrant = $('#group-grant');
-      var selectedGroupElement =
-      $groupGrant.replaceWith
-
-    }
-  });
-
-  $('#no-group').on('click', function() {
-    location.href = "/admin/user-groups";
-  });
-
 /**
  * DOM ready
  */

resource/styles/scss/_override-bootstrap-collapse-width.scss

@@ -1,8 +0,0 @@
-// override bootstrap-collapse behavior (holizontal collapse)
-// see: https://getbootstrap.com/docs/3.3/javascript/#collapse, https://stackoverflow.com/a/18602739/1596547
-.collapsing.width {
-  -webkit-transition-property: width, visibility;
-  transition-property: width, visibility;
-  width: 0;
-  height: auto;
-}