add filter date and dealer on mutations and opnames
This commit is contained in:
@@ -1,22 +1,349 @@
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
|
||||
},
|
||||
$(document).ready(function () {
|
||||
console.log("Opnames index.js loaded");
|
||||
|
||||
// Check if required libraries are available
|
||||
if (typeof $.fn.DataTable === "undefined") {
|
||||
console.error("DataTables not available!");
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize components
|
||||
initializeSelect2();
|
||||
initializeDatepickers();
|
||||
|
||||
// Wait for DOM to be fully ready before initializing DataTable
|
||||
setTimeout(function () {
|
||||
initializeDataTable();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
let tableContainer = $("#opnames-table");
|
||||
let url = tableContainer.data("url");
|
||||
let table = $("#opnames-table").DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
ajax: url,
|
||||
order: [[0, "desc"]],
|
||||
columns: [
|
||||
{ data: "created_at", name: "created_at", visible: false },
|
||||
{ data: "opname_date", name: "opname_date" },
|
||||
{ data: "dealer_name", name: "dealer.name" },
|
||||
{ data: "user_name", name: "user.name" },
|
||||
{ data: "status", name: "status" },
|
||||
{ data: "action", name: "action", orderable: false, searchable: false },
|
||||
],
|
||||
});
|
||||
/**
|
||||
* Initialize Select2 for dealer filter
|
||||
*/
|
||||
function initializeSelect2() {
|
||||
console.log("Initializing Select2...");
|
||||
|
||||
if (typeof $.fn.select2 !== "undefined") {
|
||||
$("#dealer_filter").select2({
|
||||
placeholder: "Pilih Dealer",
|
||||
allowClear: false,
|
||||
width: "100%",
|
||||
dropdownAutoWidth: true,
|
||||
minimumResultsForSearch: 5, // Show search box if more than 5 options
|
||||
});
|
||||
} else {
|
||||
console.warn("Select2 not available, using regular select");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize date pickers with validation
|
||||
*/
|
||||
function initializeDatepickers() {
|
||||
console.log("Initializing datepickers...");
|
||||
|
||||
// Initialize start date picker
|
||||
$("#date_from").datepicker({
|
||||
dateFormat: "yy-mm-dd",
|
||||
changeMonth: true,
|
||||
changeYear: true,
|
||||
maxDate: new Date(),
|
||||
yearRange: "-5:+0",
|
||||
onSelect: function (selectedDate) {
|
||||
console.log("Start date selected:", selectedDate);
|
||||
enableEndDatePicker(selectedDate);
|
||||
$(this).datepicker("hide");
|
||||
},
|
||||
onClose: function (selectedDate) {
|
||||
if (selectedDate) {
|
||||
console.log("Start date closed with value:", selectedDate);
|
||||
enableEndDatePicker(selectedDate);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// Initialize end date picker (initially disabled)
|
||||
initializeEndDatePicker();
|
||||
|
||||
// Initially disable end date input
|
||||
$("#date_to").prop("disabled", true);
|
||||
|
||||
// Add calendar icons
|
||||
addCalendarIcons();
|
||||
|
||||
// Setup calendar icon click handlers
|
||||
setupIconClickHandlers();
|
||||
|
||||
// Setup change event handlers as backup
|
||||
setupChangeEventHandlers();
|
||||
}
|
||||
|
||||
/**
|
||||
* Enable end date picker with minimum date constraint
|
||||
*/
|
||||
function enableEndDatePicker(startDate) {
|
||||
console.log("Enabling end date picker with min date:", startDate);
|
||||
|
||||
// Enable the input
|
||||
$("#date_to").prop("disabled", false);
|
||||
|
||||
// Destroy existing datepicker
|
||||
$("#date_to").datepicker("destroy");
|
||||
|
||||
// Re-initialize with new minDate
|
||||
$("#date_to").datepicker({
|
||||
dateFormat: "yy-mm-dd",
|
||||
changeMonth: true,
|
||||
changeYear: true,
|
||||
maxDate: new Date(),
|
||||
yearRange: "-5:+0",
|
||||
minDate: new Date(startDate), // Convert to Date object for proper comparison
|
||||
onSelect: function (selectedDate) {
|
||||
console.log("End date selected:", selectedDate);
|
||||
$(this).datepicker("hide");
|
||||
},
|
||||
});
|
||||
|
||||
console.log("End date picker enabled with minDate:", startDate);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize end date picker without constraints
|
||||
*/
|
||||
function initializeEndDatePicker() {
|
||||
$("#date_to").datepicker({
|
||||
dateFormat: "yy-mm-dd",
|
||||
changeMonth: true,
|
||||
changeYear: true,
|
||||
maxDate: new Date(),
|
||||
yearRange: "-5:+0",
|
||||
onSelect: function (selectedDate) {
|
||||
console.log("End date selected:", selectedDate);
|
||||
$(this).datepicker("hide");
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Add calendar icons to date inputs
|
||||
*/
|
||||
function addCalendarIcons() {
|
||||
// Remove any existing icons first
|
||||
$(".input-icon").remove();
|
||||
|
||||
// Add calendar icons with CSS classes
|
||||
const iconHtml = '<i class="fa fa-calendar input-icon"></i>';
|
||||
|
||||
$("#date_from").after(iconHtml);
|
||||
$("#date_to").after(iconHtml);
|
||||
|
||||
// Ensure parent containers have relative positioning
|
||||
$("#date_from, #date_to")
|
||||
.closest(".form-group")
|
||||
.css("position", "relative");
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup click handlers for calendar icons
|
||||
*/
|
||||
function setupIconClickHandlers() {
|
||||
$(document).on("click", ".input-icon", function () {
|
||||
const input = $(this).prev("input");
|
||||
if (!input.prop("disabled")) {
|
||||
input.datepicker("show");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup change event handlers for date inputs
|
||||
*/
|
||||
function setupChangeEventHandlers() {
|
||||
$("#date_from").on("change", function () {
|
||||
const selectedDate = $(this).val();
|
||||
if (selectedDate) {
|
||||
console.log("Start date change event:", selectedDate);
|
||||
enableEndDatePicker(selectedDate);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize DataTable with server-side processing and filtering
|
||||
*/
|
||||
function initializeDataTable() {
|
||||
console.log("Initializing DataTable...");
|
||||
|
||||
// Destroy existing table if any
|
||||
if ($.fn.DataTable.isDataTable("#opnames-table")) {
|
||||
$("#opnames-table").DataTable().destroy();
|
||||
}
|
||||
|
||||
// Initialize DataTable
|
||||
const table = $("#opnames-table").DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
destroy: true,
|
||||
ajax: {
|
||||
url: $("#opnames-table").data("url"),
|
||||
type: "GET",
|
||||
data: function (d) {
|
||||
// Add filter parameters
|
||||
d.dealer_filter = $("#dealer_filter").val();
|
||||
d.date_from = $("#date_from").val();
|
||||
d.date_to = $("#date_to").val();
|
||||
|
||||
console.log("AJAX data being sent:", {
|
||||
dealer_filter: d.dealer_filter,
|
||||
date_from: d.date_from,
|
||||
date_to: d.date_to,
|
||||
});
|
||||
|
||||
return d;
|
||||
},
|
||||
error: function (xhr, error, code) {
|
||||
console.error("DataTables AJAX error:", error, code);
|
||||
console.error("Response:", xhr.responseText);
|
||||
},
|
||||
},
|
||||
columnDefs: [
|
||||
{ targets: 0, width: "15%" }, // Opname Date column
|
||||
{ targets: 5, width: "15%", className: "text-center" }, // Action column
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
data: "created_at",
|
||||
name: "created_at",
|
||||
orderable: true,
|
||||
},
|
||||
{
|
||||
data: "opname_date",
|
||||
name: "opname_date",
|
||||
orderable: true,
|
||||
},
|
||||
{
|
||||
data: "dealer_name",
|
||||
name: "dealer.name",
|
||||
orderable: true,
|
||||
},
|
||||
{
|
||||
data: "user_name",
|
||||
name: "user.name",
|
||||
orderable: true,
|
||||
},
|
||||
{
|
||||
data: "status",
|
||||
name: "status",
|
||||
orderable: true,
|
||||
},
|
||||
{
|
||||
data: "action",
|
||||
name: "action",
|
||||
orderable: false,
|
||||
searchable: false,
|
||||
},
|
||||
],
|
||||
order: [[4, "desc"]], // Order by created_at desc
|
||||
pageLength: 10,
|
||||
responsive: true,
|
||||
ordering: true,
|
||||
orderMulti: false,
|
||||
});
|
||||
|
||||
// Setup filter button handlers
|
||||
setupFilterHandlers(table);
|
||||
|
||||
// Setup other event handlers
|
||||
setupTableEventHandlers(table);
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup filter and reset button handlers
|
||||
*/
|
||||
function setupFilterHandlers(table) {
|
||||
// Handle Filter Search Button
|
||||
$("#kt_search").on("click", function () {
|
||||
console.log("Filter button clicked");
|
||||
|
||||
const dealerFilter = $("#dealer_filter").val();
|
||||
const dateFrom = $("#date_from").val();
|
||||
const dateTo = $("#date_to").val();
|
||||
|
||||
console.log("Filtering with:", {
|
||||
dealer: dealerFilter,
|
||||
dateFrom: dateFrom,
|
||||
dateTo: dateTo,
|
||||
});
|
||||
|
||||
table.ajax.reload();
|
||||
});
|
||||
|
||||
// Handle Filter Reset Button
|
||||
$("#kt_reset").on("click", function () {
|
||||
console.log("Reset button clicked");
|
||||
|
||||
// Clear all filters
|
||||
$("#dealer_filter").val("").trigger("change"); // Reset Select2
|
||||
$("#date_from").val("");
|
||||
$("#date_to").val("");
|
||||
|
||||
// Reset end date picker and disable it
|
||||
resetEndDatePicker();
|
||||
|
||||
// Reload table
|
||||
table.ajax.reload();
|
||||
});
|
||||
|
||||
// Handle Enter key on date inputs
|
||||
$("#date_from, #date_to").on("keypress", function (e) {
|
||||
if (e.which === 13) {
|
||||
// Enter key
|
||||
$("#kt_search").click();
|
||||
}
|
||||
});
|
||||
|
||||
// Optional: Auto-filter when dealer selection changes
|
||||
$("#dealer_filter").on("change", function () {
|
||||
console.log("Dealer filter changed:", $(this).val());
|
||||
// Uncomment the line below if you want auto-filter on dealer change
|
||||
// table.ajax.reload();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset end date picker to initial state
|
||||
*/
|
||||
function resetEndDatePicker() {
|
||||
// Destroy existing datepicker
|
||||
$("#date_to").datepicker("destroy");
|
||||
|
||||
// Re-initialize without minDate constraint
|
||||
initializeEndDatePicker();
|
||||
|
||||
// Disable the input
|
||||
$("#date_to").prop("disabled", true);
|
||||
|
||||
console.log("End date picker reset and disabled");
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup additional table event handlers
|
||||
*/
|
||||
function setupTableEventHandlers(table) {
|
||||
// Debug ordering events
|
||||
table.on("order.dt", function () {
|
||||
console.log("Order changed:", table.order());
|
||||
});
|
||||
|
||||
// Add loading indicator for processing
|
||||
table.on("processing.dt", function (e, settings, processing) {
|
||||
if (processing) {
|
||||
console.log("DataTable processing started");
|
||||
} else {
|
||||
console.log("DataTable processing finished");
|
||||
}
|
||||
});
|
||||
|
||||
// Handle any custom button clicks here if needed
|
||||
// Example: $(document).on('click', '.custom-btn', function() { ... });
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user