create public search
This commit is contained in:
arifal hidayat
130
resources/js/public-search/index.js
Normal file
130
resources/js/public-search/index.js
Normal file
@@ -0,0 +1,130 @@
|
||||
import { Grid, html } from "gridjs";
|
||||
import { addThousandSeparators } from "../global-config";
|
||||
|
||||
class PublicSearch {
|
||||
constructor() {
|
||||
this.table = null;
|
||||
const baseInput = document.getElementById("base_url_datatable");
|
||||
this.baseUrl = baseInput ? baseInput.value.split("?")[0] : "";
|
||||
this.keywordInput = document.getElementById("search_input");
|
||||
this.searchButton = document.getElementById("search_button");
|
||||
|
||||
this.datatableUrl = this.buildUrl(this.keywordInput.value);
|
||||
}
|
||||
|
||||
init() {
|
||||
this.bindSearchButton();
|
||||
this.initDatatable();
|
||||
}
|
||||
|
||||
bindSearchButton() {
|
||||
const handleSearch = () => {
|
||||
const newKeyword = this.keywordInput.value.trim();
|
||||
|
||||
// 1. Update datatable URL and reload
|
||||
this.datatableUrl = this.buildUrl(newKeyword);
|
||||
this.initDatatable();
|
||||
|
||||
// 2. Update URL query string (tanpa reload page)
|
||||
const newUrl = `${window.location.pathname}${
|
||||
newKeyword ? `?keyword=${encodeURIComponent(newKeyword)}` : ""
|
||||
}`;
|
||||
window.history.pushState({ path: newUrl }, "", newUrl);
|
||||
|
||||
// 3. Update visible keyword text di <em>{{ $keyword }}</em>>
|
||||
const keywordDisplay = document.querySelector(".qs-header em");
|
||||
if (keywordDisplay) {
|
||||
keywordDisplay.textContent = newKeyword || "-";
|
||||
}
|
||||
};
|
||||
|
||||
this.searchButton.addEventListener("click", handleSearch);
|
||||
|
||||
this.keywordInput.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
handleSearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
buildUrl(keyword) {
|
||||
const url = new URL(this.baseUrl, window.location.origin);
|
||||
|
||||
if (keyword && keyword.trim() !== "") {
|
||||
url.searchParams.set("search", keyword);
|
||||
} else {
|
||||
url.searchParams.delete("search"); // pastikan tidak ada search param
|
||||
}
|
||||
|
||||
return url.toString();
|
||||
}
|
||||
|
||||
initDatatable() {
|
||||
const tableContainer = document.getElementById(
|
||||
"datatable-public-search"
|
||||
);
|
||||
|
||||
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" },
|
||||
],
|
||||
search: false,
|
||||
pagination: {
|
||||
limit: 15,
|
||||
server: {
|
||||
url: (prev, page) =>
|
||||
`${prev}${prev.includes("?") ? "&" : "?"}page=${
|
||||
page + 1
|
||||
}`,
|
||||
},
|
||||
},
|
||||
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,
|
||||
},
|
||||
};
|
||||
|
||||
if (this.table) {
|
||||
this.table
|
||||
.updateConfig({
|
||||
...config,
|
||||
server: { ...config.server, url: this.datatableUrl },
|
||||
})
|
||||
.forceRender();
|
||||
} else {
|
||||
tableContainer.innerHTML = "";
|
||||
this.table = new Grid(config).render(tableContainer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const app = new PublicSearch();
|
||||
app.init();
|
||||
});
|
||||
149
resources/scss/pages/public-search/index.scss
Normal file
149
resources/scss/pages/public-search/index.scss
Normal file
@@ -0,0 +1,149 @@
|
||||
.qs-wrapper {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.qs-toolbar {
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.qs-search-form {
|
||||
width: 100%;
|
||||
max-width: 1000px; // biar kotak ga terlalu panjang di layar besar
|
||||
margin: 0 auto; // center
|
||||
|
||||
position: relative;
|
||||
|
||||
.gsp-input {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
padding: 0 48px 0 48px; // kasih space kiri buat icon
|
||||
border-radius: 999px; // pill shape
|
||||
border: 1px solid #dfe1e5;
|
||||
background-color: #fff;
|
||||
box-shadow: none;
|
||||
transition: box-shadow 0.2s ease-in-out, border-color 0.2s;
|
||||
|
||||
&:focus {
|
||||
border-color: transparent;
|
||||
box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
// ikon search di kiri input
|
||||
&::before {
|
||||
content: "🔍";
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 18px;
|
||||
color: #5f6368;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gsp-btn {
|
||||
margin-left: 12px;
|
||||
height: 44px;
|
||||
padding: 0 24px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background-color: #007c61;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: #36a852;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qs-header {
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #1a237e;
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
color: #0d47a1;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
.qs-table-wrapper {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
overflow-x: auto; // allow horizontal scroll on small screens
|
||||
padding: 30px 20px; // 🔑 kasih jarak kanan, kiri, atas, bawah
|
||||
}
|
||||
|
||||
/* Grid.js overrides */
|
||||
.qs-table-wrapper .gridjs {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.qs-table-wrapper .gridjs-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.qs-table-wrapper .gridjs-th,
|
||||
.qs-table-wrapper .gridjs-td {
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #e0e0e0;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.qs-table-wrapper .gridjs-th {
|
||||
background-color: #f5f5f5;
|
||||
font-weight: 600;
|
||||
color: #1b1b1b;
|
||||
}
|
||||
|
||||
.qs-table-wrapper .gridjs-tr:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.qs-table-wrapper .gridjs-pagination {
|
||||
margin-top: 16px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.qs-header h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.qs-wrapper {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.qs-table-wrapper {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.qs-table-wrapper .gridjs-th,
|
||||
.qs-table-wrapper .gridjs-td {
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
39
resources/views/public-search/index.blade.php
Normal file
39
resources/views/public-search/index.blade.php
Normal file
@@ -0,0 +1,39 @@
|
||||
@extends('layouts.base', ['subtitle' => 'Quick Search'])
|
||||
|
||||
@section('css')
|
||||
@vite(['resources/scss/pages/public-search/index.scss'])
|
||||
@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<input type="hidden" value="{{ route('public-search-datatable') }}" id="base_url_datatable" />
|
||||
|
||||
<div class="qs-wrapper">
|
||||
<div class="qs-toolbar d-flex justify-content-between align-items-center pt-4 pb-4">
|
||||
<!-- Search Area (no form action) -->
|
||||
<div class="qs-search-form d-flex align-items-center">
|
||||
<input
|
||||
type="text"
|
||||
id="search_input"
|
||||
class="gsp-input me-2"
|
||||
placeholder="Cari data..."
|
||||
required
|
||||
/>
|
||||
<button type="button" id="search_button" class="gsp-btn">Cari</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="qs-header mb-3">
|
||||
<h2>Hasil Pencarian</h2>
|
||||
<p>Berikut adalah data hasil pencarian berdasarkan kata kunci yang Anda masukkan.</p>
|
||||
</div>
|
||||
|
||||
<div class="qs-table-wrapper">
|
||||
<div class="p-3" id="datatable-public-search"></div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/public-search/index.js'])
|
||||
@endsection
|
||||
Reference in New Issue
Block a user