daengdeni/lpj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tambahkan fitur data untuk laporan datatables

Browse Source 
- Menambahkan metode `dataForDatatables` di `LaporanController` untuk keperluan pencarian, pengurutan, dan paginasi data laporan.
- Memperbarui view `laporan/index.blade.php` agar mendukung penggunaan datatables untuk menampilkan data laporan dengan kolom baru.
- Menambahkan route baru untuk akses endpoint datatables laporan.
- Memodifikasi `module.json` dengan menggabungkan menu "Resume" dan "Laporan" menjadi satu menu "Resume dan Laporan".
This commit is contained in:
Daeng Deni Mardaeni
2024-12-23 23:10:54 +07:00
parent afe0563361
commit 1dbd45a27d
4 changed files with 197 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
resources/views/laporan/index.blade.php
View File

@@ -7,10 +7,8 @@
@section('content')
<div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
<div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="10"
data-datatable-state-save="false" id="penilai-table" data-api-url="{{ route('penilai.dataForTables') }}">
data-datatable-state-save="false" id="laporan-table" data-api-url="{{ route('laporan.datatables') }}">
<div class="card-header py-5 flex-wrap">
<h3 class="card-title">
Laporan
@@ -69,7 +67,8 @@
<span class="sort"> <span class="sort-label"> Due Date SLA </span>
<span class="sort-icon"> </span> </span>
</th>
<th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
<th class="min-w-[50px] text-center" data-datatable-column="status">Status</th>
<th class="min-w-[50px] text-center" data-datatable-column="actions">Actions</th>
</tr>
</thead>
</table>
@@ -88,9 +87,124 @@
</div>
</div>
</div>
</div>
</div>
@endsection
@push('scripts')
<script type="module">
const element = document.querySelector('#laporan-table');
const searchInput = document.getElementById('search');
const apiUrl = element.getAttribute('data-api-url');
const dataTableOptions = {
apiEndpoint: apiUrl,
pageSize: 5,
columns: {
select: {
render: (item, data, context) => {
const checkbox = document.createElement('input');
checkbox.className = 'checkbox checkbox-sm';
checkbox.type = 'checkbox';
checkbox.value = data.id.toString();
checkbox.setAttribute('data-datatable-row-check', 'true');
return checkbox.outerHTML.trim();
},
},
nomor_registrasi: {
title: 'Nomor Registrasi',
},
debitur_id: {
title: 'Debitur',
render: (item, data) => {
if (data.debiture) {
return `${data.debiture.name.toUpperCase()}`;
}
return "-";
},
},
branch_id: {
title: 'Cabang Pemohon',
render: (item, data) => {
return `${data.branch.name}`;
},
},
user_id: {
title: 'User Pemohon',
render: (item, data) => {
return `${data.user.name}`;
},
},
tujuan_penilaian_id: {
title: 'Tujuan Penilaian',
render: (item, data) => {
switch (data.tujuan_penilaian.code) {
case "TP0001":
return `<span class="badge badge-sm badge-primary">${data.tujuan_penilaian.name}</span>`;
case "TP0002":
return `<span class="badge badge-sm badge-info">${data.tujuan_penilaian.name}</span>`;
case "TP0003":
return `<span class="badge badge-sm badge-success">${data.tujuan_penilaian.name}</span>`;
case "TP0004":
return `<span class="badge badge-sm badge-danger">${data.tujuan_penilaian.name}</span>`;
case "TP0005":
return `<span class="badge badge-sm badge-warning">${data.tujuan_penilaian.name}</span>`;
case "TP0006":
return `<span class="badge badge-sm badge-dark">${data.tujuan_penilaian.name}</span>`;
case "TP0007":
return `<span class="badge badge-sm badge-outline badge-info">${data.tujuan_penilaian.name}</span>`;
default:
return `<span class="badge badge-sm badge-outline badge-default">${data.tujuan_penilaian.name}</span>`;
}
},
},
jenis_fasilitas_kredit_id:{
title: 'Fasilitas Kredit',
render: (item, data) => {
return `${data.jenis_fasilitas_kredit.name}`;
}
},
tanggal_survei:{
title: 'Tanggal Survei',
render: (item, data) => {
return '-';
}
},
due_date_sla: {
title: 'Due Date SLA',
render: (item, data) => {
return '-';
}
},
status: {
title: 'Status',
render: (item, data) => {
return `<span class="badge badge-sm badge-default uppercase flex justify-center">${data.status}</span>`;
}
},
actions: {
title: 'Actions',
render: (item, data) => {
return `
<a href="" class="btn btn-sm btn-success">
Resume
</a>
<a href="#" class="btn btn-sm btn-dark">
Laporan
</a>
`;
},
}
},
};
let dataTable = new KTDataTable(element, dataTableOptions);
// Custom search functionality
searchInput.addEventListener('input', function () {
const searchValue = this.value.trim();
dataTable.search(searchValue, true);
});
</script>
@endpush