create feat management role menu

This commit is contained in:
arifal
2025-02-11 17:59:03 +07:00
parent cb90f69d1e
commit 2bf4b8b327
13 changed files with 296 additions and 51 deletions

View File

@@ -18,10 +18,12 @@ class Roles {
name: "Action",
formatter: (cell) =>
gridjs.html(`
<div class="d-flex justify-content-end gap-x-2">
<a href="/roles/${cell}/edit" class="btn btn-yellow me-2">Update</a>
<button class="btn btn-red btn-delete btn-delete-role" data-id="${cell}">Delete</button>
`),
<div class="d-flex justify-content-end gap-x-2">
<a href="/roles/${cell}/edit" class="btn btn-yellow me-2">Update</a>
<a href="/roles/role-menu/${cell}" class="btn btn-yellow me-2">Role Menu</a>
<button class="btn btn-red btn-delete btn-delete-role" data-id="${cell}">Delete</button>
<div>
`),
},
],
pagination: {

View File

@@ -0,0 +1,36 @@
class RoleMenus {
init() {
this.initCheckboxRoles();
}
initCheckboxRoles() {
const childPermissions =
document.querySelectorAll(".child-permissions");
childPermissions.forEach((child) => {
child.addEventListener("change", function () {
const parentId = this.dataset.parentId;
const parentShow = document.querySelector(
`input[name='permissions[${parentId}][allow_show]']`
);
if (parentShow) {
// If any child permission is checked, check parent "Show"
if (
document.querySelectorAll(
`.child-permission[data-parent-id="${parentId}"]:checked`
).length > 0
) {
parentShow.checked = true;
} else {
parentShow.checked = false;
}
}
});
});
}
}
document.addEventListener("DOMContentLoaded", function (event) {
new RoleMenus().init();
});

View File

@@ -19,13 +19,15 @@
@foreach ($menus as $menu)
<li class="nav-item">
<!-- parent menu -->
<a class="nav-link menu-arrow" href="#sidebar-{{$menu->id}}" data-bs-toggle="collapse" role="button"
aria-expanded="true" aria-controls="sidebar-{{$menu->id}}">
<span class="nav-icon">
<iconify-icon icon="{{$menu->icon}}"></iconify-icon>
</span>
<span class="nav-text">{{$menu->name}}</span>
</a>
@if ($menu->parent_id == null)
<a class="nav-link menu-arrow" href="#sidebar-{{$menu->id}}" data-bs-toggle="collapse" role="button"
aria-expanded="true" aria-controls="sidebar-{{$menu->id}}">
<span class="nav-icon">
<iconify-icon icon="{{$menu->icon}}"></iconify-icon>
</span>
<span class="nav-text">{{$menu->name}}</span>
</a>
@endif
<!-- children menu foreach -->
@if ($menu->children->count() > 0)
<div class="collapse" id="sidebar-{{$menu->id}}">
@@ -33,8 +35,8 @@
@foreach ( $menu->children as $child)
<li class="sub-nav-item">
<a class="sub-nav-link" href="{{ $child->url ? (Route::has($child->url) ? route($child->url) : $child->url) : '#' }}">
{{ $child->name }}
</a>
{{ $child->name }}
</a>
</li>
@endforeach
</ul>

View File

@@ -1,9 +1,5 @@
@extends('layouts.vertical', ['subtitle' => 'Role'])
@section('css')
@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
@endsection
@section('content')
@include('layouts.partials/page-title', ['title' => 'Settings', 'subtitle' => 'Role'])
@@ -32,6 +28,3 @@
</div>
@endsection
@section('scripts')
@endsection

View File

@@ -1,9 +1,5 @@
@extends('layouts.vertical', ['subtitle' => 'Role'])
@section('css')
@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
@endsection
@section('content')
@include('layouts.partials/page-title', ['title' => 'Settings', 'subtitle' => 'Role'])
@@ -33,6 +29,3 @@
</div>
@endsection
@section('scripts')
@endsection

View File

@@ -0,0 +1,81 @@
@extends('layouts.vertical', ['subtitle' => 'Role'])
@section('content')
@include('layouts.partials/page-title', ['title' => 'Settings', 'subtitle' => 'Role'])
<div class="row d-flex justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h5>Manage Permissions for Role: {{ $role->name }}</h5>
<form action="{{route("role-menu.permission.update", $role->id)}}" method="post">
@csrf
@method("put")
<table class="table">
<thead>
<tr>
<th>Menu</th>
<th>Show</th>
<th>Create</th>
<th>Update</th>
<th>Destroy</th>
</tr>
</thead>
<tbody>
@foreach($menus->where('parent_id', null) as $parent)
@php
$role_menu = optional($role_menus->firstWhere('menu_id', $parent->id));
@endphp
<tr>
<td><strong>{{ $parent->name }}</strong></td>
<td>
<input type="checkbox" class="parent-show" name="permissions[{{ $parent->id }}][allow_show]" value="1"
{{ $role_menu && $role_menu->allow_show ? 'checked' : '' }} readonly>
</td>
<td colspan="3"></td>
</tr>
@foreach($menus->where('parent_id', $parent->id) as $child)
@php
$child_role_menu = optional($role_menus->firstWhere('menu_id', $child->id));
@endphp
<tr>
<td> {{ $child->name }}</td>
<td>
<input type="checkbox" class="child-permission" data-parent-id="{{ $parent->id }}"
name="permissions[{{ $child->id }}][allow_show]" value="1"
{{ $child_role_menu && $child_role_menu->allow_show ? 'checked' : '' }}>
</td>
<td>
<input type="checkbox" class="child-permission" data-parent-id="{{ $parent->id }}"
name="permissions[{{ $child->id }}][allow_create]" value="1"
{{ $child_role_menu && $child_role_menu->allow_create ? 'checked' : '' }}>
</td>
<td>
<input type="checkbox" class="child-permission" data-parent-id="{{ $parent->id }}"
name="permissions[{{ $child->id }}][allow_update]" value="1"
{{ $child_role_menu && $child_role_menu->allow_update ? 'checked' : '' }}>
</td>
<td>
<input type="checkbox" class="child-permission" data-parent-id="{{ $parent->id }}"
name="permissions[{{ $child->id }}][allow_destroy]" value="1"
{{ $child_role_menu && $child_role_menu->allow_destroy ? 'checked' : '' }}>
</td>
</tr>
@endforeach
@endforeach
</tbody>
</table>
<button type="submit" class="btn btn-success">Update</button>
</form>
</div>
</div>
</div>
</div>
@endsection
@section('scripts')
@vite(['resources/roles/role_menu.js'])
@endsection