Files
CKB/resources/views/back/roleprivileges.blade.php

594 lines
27 KiB
PHP
Executable File

@extends('layouts.backapp')
@section('content')
@if (session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
<p>{{ session('success') }}</p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
@endif
<div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
<div class="kt-portlet__head kt-portlet__head--lg">
<div class="kt-portlet__head-label">
<span class="kt-portlet__head-icon">
<i class="kt-font-brand flaticon2-line-chart"></i>
</span>
<h3 class="kt-portlet__head-title">
Role & Privileges
</h3>
</div>
@can('create', $menus['roleprivileges.index'])
<div class="kt-portlet__head-toolbar">
<div class="kt-portlet__head-wrapper">
<div class="kt-portlet__head-actions">
<button type="button" class="btn btn-bold btn-label-brand btn-sm" data-toggle="modal" data-target="#roleModal"> Tambah </button>
</div>
</div>
</div>
@endcan
</div>
<div class="kt-portlet__body">
<div class="table-responsive">
<!--begin: Datatable -->
<table class="table table-striped table-bordered table-hover table-checkable" id="kt_table">
<thead>
<tr>
<th>No</th>
<th>Nama Role</th>
<th>Dealer Tambahan</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
@foreach ($roles as $role)
<tr>
<td>{{ $loop->iteration }}</td>
<td>{{ $role->name }}</td>
<td>
@if($role->dealers->count() > 0)
<div class="dealer-list">
@foreach($role->dealers->take(3) as $dealer)
<span class="badge badge-info mr-1 mb-1">{{ $dealer->name }}</span>
@endforeach
@if($role->dealers->count() > 3)
<span class="badge badge-secondary">+{{ $role->dealers->count() - 3 }} more</span>
@endif
</div>
@else
<span class="text-muted">Tidak ada dealer tambahan untuk role ini</span>
@endif
</td>
<td>
<div class="d-flex">
@can('update', $menus['roleprivileges.index'])
<button class="btn btn-sm btn-bold btn-warning mr-2" onclick="editRole({{$role->id}})"> Edit</button>
@endcan
@can('delete', $menus['roleprivileges.index'])
<button class="btn btn-sm btn-bold btn-danger mr-2" onclick="deleteRole({{$role->id}}, '{{$role->name}}')">Hapus</button>
@endcan
@can('create', $menus['roleprivileges.index'])
<button class="btn btn-sm btn-bold btn-success" onclick="assignDealer({{$role->id}})"> Tambah Dealer</button>
@endcan
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
<!--end: Datatable -->
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="roleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<form action="{{ route('roleprivileges.store') }}" method="post">
@csrf
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="roleModalLabel">Tambah Role & Privileges</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="role">Nama Role Baru </label>
<input type="text" class="form-control @error('role') is-invalid @enderror" name="role" id="role">
@error('role')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="container @error('privileges') is-invalid @enderror" id="role-privilege">
@foreach ($menus as $menu)
<div>
<h5>{{ $menu->name }}</h5>
<div class="row">
@if ($menu->link == 'adminarea' || $menu->link == 'mechanicarea')
<div class="col-lg-12">
<div class="form-group">
<label style="cursor: pointer;"><input type="checkbox" onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> View</label>
<input type="hidden" value="0" name="privileges[{{ $menu->id }}][view]">
<input type="hidden" value="0" name="privileges[{{ $menu->id }}][create]">
<input type="hidden" value="0" name="privileges[{{ $menu->id }}][update]">
<input type="hidden" value="0" name="privileges[{{ $menu->id }}][delete]">
</div>
</div>
@else
<div class="col-lg-3">
<div class="form-group">
<label style="cursor: pointer;"><input type="checkbox" onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> Create</label>
<input type="hidden" value="0" name="privileges[{{ $menu->id }}][create]">
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label style="cursor: pointer;"><input type="checkbox" onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> Update</label>
<input type="hidden" value="0" name="privileges[{{ $menu->id }}][update]">
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label style="cursor: pointer;"><input type="checkbox" onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> Delete</label>
<input type="hidden" value="0" name="privileges[{{ $menu->id }}][delete]">
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label style="cursor: pointer;"><input type="checkbox" onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> View</label>
<input type="hidden" value="0" name="privileges[{{ $menu->id }}][view]">
</div>
</div>
@endif
</div>
</div>
@endforeach
</div>
@error('privileges')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</form>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="roleEditModal" tabindex="-1" role="dialog" aria-labelledby="roleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<form action="" method="post">
@csrf
@method('PUT')
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="roleModalLabel">Tambah Role & Privileges</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="role">Nama Role Baru </label>
<input type="text" class="form-control @error('role') is-invalid @enderror" name="role" id="role">
@error('role')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="container" id="role-privilege-edit">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</form>
</div>
</div>
<div class="modal fade" id="assignDealerModal" tabindex="-1" role="dialog" aria-labelledby="assignDealerModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<form id="assignDealerForm" method="POST">
@csrf
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="assignDealerModalLabel">
Assign Dealer ke Role
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-light border">
<strong>Petunjuk:</strong> Pilih dealer yang akan di-assign ke role ini. Dealer yang sudah di-assign akan otomatis tercentang.
</div>
<div class="form-group">
<label class="font-weight-bold">
Daftar Dealer
</label>
<div class="dealer-checkboxes border rounded p-3" style="max-height: 350px; overflow-y: auto;">
<div class="row">
@foreach ($dealers as $dealer)
<div class="col-md-6 mb-2">
<div class="form-check custom-checkbox">
<input class="form-check-input dealer-checkbox" type="checkbox"
name="dealers[]" value="{{ $dealer->id }}"
id="dealer_{{ $dealer->id }}">
<label class="form-check-label d-flex align-items-center" for="dealer_{{ $dealer->id }}">
<div class="dealer-info">
<div class="dealer-name font-weight-semibold">{{ $dealer->name }}</div>
<div class="dealer-code text-muted small">
<i class="fas fa-tag mr-1"></i>
{{ $dealer->dealer_code }}
</div>
</div>
</label>
</div>
</div>
@endforeach
</div>
</div>
</div>
<div class="form-group mb-0">
<div class="d-flex justify-content-between align-items-center">
<div>
<button type="button" class="btn btn-outline-primary btn-sm mr-2" onclick="selectAllDealers()">
Pilih Semua
</button>
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="deselectAllDealers()">
Hapus Semua
</button>
</div>
<div class="text-muted small">
<span id="selectedCount">0</span> dealer dipilih
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Batal
</button>
<button type="submit" class="btn btn-primary" id="submitBtn">
Simpan Perubahan
</button>
</div>
</div>
</form>
</div>
</div>
@endsection
@section('styles')
<style>
.custom-checkbox .form-check-label {
cursor: pointer;
padding: 0.5rem;
border-radius: 0.25rem;
transition: background-color 0.2s ease;
width: 100%;
}
.custom-checkbox .form-check-label:hover {
background-color: #f8f9fa;
}
.custom-checkbox .form-check-input:checked + .form-check-label {
background-color: #e8f5e8;
border-left: 3px solid #28a745;
}
.dealer-info {
flex: 1;
margin-left: 0.5rem;
}
.dealer-name {
font-weight: 500;
margin-bottom: 0.125rem;
}
.dealer-code {
font-size: 0.75rem;
color: #6c757d;
}
.dealer-checkboxes::-webkit-scrollbar {
width: 6px;
}
.dealer-checkboxes::-webkit-scrollbar-track {
background: #f1f1f1;
}
.dealer-checkboxes::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
.dealer-checkboxes::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
/* Responsive improvements */
@media (max-width: 768px) {
.dealer-checkboxes .col-md-6 {
flex: 0 0 100%;
max-width: 100%;
}
}
</style>
@endsection
@section('javascripts')
<script>
function deleteRole(id, name) {
Swal.fire({
title: 'Hapus Role?',
text: `Anda akan menghapus role ${name}?`,
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#6c757d',
confirmButtonText: 'Ya, Hapus!',
cancelButtonText: 'Batal'
}).then((result) => {
if (result.isConfirmed) {
// Create form and submit
let form = document.createElement('form');
form.method = 'POST';
form.action = '{{ route("roleprivileges.delete", ":id") }}'.replace(':id', id);
let csrfToken = document.createElement('input');
csrfToken.type = 'hidden';
csrfToken.name = '_token';
csrfToken.value = '{{ csrf_token() }}';
let methodField = document.createElement('input');
methodField.type = 'hidden';
methodField.name = '_method';
methodField.value = 'DELETE';
form.appendChild(csrfToken);
form.appendChild(methodField);
document.body.appendChild(form);
form.submit();
}
});
}
function editRole(id) {
let url = '{{ route("roleprivileges.edit", ":id") }}'
url = url.replace(':id', id);
$.ajax({
url: url,
type: 'GET',
success: function(res) {
let url = '{{ route("roleprivileges.update", ":id") }}'
url = url.replace(':id', id);
$("#roleEditModal").modal("show")
$("#roleEditModal form").attr("action", url)
$("#roleEditModal input[name='role']").val(res.role.name)
let menuHtml = ''
for(let i = 0; i < res.role_privileges.length; i++) {
const menu = res.role_privileges[i]
const isCreateChecked = menu.create == 1 ? "checked" : ""
const isUpdateChecked = menu.update == 1 ? "checked" : ""
const isDeleteChecked = menu.delete == 1 ? "checked" : ""
const isViewChecked = menu.view == 1 ? "checked" : ""
if(menu.name == 'Admin Area' || menu.name == 'Mekanik Area') {
menuHtml += `
<h5>${menu.name}</h5>
<div class="row">
<input type="hidden" value="${menu.create}" name="privileges[${menu.menu_id}][create]">
<input type="hidden" value="${menu.update}" name="privileges[${menu.menu_id}][update]">
<input type="hidden" value="${menu.delete}" name="privileges[${menu.menu_id}][delete]">
<div class="col-lg-12">
<div class="form-group">
<label><input type="checkbox" ${isViewChecked} onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> View</label>
<input type="hidden" value="${menu.view}" name="privileges[${menu.menu_id}][view]">
</div>
</div>
</div>
`
}else{
menuHtml += `
<h5>${menu.name}</h5>
<div class="row">
<div class="col-lg-3">
<div class="form-group">
<label><input type="checkbox" ${isCreateChecked} onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> Create</label>
<input type="hidden" value="${menu.create}" name="privileges[${menu.menu_id}][create]">
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label><input type="checkbox" ${isUpdateChecked} onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> Update</label>
<input type="hidden" value="${menu.update}" name="privileges[${menu.menu_id}][update]">
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label><input type="checkbox" ${isDeleteChecked} onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> Delete</label>
<input type="hidden" value="${menu.delete}" name="privileges[${menu.menu_id}][delete]">
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label><input type="checkbox" ${isViewChecked} onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> View</label>
<input type="hidden" value="${menu.view}" name="privileges[${menu.menu_id}][view]">
</div>
</div>
</div>
`
}
}
$("#roleEditModal #role-privilege-edit").html(`<div>${menuHtml}</div>`)
}
})
}
function assignDealer(roleId) {
// Set form action
let url = '{{ route("roleprivileges.assignDealer", ":id") }}'.replace(':id', roleId);
$("#assignDealerForm").attr("action", url);
// Reset checkboxes and counter
$('.dealer-checkbox').prop('checked', false);
updateSelectedCount();
// Load existing assigned dealers
$.ajax({
url: '{{ route("roleprivileges.getAssignedDealers", ":id") }}'.replace(':id', roleId),
type: 'GET',
success: function(response) {
if (response.assignedDealers) {
response.assignedDealers.forEach(function(dealerId) {
$(`#dealer_${dealerId}`).prop('checked', true);
});
}
updateSelectedCount();
},
error: function() {
console.log('Error loading assigned dealers');
updateSelectedCount();
}
});
$("#assignDealerModal").modal("show");
}
function selectAllDealers() {
$('.dealer-checkbox').prop('checked', true);
updateSelectedCount();
}
function deselectAllDealers() {
$('.dealer-checkbox').prop('checked', false);
updateSelectedCount();
}
function updateSelectedCount() {
const selectedCount = $('.dealer-checkbox:checked').length;
$('#selectedCount').text(selectedCount);
// Update submit button state
if (selectedCount > 0) {
$('#submitBtn').prop('disabled', false).removeClass('btn-secondary').addClass('btn-primary');
} else {
$('#submitBtn').prop('disabled', true).removeClass('btn-primary').addClass('btn-secondary');
}
}
$(document).ready(function () {
// Add event handlers for modal close buttons
$('.close, [data-dismiss="modal"]').on("click", function () {
$("#roleModal").modal("hide");
$("#roleEditModal").modal("hide");
$("#assignDealerModal").modal("hide");
});
// Also handle the "Close" button
$('.btn-secondary[data-dismiss="modal"]').on("click", function () {
$("#roleModal").modal("hide");
$("#roleEditModal").modal("hide");
$("#assignDealerModal").modal("hide");
});
// Event listener for dealer checkboxes
$(document).on('change', '.dealer-checkbox', function() {
updateSelectedCount();
});
// Handle form submission for assign dealer
$("#assignDealerForm").on("submit", function(e) {
e.preventDefault();
// Validate if at least one dealer is selected
const selectedDealers = $('.dealer-checkbox:checked').length;
if (selectedDealers === 0) {
Swal.fire({
title: 'Peringatan!',
text: 'Silakan pilih minimal satu dealer',
icon: 'warning',
confirmButtonText: 'OK'
});
return;
}
// Disable submit button and show loading
const submitBtn = $('#submitBtn');
const originalText = submitBtn.html();
submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-1"></i>Menyimpan...');
let formData = new FormData(this);
let url = $(this).attr("action");
$.ajax({
url: url,
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
if (response.success) {
Swal.fire({
title: 'Berhasil!',
text: response.message,
icon: 'success',
confirmButtonText: 'OK'
}).then(() => {
location.reload();
});
} else {
Swal.fire({
title: 'Error!',
text: response.message || 'Terjadi kesalahan',
icon: 'error',
confirmButtonText: 'OK'
});
}
},
error: function(xhr) {
let message = 'Terjadi kesalahan';
if (xhr.responseJSON && xhr.responseJSON.message) {
message = xhr.responseJSON.message;
}
Swal.fire({
title: 'Error!',
text: message,
icon: 'error',
confirmButtonText: 'OK'
});
},
complete: function() {
// Re-enable submit button
submitBtn.prop('disabled', false).html(originalText);
}
});
});
});
</script>
@endsection