434 lines
13 KiB
JavaScript
Executable File
434 lines
13 KiB
JavaScript
Executable File
$(document).ready(function () {
|
|
console.log("Mutations index.js loaded");
|
|
|
|
// Check if DataTables is available
|
|
if (typeof $.fn.DataTable === "undefined") {
|
|
console.error("DataTables not available!");
|
|
return;
|
|
}
|
|
|
|
// Initialize components
|
|
initializeSelect2();
|
|
initializeDatepickers();
|
|
|
|
// Wait for DOM to be fully ready
|
|
setTimeout(function () {
|
|
initializeDataTable();
|
|
}, 100);
|
|
});
|
|
|
|
function initializeSelect2() {
|
|
console.log("Initializing Select2...");
|
|
|
|
// Initialize Select2 for dealer filter
|
|
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");
|
|
}
|
|
}
|
|
|
|
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();
|
|
|
|
// Backup: Listen to change event
|
|
setupChangeEventHandlers();
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
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");
|
|
},
|
|
});
|
|
}
|
|
|
|
function addCalendarIcons() {
|
|
// Remove any existing icons first
|
|
$(".input-icon").remove();
|
|
|
|
// Add calendar icons with just the classes, no inline styles
|
|
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");
|
|
}
|
|
|
|
function setupIconClickHandlers() {
|
|
$(document).on("click", ".input-icon", function () {
|
|
const input = $(this).prev("input");
|
|
if (!input.prop("disabled")) {
|
|
input.datepicker("show");
|
|
}
|
|
});
|
|
}
|
|
|
|
function setupChangeEventHandlers() {
|
|
$("#date_from").on("change", function () {
|
|
const selectedDate = $(this).val();
|
|
if (selectedDate) {
|
|
console.log("Start date change event:", selectedDate);
|
|
enableEndDatePicker(selectedDate);
|
|
}
|
|
});
|
|
}
|
|
|
|
function initializeDataTable() {
|
|
console.log("Initializing DataTable...");
|
|
|
|
// Destroy existing table if any
|
|
if ($.fn.DataTable.isDataTable("#mutations-table")) {
|
|
$("#mutations-table").DataTable().destroy();
|
|
}
|
|
|
|
// Initialize DataTable
|
|
const table = $("#mutations-table").DataTable({
|
|
processing: true,
|
|
serverSide: true,
|
|
destroy: true,
|
|
ajax: {
|
|
url: $("#mutations-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: "5%" }, // No. column
|
|
{ targets: 8, width: "20%", className: "text-center" }, // Action column
|
|
{ targets: [6, 7], className: "text-center" }, // Total Items and Status columns
|
|
],
|
|
columns: [
|
|
{
|
|
data: "DT_RowIndex",
|
|
name: "DT_RowIndex",
|
|
orderable: false,
|
|
searchable: false,
|
|
},
|
|
{
|
|
data: "mutation_number",
|
|
name: "mutation_number",
|
|
orderable: true,
|
|
},
|
|
{ data: "created_at", name: "created_at", orderable: true },
|
|
{ data: "from_dealer", name: "from_dealer", orderable: true },
|
|
{ data: "to_dealer", name: "to_dealer", orderable: true },
|
|
{ data: "requested_by", name: "requested_by", orderable: true },
|
|
{ data: "total_items", name: "total_items", orderable: true },
|
|
{ data: "status", name: "status", orderable: true },
|
|
{
|
|
data: "action",
|
|
name: "action",
|
|
orderable: false,
|
|
searchable: false,
|
|
},
|
|
],
|
|
order: [[1, "desc"]], // Order by mutation_number desc
|
|
pageLength: 10,
|
|
responsive: true,
|
|
ordering: true,
|
|
orderMulti: false,
|
|
});
|
|
|
|
// Setup filter button handlers
|
|
setupFilterHandlers(table);
|
|
|
|
// Setup other event handlers
|
|
setupTableEventHandlers(table);
|
|
}
|
|
|
|
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,
|
|
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();
|
|
}
|
|
});
|
|
|
|
// 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();
|
|
});
|
|
}
|
|
|
|
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");
|
|
}
|
|
|
|
function setupTableEventHandlers(table) {
|
|
// Debug ordering events
|
|
table.on("order.dt", function () {
|
|
console.log("Order changed:", table.order());
|
|
});
|
|
|
|
// Add loading indicator for ordering
|
|
table.on("processing.dt", function (e, settings, processing) {
|
|
if (processing) {
|
|
console.log("DataTable processing started");
|
|
} else {
|
|
console.log("DataTable processing finished");
|
|
}
|
|
});
|
|
|
|
// Manual click handler for column headers (fallback)
|
|
$("#mutations-table thead th").on("click", function () {
|
|
const columnIndex = $(this).index();
|
|
console.log("Column header clicked:", columnIndex, $(this).text());
|
|
|
|
// Skip if it's the first (No.) or last (Action) column
|
|
if (columnIndex === 0 || columnIndex === 8) {
|
|
console.log("Non-sortable column clicked, ignoring");
|
|
return;
|
|
}
|
|
|
|
// Check if DataTables is handling the click
|
|
if (
|
|
$(this).hasClass("sorting") ||
|
|
$(this).hasClass("sorting_asc") ||
|
|
$(this).hasClass("sorting_desc")
|
|
) {
|
|
console.log("DataTables should handle this click");
|
|
} else {
|
|
console.log("DataTables not handling click, manual trigger needed");
|
|
// Force DataTables to handle the ordering
|
|
table.order([columnIndex, "asc"]).draw();
|
|
}
|
|
});
|
|
|
|
// Handle Cancel Button Click with SweetAlert
|
|
$(document).on("click", ".btn-cancel", function () {
|
|
const mutationId = $(this).data("id");
|
|
handleCancelMutation(mutationId, table);
|
|
});
|
|
|
|
// Handle form submissions with loading state
|
|
$(document).on("submit", ".approve-form", function () {
|
|
$(this)
|
|
.find('button[type="submit"]')
|
|
.prop("disabled", true)
|
|
.html("Memproses...");
|
|
});
|
|
|
|
// Validate quantity approved in receive modal
|
|
$(document).on("input", 'input[name*="quantity_approved"]', function () {
|
|
validateQuantityInput($(this));
|
|
});
|
|
}
|
|
|
|
function handleCancelMutation(mutationId, table) {
|
|
if (typeof Swal !== "undefined") {
|
|
Swal.fire({
|
|
title: "Batalkan Mutasi?",
|
|
text: "Apakah Anda yakin ingin membatalkan mutasi ini?",
|
|
icon: "warning",
|
|
showCancelButton: true,
|
|
confirmButtonColor: "#d33",
|
|
cancelButtonColor: "#3085d6",
|
|
confirmButtonText: "Ya, Batalkan",
|
|
cancelButtonText: "Batal",
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
cancelMutation(mutationId, table);
|
|
}
|
|
});
|
|
} else {
|
|
if (confirm("Apakah Anda yakin ingin membatalkan mutasi ini?")) {
|
|
cancelMutation(mutationId, table);
|
|
}
|
|
}
|
|
}
|
|
|
|
function validateQuantityInput(input) {
|
|
const maxValue = parseFloat(input.attr("max"));
|
|
const currentValue = parseFloat(input.val());
|
|
|
|
if (maxValue && currentValue > maxValue) {
|
|
input.val(maxValue);
|
|
input.addClass("is-invalid");
|
|
|
|
if (!input.siblings(".invalid-feedback").length) {
|
|
input.after(
|
|
'<div class="invalid-feedback">Quantity tidak boleh melebihi yang diminta</div>'
|
|
);
|
|
}
|
|
} else {
|
|
input.removeClass("is-invalid");
|
|
input.siblings(".invalid-feedback").remove();
|
|
}
|
|
}
|
|
|
|
function cancelMutation(mutationId, table) {
|
|
$.ajax({
|
|
url: "/warehouse/mutations/" + mutationId + "/cancel",
|
|
type: "POST",
|
|
data: {
|
|
_token: $('meta[name="csrf-token"]').attr("content"),
|
|
},
|
|
success: function (response) {
|
|
if (typeof Swal !== "undefined") {
|
|
Swal.fire({
|
|
title: "Berhasil!",
|
|
text: "Mutasi berhasil dibatalkan",
|
|
icon: "success",
|
|
timer: 2000,
|
|
showConfirmButton: false,
|
|
});
|
|
} else {
|
|
alert("Mutasi berhasil dibatalkan");
|
|
}
|
|
|
|
// Reload table
|
|
table.ajax.reload();
|
|
},
|
|
error: function (xhr) {
|
|
const errorMsg =
|
|
xhr.responseJSON?.message || "Gagal membatalkan mutasi";
|
|
|
|
if (typeof Swal !== "undefined") {
|
|
Swal.fire({
|
|
title: "Error!",
|
|
text: errorMsg,
|
|
icon: "error",
|
|
});
|
|
} else {
|
|
alert("Error: " + errorMsg);
|
|
}
|
|
},
|
|
});
|
|
}
|