# 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.
  * 復帰中 + 追加修正

lib/views/_form.html

@@ -52,7 +52,7 @@
       <div>
         <div id="page-grant-selector"></div>
       </div>
-      <input type="hidden" name="pageForm[grant]" value="{{ pageForm.grant }}">
+      <input type="hidden" id="page-grant" name="pageForm[grant]" value="{{ pageForm.grant|default(page.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">
@@ -79,7 +79,7 @@
         </select>
       </div>
       {% endif %} -->
-      <input type="hidden" id="page-grant" value="{{ page.grant }}">
+      <!-- <input type="hidden" id="page-grant" value="{{ page.grant }}"> -->
       <input type="hidden" id="user-related-group-data" value="{{userRelatedGroups}}">
       <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>

resource/js/app.js

@@ -191,11 +191,12 @@ const pageEditorGrantSelectorElem = document.getElementById('page-grant-selector
 if (pageEditorGrantSelectorElem) {
   pageGrant = new PageGrant();
   pageGrant.grant = document.getElementById("page-grant").value;
-  const grantGroupData = document.getElementById("grant-group").value;
+  const grantGroupData = JSON.parse(document.getElementById("grant-group").textContent || '{}');
   if (grantGroupData != null) {
     const grantGroup = new UserGroup();
-    grantGroup.userGroup =
-    pageGrant.grantGroup = new UserGroup();
+    grantGroup.userGroupId = grantGroupData.id;
+    grantGroup.userGroup = grantGroupData;
+    pageGrant.grantGroup = grantGroup;
   }
   ReactDOM.render(
     <GrantSelector crowi={crowi}

resource/js/components/PageEditor/GrantSelector.js

@@ -36,6 +36,7 @@ export default class GrantSelector extends React.Component {
     }
 
     this.onChangeGrant = this.onChangeGrant.bind(this);
+    // this.updateElementValue = this.updateElementValue.bind(this);
   }
 
   componentDidMount() {
@@ -46,11 +47,22 @@ 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();
   }
@@ -98,70 +110,6 @@ export default class GrantSelector extends React.Component {
     )
   }
 
-  renderConfigurationDropdown() {
-    return (
-      <FormGroup controlId="formControlsSelect">
-
-        <Dropdown dropup id="configurationDropdown" className="configuration-dropdown"
-            open={this.state.isCddMenuOpened} onToggle={this.onToggleConfigurationDropdown}>
-
-          <Dropdown.Toggle bsSize="sm">
-            <i className="icon-settings"></i>
-          </Dropdown.Toggle>
-
-          <Dropdown.Menu>
-            {this.renderActiveLineMenuItem()}
-            {this.renderRealtimeMathJaxMenuItem()}
-            {/* <MenuItem divider /> */}
-          </Dropdown.Menu>
-
-        </Dropdown>
-
-      </FormGroup>
-    )
-  }
-
-  renderActiveLineMenuItem() {
-    const isActive = this.state.editorOptions.styleActiveLine;
-
-    const iconClasses = ['text-info']
-    if (isActive) {
-      iconClasses.push('ti-check')
-    }
-    const iconClassName = iconClasses.join(' ');
-
-    return (
-      <MenuItem onClick={this.onClickStyleActiveLine}>
-        <span className="icon-container"></span>
-        <span className="menuitem-label">Show active line</span>
-        <span className="icon-container"><i className={iconClassName}></i></span>
-      </MenuItem>
-    )
-  }
-
-  renderRealtimeMathJaxMenuItem() {
-    if (!this.state.isMathJaxEnabled) {
-      return;
-    }
-
-    const isEnabled = this.state.isMathJaxEnabled;
-    const isActive = isEnabled && this.state.previewOptions.renderMathJaxInRealtime;
-
-    const iconClasses = ['text-info']
-    if (isActive) {
-      iconClasses.push('ti-check')
-    }
-    const iconClassName = iconClasses.join(' ');
-
-    return (
-      <MenuItem onClick={this.onClickRenderMathJaxInRealtime}>
-        <span className="icon-container"><img src="/images/icons/fx.svg" width="14px"></img></span>
-        <span className="menuitem-label">MathJax Rendering</span>
-        <i className={iconClassName}></i>
-      </MenuItem>
-    )
-  }
-
   renderSelectGroupModal() {
     const userRelatedGroups = this.props.userRelatedGroups;
     const groupList = this.userRelatedGroups.map((group) => {