Added logic to handle parents in permissions field

themes/grav/app/forms/fields/index.js

@@ -15,6 +15,7 @@ import TextField, { Instance as TextFieldInstance } from './text';
 import ParentsField, { Instance as ParentsFieldInstance } from './parents';
 
 import './acl-picker';
+import './permissions';
 import './indeterminate';
 
 export default {

themes/grav/app/forms/fields/permissions.js

@@ -0,0 +1,46 @@
+import $ from 'jquery';
+
+const body = $('body');
+const radioSelector = '.permission-container.parent-section input[type="radio"]';
+
+const handleParent = (event) => {
+    const target = $(event.currentTarget);
+    const value = target.val();
+    const container = target.closest('.parent-section');
+    const fieldset = container.next('fieldset');
+    const radios = fieldset.find(`input[type="radio"][value="${value}"]`);
+
+    if (container.data('isLocked') !== false) {
+        container.data('isUpdating', true);
+        radios.each((index, radio) => {
+            const ID = radio.id;
+            $(radio).siblings(`[for="${ID}"]`).trigger('click');
+        });
+        container.data('isUpdating', false);
+    }
+};
+
+const boundHandleParent = handleParent.bind(handleParent);
+
+body.on('click', '.permission-container.parent-section label', (event) => {
+    const target = $(event.currentTarget);
+    const container = target.closest('.parent-section');
+    container.data('isLocked', true);
+});
+
+body.on('input', radioSelector, boundHandleParent);
+
+body.on('input', '.permissions-container input[type="radio"][data-parent-id]', (event) => {
+    const target = $(event.currentTarget);
+    const parent = $(`[for="${target.data('parentId')}"]`);
+    const container = target.closest('.permissions-container').find('.permission-container.parent-section');
+
+    if (container.data('isUpdating') === true) {
+        return true;
+    }
+
+    body.off('input', radioSelector, boundHandleParent);
+    container.data('isLocked', false);
+    parent.trigger('click');
+    body.on('input', radioSelector, boundHandleParent);
+});

themes/grav/package.json

@@ -39,7 +39,7 @@
     "speakingurl": "^14.0.1",
     "toastr": "^2.1.4",
     "watchjs": "0.0.0",
-    "whatwg-fetch": "^3.0.0",
+    "whatwg-fetch": "^2.0.4",
     "yarn": "^1.21.1"
   },
   "devDependencies": {

themes/grav/templates/forms/fields/permissions/permissions.html.twig

@@ -87,7 +87,7 @@
 
         <div class="switch-toggle switch-grav medium switch-3">
             {% for key, text in context.options %}
-                {% set parent_id = data.action_parent ? "toggle_" ~ field.name ~ "." ~ data.action_parent ~ key %}
+                {% set parent_id = data.action_parent ? "toggle_" ~ field.name ~ "." ~ data.action_parent %}
                 {% set id = "toggle_" ~ field.name ~ "." ~ data.action_name ~ key %}
                 {% set translation = (tu ? text|tu : text|t)|trim %}
 

themes/grav/webpack.conf.js

@@ -17,7 +17,8 @@ module.exports = {
             'js-yaml',
             'speakingurl',
             'moment',
-            'moment-timezone'
+            'moment-timezone',
+            'whatwg-fetch'
         ]
     },
     output: {
@@ -34,7 +35,7 @@ module.exports = {
             { test: /\.js$/, loader: 'eslint', exclude: /node_modules/ }
         ],
         loaders: [
-            { test: /\.css$/, loader: "style-loader!css-loader" },
+            { test: /\.css$/, loader: 'style-loader!css-loader' },
             { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015', 'stage-3'] } }
         ]
     }