feat: Create role form and permission list component

composer.json

@@ -18,7 +18,8 @@
     },
     "require-dev": {
         "orchestra/testbench": "^10.0 || ^11.0",
-        "phpunit/phpunit": "^12.5.8 || ^13.0.3"
+        "phpunit/phpunit": "^12.5.8 || ^13.0.3",
+        "javaabu/forms": "^1.71"
     },
     "autoload": {
         "psr-4": {

resources/views/material-admin-26/components/floating-submit.blade.php

@@ -0,0 +1,4 @@
+<button class="btn btn-success btn--action animate-submit" type="submit"
+        title="Save">
+    <i class="zmdi zmdi-floppy"></i>
+</button>

resources/views/material-admin-26/errors/_list.blade.php

@@ -0,0 +1,7 @@
+@unless(empty($error))
+<ul class="invalid-feedback">
+    @foreach($error as $error_text)
+    <li>{{ $error_text }}</li>
+    @endforeach
+</ul>
+@endunless

resources/views/material-admin-26/roles/_form.blade.php

@@ -0,0 +1,15 @@
+@include('permissions::material-admin-26.roles.form._general')
+
+<x-permissions::permission-list :role="$role" :permissions="$permissions" />
+
+<div class="button-group">
+    <button class="btn btn-success btn--icon-text btn--raised">
+        <i class="zmdi zmdi-check"></i> {{ __('Save') }}
+    </button>
+
+    <a class="btn btn-light btn--icon-text" href="{{ $cancel_redirect_url }}">
+        <i class="zmdi zmdi-close-circle"></i> {{ __('Cancel') }}
+    </a>
+</div>
+
+@include('permissions::material-admin-26.components.floating-submit')

resources/views/material-admin-26/roles/form/_general.blade.php

@@ -0,0 +1,32 @@
+<div class="card">
+    <div class="card-body">
+        <div class="row">
+            <div class="col-md-8">
+                <x-forms::text name="description" :placeholder="__('Description')" required />
+            </div>
+
+            <div class="col-md-4">
+                <x-forms::text name="name" :placeholder="__('Description')" required />
+            </div>
+        </div>
+    </div>
+</div>
+
+
+@push('scripts')
+    <script type="text/javascript">
+        $(document).ready(function() {
+            //slugify
+            $("#name").keypress(function (e) {
+                return restrictCharacters($(this), e, /[A-Za-z0-9_]/g);
+            });
+
+            @unless( isset($role) )
+            $('#description').keyup(function () {
+                var str = $(this).val();
+                $('#name').val(slugify(str, '_'));
+            });
+            @endunless
+        });
+    </script>
+@endpush

resources/views/material-admin-26/roles/form/_permissions.blade.php

@@ -0,0 +1,170 @@
+@php
+    use Illuminate\Support\Str;
+    $permissions = $permissions->groupBy('model');
+@endphp
+
+<div>
+    <div class="card">
+        <div class="card-body">
+            <div class="d-flex card-title align-items-center justify-content-between">
+                <x-forms::checkbox name="select-all-resp" value="1" data-all="" inline :show-label="false">
+                    {{ __('All Permissions') }}
+                </x-forms::checkbox>
+
+                <div class="w-50">
+                    <div class="d-flex flex-row align-items-center justify-content-end position-relative">
+                        <div class="w-100">
+                            <x-forms::text
+                                name="permission_search"
+                                placeholder="{{ __('Search permissions...') }}"
+                                inline
+                                :show-label="false"
+                                autocomplete="off"
+                                data-permission-search/>
+                        </div>
+
+                        <i class="zmdi zmdi-search position-absolute mr-3" aria-hidden="true"></i>
+                    </div>
+                </div>
+            </div>
+
+            @include('permissions::material-admin-26.errors._list', ['error' => $errors->get('permissions')])
+        </div>
+    </div>
+
+    <div>
+        @foreach($permissions as $model => $model_permissions)
+            @php
+                $model_slug = Str::slug($model);
+            @endphp
+
+            <div class="accordion w-100 bg-white permission-card mb-4"
+                 data-search="{{ Str::lower($model.' '.$model_permissions->pluck('description')->join(' ')) }}">
+                <div class="accordion__item w-100">
+                    <div class="accordion__title d-flex align-items-center justify-content-between p-4"
+                         data-toggle="collapse" data-target="#permission-group-{{ $loop->index }}"
+                         aria-expanded="false" aria-controls="permission-group-{{ $loop->index }}"
+                         aria-label="{{ __('Toggle :model permissions', ['model' => __(slug_to_title($model))]) }}">
+                        <div class="checkbox">
+                            <x-forms::checkbox name="{{ $model_slug.'-select-all-resp' }}" data-all="{{ $model_slug }}"
+                                               inline :show-label="false">
+                                {{ __(slug_to_title($model)) }}
+                            </x-forms::checkbox>
+                        </div>
+
+                        <button class="border-0 bg-transparent" type="button"
+                                data-toggle="collapse" data-target="#permission-group-{{ $loop->index }}"
+                                aria-expanded="false" aria-controls="permission-group-{{ $loop->index }}"
+                                aria-label="{{ __('Toggle :model permissions', ['model' => __(slug_to_title($model))]) }}">
+                            <i class="zmdi zmdi-chevron-down" aria-hidden="true"></i>
+                        </button>
+                    </div>
+
+                    <div id="permission-group-{{ $loop->index }}" class="collapse">
+                        <div class="accordion__content border-top">
+                            @foreach($model_permissions as $permission)
+                                @php
+                                    $checked = (isset($role) && $role->hasPermissionTo($permission)) || safe_in_array($permission->id, old('permissions'));
+                                @endphp
+
+                                <x-forms::checkbox
+                                    name="permissions[]"
+                                    id="{{ 'permission-'.$permission->id }}"
+                                    :value="$permission->id"
+                                    :checked="$checked"
+                                    data-all="{{ $model_slug }}"
+                                    inline
+                                    :show-label="false"
+                                >
+                                    {{ $permission->description }}
+                                </x-forms::checkbox>
+                            @endforeach
+                        </div>
+                    </div>
+                </div>
+            </div>
+        @endforeach
+    </div>
+</div>
+
+@push('scripts')
+    <script>
+        $(document).ready(function () {
+            const $cards = $('.permission-card');
+            $cards.each(function (index, cardElem) {
+                const $card = $(cardElem);
+
+                updateAllCardPermissionsCheckbox($card);
+            });
+            updateAllPermissionsCheckbox();
+
+            // When all permissions is checked
+            $(document).on('change', '#select-all-resp', function () {
+                const isChecked = $(this).prop('checked');
+                $('input[data-all]').prop('checked', isChecked); // All group level checkboxes
+                $('input[name="permissions[]"]').prop('checked', isChecked); // All individual permissions
+            });
+
+            // When group level checkbox is checked (and not the all permissions checkbox)
+            // $= means ends with
+            $(document).on('change', 'input[name$="-select-all-resp"]', function () {
+                const isChecked = $(this).prop('checked');
+                const $card = $(this).closest('.permission-card');
+                $card.find('input[name="permissions[]"]').prop('checked', isChecked);
+
+                updateAllPermissionsCheckbox();
+            });
+
+            // When individual permission checkbox is checked
+            $(document).on('change', 'input[name="permissions[]"]', function () {
+                const $card = $(this).closest('.permission-card');
+
+                updateAllCardPermissionsCheckbox($card);
+
+                updateAllPermissionsCheckbox();
+            });
+
+            function updateAllCardPermissionsCheckbox($card) {
+                $card.find('input[name$="-select-all-resp"').each(function () {
+                    const allCardPermissions = $card.find('input[name="permissions[]"]');
+                    const checkedCardPermissions = allCardPermissions.filter(':checked');
+
+                    if (allCardPermissions.length === checkedCardPermissions.length) {
+                        $(this).prop('checked', true);
+                    } else {
+                        $(this).prop('checked', false);
+                    }
+                });
+            }
+
+            function updateAllPermissionsCheckbox() {
+                const allPermissions = $('input[name="permissions[]"]');
+                const checkedPermissions = allPermissions.filter(':checked');
+
+                if (allPermissions.length === checkedPermissions.length) {
+                    $('#select-all-resp').prop('checked', true);
+                } else {
+                    $('#select-all-resp').prop('checked', false);
+                }
+            }
+
+            $(document).on('input', '[data-permission-search]', function () {
+                const query = $(this).val().trim().toLowerCase();
+
+                $('.permission-card').each(function () {
+                    const matches = $(this).data('search').includes(query);
+
+                    $(this).toggleClass('d-none', !matches);
+                    $(this).toggleClass('d-flex', matches);
+                });
+            });
+
+            // Prevent the checkbox click from toggling the accordion
+            $('.accordion__title .checkbox').on('click', function (event) {
+                event.stopPropagation();
+            });
+
+            $('.permission-card .collapse').collapse('show');
+        });
+    </script>
+@endpush

src/PermissionsServiceProvider.php

@@ -24,8 +24,16 @@ public function boot(): void
             $this->publishes([
                 __DIR__ . '/../config/permission.php' => config_path('permission.php'),
             ], 'permissions-config');
+
+            $this->publishes([
+                __DIR__ . '/../resources/views' => resource_path('views/vendor/permissions'),
+            ], 'permissions-views');
         }
 
+        $this->loadViewsFrom(__DIR__ . '/../resources/views', 'permissions');
+
+        Blade::componentNamespace('Javaabu\\Permissions\\Views\\Components', 'permissions');
+
         /**
          * Returns true if the user has any of the permissions
          */

src/Views/Components/Component.php

@@ -0,0 +1,53 @@
+<?php
+
+namespace Javaabu\Permissions\Views\Components;
+
+use Illuminate\View\Component as BaseComponent;
+
+abstract class Component extends BaseComponent
+{
+    /**
+     * Framework used for this component
+     *
+     * @var string
+     */
+    public string $framework;
+
+    /**
+     * The view to be used
+     *
+     * @var string
+     */
+    protected string $view;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(string $framework = '')
+    {
+        if (! $framework) {
+            $framework = 'material-admin-26';
+        }
+
+        $this->framework = $framework;
+    }
+
+    public function getView(): string
+    {
+        return 'permissions::{framework}.' . $this->view;
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function render()
+    {
+        $view = $this->getView();
+
+        $framework = $this->framework;
+
+        return str_replace('{framework}', $framework, $view);
+    }
+}

src/Views/Components/PermissionList.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace Javaabu\Permissions\Views\Components;
+
+use Illuminate\Support\Collection;
+use Javaabu\Permissions\Models\Role;
+
+class PermissionList extends Component
+{
+    protected string $view = 'roles.form._permissions';
+
+    public ?Role $role;
+
+    public Collection $permissions;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(
+        Collection $permissions,
+        ?Role $role = null,
+        string $framework = ''
+    ) {
+        parent::__construct($framework);
+
+        $this->role = $role;
+        $this->permissions = $permissions;
+    }
+}

src/Views/Components/RoleForm.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace Javaabu\Permissions\Views\Components;
+
+use Illuminate\Support\Collection;
+use Javaabu\Permissions\Models\Role;
+
+class RoleForm extends Component
+{
+    protected string $view = 'roles._form';
+
+    public string $cancel_redirect_url = '';
+
+    public ?Role $role;
+
+    public Collection $permissions;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(
+        Collection $permissions,
+        ?Role $role = null,
+        string $cancelRedirectUrl = '',
+        string $framework = ''
+    ) {
+        parent::__construct($framework);
+
+        $this->role = $role;
+        $this->permissions = $permissions;
+        $this->cancel_redirect_url = $cancelRedirectUrl ?: '#';
+    }
+}