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

* Fix up group selectbox behavior.
  * When you select grant and then modal will shown.

lib/models/page.js

@@ -341,7 +341,7 @@ module.exports = function(crowi) {
     grantLabels[GRANT_PUBLIC]     = 'Public'; // 公開
     grantLabels[GRANT_RESTRICTED] = 'Anyone with the link'; // リンクを知っている人のみ
     //grantLabels[GRANT_SPECIFIED]  = 'Specified users only'; // 特定ユーザーのみ
-    grantLabels[GRANT_USER_GROUP] = 'Only inside the group'; // 特定グループのみ
+    // grantLabels[GRANT_USER_GROUP] = 'Only inside the group'; // 特定グループのみ
     grantLabels[GRANT_OWNER]      = 'Just me'; // 自分のみ
 
     return grantLabels;

lib/routes/page.js

@@ -420,10 +420,19 @@ module.exports = function(crowi, app) {
   function renderPage(pageData, req, res) {
     // create page
     if (!pageData) {
-      return res.render('customlayout-selector/not_found', {
-        author: {},
-        page: false,
-      });
+      var userRelatedGroups
+      UserGroupRelation.findAllRelationForUser(req.user)
+        .then((groupRelations) => {
+          userRelatedGroups = groupRelations.map(relation => relation.relatedGroup);
+          return Promise.resolve();
+        }).then(() => {
+          debug('not found page user group resolver : ', userRelatedGroups);
+          return res.render('customlayout-selector/not_found', {
+            author: {},
+            page: false,
+            userRelatedGroups: userRelatedGroups,
+          });
+        });
     }
 
     if (pageData.redirectTo) {

lib/views/_form.html

@@ -51,12 +51,15 @@
       {% else %}
       <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 %} {% if grantId == 5 && userRelatedGroups.length == 0 %}disabled{% endif %}>{{ t(grantLabel) }}</option>
+        <option value="{{ grantId }}" {% if pageForm.grant|default(page.grant) == grantId %}selected{% endif %}>{{ t(grantLabel) }}</option>
         {% endfor %}
+        <option value="5" {% if pageForm.grant|default(page.grant) == "5" %}selected{% endif %}>{{ t('Only inside the group') }}</option>
       </select>
+      <input id="select-grant-pre" type="hidden" value="{{ page.grant }}">
       {% endif %}
+      <input id="grant-group" type="hidden" name="pageForm[grantUserGroupId]" value="">
       {% if userRelatedGroups.length != 0 %}
-      <div id="select-grant-group" class="collapse width">
+      <div class="collapse width">
         <select name="pageForm[grantUserGroupId]" class="selectpicker btn-group-sm">
           {% for userGroup in userRelatedGroups %}
           <option value="{{ userGroup.id }}">{{ userGroup.name }}</option>

lib/views/layout-growi/not_found.html

@@ -18,3 +18,13 @@
     </div> {# /.col- #}
   </div>
 {% endblock %}
+
+{% block body_end %}
+  <div id="presentation-layer" class="fullscreen-layer">
+    <div id="presentation-container"></div>
+  </div>
+
+  <div id="crowi-modals">
+    {% include '../modal/select_grant_group.html' %}
+  </div>
+{% endblock %}

lib/views/modal/select_grant_group.html

@@ -0,0 +1,25 @@
+<div class="modal select-grant-group" id="select-grant-group">
+  <div class="modal-dialog">
+    <div class="modal-content">
+
+      <div class="modal-header bg-primary">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <div class="modal-title">{{ t('SelectGrantGroup') }}</div>
+      </div>
+
+      <div class="modal-body">
+        <p>グループを下のリストから選択</p>
+
+        <ul class="list-inline">
+          {% for sGroup in userRelatedGroups %}
+          <li>
+            <button class="btn btn-xs btn-primary" onclick="$('#grant-group').val(sGroup.id)">{{sGroup.name}}</button>
+          </li>
+          {% endfor %}
+        </ul>
+
+      </div><!-- /.modal-body -->
+
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->

lib/views/widget/page_modals.html

@@ -3,3 +3,4 @@
 {% include '../modal/duplicate.html' %}
 {% include '../modal/put_back.html' %}
 {% include '../modal/page_name_warning.html' %}
+{% include '../modal/select_grant_group.html' %}

resource/js/legacy/crowi-form.js

@@ -50,13 +50,13 @@
     var selectGrant = $selectGrant.val();
     console.log(selectGrant);
     if (selectGrant === '5') {
-      console.log('show collapse');
-      $('#select-grant-group').collapse('show');
+      console.log('show modal');
+      $('#select-grant-group').modal('show');
     }
     else {
-      console.log('hide collapse');
-      $('#select-grant-group').collapse('hide');
+      $('#select-grant-pre').val(selectGrant);
     }
+    console.log('select-grant-pre : ', $('#select-grant-pre').val());
   });
 
 /**