create feat management role menu
This commit is contained in:
@@ -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: {
|
||||
|
||||
36
resources/js/roles/role_menu.js
Normal file
36
resources/js/roles/role_menu.js
Normal 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();
|
||||
});
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
@@ -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
|
||||
81
resources/views/roles/role_menu.blade.php
Normal file
81
resources/views/roles/role_menu.blade.php
Normal 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
|
||||
Reference in New Issue
Block a user