fix search filter on page big data resume
This commit is contained in:
arifal
@@ -17,13 +17,14 @@ sudo nano /etc/supervisor/conf.d/laravel-worker.conf
|
||||
|
||||
[program:laravel-worker]
|
||||
process_name=%(program_name)s_%(process_num)02d
|
||||
command=php /path-to-your-project/artisan queue:work --tries=3 --timeout=600
|
||||
command=php /home/arifal/development/sibedas-pbg-web/artisan queue:work --queue=default --timeout=14400 --tries=1 --sleep=3
|
||||
autostart=true
|
||||
autorestart=true
|
||||
numprocs=1
|
||||
user=www-data
|
||||
numprocs=4
|
||||
redirect_stderr=true
|
||||
stdout_logfile=/var/log/supervisor/laravel-worker.log
|
||||
stdout_logfile=/home/arifal/development/sibedas-pbg-web/storage/logs/worker.log
|
||||
stopasgroup=true
|
||||
killasgroup=true
|
||||
```
|
||||
|
||||
- Reload Supervisor
|
||||
|
||||
@@ -162,7 +162,7 @@ class BigDataResumeController extends Controller
|
||||
$query = BigdataResume::query()->orderBy('id', 'desc');
|
||||
|
||||
if($request->filled('search')){
|
||||
$query->where('name', 'LIKE', '%'.$request->input('search').'%');
|
||||
$query->where('year', 'LIKE', '%'.$request->input('search').'%');
|
||||
}
|
||||
|
||||
$query = $query->paginate(config('app.paginate_per_page', 50));
|
||||
|
||||
@@ -2,7 +2,6 @@ import { Grid } from "gridjs/dist/gridjs.umd.js";
|
||||
import gridjs from "gridjs/dist/gridjs.umd.js";
|
||||
import "gridjs/dist/gridjs.umd.js";
|
||||
import GlobalConfig, { addThousandSeparators } from "../global-config.js";
|
||||
import Swal from "sweetalert2";
|
||||
import moment from "moment";
|
||||
|
||||
class BigdataResume {
|
||||
@@ -13,23 +12,16 @@ class BigdataResume {
|
||||
this.table = null;
|
||||
|
||||
// Initialize functions
|
||||
this.initTableDataSettings();
|
||||
// this.initEvents();
|
||||
this.initEvents();
|
||||
}
|
||||
initEvents() {
|
||||
document.body.addEventListener("click", async (event) => {
|
||||
const deleteButton = event.target.closest(
|
||||
".btn-delete-data-settings"
|
||||
);
|
||||
if (deleteButton) {
|
||||
event.preventDefault();
|
||||
await this.handleDelete(deleteButton);
|
||||
}
|
||||
});
|
||||
async initEvents() {
|
||||
await this.initBigdataResumeTable();
|
||||
this.handleSearch();
|
||||
}
|
||||
|
||||
initTableDataSettings() {
|
||||
async initBigdataResumeTable() {
|
||||
let tableContainer = document.getElementById("table-bigdata-resumes");
|
||||
|
||||
this.table = new Grid({
|
||||
columns: [
|
||||
{ name: "ID" },
|
||||
@@ -53,7 +45,9 @@ class BigdataResume {
|
||||
{ name: "Total Proses Dinas Teknis" },
|
||||
{
|
||||
name: "Created",
|
||||
attributes: { style: "width: 200px; white-space: nowrap;" }, // Set width dynamically
|
||||
attributes: {
|
||||
style: "width: 200px; white-space: nowrap;",
|
||||
},
|
||||
},
|
||||
],
|
||||
pagination: {
|
||||
@@ -66,11 +60,6 @@ class BigdataResume {
|
||||
},
|
||||
},
|
||||
sort: true,
|
||||
// search: {
|
||||
// server: {
|
||||
// url: (prev, keyword) => `${prev}?search=${keyword}`,
|
||||
// },
|
||||
// },
|
||||
server: {
|
||||
url: `${GlobalConfig.apiHost}/api/bigdata-report`,
|
||||
headers: {
|
||||
@@ -110,61 +99,71 @@ class BigdataResume {
|
||||
total: (data) => data.total,
|
||||
},
|
||||
width: "auto",
|
||||
}).render(tableContainer);
|
||||
}
|
||||
handleSearch() {}
|
||||
async handleDelete(deleteButton) {
|
||||
const id = deleteButton.getAttribute("data-id");
|
||||
|
||||
const result = await Swal.fire({
|
||||
title: "Are you sure?",
|
||||
text: "You won't be able to revert this!",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#3085d6",
|
||||
cancelButtonColor: "#d33",
|
||||
confirmButtonText: "Yes, delete it!",
|
||||
});
|
||||
|
||||
if (result.isConfirmed) {
|
||||
try {
|
||||
let response = await fetch(
|
||||
`${GlobalConfig.apiHost}/api/data-settings/${id}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
credentials: "include",
|
||||
return new Promise((resolve) => {
|
||||
this.table.render(tableContainer);
|
||||
this.table.on("ready", resolve); // Tunggu event "ready"
|
||||
});
|
||||
}
|
||||
|
||||
handleSearch() {
|
||||
document.getElementById("search-btn").addEventListener("click", () => {
|
||||
let searchValue = document.getElementById("search-box").value;
|
||||
|
||||
if (!this.table) {
|
||||
// Ensure table is initialized
|
||||
console.error("Table element not found!");
|
||||
return;
|
||||
}
|
||||
|
||||
this.table
|
||||
.updateConfig({
|
||||
server: {
|
||||
url: `${GlobalConfig.apiHost}/api/bigdata-report?search=${searchValue}`,
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
let result = await response.json();
|
||||
this.toastMessage.innerText =
|
||||
result.message || "Deleted successfully!";
|
||||
this.toast.show();
|
||||
|
||||
// Refresh Grid.js table
|
||||
if (typeof this.table !== "undefined") {
|
||||
this.table.updateConfig({}).forceRender();
|
||||
}
|
||||
} else {
|
||||
let error = await response.json();
|
||||
console.error("Delete failed:", error);
|
||||
this.toastMessage.innerText =
|
||||
error.message || "Delete failed!";
|
||||
this.toast.show();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error deleting item:", error);
|
||||
this.toastMessage.innerText = "An error occurred!";
|
||||
this.toast.show();
|
||||
}
|
||||
}
|
||||
then: (data) => {
|
||||
return data.data.map((item) => [
|
||||
item.id,
|
||||
item.potention_count,
|
||||
addThousandSeparators(item.potention_sum),
|
||||
item.non_verified_count,
|
||||
addThousandSeparators(item.non_verified_sum),
|
||||
item.verified_count,
|
||||
addThousandSeparators(item.verified_sum),
|
||||
item.business_count,
|
||||
addThousandSeparators(item.business_sum),
|
||||
item.non_business_count,
|
||||
addThousandSeparators(item.non_business_sum),
|
||||
item.spatial_count,
|
||||
addThousandSeparators(item.spatial_sum),
|
||||
item.waiting_click_dpmptsp_count,
|
||||
addThousandSeparators(
|
||||
item.waiting_click_dpmptsp_sum
|
||||
),
|
||||
item.issuance_realization_pbg_count,
|
||||
addThousandSeparators(
|
||||
item.issuance_realization_pbg_sum
|
||||
),
|
||||
item.process_in_technical_office_count,
|
||||
addThousandSeparators(
|
||||
item.process_in_technical_office_sum
|
||||
),
|
||||
moment(item.created_at).format(
|
||||
"YYYY-MM-DD H:mm:ss"
|
||||
),
|
||||
]);
|
||||
},
|
||||
total: (data) => data.total,
|
||||
},
|
||||
})
|
||||
.forceRender();
|
||||
});
|
||||
}
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
|
||||
@@ -87,7 +87,7 @@
|
||||
<div class="col-12">
|
||||
<div class="card w-100 h-100">
|
||||
<div class="card-header d-flex align-items-center">
|
||||
<input type="text" class="form-control me-2 w-auto" />
|
||||
<input type="text" class="form-control me-2 w-auto" id="search-box" />
|
||||
<button id="search-btn" class="btn btn-md btn-info text-white">Cari</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
Reference in New Issue
Block a user