250 lines
9.7 KiB
PHP
250 lines
9.7 KiB
PHP
@extends('admin.layouts.app')
|
||
|
||
@section('title', 'Pengajuan')
|
||
|
||
@push('styles')
|
||
<link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
|
||
<link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css" rel="stylesheet">
|
||
|
||
<style>
|
||
.soft-card {
|
||
border: 0;
|
||
border-radius: 16px;
|
||
box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
|
||
}
|
||
|
||
.table-hlines {
|
||
--line: #e9edf4;
|
||
}
|
||
|
||
.table-hlines> :not(caption)>*>* {
|
||
border-top: 0;
|
||
border-right: 0 !important;
|
||
border-left: 0 !important;
|
||
border-bottom: 1px solid var(--line);
|
||
background: transparent;
|
||
}
|
||
|
||
.table-hlines thead th {
|
||
border-bottom: 2px solid var(--line) !important;
|
||
}
|
||
|
||
.table-hlines.table-hover tbody tr:hover {
|
||
background: transparent !important;
|
||
}
|
||
|
||
table.dataTable.hover>tbody>tr:hover>*,
|
||
table.dataTable.display>tbody>tr:hover>* {
|
||
background: transparent !important;
|
||
}
|
||
|
||
.table-sticky thead th {
|
||
position: sticky;
|
||
top: 0;
|
||
background: #fff;
|
||
z-index: 1
|
||
}
|
||
|
||
div.dataTables_filter,
|
||
div.dataTables_length {
|
||
display: none
|
||
}
|
||
|
||
.badge-status-diterima {
|
||
background: #a6e7d8;
|
||
color: #008767;
|
||
border: 1px solid rgba(0, 0, 0, .05)
|
||
}
|
||
|
||
.badge-status-diajukan {
|
||
background: #ffd5b6;
|
||
color: #a24c00;
|
||
border: 1px solid rgba(0, 0, 0, .05)
|
||
}
|
||
|
||
.badge-status-ditolak {
|
||
background: #ffc5c5;
|
||
color: #df0404;
|
||
border: 1px solid rgba(0, 0, 0, .05)
|
||
}
|
||
|
||
.dataTables_wrapper .dataTables_info {
|
||
padding-top: .75rem
|
||
}
|
||
|
||
.dataTables_wrapper .dataTables_paginate .pagination {
|
||
margin: 0
|
||
}
|
||
|
||
.dataTables_wrapper .form-select.form-select-sm {
|
||
padding: .25rem 1.5rem .25rem .5rem
|
||
}
|
||
|
||
.dataTables_wrapper .dataTables_filter input {
|
||
width: 180px
|
||
}
|
||
|
||
@media (min-width:992px) {
|
||
.dataTables_wrapper .dataTables_filter input {
|
||
width: 260px
|
||
}
|
||
}
|
||
</style>
|
||
@endpush
|
||
|
||
@section('content')
|
||
<div class="card soft-card">
|
||
<div class="card-body">
|
||
<div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
|
||
<div>
|
||
<h4 class="mb-0">Pengajuan Izin</h4>
|
||
<small style="color: #0f766e">Anggota aktif</small>
|
||
</div>
|
||
@if (session('success'))
|
||
<div class="alert alert-success mt-4">
|
||
{{ session('success') }}
|
||
</div>
|
||
@endif
|
||
<div class="d-flex align-items-center gap-2">
|
||
<div class="input-group input-group-sm" style="max-width:260px;">
|
||
<span class="input-group-text bg-white"><i class="ti ti-search"></i></span>
|
||
<input id="tableSearch" type="text" class="form-control" placeholder="Search">
|
||
</div>
|
||
<div class="dropdown">
|
||
<button id="sortDropdownLabel" class="btn btn-sm btn-light border dropdown-toggle"
|
||
data-bs-toggle="dropdown">
|
||
Short by : Newest
|
||
</button>
|
||
<ul class="dropdown-menu dropdown-menu-end">
|
||
<li><a class="dropdown-item" href="#" data-sort="newest">Newest</a></li>
|
||
<li><a class="dropdown-item" href="#" data-sort="oldest">Oldest</a></li>
|
||
<li><a class="dropdown-item" href="#" data-sort="name-asc">Name A–Z</a></li>
|
||
<li><a class="dropdown-item" href="#" data-sort="name-desc">Name Z–A</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<table id="pengajuanTable" class="table align-middle w-100 table-sticky table-hlines table-hover">
|
||
<thead>
|
||
<tr>
|
||
<th>Nama</th>
|
||
<th>Jabatan</th>
|
||
<th class="d-none d-md-table-cell">Tanggal</th>
|
||
<th class="d-none d-md-table-cell">Keterangan</th>
|
||
<th>Status</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@forelse ($data as $index => $r)
|
||
@php
|
||
$idPengajuan = $r->id;
|
||
$status = $r['status'];
|
||
$name = $r->user->name;
|
||
$jabatan = $r->user->role;
|
||
$tanggalDisp = \Carbon\Carbon::parse($r->date)->translatedFormat('d F Y');
|
||
$badgeClass =
|
||
[
|
||
'disetujui' => 'badge-status-diterima',
|
||
'diajukan' => 'badge-status-diajukan',
|
||
'ditolak' => 'badge-status-ditolak',
|
||
][$status] ?? 'badge-status-diajukan';
|
||
$statusText = ucfirst($status);
|
||
@endphp
|
||
<tr onclick="window.location='{{ route('admin.pengajuan.detail', ['id' => $idPengajuan]) }}'"
|
||
style="cursor:pointer">
|
||
<td>{{ $name }}</td>
|
||
<td>{{ $jabatan }}</td>
|
||
<td class="d-none d-md-table-cell" data-order="{{ $r['date'] }}">{{ $tanggalDisp }}</td>
|
||
<td class="d-none d-md-table-cell">{{ $r['keterangan'] }}</td>
|
||
<td><span class="badge rounded-pill {{ $badgeClass }}">{{ $statusText }}</span></td>
|
||
</tr>
|
||
@empty
|
||
<tr>
|
||
<td colspan="5" class="text-center py-4">Data pengajuan masih kosong.</td>
|
||
</tr>
|
||
@endforelse
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
@endsection
|
||
|
||
@push('scripts')
|
||
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
|
||
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
|
||
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
|
||
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
|
||
|
||
<script>
|
||
$(function() {
|
||
var hasData = $('#pengajuanTable tbody tr').length > 0 && !$('#pengajuanTable tbody tr td[colspan]')
|
||
.length;
|
||
if (typeof $.fn.DataTable !== 'undefined' && hasData) {
|
||
var table = $('#pengajuanTable').DataTable({
|
||
autoWidth: false,
|
||
responsive: {
|
||
details: false
|
||
},
|
||
paging: true,
|
||
pageLength: 8,
|
||
lengthChange: false,
|
||
info: true,
|
||
ordering: true,
|
||
searching: true,
|
||
order: [
|
||
[2, 'desc']
|
||
],
|
||
language: {
|
||
search: "Cari:",
|
||
searchPlaceholder: "Ketik untuk mencari...",
|
||
lengthMenu: "Tampilkan _MENU_",
|
||
info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
|
||
infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
|
||
infoFiltered: "(difilter dari _MAX_ total data)",
|
||
paginate: {
|
||
first: "Pertama",
|
||
last: "Terakhir",
|
||
next: "Selanjutnya",
|
||
previous: "Sebelumnya"
|
||
},
|
||
emptyTable: "Tidak ada data yang tersedia",
|
||
zeroRecords: "Tidak ada data yang cocok"
|
||
},
|
||
columnDefs: [{
|
||
targets: [2, 4],
|
||
className: 'text-nowrap'
|
||
},
|
||
{
|
||
targets: 4,
|
||
orderable: false
|
||
}
|
||
],
|
||
dom: "rt<'row align-items-center mt-3'<'col-sm-6 text-center text-sm-start'i><'col-sm-6 d-flex justify-content-center justify-content-sm-end'p>>"
|
||
});
|
||
|
||
$('#tableSearch').on('keyup', function() {
|
||
table.search(this.value).draw();
|
||
});
|
||
|
||
$('[data-sort]').on('click', function(e) {
|
||
e.preventDefault();
|
||
const sort = $(this).data('sort');
|
||
if (sort === 'newest') table.order([
|
||
[2, 'desc']
|
||
]).draw();
|
||
if (sort === 'oldest') table.order([
|
||
[2, 'asc']
|
||
]).draw();
|
||
if (sort === 'name-asc') table.order([
|
||
[0, 'asc']
|
||
]).draw();
|
||
if (sort === 'name-desc') table.order([
|
||
[0, 'desc']
|
||
]).draw();
|
||
$('#sortDropdownLabel').text($(this).text());
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
@endpush
|