From 4a8b6dd247e83dbd8ac7faa5e88a13bbbdfded46 Mon Sep 17 00:00:00 2001
From: Naffah Abdulla Rasheed <mail@naffah.me>
Date: Thu, 1 Oct 2026 11:33:30 +0500
Subject: [PATCH] feat: Create role form and permission list component

---
 composer.json                                 |   3 +-
 .../components/floating-submit.blade.php      |   4 +
 .../material-admin-26/errors/_list.blade.php  |   7 +
 .../material-admin-26/roles/_form.blade.php   |  15 ++
 .../roles/form/_general.blade.php             |  32 ++++
 .../roles/form/_permissions.blade.php         | 170 ++++++++++++++++++
 src/PermissionsServiceProvider.php            |   8 +
 src/Views/Components/Component.php            |  53 ++++++
 src/Views/Components/PermissionList.php       |  31 ++++
 src/Views/Components/RoleForm.php             |  35 ++++
 tests/Feature/RoleFormTest.php                |  92 ++++++++++
 11 files changed, 449 insertions(+), 1 deletion(-)
 create mode 100644 resources/views/material-admin-26/components/floating-submit.blade.php
 create mode 100644 resources/views/material-admin-26/errors/_list.blade.php
 create mode 100644 resources/views/material-admin-26/roles/_form.blade.php
 create mode 100644 resources/views/material-admin-26/roles/form/_general.blade.php
 create mode 100644 resources/views/material-admin-26/roles/form/_permissions.blade.php
 create mode 100644 src/Views/Components/Component.php
 create mode 100644 src/Views/Components/PermissionList.php
 create mode 100644 src/Views/Components/RoleForm.php
 create mode 100644 tests/Feature/RoleFormTest.php

diff --git a/composer.json b/composer.json
index 73c1a32..7429915 100644
--- a/composer.json
+++ b/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": {
diff --git a/resources/views/material-admin-26/components/floating-submit.blade.php b/resources/views/material-admin-26/components/floating-submit.blade.php
new file mode 100644
index 0000000..c5c729c
--- /dev/null
+++ b/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>
diff --git a/resources/views/material-admin-26/errors/_list.blade.php b/resources/views/material-admin-26/errors/_list.blade.php
new file mode 100644
index 0000000..b73422e
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/resources/views/material-admin-26/roles/_form.blade.php b/resources/views/material-admin-26/roles/_form.blade.php
new file mode 100644
index 0000000..2e346a1
--- /dev/null
+++ b/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')
diff --git a/resources/views/material-admin-26/roles/form/_general.blade.php b/resources/views/material-admin-26/roles/form/_general.blade.php
new file mode 100644
index 0000000..2777b92
--- /dev/null
+++ b/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
diff --git a/resources/views/material-admin-26/roles/form/_permissions.blade.php b/resources/views/material-admin-26/roles/form/_permissions.blade.php
new file mode 100644
index 0000000..13b07a7
--- /dev/null
+++ b/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
diff --git a/src/PermissionsServiceProvider.php b/src/PermissionsServiceProvider.php
index 212ccc1..8d8e657 100644
--- a/src/PermissionsServiceProvider.php
+++ b/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
          */
diff --git a/src/Views/Components/Component.php b/src/Views/Components/Component.php
new file mode 100644
index 0000000..fb2fe05
--- /dev/null
+++ b/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);
+    }
+}
diff --git a/src/Views/Components/PermissionList.php b/src/Views/Components/PermissionList.php
new file mode 100644
index 0000000..c04b747
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/src/Views/Components/RoleForm.php b/src/Views/Components/RoleForm.php
new file mode 100644
index 0000000..f012f8e
--- /dev/null
+++ b/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 ?: '#';
+    }
+}
diff --git a/tests/Feature/RoleFormTest.php b/tests/Feature/RoleFormTest.php
new file mode 100644
index 0000000..2ff5681
--- /dev/null
+++ b/tests/Feature/RoleFormTest.php
@@ -0,0 +1,92 @@
+<?php
+
+namespace Javaabu\Permissions\Tests\Feature;
+
+use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\Facades\Route;
+use Illuminate\Support\Facades\View;
+use Illuminate\Support\ViewErrorBag;
+use Javaabu\Forms\FormsServiceProvider;
+use Javaabu\Permissions\Models\Permission;
+use Javaabu\Permissions\Models\Role;
+use Javaabu\Permissions\Tests\InteractsWithDatabase;
+use Javaabu\Permissions\Tests\TestCase;
+use PHPUnit\Framework\Attributes\Test;
+
+class RoleFormTest extends TestCase
+{
+    use InteractsWithDatabase;
+
+    protected function getPackageProviders($app)
+    {
+        return array_merge(parent::getPackageProviders($app), [FormsServiceProvider::class]);
+    }
+
+    public function setUp(): void
+    {
+        parent::setUp();
+
+        $this->runMigrations();
+
+        // Session is needed by forms package to retrieve old form valuues using old() helper
+        $this->app['request']->setLaravelSession($this->app['session']->driver());
+        View::share('errors', new ViewErrorBag());
+    }
+
+    #[Test]
+    public function it_renders_a_role_form_with_permissions_and_an_cancel_redirect_link(): void
+    {
+        $permission = Permission::create([
+            'name' => 'edit-posts',
+            'description' => 'Edit posts',
+            'model' => 'posts',
+            'guard_name' => 'web',
+        ]);
+
+        $html = Blade::render(
+            '<x-permissions::role-form :permissions="$permissions" cancel-redirect-url="/admin/roles" framework="material-admin-26" />',
+            ['permissions' => Permission::all()]
+        );
+
+        $this->assertStringContainsString('name="description"', $html);
+        $this->assertStringContainsString('name="name"', $html);
+        $this->assertStringContainsString('name="permissions[]"', $html);
+        $this->assertStringContainsString('value="'.$permission->id.'"', $html);
+        $this->assertStringContainsString('Edit posts', $html);
+        $this->assertStringContainsString('href="/admin/roles"', $html);
+    }
+
+    #[Test]
+    public function it_uses_the_default_framework_and_cancel_redirect_url(): void
+    {
+        Route::get('/admin/roles', fn () => '')->name('admin.roles.index');
+
+        $html = Blade::render(
+            '<x-permissions::role-form :permissions="$permissions" />',
+            ['permissions' => collect()]
+        );
+
+        $this->assertStringContainsString('#', $html);
+        $this->assertStringContainsString('name="description"', $html);
+    }
+
+    #[Test]
+    public function it_checks_permissions_assigned_to_the_role(): void
+    {
+        $permission = Permission::create([
+            'name' => 'edit-posts',
+            'description' => 'Edit posts',
+            'model' => 'posts',
+            'guard_name' => 'web',
+        ]);
+        $role = Role::create(['name' => 'Editor', 'guard_name' => 'web']);
+        $role->givePermissionTo($permission);
+
+        $html = Blade::render(
+            '<x-permissions::role-form :permissions="$permissions" :role="$role" cancel-redirect-url="/admin/roles" framework="material-admin-26" />',
+            ['permissions' => Permission::all(), 'role' => $role]
+        );
+
+        $this->assertMatchesRegularExpression('/<input[^>]*id="permission-'.$permission->id.'"[^>]*checked/', $html);
+    }
+}