Hide permissions table unless custom permissions are enabled

resources/assets/js/components/entity-permissions-editor.js

@@ -0,0 +1,20 @@
+
+class EntityPermissionsEditor {
+
+  constructor(elem) {
+    this.permissionsTable = elem.querySelector('[permissions-table]');
+
+    // Handle toggle all event
+    this.restrictedCheckbox = elem.querySelector('[name=restricted]');
+    this.restrictedCheckbox.addEventListener('change', this.updateTableVisibility.bind(this));
+  }
+
+  updateTableVisibility() {
+    this.permissionsTable.style.display =
+      this.restrictedCheckbox.checked
+        ? null
+        : 'none';
+  }
+}
+
+export default EntityPermissionsEditor;

resources/assets/js/components/index.js

@@ -26,6 +26,7 @@ import permissionsTable from "./permissions-table";
 import customCheckbox from "./custom-checkbox";
 import bookSort from "./book-sort";
 import settingAppColorPicker from "./setting-app-color-picker";
+import entityPermissionsEditor from "./entity-permissions-editor";
 
 const componentMapping = {
     'dropdown': dropdown,
@@ -56,6 +57,7 @@ const componentMapping = {
     'custom-checkbox': customCheckbox,
     'book-sort': bookSort,
     'setting-app-color-picker': settingAppColorPicker,
+    'entity-permissions-editor': entityPermissionsEditor
 };
 
 window.components = {};

resources/views/form/entity-permissions.blade.php

@@ -1,4 +1,4 @@
-<form action="{{ $model->getUrl('/permissions') }}" method="POST">
+<form action="{{ $model->getUrl('/permissions') }}" method="POST" entity-permissions-editor>
     {!! csrf_field() !!}
     <input type="hidden" name="_method" value="PUT">
 
@@ -11,7 +11,7 @@
         ])
     </div>
 
-    <table permissions-table class="table permissions-table toggle-switch-list">
+    <table permissions-table class="table permissions-table toggle-switch-list" style="{{ !$model->restricted ? 'display: none' : '' }}">
         <tr>
             <th>{{ trans('common.role') }}</th>
             <th @if($model->isA('page')) colspan="3" @else colspan="4" @endif>