arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix no data and handle default page load no data

Browse Source
This commit is contained in:
arifal
2025-08-26 13:59:36 +07:00
parent c6257b79bf
commit 63310f2748
4 changed files with 487 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
resources/js/public-search/index.js
View File

@@ -8,12 +8,42 @@ class PublicSearch {
this.baseUrl = baseInput ? baseInput.value.split("?")[0] : "";
this.keywordInput = document.getElementById("search_input");
this.searchButton = document.getElementById("search_button");
this.searchHeader = document.getElementById("search-header");
this.tableWrapper = document.getElementById("table-wrapper");
this.emptyState = document.getElementById("empty-state");
this.datatableUrl = this.buildUrl(this.keywordInput.value);
// Tidak inisialisasi datatable sampai ada pencarian
this.datatableUrl = null;
}
init() {
this.bindSearchButton();
// Check if there's a keyword in URL
const urlParams = new URLSearchParams(window.location.search);
const keyword = urlParams.get("keyword");
if (keyword && keyword.trim() !== "") {
this.keywordInput.value = keyword.trim();
this.handleSearchFromUrl(keyword.trim());
}
}
handleSearchFromUrl(keyword) {
// Validasi input kosong atau hanya spasi
if (!keyword || keyword.trim().length === 0) {
this.showEmptyState("Mulai Pencarian");
return;
}
// Validasi minimal 3 karakter
if (keyword.trim().length < 3) {
this.showEmptyState("Minimal 3 karakter untuk pencarian");
return;
}
this.datatableUrl = this.buildUrl(keyword.trim());
this.showSearchResults();
this.initDatatable();
}
@@ -21,8 +51,21 @@ class PublicSearch {
const handleSearch = () => {
const newKeyword = this.keywordInput.value.trim();
// Validasi input kosong atau hanya spasi
if (!newKeyword || newKeyword.length === 0) {
this.showEmptyState("Mulai Pencarian");
return;
}
// Validasi minimal 3 karakter (setelah trim)
if (newKeyword.length < 3) {
this.showEmptyState("Minimal 3 karakter untuk pencarian");
return;
}
// 1. Update datatable URL and reload
this.datatableUrl = this.buildUrl(newKeyword);
this.showSearchResults();
this.initDatatable();
// 2. Update URL query string (tanpa reload page)
@@ -46,13 +89,64 @@ class PublicSearch {
handleSearch();
}
});
// Handle input change untuk real-time validation
this.keywordInput.addEventListener("input", (event) => {
const value = event.target.value.trim();
// Remove existing classes
this.keywordInput.classList.remove("valid", "warning", "invalid");
// Jika input kosong atau hanya spasi, show empty state
if (!value || value.length === 0) {
this.showEmptyState("Mulai Pencarian");
return;
}
// Jika kurang dari 3 karakter, show warning
if (value.length < 3) {
this.showEmptyState("Minimal 3 karakter untuk pencarian");
this.keywordInput.classList.add("warning");
return;
}
// Jika valid, add valid class
this.keywordInput.classList.add("valid");
});
// Handle input focus untuk clear warning state
this.keywordInput.addEventListener("focus", () => {
const value = this.keywordInput.value.trim();
if (value.length >= 3) {
// Jika sudah valid, hide empty state
this.emptyState.style.display = "none";
}
});
// Handle input blur untuk final validation
this.keywordInput.addEventListener("blur", () => {
const value = this.keywordInput.value.trim();
if (!value || value.length === 0) {
this.showEmptyState("Mulai Pencarian");
} else if (value.length < 3) {
this.showEmptyState("Minimal 3 karakter untuk pencarian");
}
});
// Handle Escape key untuk clear search
this.keywordInput.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
this.clearSearch();
}
});
}
buildUrl(keyword) {
const url = new URL(this.baseUrl, window.location.origin);
if (keyword && keyword.trim() !== "") {
url.searchParams.set("search", keyword);
// Validasi keyword tidak kosong dan tidak hanya spasi
if (keyword && keyword.trim() !== "" && keyword.trim().length >= 3) {
url.searchParams.set("search", keyword.trim());
} else {
url.searchParams.delete("search"); // pastikan tidak ada search param
}
@@ -60,6 +154,73 @@ class PublicSearch {
return url.toString();
}
showSearchResults() {
this.searchHeader.style.display = "block";
this.tableWrapper.style.display = "block";
this.emptyState.style.display = "none";
}
showEmptyState(message = "Tidak ada data yang ditemukan") {
this.searchHeader.style.display = "none";
this.tableWrapper.style.display = "none";
this.emptyState.style.display = "block";
// Update empty state message and icon
const emptyStateTitle = this.emptyState.querySelector("h4");
const emptyStateDesc = this.emptyState.querySelector("p");
const emptyIcon = this.emptyState.querySelector(".empty-icon i");
if (emptyStateTitle) {
emptyStateTitle.textContent = message;
}
if (emptyStateDesc) {
if (message === "Mulai Pencarian") {
emptyStateDesc.textContent =
"Masukkan kata kunci minimal 3 karakter untuk mencari data PBG";
} else if (message === "Minimal 3 karakter untuk pencarian") {
emptyStateDesc.textContent =
"Masukkan kata kunci minimal 3 karakter untuk mencari data PBG";
} else {
emptyStateDesc.textContent =
"Coba gunakan kata kunci yang berbeda atau lebih spesifik";
}
}
// Update icon based on message
if (emptyIcon) {
if (message === "Mulai Pencarian") {
emptyIcon.className = "fas fa-search fa-3x text-muted";
} else if (message === "Minimal 3 karakter untuk pencarian") {
emptyIcon.className =
"fas fa-exclamation-triangle fa-3x text-warning";
} else {
emptyIcon.className = "fas fa-search fa-3x text-muted";
}
}
// Clear existing table if any
if (this.table) {
this.table.destroy();
this.table = null;
}
}
clearSearch() {
this.keywordInput.value = "";
this.showEmptyState("Mulai Pencarian");
// Reset CSS classes
this.keywordInput.classList.remove("valid", "warning", "invalid");
// Clear URL parameter
const newUrl = window.location.pathname;
window.history.pushState({ path: newUrl }, "", newUrl);
// Reset datatable URL
this.datatableUrl = null;
}
initDatatable() {
const tableContainer = document.getElementById(
"datatable-public-search"
@@ -67,17 +228,17 @@ class PublicSearch {
const config = {
columns: [
"ID",
{ name: "Nama Pemohon" },
{ name: "Nama Pemilik" },
{ name: "Kondisi" },
"Nomor Registrasi",
"Status",
"Jenis Fungsi",
{ name: "Nama Bangunan" },
"Jenis Konsultasi",
{ name: "Tanggal Jatuh Tempo" },
{ name: "Retribusi" },
{ name: "ID", width: "80px" },
{ name: "Nama Pemohon", width: "150px" },
{ name: "Nama Pemilik", width: "150px" },
{ name: "Kondisi", width: "120px" },
{ name: "Nomor Registrasi", width: "180px" },
{ name: "Status", width: "120px" },
{ name: "Jenis Fungsi", width: "150px" },
{ name: "Nama Bangunan", width: "200px" },
{ name: "Jenis Konsultasi", width: "150px" },
{ name: "Tanggal Jatuh Tempo", width: "140px" },
{ name: "Retribusi", width: "120px" },
],
search: false,
pagination: {
@@ -92,21 +253,40 @@ class PublicSearch {
sort: true,
server: {
url: this.datatableUrl,
then: (data) =>
data.data.map((item) => [
item.id,
item.name,
item.owner_name,
item.condition,
item.registration_number,
item.status_name,
item.function_type,
item.name_building,
item.consultation_type,
item.due_date,
addThousandSeparators(item.nilai_retribusi_bangunan),
]),
total: (data) => data.total,
then: (data) => {
// Check if data is empty
if (!data.data || data.data.length === 0) {
this.showEmptyState(
data.message || "Tidak ada data yang ditemukan"
);
return [];
}
return data.data.map((item) => [
item.id || "-",
item.name || "-",
item.owner_name || "-",
item.condition || "-",
item.registration_number || "-",
item.status_name || "-",
item.function_type || "-",
item.name_building || "-",
item.consultation_type || "-",
item.due_date || "-",
item.nilai_retribusi_bangunan
? addThousandSeparators(
item.nilai_retribusi_bangunan
)
: "-",
]);
},
total: (data) => data.total || 0,
error: (error) => {
console.error("Datatable error:", error);
this.showEmptyState(
"Terjadi kesalahan saat mengambil data"
);
},
},
};