# Role
resources / views / Role /
# Index.Blade
resources / views / Role / index.blade.php
@extends('layouts.master')
@section('page-title') Role @endsection
@section('content')
<div class="mb-2">
<nav aria-label="breadcrumb" class="bg-white p-2 shadow-sm rounded">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item active" aria-current="page">Role /</li>
</ol>
</nav>
</div>
<div class="card border-0 shadow-sm rounded">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<h4 class="fw-bold text-black-50 mb-0">
<i class="fa-solid fa-user-shield me-1"></i>Role Lists
</h4>
@can('Create Role')
<a href="{{ route('role.create') }}" class="btn btn-outline-primary">
<i class="fa-solid fa-square-plus"></i>
</a>
@endcan
</div>
<hr>
<table class="table table-hover w-100" id="employee-table">
<thead class="bg-primary text-white">
<tr>
<th class="no-sort no-search text-nowrap">Control</th>
<th class="text-nowrap">Role - Name</th>
<th class="text-nowrap">Have Permissions</th>
<th class="no-sort no-search">Action</th>
<th>Date</th>
</tr>
</thead>
</table>
</div>
</div>
@endsection
@section('js')
<script>
$(document).ready(function (){
let table = $('#employee-table').DataTable({
ajax: '{{ route('role.dataTable') }}',
columns: [
{ data: 'plus_icon', name: 'plus_icon' },
{ data: 'name', name: 'name', class: 'text-nowrap' },
{ data: 'permissions', name: 'permissions' },
{ data: 'action', name: 'action' },
{ data: 'created_at', name: 'created_at' },
],
order: [[ 1, "asc"]],
columnDefs: [
{
"targets": [ 0 ],
"class": "control"
},
{
"targets": [4], // hidden can use
"visible": false
},
{
"targets": 'no-sort',
"orderable": false
},
{
"targets": 'no-search',
"searchable": false
},
{
"targets": 'hidden',
"visible": false
}
],
});
$(document).on('click','.delete-btn', function (e){
e.preventDefault();
let id = $(this).data('id');
let name = $(this).data('name');
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#f15858',
confirmButtonText: 'Delete'
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
method: "DELETE",
url: `/role/${id}`,
}).done(function (res){
Swal.fire(
'Deleted!',
"<span class='fw-bold text-black'>"+ name +"</span>" + " has been deleted.",
'success'
);
table.ajax.reload();
});
}
})
});
});
</script>
@endsection
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
# Create.Blade
resources / views / Role / create.blade.php
@extends('layouts.master')
@section('page-title') Role @endsection
@section('content')
<div class="mb-2">
<nav aria-label="breadcrumb" class="bg-white p-2 shadow-sm rounded">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">
<a href="{{ route('role.index') }}" class="text-decoration-none">Role</a>
</li>
<li class="breadcrumb-item active" aria-current="page">Create New Role</li>
</ol>
</nav>
</div>
<div class="card border-0 shadow-sm rounded">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<h4 class="fw-bold text-black-50 mb-0">
<i class="fa-solid fa-square-plus me-1"></i>Create New Role
</h4>
<a href="{{ route('role.index') }}" class="btn btn-outline-primary">
<i class="fa-solid fa-list"></i>
</a>
</div>
<hr>
<form action="{{ route('role.store') }}"
method="post" id="create-role"
class="row justify-content-center py-2">
@csrf
<div class="col-12 col-md-8">
<div class="form-floating mb-3">
<input type="text" class="form-control"
id="title" name="name" placeholder="title">
<label for="title">Role's Name</label>
</div>
<p class="fw-bold text-primary mt-3 mb-0">Give Permission !</p>
<hr class="my-2">
<div class="row">
@forelse( $permissions as $p)
<div class="col-6 col-md-4">
<div class="form-check">
<input class="form-check-input"
type="checkbox"
name="permissions[]"
value="{{ $p->name }}"
id="{{ $p->id }}">
<label class="form-check-label"
for="{{ $p->id }}">
{{ $p->name }}
</label>
</div>
</div>
@empty
<div class="col-12 alert alert-info text-center">
<h5 class="">There is no permission to give...</h5>
</div>
@endforelse
</div>
</div>
<div class="col-12 col-md-6 my-3">
<button class="btn btn-primary w-100">Save Role</button>
</div>
</form>
</div>
</div>
@endsection
@section('js')
{!! JsValidator::formRequest('App\Http\Requests\StoreRoleRequest','#create-role') !!}
@endsection
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
# Edit.Blade
resources / views / Role / edit.blade.php
@extends('layouts.master')
@section('page-title') Role @endsection
@section('content')
<div class="mb-2">
<nav aria-label="breadcrumb" class="bg-white p-2 shadow-sm rounded">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">
<a href="{{ route('department.index') }}" class="text-decoration-none">Role</a>
</li>
<li class="breadcrumb-item active" aria-current="page">Update Role</li>
</ol>
</nav>
</div>
<div class="card border-0 shadow-sm rounded">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<h4 class="fw-bold text-black-50 mb-0">
<i class="fa-solid fa-square-plus me-1"></i>Update Role
</h4>
<a href="{{ route('role.index') }}" class="btn btn-outline-primary">
<i class="fa-solid fa-list"></i>
</a>
</div>
<hr>
<form action="{{ route('role.update', $role->id) }}"
method="post" id="create-department"
class="row justify-content-center py-2">
@csrf
@method('put')
<div class="col-12 col-md-8">
<div class="form-floating mb-3">
<input type="text" class="form-control"
id="title" name="name" value="{{$role->name}}"
placeholder="title">
<label for="title">Role's Title</label>
</div>
<p class="fw-bold text-primary mt-3 mb-0">Give Permission !</p>
<hr class="my-2">
<div class="row">
@forelse( $permissions as $p)
<div class="col-6 col-md-4">
<div class="form-check">
<input class="form-check-input"
type="checkbox"
name="permissions[]"
value="{{ $p->name }}"
id="{{ $p->id }}"
@if(in_array($p->id,$old_permissions_id)) checked @endif>
<label class="form-check-label"
for="{{ $p->id }}">
{{ $p->name }}
</label>
</div>
</div>
@empty
<div class="col-12 alert alert-info text-center">
<h5 class="">There is no permission to give...</h5>
</div>
@endforelse
</div>
</div>
<div class="col-12 col-md-6 my-3">
<button class="btn btn-primary w-100">Update Role</button>
</div>
</form>
</div>
</div>
@endsection
@section('js')
{!! JsValidator::formRequest('App\Http\Requests\UpdateRoleRequest','#create-department') !!}
@endsection
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71