create public search

2025-08-26 02:33:09 +07:00
parent 38493063c4
commit c6257b79bf
6 changed files with 363 additions and 0 deletions
--- a/app/Http/Controllers/QuickSearchController.php
+++ b/app/Http/Controllers/QuickSearchController.php
@@ -17,6 +17,10 @@ class QuickSearchController extends Controller
        return view("quick-search.index");
    }

+    public function public_search(){
+        return view("public-search.index");
+    }
+
    public function search_result(Request $request){
        $keyword = $request->get("keyword");

@@ -60,6 +64,42 @@ class QuickSearchController extends Controller
        }
    }

+    public function public_search_datatable(Request $request)
+    {
+        try {
+            // Gunakan subquery untuk performa yang lebih baik dan menghindari duplikasi
+            $query = PbgTask::select([
+                'pbg_task.*',
+                DB::raw('(SELECT name_building FROM pbg_task_details WHERE pbg_task_details.pbg_task_uid = pbg_task.uuid LIMIT 1) as name_building'),
+                DB::raw('(SELECT nilai_retribusi_bangunan FROM pbg_task_retributions WHERE pbg_task_retributions.pbg_task_uid = pbg_task.uuid LIMIT 1) as nilai_retribusi_bangunan')
+            ])
+            ->orderBy('pbg_task.id', 'desc');
+
+            if ($request->filled('search')) {
+                $search = trim($request->get('search'));
+                $query->where(function ($q) use ($search) {
+                    $q->where('pbg_task.registration_number', 'LIKE', "%$search%")
+                      ->orWhere('pbg_task.name', 'LIKE', "%$search%")
+                      ->orWhere('pbg_task.owner_name', 'LIKE', "%$search%")
+                      ->orWhereExists(function ($subQuery) use ($search) {
+                          $subQuery->select(DB::raw(1))
+                                   ->from('pbg_task_details')
+                                   ->whereColumn('pbg_task_details.pbg_task_uid', 'pbg_task.uuid')
+                                   ->where('pbg_task_details.name_building', 'LIKE', "%$search%");
+                      });
+                });
+            }
+
+            return response()->json($query->paginate());
+        } catch (\Throwable $e) {
+            Log::error("Error fetching datatable data: " . $e->getMessage());
+            return response()->json([
+                'message' => 'Terjadi kesalahan saat mengambil data.',
+                'error' => $e->getMessage(),
+            ], 500);
+        }
+    }
+
    public function show($id)
    {
        try {
--- a/resources/js/public-search/index.js
+++ b/resources/js/public-search/index.js
@@ -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();
+});
--- a/resources/scss/pages/public-search/index.scss
+++ b/resources/scss/pages/public-search/index.scss
@@ -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;
+    }
+}
--- a/resources/views/public-search/index.blade.php
+++ b/resources/views/public-search/index.blade.php
@@ -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
--- a/routes/web.php
+++ b/routes/web.php
@@ -38,8 +38,10 @@ use Illuminate\Support\Facades\Route;
 require __DIR__ . '/auth.php';

 Route::get('/search', [QuickSearchController::class, 'index'])->name('search');
+Route::get('/public-search', [QuickSearchController::class, 'public_search'])->name('public-search');
 Route::get('/search-result', [QuickSearchController::class, 'search_result'])->name('search-result');
 Route::get('/quick-search-datatable', [QuickSearchController::class, 'quick_search_datatable'])->name('quick-search-datatable');
+Route::get('/public-search-datatable', [QuickSearchController::class, 'public_search_datatable'])->name('public-search-datatable');
 Route::get('/quick-search/{id}', [QuickSearchController::class, 'show'])->name('quick-search.detail');
 Route::get('/quick-search/{uuid}/task-assignments', [QuickSearchController::class, 'task_assignments'])->name('api.quick-search-task-assignments');

--- a/vite.config.js
+++ b/vite.config.js
@@ -53,6 +53,7 @@ export default defineConfig(({ mode }) => {
                    "resources/scss/pages/quick-search/detail.scss",
                    "resources/scss/pages/quick-search/index.scss",
                    "resources/scss/pages/quick-search/result.scss",
+                    "resources/scss/pages/public-search/index.scss",
                    "resources/scss/pages/pbg-task/show.scss",

                    "node_modules/quill/dist/quill.snow.css",
@@ -148,6 +149,8 @@ export default defineConfig(({ mode }) => {
                    "resources/js/quick-search/index.js",
                    "resources/js/quick-search/result.js",
                    "resources/js/quick-search/detail.js",
+                    // public-search
+                    "resources/js/public-search/index.js",
                    // growth-report
                    "resources/js/report/growth-report/index.js",
                    // dummy