191 lines
12 KiB
PHP
191 lines
12 KiB
PHP
@extends('layouts.master')
|
|
|
|
@section('styles')
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
|
|
<style>
|
|
.card-body label {
|
|
font-size: 13px;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.card-body .form-control,
|
|
.card-body .form-select {
|
|
font-size: 14px;
|
|
}
|
|
|
|
#search-button {
|
|
font-weight: 600;
|
|
letter-spacing: .3px;
|
|
}
|
|
.table-garis, .garis {
|
|
border: 0.1px solid black; /* Sets a 1px solid black border */
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.text-label {
|
|
color: #000000;
|
|
}
|
|
/*
|
|
.table-selectable tbody tr {
|
|
cursor: pointer;
|
|
transition: 0.15s;
|
|
}
|
|
|
|
.table-selectable tbody tr:hover {
|
|
background-color: #f2f6ff;
|
|
}
|
|
|
|
.table-selectable tbody tr.selected {
|
|
background-color: #0d6efd !important;
|
|
color: #fff;
|
|
}
|
|
|
|
.table-selectable tbody tr.selected td {
|
|
color: #fff !important;
|
|
} */
|
|
</style>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<!-- partial -->
|
|
<div class="container-fluid page-body-wrapper">
|
|
<div class="main-panel">
|
|
<div class="content-wrapper">
|
|
<div class="row">
|
|
<div class="col-12 col-md-8 grid-margin stretch-card">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Daftar Level Pengguna</h4>
|
|
<div class="table-responsive mb-2">
|
|
<table class="table table-bordered table-selectable" id="level-table" data-url="">
|
|
<thead>
|
|
<tr>
|
|
<th class="p-3" width="3%">No.</th>
|
|
<th style="text-align: center;" width="10%">Level Code</th>
|
|
<th style="text-align: center;">Level Pengguna</th>
|
|
<th style="text-align: center;">Tanggal Dibuat</th>
|
|
<th style="text-align: center;">Hak Akses</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($levelAvail as $level)
|
|
<tr>
|
|
<td class="text-center">{{ $loop->iteration }}</td>
|
|
<td class="text-center" hidden>{{ $level->level_id }}</td>
|
|
<td class="text-center" width="7%" data-level-id="{{ $level->level_id }}" data-level-code="{{ $level->level_code }}" data-level-name="{{ $level->level_name }}">{{ $level->level_code }} </td>
|
|
<td>{{ $level->level_name }}</td>
|
|
<td class="text-center" width="10%">{{ $level->create_date ? \Carbon\Carbon::parse($level->create_date)->format('Y-m-d') : '-' }}</td>
|
|
<td class="text-center" width="12%">
|
|
<button type="button" class="user-acess" data-bs-toggle="modal" title="Izin Akses" data-bs-target=".bd-ubah-modal-lg"><i class="fa-solid fa-user-gear"></i></button>
|
|
<button type="button" class="user-menu" data-bs-toggle="modal" id="menuakses" title="Menu Akses" data-bs-target=".user-menu-modal-lg"><i class="fa-solid fa-bars"></i></button>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="d-flex justify-content-center align-items-center mt-2">
|
|
<div class="d-flex gap-2">
|
|
<button class="btn btn-primary btn-sm" id="btnAddLevel" type="button">Tambah</button>
|
|
<button class="btn btn-warning btn-sm" id="btnEditLevel" type="button" disabled>Ubah</button>
|
|
<button class="btn btn-danger btn-sm" id="btnDeleteLevel" type="button" disabled>Hapus</button>
|
|
<button class="btn btn-info btn-sm" id="btnDetailLevel" type="button" disabled>Detail</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--</div>-->
|
|
</div>
|
|
<div class="col-2">
|
|
<!-- ADD MEMMBER MODAL -->
|
|
@include('setup.UserLevel.level-user-menu')
|
|
<!-- END MEMMBER MODAL -->
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="level-detail-modal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered"><div class="modal-content">
|
|
<div class="modal-header"><h5 class="modal-title">Detail Level Pengguna</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
|
|
<div class="modal-body" id="level-detail-body"></div>
|
|
</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('javascript')
|
|
<!--********* Scripts *********-->
|
|
<!-- Datatable -->
|
|
<!--********* Scripts *********-->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/3.0.7/metisMenu.min.js"></script>
|
|
<script src="{{asset ('vendor/moment/moment.min.js') }}"></script>
|
|
<script src="{{asset ('vendor/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
|
|
<script src="{{asset ('vendor/bootstrap-select/dist/js/bootstrap-select.min.js') }}"></script>
|
|
<script src="{{asset ('vendor/sweetalert2/dist/sweetalert2.min.js') }}"></script>
|
|
<script src="{{asset ('js/custom.min.js') }}"></script>
|
|
<script src="{{asset ('js/dlabnav-init.js') }}"></script>
|
|
<script>
|
|
$(function () {
|
|
let selected = null;
|
|
const csrf = $('meta[name="csrf-token"]').attr('content');
|
|
const routes = {
|
|
store: '{{ route('levelUser.store', [], false) }}',
|
|
show: '{{ route('levelUser.show', ':id', false) }}',
|
|
update: '{{ route('levelUser.update', ':id', false) }}',
|
|
destroy: '{{ route('levelUser.destroy', ':id', false) }}'
|
|
};
|
|
|
|
function setSelected(row) {
|
|
$('#level-table tbody tr').removeClass('table-active');
|
|
selected = row ? $(row).find('[data-level-id]').data() : null;
|
|
if (row) $(row).addClass('table-active');
|
|
$('#btnDetailLevel, #btnEditLevel, #btnDeleteLevel').prop('disabled', !selected);
|
|
}
|
|
|
|
function formRow(mode, level) {
|
|
const isEdit = mode === 'edit';
|
|
return `<tr class="level-form-row"><td colspan="5"><form class="level-inline-form" data-mode="${mode}" data-id="${level?.levelId || ''}"><div class="row g-2 align-items-end"><div class="col-md-3"><label class="form-label mb-1">Level Code</label><input class="form-control" name="level_code" maxlength="10" value="${level?.levelCode || ''}" ${isEdit ? 'readonly' : ''} required></div><div class="col-md-5"><label class="form-label mb-1">Level Pengguna</label><input class="form-control" name="level_name" maxlength="30" value="${level?.levelName || ''}" required></div><div class="col-md-4 d-flex gap-2"><button class="btn btn-success" type="submit">Simpan</button><button class="btn btn-light border cancel-level-form" type="button">Batal</button></div></div></form></td></tr>`;
|
|
}
|
|
|
|
$('#level-table tbody').on('click', 'tr:not(.level-form-row)', function () { setSelected(this); });
|
|
$('#btnAddLevel').on('click', function () { $('.level-form-row').remove(); $('#level-table tbody').prepend(formRow('create')); setSelected(null); });
|
|
$('#btnEditLevel').on('click', function () { if (!selected) return; $('.level-form-row').remove(); $('#level-table tbody tr').filter(function(){ return $(this).find('[data-level-id]').data('level-id') === selected.levelId; }).after(formRow('edit', selected)); });
|
|
$(document).on('click', '.cancel-level-form', function () { $(this).closest('tr').remove(); });
|
|
|
|
$(document).on('submit', '.level-inline-form', function (event) {
|
|
event.preventDefault(); const form = $(this); const id = form.data('id'); const edit = form.data('mode') === 'edit';
|
|
const btn = form.find('[type="submit"]'); const btnHtml = btn.html();
|
|
btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan...');
|
|
$.ajax({
|
|
url: edit ? routes.update.replace(':id', encodeURIComponent(id)) : routes.store,
|
|
type: edit ? 'PUT' : 'POST', data: form.serialize(), headers: {'X-CSRF-TOKEN': csrf},
|
|
success: () => window.location.reload(),
|
|
error: xhr => {
|
|
btn.prop('disabled', false).html(btnHtml);
|
|
Swal.fire({icon: 'error', title: 'Gagal menyimpan', text: xhr.responseJSON?.message || Object.values(xhr.responseJSON?.errors || {}).flat().join('\n') || 'Gagal menyimpan level.'});
|
|
}
|
|
});
|
|
});
|
|
|
|
$('#btnDeleteLevel').on('click', function () {
|
|
if (!selected) return;
|
|
Swal.fire({title:'Hapus level?', text:`${selected.levelCode} - ${selected.levelName}`, icon:'warning', showCancelButton:true, confirmButtonText:'Ya, hapus', cancelButtonText:'Batal', confirmButtonColor:'#dc3545', showLoaderOnConfirm: true, preConfirm: () => $.ajax({url: routes.destroy.replace(':id', encodeURIComponent(selected.levelId)), type:'DELETE', headers:{'X-CSRF-TOKEN':csrf}}).catch(xhr => { Swal.showValidationMessage(xhr.responseJSON?.message || 'Level tidak dapat dihapus.'); })})
|
|
.then(result => { if (result.isConfirmed && result.value) { Swal.fire({icon: 'success', title: 'Berhasil', text: 'Level dihapus.', timer: 1500, showConfirmButton: false}).then(() => window.location.reload()); } });
|
|
});
|
|
|
|
$('#btnDetailLevel').on('click', function () {
|
|
if (!selected) return;
|
|
const btn = $(this); const btnHtml = btn.html();
|
|
btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Memuat...');
|
|
$('#level-detail-body').html('<div class="text-center py-3"><span class="spinner-border spinner-border-sm me-2"></span>Memuat detail...</div>');
|
|
new bootstrap.Modal(document.getElementById('level-detail-modal')).show();
|
|
$.get(routes.show.replace(':id', encodeURIComponent(selected.levelId)), function(r) {
|
|
$('#level-detail-body').html(`<dl class="row mb-0"><dt class="col-5">Level Code</dt><dd class="col-7">${r.data.level_code}</dd><dt class="col-5">Nama Level</dt><dd class="col-7">${r.data.level_name}</dd><dt class="col-5">Dibuat</dt><dd class="col-7">${r.data.create_date ?? '-'}</dd><dt class="col-5">Diubah</dt><dd class="col-7">${r.data.update_date ?? '-'}</dd></dl>`);
|
|
}).fail(xhr => { $('#level-detail-body').html('<div class="text-danger text-center">' + (xhr.responseJSON?.message || 'Gagal memuat detail.') + '</div>'); }).always(() => btn.prop('disabled', false).html(btnHtml));
|
|
});
|
|
});
|
|
</script>
|
|
@endsection
|