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

feat(audit-logs): tambahkan fitur pencarian dan tampilan properti yang dapat diperluas

Browse Source 
- Menambahkan filter pencarian untuk 'subject_type' pada datatable.
- Memperbarui tampilan properti dengan fitur pratinjau dan expand/collapse.
- Mengubah format tanggal/waktu menggunakan fungsi lokal.
This commit is contained in:
Daeng Deni Mardaeni
2025-04-27 09:13:33 +07:00
parent c362854fdf
commit 2bbfa920f5
2 changed files with 62 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/Http/Controllers/AuditLogsController.php
View File

@@ -29,6 +29,7 @@
$q->where('log_name', 'LIKE', "%$search%")
->orWhere('description', 'LIKE', "%$search%")
->orWhere('subject_id', 'LIKE', "%$search%")
->orWhere('subject_type', 'LIKE', "%$search%")
->orWhere('causer_id', 'LIKE', "%$search%")
->orWhere('properties', 'LIKE', "%$search%");
});

64
resources/views/audit.blade.php
View File

@@ -102,7 +102,34 @@
title: 'Properties',
render: (item, data) => {
if (!data.properties) return 'N/A';
return `<pre>${JSON.stringify(data.properties, null, 2)}</pre>`;
// Generate a unique ID for this property
const propertyId = `property-${data.id || Math.random().toString(36).substr(2, 9)}`;
// Create a shortened preview (first 50 characters)
const preview = JSON.stringify(data.properties).substring(0, 50) + (JSON.stringify(data.properties).length > 50 ? '...' : '');
// Return HTML with expand/collapse functionality using Tailwind classes
return `
<div class="relative w-full">
<div class="flex justify-between items-center w-full">
<div class="max-w-[calc(100%-50px)] whitespace-nowrap overflow-hidden text-ellipsis" id="preview-${propertyId}">${preview}</div>
<div class="hidden max-h-[300px] overflow-y-auto bg-gray-100 p-2.5 rounded mt-1.5 w-full" id="full-${propertyId}">
<pre class="m-0 whitespace-pre-wrap break-words">${JSON.stringify(data.properties, null, 2)}</pre>
</div>
<div class="flex items-center ml-2.5">
<button type="button" class="btn btn-sm btn-outline btn-icon btn-info expand-property"
data-property-id="${propertyId}" id="expand-${propertyId}">
<i class="ki-duotone ki-arrow-down fs-7"></i>
</button>
<button type="button" class="btn btn-sm btn-outline btn-icon btn-info collapse-property hidden"
data-property-id="${propertyId}" id="collapse-${propertyId}">
<i class="ki-duotone ki-arrow-up fs-7"></i>
</button>
</div>
</div>
</div>
`;
}
},
causer_type: {
@@ -122,7 +149,7 @@
title: 'Date/Time',
render: (item, data) => {
const date = new Date(data.created_at);
return date.toLocaleString();
return window.formatTanggalWaktuIndonesia(date)
}
}
},
@@ -130,11 +157,42 @@
let dataTable = new KTDataTable(element, dataTableOptions);
// Add event delegation for expand/collapse buttons
document.querySelector('#audit-logs-table').addEventListener('click', function(e) {
// Handle expand button click
if (e.target.closest('.expand-property')) {
const button = e.target.closest('.expand-property');
const propertyId = button.getAttribute('data-property-id');
// Show full property and hide preview
document.getElementById(`preview-${propertyId}`).style.display = 'none';
document.getElementById(`full-${propertyId}`).style.display = 'block';
// Toggle buttons
document.getElementById(`expand-${propertyId}`).style.display = 'none';
document.getElementById(`collapse-${propertyId}`).style.display = 'inline-flex';
}
// Handle collapse button click
if (e.target.closest('.collapse-property')) {
const button = e.target.closest('.collapse-property');
const propertyId = button.getAttribute('data-property-id');
// Hide full property and show preview
document.getElementById(`preview-${propertyId}`).style.display = 'block';
document.getElementById(`full-${propertyId}`).style.display = 'none';
// Toggle buttons
document.getElementById(`expand-${propertyId}`).style.display = 'inline-flex';
document.getElementById(`collapse-${propertyId}`).style.display = 'none';
}
});
// Custom search functionality
searchInput.addEventListener('input', function() {
const searchValue = this.value.trim();
// Reset to page 1 when searching and then perform search
dataTable.goToPage(1);
dataTable.goPage(1);
dataTable.search(searchValue, true);
});