Refactor Role form

app/Http/Controllers/Auth/Roles.php

@@ -29,9 +29,21 @@ class Roles extends Controller
      */
     public function create()
     {
-        $permissions = Permission::all();
+        $names = $permissions = [];
+        $allPermissions = Permission::all();
 
-        return view('auth.roles.create', compact('permissions'));
+        foreach ($allPermissions as $permission) {
+            // permission code explode - and get permission type
+            $n = explode('-', $permission->name);
+
+            if (!in_array($n[0], $names)) {
+                $names[] = $n[0];
+            }
+
+            $permissions[$n[0]][] = $permission;
+        }
+
+        return view('auth.roles.create', compact('names', 'permissions'));
     }
 
     /**
@@ -66,11 +78,23 @@ class Roles extends Controller
     public function edit(Role $role)
     {
         //$permissions = Permission::all()->sortBy('display_name');
-        $permissions = Permission::all();
+        $names = $permissions = [];
+        $allPermissions = Permission::all();
 
         $rolePermissions = $role->permissions->pluck('id', 'id')->toArray();
 
-        return view('auth.roles.edit', compact('role', 'permissions', 'rolePermissions'));
+        foreach ($allPermissions as $permission) {
+            // permission code explode - and get permission type
+            $n = explode('-', $permission->name);
+
+            if (!in_array($n[0], $names)) {
+                $names[] = $n[0];
+            }
+
+            $permissions[$n[0]][] = $permission;
+        }
+
+        return view('auth.roles.edit', compact('role', 'names', 'permissions', 'rolePermissions'));
     }
 
     /**

public/css/app.css

@@ -678,10 +678,54 @@ input[type="number"] {
     margin-top: -30px;
 }
 
-.pager {
+#role-permissions .form-group.col-md-12 .col-md-3 {
-    margin: inherit !important;
+    overflow: hidden;
 }
 
-.pager li>a, .pager li>span {
+.input-checkbox {
-    border-radius: 3px !important;
+    white-space: nowrap;
+}
+
+.input-checkbox:after {
+    content: "";
+    position: absolute;
+    right: -10px;
+    height: 25px;
+    width: 25px;
+    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
+    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1));
+}
+
+#role-permissions .permission-select-button {
+    cursor: pointer;
+}
+
+#role-permissions .permission-unselect-button {
+    cursor: pointer;
+}
+
+#role-permissions .nav-tabs-custom {
+    margin-top: 15px;
+    box-shadow: 0 1px 0px rgba(0,0,0,0.1);
+}
+
+#role-permissions .nav-tabs-custom .nav.nav-tabs {
+    border-style: unset;
+}
+
+#role-permissions .nav-tabs-custom .tab-content {
+    padding: 0px;
+}
+
+#role-permissions .nav-tabs-custom .tab-content .tab-pane {
+    block-size: 0;
+}
+
+#role-permissions .nav-tabs-custom .tab-content .tab-pane .permission-button-group {
+    padding: 15px 0 0 30px;
+}
+
+#role-permissions .nav-tabs-custom .tab-content .form-group.col-md-12 .col-md-3 .input-checkbox {
+    font-weight: normal;
 }

resources/lang/en-GB/general.php

@@ -104,7 +104,8 @@ return [
     'export'                => 'Export',
     'enable'                => 'Enable',
     'disable'               => 'Disable',
-
+    'select_all'            => 'Select All',
+    'remove_selections'     => 'Remove Selections',
     'title' => [
         'new'               => 'New :type',
         'edit'              => 'Edit :type',

resources/views/auth/roles/create.blade.php

@@ -14,7 +14,48 @@
 
             {{ Form::textareaGroup('description', trans('general.description')) }}
 
-            {{ Form::checkboxGroup('permissions', trans_choice('general.permissions', 2), $permissions, 'display_name') }}
+            <div id="role-permissions" class="col-md-12">
+                <label for="permissions" class="control-label">{{trans_choice('general.permissions', 2)}}</label>
+
+                <br>
+
+                <span class="permission-select-button">{{trans('general.select_all')}}</span> |
+                <span class="permission-unselect-button">{{trans('general.remove_selections')}}</span>
+
+                <div class="nav-tabs-custom">
+                    <ul class="nav nav-tabs">
+                        @foreach($names as $name)
+                        <li @php echo ($name == 'read') ? 'class="active"' : ''; @endphp><a href="#tab-{{ $name }}" data-toggle="tab" aria-expanded="false">{{ ucwords($name) }}</a></li>
+                        @endforeach
+                    </ul>
+
+                    <div class="tab-content">
+                        @foreach($permissions as $code => $code_permissions)
+                            <div class="tab-pane in @php echo ($code == 'read') ? 'active' : ''; @endphp" id="tab-{{ $code }}">
+                                <div class="permission-button-group">
+                                    <span>{{trans('general.select_all')}}</span> |
+                                    <span>{{trans('general.remove_selections')}}</span>
+                                </div>
+
+                                @stack('permissions_input_start')
+
+                                <div class="form-group col-md-12 {{ $errors->has('permissions') ? 'has-error' : '' }}">
+                                    <label class="input-checkbox"></label>
+                                    <br>
+                                    @foreach($code_permissions as $item)
+                                        <div class="col-md-3">
+                                            <label class="input-checkbox">{{ Form::checkbox('permissions' . '[]', $item->id) }} &nbsp;{{ $item->display_name }}</label>
+                                        </div>
+                                    @endforeach
+                                    {!! $errors->first('permissions', '<p class="help-block">:message</p>') !!}
+                                </div>
+
+                                @stack('permissions_input_end')
+                            </div>
+                        @endforeach
+                    </div>
+                </div>
+            </div>
         </div>
         <!-- /.box-body -->
 
@@ -26,3 +67,32 @@
         {!! Form::close() !!}
     </div>
 @endsection
+
+@push('js')
+    <script src="{{ asset('vendor/almasaeed2010/adminlte/plugins/iCheck/icheck.min.js') }}"></script>
+@endpush
+
+@push('css')
+    <link rel="stylesheet" href="{{ asset('vendor/almasaeed2010/adminlte/plugins/iCheck/square/green.css') }}">
+@endpush
+
+@push('scripts')
+    <script type="text/javascript">
+        $(document).ready(function(){
+            $('input[type=checkbox]').iCheck({
+                checkboxClass: 'icheckbox_square-green',
+                radioClass: 'iradio_square-green',
+                increaseArea: '20%' // optional
+            });
+
+            $('.permission-select-button').on('click', function (event) {
+                $(this).parent().parent().find('input[type=checkbox]').iCheck('check');
+            });
+
+            $('.permission-unselect-button').on('click', function (event) {
+                $(this).parent().parent().find('input[type=checkbox]').iCheck('uncheck');
+            });
+        });
+    </script>
+@endpush
+

resources/views/auth/roles/edit.blade.php

@@ -19,7 +19,47 @@
 
             {{ Form::textareaGroup('description', trans('general.description')) }}
 
-            {{ Form::checkboxGroup('permissions', trans_choice('general.permissions', 2), $permissions, 'display_name') }}
+            <div id="role-permissions" class="col-md-12">
+                <label for="permissions" class="control-label">{{trans_choice('general.permissions', 2)}}</label>
+
+                <br>
+
+                <span class="permission-select-button">{{trans('general.select_all')}}</span> |
+                <span class="permission-unselect-button">{{trans('general.remove_selections')}}</span>
+                <div class="nav-tabs-custom">
+                    <ul class="nav nav-tabs">
+                        @foreach($names as $name)
+                        <li @php echo ($name == 'read') ? 'class="active"' : ''; @endphp><a href="#tab-{{ $name }}" data-toggle="tab" aria-expanded="false">{{ ucwords($name) }}</a></li>
+                        @endforeach
+                    </ul>
+
+                    <div class="tab-content">
+                        @foreach($permissions as $code => $code_permissions)
+                            <div class="tab-pane in @php echo ($code == 'read') ? 'active' : ''; @endphp" id="tab-{{ $code }}">
+                                <div class="permission-button-group">
+                                    <span class="permission-select-button">{{trans('general.select_all')}}</span> |
+                                    <span class="permission-unselect-button">{{trans('general.remove_selections')}}</span>
+                                </div>
+
+                                @stack('permissions_input_start')
+
+                                <div class="form-group col-md-12 {{ $errors->has('permissions') ? 'has-error' : '' }}">
+                                    <label class="input-checkbox"></label>
+                                    <br/>
+                                    @foreach($code_permissions as $item)
+                                        <div class="col-md-3">
+                                            <label class="input-checkbox">{{ Form::checkbox('permissions' . '[]', $item->id) }} &nbsp;{{ $item->display_name }}</label>
+                                        </div>
+                                    @endforeach
+                                    {!! $errors->first('permissions', '<p class="help-block">:message</p>') !!}
+                                </div>
+
+                                @stack('permissions_input_end')
+                            </div>
+                        @endforeach
+                    </div>
+                </div>
+            </div>
         </div>
         <!-- /.box-body -->
 
@@ -33,3 +73,31 @@
         {!! Form::close() !!}
     </div>
 @endsection
+
+@push('js')
+    <script src="{{ asset('vendor/almasaeed2010/adminlte/plugins/iCheck/icheck.min.js') }}"></script>
+@endpush
+
+@push('css')
+    <link rel="stylesheet" href="{{ asset('vendor/almasaeed2010/adminlte/plugins/iCheck/square/green.css') }}">
+@endpush
+
+@push('scripts')
+    <script type="text/javascript">
+        $(document).ready(function(){
+            $('input[type=checkbox]').iCheck({
+                checkboxClass: 'icheckbox_square-green',
+                radioClass: 'iradio_square-green',
+                increaseArea: '20%' // optional
+            });
+
+            $('.permission-select-button').on('click', function (event) {
+                $(this).parent().parent().find('input[type=checkbox]').iCheck('check');
+            });
+
+            $('.permission-unselect-button').on('click', function (event) {
+                $(this).parent().parent().find('input[type=checkbox]').iCheck('uncheck');
+            });
+        });
+    </script>
+@endpush