optimize dockerfile and copy js library used
This commit is contained in:
@@ -118,7 +118,6 @@ License: You must have a valid license purchased only from themeforest(the above
|
||||
|
||||
<!--begin::Common Script -->
|
||||
<script src="{{ asset('js/vendor.js') }}"></script>
|
||||
<script src="{{ mix('js/app.js') }}"></script>
|
||||
<script src="{{ asset('js/init.js') }}"></script>
|
||||
<!--end::Common Scripts -->
|
||||
@yield('javascripts')
|
||||
|
||||
@@ -154,5 +154,289 @@
|
||||
@endsection
|
||||
|
||||
@section('javascripts')
|
||||
<script src="{{ mix('js/warehouse_management/mutations/create.js') }}"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
let productIndex = 1;
|
||||
let originalProductOptions = ""; // Store original product options
|
||||
|
||||
// Initialize Select2
|
||||
$(".select2").select2({
|
||||
placeholder: "Pilih...",
|
||||
allowClear: true,
|
||||
});
|
||||
|
||||
// Store original product options on page load
|
||||
const firstSelect = $(".product-select").first();
|
||||
if (firstSelect.length > 0) {
|
||||
originalProductOptions = firstSelect.html();
|
||||
}
|
||||
|
||||
// Prevent same dealer selection
|
||||
$("#from_dealer_id, #to_dealer_id").on("change", function () {
|
||||
const fromDealerId = $("#from_dealer_id").val();
|
||||
const toDealerId = $("#to_dealer_id").val();
|
||||
|
||||
if (fromDealerId && toDealerId && fromDealerId === toDealerId) {
|
||||
$(this).val("").trigger("change");
|
||||
Swal.fire({
|
||||
type: "error",
|
||||
title: "Oops...",
|
||||
text: "Dealer asal dan tujuan tidak boleh sama",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
// Update available stock when dealer changes
|
||||
updateAllAvailableStock();
|
||||
});
|
||||
|
||||
// Add new product row
|
||||
$("#add-product").on("click", function () {
|
||||
const newRow = createProductRow(productIndex);
|
||||
$("#products-tbody").append(newRow);
|
||||
|
||||
// Initialize Select2 for new row after it's added to DOM
|
||||
const newSelect = $(
|
||||
`#products-tbody tr[data-index="${productIndex}"] .product-select`
|
||||
);
|
||||
newSelect.select2({
|
||||
placeholder: "Pilih...",
|
||||
allowClear: true,
|
||||
});
|
||||
|
||||
productIndex++;
|
||||
updateRemoveButtons();
|
||||
});
|
||||
|
||||
// Remove product row
|
||||
$(document).on("click", ".remove-product", function () {
|
||||
$(this).closest("tr").remove();
|
||||
updateRemoveButtons();
|
||||
reindexRows();
|
||||
});
|
||||
|
||||
// Handle product selection change
|
||||
$(document).on("change", ".product-select", function () {
|
||||
const row = $(this).closest("tr");
|
||||
const productId = $(this).val();
|
||||
const fromDealerId = $("#from_dealer_id").val();
|
||||
|
||||
if (productId && fromDealerId) {
|
||||
getAvailableStock(productId, fromDealerId, row);
|
||||
} else {
|
||||
row.find(".available-stock").text("-");
|
||||
row.find(".quantity-input").attr("max", "");
|
||||
}
|
||||
});
|
||||
|
||||
// Validate quantity input
|
||||
$(document).on("input", ".quantity-input", function () {
|
||||
const maxValue = parseFloat($(this).attr("max"));
|
||||
const currentValue = parseFloat($(this).val());
|
||||
|
||||
if (maxValue && currentValue > maxValue) {
|
||||
$(this).val(maxValue);
|
||||
$(this).addClass("is-invalid");
|
||||
|
||||
if (!$(this).siblings(".invalid-feedback").length) {
|
||||
$(this).after(
|
||||
'<div class="invalid-feedback">Quantity melebihi stock yang tersedia</div>'
|
||||
);
|
||||
}
|
||||
} else {
|
||||
$(this).removeClass("is-invalid");
|
||||
$(this).siblings(".invalid-feedback").remove();
|
||||
}
|
||||
});
|
||||
|
||||
// Form submission
|
||||
$("#mutation-form").on("submit", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const submitBtn = $("#submit-btn");
|
||||
const originalText = submitBtn.html();
|
||||
|
||||
submitBtn
|
||||
.prop("disabled", true)
|
||||
.html('<i class="la la-spinner la-spin"></i> Menyimpan...');
|
||||
|
||||
// Submit form
|
||||
this.submit();
|
||||
});
|
||||
|
||||
function createProductRow(index) {
|
||||
return `
|
||||
<tr class="product-row" data-index="${index}">
|
||||
<td>
|
||||
<select name="products[${index}][product_id]" class="form-control product-select" required>
|
||||
${originalProductOptions}
|
||||
</select>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="available-stock text-muted">-</span>
|
||||
</td>
|
||||
<td>
|
||||
<input type="number"
|
||||
name="products[${index}][quantity_requested]"
|
||||
class="form-control quantity-input"
|
||||
min="0.01"
|
||||
step="0.01"
|
||||
placeholder="0"
|
||||
required>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<button type="button" class="btn btn-danger btn-sm remove-product">
|
||||
<i class="la la-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
function updateRemoveButtons() {
|
||||
const rows = $(".product-row");
|
||||
$(".remove-product").prop("disabled", rows.length <= 1);
|
||||
}
|
||||
|
||||
function reindexRows() {
|
||||
$(".product-row").each(function (index) {
|
||||
$(this).attr("data-index", index);
|
||||
$(this)
|
||||
.find('select[name*="product_id"]')
|
||||
.attr("name", `products[${index}][product_id]`);
|
||||
$(this)
|
||||
.find('input[name*="quantity_requested"]')
|
||||
.attr("name", `products[${index}][quantity_requested]`);
|
||||
});
|
||||
productIndex = $(".product-row").length;
|
||||
}
|
||||
|
||||
function getAvailableStock(productId, dealerId, row) {
|
||||
$.ajax({
|
||||
url: "/warehouse/mutations/get-product-stock",
|
||||
method: "GET",
|
||||
data: {
|
||||
product_id: productId,
|
||||
dealer_id: dealerId,
|
||||
},
|
||||
beforeSend: function () {
|
||||
row.find(".available-stock").html(
|
||||
'<i class="la la-spinner la-spin"></i>'
|
||||
);
|
||||
},
|
||||
success: function (response) {
|
||||
const stock = parseFloat(response.current_stock);
|
||||
row.find(".available-stock").text(stock.toLocaleString());
|
||||
row.find(".quantity-input").attr("max", stock);
|
||||
|
||||
// Set max value message
|
||||
if (stock <= 0) {
|
||||
row.find(".available-stock")
|
||||
.addClass("text-danger")
|
||||
.removeClass("text-muted");
|
||||
row.find(".quantity-input").attr("readonly", true).val("");
|
||||
} else {
|
||||
row.find(".available-stock")
|
||||
.removeClass("text-danger")
|
||||
.addClass("text-muted");
|
||||
row.find(".quantity-input").attr("readonly", false);
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
row.find(".available-stock")
|
||||
.text("Error")
|
||||
.addClass("text-danger");
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function updateAllAvailableStock() {
|
||||
const fromDealerId = $("#from_dealer_id").val();
|
||||
|
||||
$(".product-row").each(function () {
|
||||
const row = $(this);
|
||||
const productId = row.find(".product-select").val();
|
||||
|
||||
if (productId && fromDealerId) {
|
||||
getAvailableStock(productId, fromDealerId, row);
|
||||
} else {
|
||||
row.find(".available-stock").text("-");
|
||||
row.find(".quantity-input").attr("max", "");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function validateForm() {
|
||||
let isValid = true;
|
||||
const fromDealerId = $("#from_dealer_id").val();
|
||||
const toDealerId = $("#to_dealer_id").val();
|
||||
|
||||
// Check dealers
|
||||
if (!fromDealerId) {
|
||||
Swal.fire({
|
||||
type: "error",
|
||||
title: "Oops...",
|
||||
text: "Pilih dealer asal",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!toDealerId) {
|
||||
Swal.fire({
|
||||
type: "error",
|
||||
title: "Oops...",
|
||||
text: "Pilih dealer tujuan",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (fromDealerId === toDealerId) {
|
||||
Swal.fire({
|
||||
type: "error",
|
||||
title: "Oops...",
|
||||
text: "Dealer asal dan tujuan tidak boleh sama",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check products
|
||||
const productRows = $(".product-row");
|
||||
if (productRows.length === 0) {
|
||||
Swal.fire({
|
||||
type: "error",
|
||||
title: "Oops...",
|
||||
text: "Tambahkan minimal satu produk",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
let hasValidProduct = false;
|
||||
productRows.each(function () {
|
||||
const productId = $(this).find(".product-select").val();
|
||||
const quantity = $(this).find(".quantity-input").val();
|
||||
|
||||
if (productId && quantity && parseFloat(quantity) > 0) {
|
||||
hasValidProduct = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (!hasValidProduct) {
|
||||
Swal.fire({
|
||||
type: "error",
|
||||
title: "Oops...",
|
||||
text: "Pilih minimal satu produk dengan quantity yang valid",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
return isValid;
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
@endsection
|
||||
@@ -126,5 +126,426 @@ input.datepicker {
|
||||
@endsection
|
||||
|
||||
@section('javascripts')
|
||||
<script src="{{ mix('js/warehouse_management/mutations/index.js') }}"></script>
|
||||
<script>
|
||||
$(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 - same as stock audit
|
||||
if (typeof $.fn.select2 !== "undefined") {
|
||||
$("#dealer_filter").select2({
|
||||
placeholder: "Pilih...",
|
||||
allowClear: true,
|
||||
width: "100%",
|
||||
});
|
||||
} else {
|
||||
console.warn("Select2 not available, using regular select");
|
||||
}
|
||||
}
|
||||
|
||||
function initializeDatepickers() {
|
||||
console.log("Initializing datepickers...");
|
||||
|
||||
// Check if bootstrap datepicker is available
|
||||
if (typeof $.fn.datepicker === "undefined") {
|
||||
console.error("Bootstrap Datepicker not available!");
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize start date picker
|
||||
$("#date_from")
|
||||
.datepicker({
|
||||
format: "yyyy-mm-dd",
|
||||
autoclose: true,
|
||||
todayHighlight: true,
|
||||
orientation: "bottom left",
|
||||
templates: {
|
||||
leftArrow: '<i class="la la-angle-left"></i>',
|
||||
rightArrow: '<i class="la la-angle-right"></i>',
|
||||
},
|
||||
endDate: new Date(), // Don't allow future dates
|
||||
clearBtn: true,
|
||||
})
|
||||
.on("changeDate", function (e) {
|
||||
console.log("Start date selected:", e.format());
|
||||
enableEndDatePicker(e.format());
|
||||
})
|
||||
.on("clearDate", function (e) {
|
||||
console.log("Start date cleared");
|
||||
resetEndDatePicker();
|
||||
});
|
||||
|
||||
// Initialize end date picker
|
||||
initializeEndDatePicker();
|
||||
|
||||
// Initially disable end date input
|
||||
$("#date_to").prop("disabled", true);
|
||||
}
|
||||
|
||||
function enableEndDatePicker(startDate) {
|
||||
console.log("Enabling end date picker with min date:", startDate);
|
||||
|
||||
// Enable the input
|
||||
$("#date_to").prop("disabled", false);
|
||||
|
||||
// Remove existing datepicker
|
||||
$("#date_to").datepicker("remove");
|
||||
|
||||
// Re-initialize with new startDate constraint
|
||||
$("#date_to")
|
||||
.datepicker({
|
||||
format: "yyyy-mm-dd",
|
||||
autoclose: true,
|
||||
todayHighlight: true,
|
||||
orientation: "bottom left",
|
||||
templates: {
|
||||
leftArrow: '<i class="la la-angle-left"></i>',
|
||||
rightArrow: '<i class="la la-angle-right"></i>',
|
||||
},
|
||||
startDate: startDate, // Set minimum date to selected start date
|
||||
endDate: new Date(), // Don't allow future dates
|
||||
clearBtn: true,
|
||||
})
|
||||
.on("changeDate", function (e) {
|
||||
console.log("End date selected:", e.format());
|
||||
})
|
||||
.on("clearDate", function (e) {
|
||||
console.log("End date cleared");
|
||||
});
|
||||
|
||||
console.log("End date picker enabled with startDate:", startDate);
|
||||
}
|
||||
|
||||
function initializeEndDatePicker() {
|
||||
$("#date_to")
|
||||
.datepicker({
|
||||
format: "yyyy-mm-dd",
|
||||
autoclose: true,
|
||||
todayHighlight: true,
|
||||
orientation: "bottom left",
|
||||
templates: {
|
||||
leftArrow: '<i class="la la-angle-left"></i>',
|
||||
rightArrow: '<i class="la la-angle-right"></i>',
|
||||
},
|
||||
endDate: new Date(), // Don't allow future dates
|
||||
clearBtn: true,
|
||||
})
|
||||
.on("changeDate", function (e) {
|
||||
console.log("End date selected:", e.format());
|
||||
})
|
||||
.on("clearDate", function (e) {
|
||||
console.log("End date cleared");
|
||||
});
|
||||
}
|
||||
|
||||
// Calendar icons and click handlers removed since bootstrap datepicker handles these automatically
|
||||
|
||||
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");
|
||||
|
||||
// Reset select2 elements properly - same as stock audit
|
||||
$("#dealer_filter").val(null).trigger("change.select2");
|
||||
|
||||
// Clear datepicker values using bootstrap datepicker method
|
||||
$("#date_from").datepicker("clearDates");
|
||||
$("#date_to").datepicker("clearDates");
|
||||
|
||||
// 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() {
|
||||
// Remove existing datepicker
|
||||
$("#date_to").datepicker("remove");
|
||||
|
||||
// Clear the input value
|
||||
$("#date_to").val("");
|
||||
|
||||
// Re-initialize without startDate 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);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
@endsection
|
||||
@@ -200,5 +200,335 @@
|
||||
@endsection
|
||||
|
||||
@section('javascripts')
|
||||
<script src="{{ mix('js/warehouse_management/opnames/create.js') }}"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
console.log("Opnames create.js loaded - SweetAlert version");
|
||||
|
||||
$(".select2").select2({
|
||||
placeholder: "Pilih...",
|
||||
allowClear: true,
|
||||
});
|
||||
|
||||
// Initialize select2 for all product selects
|
||||
function initializeProductSelects() {
|
||||
$(".product-select").select2({
|
||||
placeholder: "Pilih Produk...",
|
||||
allowClear: true,
|
||||
width: "100%",
|
||||
});
|
||||
}
|
||||
|
||||
// Initial initialization
|
||||
initializeProductSelects();
|
||||
|
||||
// Fungsi untuk mengambil data stok
|
||||
function fetchStockData() {
|
||||
const dealerId = $("#dealer").val();
|
||||
if (!dealerId) return;
|
||||
|
||||
const productIds = $(".product-select")
|
||||
.map(function () {
|
||||
return $(this).val();
|
||||
})
|
||||
.get()
|
||||
.filter((id) => id !== "");
|
||||
|
||||
if (productIds.length === 0) return;
|
||||
|
||||
$.ajax({
|
||||
url: "/warehouse/opnames/get-stock-data",
|
||||
method: "POST",
|
||||
data: {
|
||||
_token: $('meta[name="csrf-token"]').attr("content"),
|
||||
dealer_id: dealerId,
|
||||
product_ids: productIds,
|
||||
},
|
||||
success: function (response) {
|
||||
if (response.stocks) {
|
||||
$(".product-row").each(function () {
|
||||
const productId = $(this).find(".product-select").val();
|
||||
const systemQtyInput = $(this).find(".system-quantity");
|
||||
const physicalQtyInput = $(this).find(
|
||||
'input[name^="physical_quantity"]'
|
||||
);
|
||||
|
||||
// Simpan nilai physical quantity yang sudah ada
|
||||
const currentPhysicalQty = physicalQtyInput.val();
|
||||
|
||||
if (
|
||||
productId &&
|
||||
response.stocks[productId] !== undefined
|
||||
) {
|
||||
systemQtyInput.val(response.stocks[productId]);
|
||||
// Kembalikan nilai physical quantity jika ada
|
||||
if (currentPhysicalQty) {
|
||||
physicalQtyInput.val(currentPhysicalQty);
|
||||
}
|
||||
calculateDifference(systemQtyInput[0]);
|
||||
} else {
|
||||
systemQtyInput.val("0");
|
||||
calculateDifference(systemQtyInput[0]);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
error: function (xhr) {
|
||||
console.error("Error fetching stock data:", xhr.responseText);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Update stok saat dealer berubah
|
||||
$("#dealer").change(function () {
|
||||
fetchStockData();
|
||||
});
|
||||
|
||||
// Update stok saat produk berubah
|
||||
$(document).on("change", ".product-select", function () {
|
||||
const row = $(this).closest("tr");
|
||||
const productId = $(this).val();
|
||||
const systemQtyInput = row.find(".system-quantity");
|
||||
const physicalQtyInput = row.find('input[name^="physical_quantity"]');
|
||||
|
||||
// Simpan nilai physical quantity yang sudah ada
|
||||
const currentPhysicalQty = physicalQtyInput.val();
|
||||
|
||||
if (productId) {
|
||||
fetchStockData();
|
||||
} else {
|
||||
systemQtyInput.val("0");
|
||||
// Kembalikan nilai physical quantity jika ada
|
||||
if (currentPhysicalQty) {
|
||||
physicalQtyInput.val(currentPhysicalQty);
|
||||
}
|
||||
calculateDifference(systemQtyInput[0]);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle physical quantity changes using event delegation
|
||||
$(document).on(
|
||||
"change input",
|
||||
'input[name^="physical_quantity"]',
|
||||
function () {
|
||||
calculateDifference(this);
|
||||
}
|
||||
);
|
||||
|
||||
// Fungsi untuk menambah baris produk
|
||||
$("#btn-add-row").click(function () {
|
||||
const template = document.getElementById("product-row-template");
|
||||
const tbody = $("#product-table tbody");
|
||||
const newRow = template.content.cloneNode(true);
|
||||
const rowIndex = $(".product-row").length;
|
||||
|
||||
// Update name attributes with correct index
|
||||
$(newRow)
|
||||
.find('select[name="product[]"]')
|
||||
.attr("name", `product[${rowIndex}]`);
|
||||
$(newRow)
|
||||
.find('input[name="system_quantity[]"]')
|
||||
.attr("name", `system_quantity[${rowIndex}]`);
|
||||
$(newRow)
|
||||
.find('input[name="physical_quantity[]"]')
|
||||
.attr("name", `physical_quantity[${rowIndex}]`);
|
||||
$(newRow)
|
||||
.find('input[name="item_notes[]"]')
|
||||
.attr("name", `item_notes[${rowIndex}]`);
|
||||
|
||||
// Add system-quantity class dan pastikan readonly
|
||||
const systemQtyInput = $(newRow).find(
|
||||
'input[name="system_quantity[]"]'
|
||||
);
|
||||
systemQtyInput
|
||||
.addClass("system-quantity")
|
||||
.attr("readonly", true)
|
||||
.val("0");
|
||||
|
||||
// Reset semua nilai input di baris baru kecuali system quantity
|
||||
$(newRow).find("select").val("");
|
||||
$(newRow).find("input:not(.system-quantity)").val("");
|
||||
|
||||
// Append to DOM first
|
||||
tbody.append(newRow);
|
||||
|
||||
// Initialize select2 for the new row AFTER it's added to DOM
|
||||
tbody.find("tr:last-child .product-select").select2({
|
||||
placeholder: "Pilih Produk...",
|
||||
allowClear: true,
|
||||
width: "100%",
|
||||
});
|
||||
|
||||
updateRemoveButtons();
|
||||
});
|
||||
|
||||
// Fungsi untuk menghapus baris produk
|
||||
$(document).on("click", ".btn-remove-row", function () {
|
||||
$(this).closest("tr").remove();
|
||||
updateRemoveButtons();
|
||||
// Reindex semua baris setelah penghapusan
|
||||
reindexRows();
|
||||
});
|
||||
|
||||
// Fungsi untuk update status tombol hapus
|
||||
function updateRemoveButtons() {
|
||||
const rows = $(".product-row").length;
|
||||
$(".btn-remove-row").prop("disabled", rows <= 1);
|
||||
}
|
||||
|
||||
// Fungsi untuk reindex semua baris
|
||||
function reindexRows() {
|
||||
$(".product-row").each(function (index) {
|
||||
const $row = $(this);
|
||||
const $select = $row.find('select[name^="product"]');
|
||||
|
||||
// Destroy select2 before changing attributes
|
||||
if ($select.data("select2")) {
|
||||
$select.select2("destroy");
|
||||
}
|
||||
|
||||
$select.attr("name", `product[${index}]`);
|
||||
$row.find('input[name^="system_quantity"]').attr(
|
||||
"name",
|
||||
`system_quantity[${index}]`
|
||||
);
|
||||
$row.find('input[name^="physical_quantity"]').attr(
|
||||
"name",
|
||||
`physical_quantity[${index}]`
|
||||
);
|
||||
$row.find('input[name^="item_notes"]').attr(
|
||||
"name",
|
||||
`item_notes[${index}]`
|
||||
);
|
||||
|
||||
// Reinitialize select2
|
||||
$select.select2({
|
||||
placeholder: "Pilih Produk...",
|
||||
allowClear: true,
|
||||
width: "100%",
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Update calculateDifference function - make it globally accessible
|
||||
window.calculateDifference = function (input) {
|
||||
const row = $(input).closest("tr");
|
||||
const systemQty = parseFloat(row.find(".system-quantity").val()) || 0;
|
||||
const physicalQty =
|
||||
parseFloat(row.find('input[name^="physical_quantity"]').val()) || 0;
|
||||
const noteInput = row.find('input[name^="item_notes"]');
|
||||
|
||||
// Round both values to 2 decimal places for comparison
|
||||
const roundedSystemQty = Math.round(systemQty * 100) / 100;
|
||||
const roundedPhysicalQty = Math.round(physicalQty * 100) / 100;
|
||||
|
||||
if (roundedSystemQty !== roundedPhysicalQty) {
|
||||
noteInput.addClass("is-invalid");
|
||||
noteInput.attr("required", true);
|
||||
noteInput.attr(
|
||||
"placeholder",
|
||||
"Catatan wajib diisi karena ada perbedaan stock"
|
||||
);
|
||||
row.addClass("table-warning");
|
||||
} else {
|
||||
noteInput.removeClass("is-invalid");
|
||||
noteInput.removeAttr("required");
|
||||
noteInput.attr("placeholder", "Catatan item");
|
||||
row.removeClass("table-warning");
|
||||
}
|
||||
};
|
||||
|
||||
// Prevent manual editing of system quantity
|
||||
$(document).on("keydown", ".system-quantity", function (e) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
$(document).on("paste", ".system-quantity", function (e) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
// Validasi form sebelum submit
|
||||
$("#opname-form").submit(function (e) {
|
||||
const dealerId = $("#dealer").val();
|
||||
if (!dealerId) {
|
||||
e.preventDefault();
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Oops...",
|
||||
text: "Silakan pilih dealer terlebih dahulu!",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
const products = $('select[name^="product"]')
|
||||
.map(function () {
|
||||
return $(this).val();
|
||||
})
|
||||
.get();
|
||||
|
||||
// Cek duplikasi produk
|
||||
const uniqueProducts = [...new Set(products)];
|
||||
if (products.length !== uniqueProducts.length) {
|
||||
e.preventDefault();
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Oops...",
|
||||
text: "Produk tidak boleh duplikat!",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
// Cek produk kosong
|
||||
if (products.includes("")) {
|
||||
e.preventDefault();
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Oops...",
|
||||
text: "Semua produk harus dipilih!",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
// Cek catatan untuk perbedaan stock
|
||||
let hasInvalidNotes = false;
|
||||
$(".product-row").each(function () {
|
||||
const systemQty =
|
||||
parseFloat(
|
||||
$(this).find('input[name^="system_quantity"]').val()
|
||||
) || 0;
|
||||
const physicalQty =
|
||||
parseFloat(
|
||||
$(this).find('input[name^="physical_quantity"]').val()
|
||||
) || 0;
|
||||
const note = $(this).find('input[name^="item_notes"]').val();
|
||||
|
||||
// Round both values to 2 decimal places for comparison
|
||||
const roundedSystemQty = Math.round(systemQty * 100) / 100;
|
||||
const roundedPhysicalQty = Math.round(physicalQty * 100) / 100;
|
||||
|
||||
if (roundedSystemQty !== roundedPhysicalQty && !note) {
|
||||
hasInvalidNotes = true;
|
||||
$(this).addClass("table-danger");
|
||||
}
|
||||
});
|
||||
|
||||
if (hasInvalidNotes) {
|
||||
e.preventDefault();
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Oops...",
|
||||
text: "Catatan wajib diisi untuk produk yang memiliki perbedaan stock!",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// Initial stock data load if dealer is selected
|
||||
if ($("#dealer").val()) {
|
||||
fetchStockData();
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
@@ -40,5 +40,27 @@
|
||||
@endsection
|
||||
|
||||
@section('javascripts')
|
||||
<script src="{{ asset('js/warehouse_management/opnames/detail.js') }}"></script>
|
||||
<script>
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
|
||||
},
|
||||
});
|
||||
let tableContainer = $("#opname-detail-table");
|
||||
let url = tableContainer.data("url");
|
||||
let table = $("#opname-detail-table").DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
ajax: url,
|
||||
columns: [
|
||||
{ data: "opname_date", name: "opname_date" },
|
||||
{ data: "user_name", name: "user.name" },
|
||||
{ data: "product_name", name: "product.name" },
|
||||
{ data: "system_stock", name: "system_stock" },
|
||||
{ data: "physical_stock", name: "physical_stock" },
|
||||
{ data: "difference", name: "difference" },
|
||||
],
|
||||
});
|
||||
|
||||
</script>
|
||||
@endsection
|
||||
@@ -157,5 +157,342 @@
|
||||
@endsection
|
||||
|
||||
@section('javascripts')
|
||||
<script src="{{ mix('js/warehouse_management/opnames/index.js') }}"></script>
|
||||
<script>
|
||||
$(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);
|
||||
});
|
||||
|
||||
/**
|
||||
* Initialize Select2 for dealer filter - same as stock audit
|
||||
*/
|
||||
function initializeSelect2() {
|
||||
console.log("Initializing Select2...");
|
||||
|
||||
if (typeof $.fn.select2 !== "undefined") {
|
||||
$("#dealer_filter").select2({
|
||||
placeholder: "Pilih...",
|
||||
allowClear: true,
|
||||
width: "100%",
|
||||
});
|
||||
} else {
|
||||
console.warn("Select2 not available, using regular select");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize date pickers with bootstrap datepicker - same as transaction view
|
||||
*/
|
||||
function initializeDatepickers() {
|
||||
console.log("Initializing datepickers...");
|
||||
|
||||
// Check if bootstrap datepicker is available
|
||||
if (typeof $.fn.datepicker === "undefined") {
|
||||
console.error("Bootstrap Datepicker not available!");
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize start date picker
|
||||
$("#date_from")
|
||||
.datepicker({
|
||||
format: "yyyy-mm-dd",
|
||||
autoclose: true,
|
||||
todayHighlight: true,
|
||||
orientation: "bottom left",
|
||||
templates: {
|
||||
leftArrow: '<i class="la la-angle-left"></i>',
|
||||
rightArrow: '<i class="la la-angle-right"></i>',
|
||||
},
|
||||
endDate: new Date(), // Don't allow future dates
|
||||
clearBtn: true,
|
||||
})
|
||||
.on("changeDate", function (e) {
|
||||
console.log("Start date selected:", e.format());
|
||||
enableEndDatePicker(e.format());
|
||||
})
|
||||
.on("clearDate", function (e) {
|
||||
console.log("Start date cleared");
|
||||
resetEndDatePicker();
|
||||
});
|
||||
|
||||
// Initialize end date picker
|
||||
initializeEndDatePicker();
|
||||
|
||||
// Initially disable end date input
|
||||
$("#date_to").prop("disabled", true);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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);
|
||||
|
||||
// Remove existing datepicker
|
||||
$("#date_to").datepicker("remove");
|
||||
|
||||
// Re-initialize with new startDate constraint
|
||||
$("#date_to")
|
||||
.datepicker({
|
||||
format: "yyyy-mm-dd",
|
||||
autoclose: true,
|
||||
todayHighlight: true,
|
||||
orientation: "bottom left",
|
||||
templates: {
|
||||
leftArrow: '<i class="la la-angle-left"></i>',
|
||||
rightArrow: '<i class="la la-angle-right"></i>',
|
||||
},
|
||||
startDate: startDate, // Set minimum date to selected start date
|
||||
endDate: new Date(), // Don't allow future dates
|
||||
clearBtn: true,
|
||||
})
|
||||
.on("changeDate", function (e) {
|
||||
console.log("End date selected:", e.format());
|
||||
})
|
||||
.on("clearDate", function (e) {
|
||||
console.log("End date cleared");
|
||||
});
|
||||
|
||||
console.log("End date picker enabled with startDate:", startDate);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize end date picker without constraints
|
||||
*/
|
||||
function initializeEndDatePicker() {
|
||||
$("#date_to")
|
||||
.datepicker({
|
||||
format: "yyyy-mm-dd",
|
||||
autoclose: true,
|
||||
todayHighlight: true,
|
||||
orientation: "bottom left",
|
||||
templates: {
|
||||
leftArrow: '<i class="la la-angle-left"></i>',
|
||||
rightArrow: '<i class="la la-angle-right"></i>',
|
||||
},
|
||||
endDate: new Date(), // Don't allow future dates
|
||||
clearBtn: true,
|
||||
})
|
||||
.on("changeDate", function (e) {
|
||||
console.log("End date selected:", e.format());
|
||||
})
|
||||
.on("clearDate", function (e) {
|
||||
console.log("End date cleared");
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset end date picker to initial state
|
||||
*/
|
||||
function resetEndDatePicker() {
|
||||
// Remove existing datepicker
|
||||
$("#date_to").datepicker("remove");
|
||||
|
||||
// Clear the input value
|
||||
$("#date_to").val("");
|
||||
|
||||
// Re-initialize without startDate constraint
|
||||
initializeEndDatePicker();
|
||||
|
||||
// Disable the input
|
||||
$("#date_to").prop("disabled", true);
|
||||
|
||||
console.log("End date picker reset and disabled");
|
||||
}
|
||||
|
||||
/**
|
||||
* 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%" }, // Created At column
|
||||
{ targets: 1, width: "12%" }, // Opname Date column
|
||||
{ targets: 2, width: "15%" }, // Dealer column
|
||||
{ targets: 3, width: "12%" }, // User column
|
||||
{ targets: 4, width: "10%" }, // Status column
|
||||
{ targets: 5, width: "15%", className: "text-center" }, // Stock Info column
|
||||
{ targets: 6, 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: "stock_info",
|
||||
name: "stock_info",
|
||||
orderable: false,
|
||||
searchable: false,
|
||||
},
|
||||
{
|
||||
data: "action",
|
||||
name: "action",
|
||||
orderable: false,
|
||||
searchable: false,
|
||||
},
|
||||
],
|
||||
order: [[0, "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");
|
||||
|
||||
// Reset select2 elements properly - same as stock audit
|
||||
$("#dealer_filter").val(null).trigger("change.select2");
|
||||
|
||||
// Clear datepicker values using bootstrap datepicker method
|
||||
$("#date_from").datepicker("clearDates");
|
||||
$("#date_to").datepicker("clearDates");
|
||||
|
||||
// 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();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 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() { ... });
|
||||
}
|
||||
|
||||
</script>
|
||||
@endsection
|
||||
@@ -75,5 +75,155 @@
|
||||
@endsection
|
||||
|
||||
@section('javascripts')
|
||||
<script src="{{ asset('js/warehouse_management/product_categories/index.js') }}"></script>
|
||||
<script>
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
|
||||
},
|
||||
});
|
||||
let tableContainer = $("#product-categories-table");
|
||||
let url = tableContainer.data("url");
|
||||
let table = $("#product-categories-table").DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
ajax: url,
|
||||
columns: [
|
||||
{ data: "name", name: "name" },
|
||||
{ data: "parent", name: "parent" },
|
||||
{ data: "action", name: "action", orderable: false, searchable: false },
|
||||
],
|
||||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
$("#addProductCategory").click(function () {
|
||||
$("#productCategoryForm")[0].reset();
|
||||
$("#category_id").val("");
|
||||
$("#modalTitle").text("Tambah Kategori");
|
||||
$("#productCategoryModal").modal("show");
|
||||
loadParentCategories();
|
||||
});
|
||||
|
||||
// Submit form (baik tambah maupun edit)
|
||||
$("#productCategoryForm").submit(function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
let id = $("#category_id").val();
|
||||
let url = id
|
||||
? `/warehouse/product_categories/${id}`
|
||||
: `/warehouse/product_categories`;
|
||||
let method = id ? "PUT" : "POST";
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
method: method,
|
||||
data: {
|
||||
name: $("#name").val(),
|
||||
_token: $('meta[name="csrf-token"]').attr("content"),
|
||||
...(id && { _method: "PUT" }),
|
||||
},
|
||||
success: function () {
|
||||
$("#productCategoryModal").modal("hide");
|
||||
$("#product-categories-table").DataTable().ajax.reload();
|
||||
},
|
||||
error: function (xhr) {
|
||||
alert("Gagal menyimpan data");
|
||||
console.error(xhr.responseText);
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
$(document).on("click", ".btn-edit-product-category", function () {
|
||||
const id = $(this).data("id");
|
||||
const url = $(this).data("url");
|
||||
$.ajax({
|
||||
url: url,
|
||||
method: "GET",
|
||||
success: function (response) {
|
||||
$("#category_id").val(response.id);
|
||||
$("#name").val(response.name);
|
||||
// Get parent categories and populate select
|
||||
$.ajax({
|
||||
url: "/warehouse/categories/parents", // Adjust to match your route
|
||||
method: "GET",
|
||||
success: function (parents) {
|
||||
let options =
|
||||
'<option value="">-- Tidak ada (Parent)</option>';
|
||||
parents.forEach(function (parent) {
|
||||
// Avoid self-select
|
||||
if (parent.id !== response.id) {
|
||||
options += `<option value="${parent.id}" ${
|
||||
response.parent_id === parent.id
|
||||
? "selected"
|
||||
: ""
|
||||
}>${parent.name}</option>`;
|
||||
}
|
||||
});
|
||||
$("#parent_id").html(options);
|
||||
},
|
||||
});
|
||||
$("#modalTitle").text("Edit Kategori");
|
||||
$("#productCategoryModal").modal("show");
|
||||
},
|
||||
error: function (xhr) {
|
||||
alert("Gagal mengambil data");
|
||||
console.error(xhr.responseText);
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on("click", ".btn-destroy-product-category", function () {
|
||||
Swal.fire({
|
||||
title: "Hapus nama kategori?",
|
||||
text: "Anda tidak akan bisa mengembalikannya!",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#d33",
|
||||
cancelButtonColor: "#dedede",
|
||||
confirmButtonText: "Hapus",
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
const url = $(this).data("action");
|
||||
$.ajax({
|
||||
url: url,
|
||||
method: "POST",
|
||||
data: {
|
||||
_method: "DELETE",
|
||||
_token: $('meta[name="csrf-token"]').attr("content"),
|
||||
},
|
||||
success: function () {
|
||||
alert("Kategori berhasil dihapus.");
|
||||
$("#product-categories-table").DataTable().ajax.reload();
|
||||
},
|
||||
error: function (xhr) {
|
||||
alert("Gagal menghapus kategori.");
|
||||
console.error(xhr.responseText);
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function loadParentCategories(selectedId = null) {
|
||||
const selectElement = $("#parent_id");
|
||||
let urlParents = selectElement.data("url");
|
||||
$.ajax({
|
||||
url: urlParents,
|
||||
type: "GET",
|
||||
success: function (data) {
|
||||
$("#parent_id")
|
||||
.empty()
|
||||
.append(
|
||||
'<option value="">-- Tidak ada (Kategori Utama) --</option>'
|
||||
);
|
||||
data.forEach(function (category) {
|
||||
$("#parent_id").append(
|
||||
`<option value="${category.id}" ${
|
||||
selectedId == category.id ? "selected" : ""
|
||||
}>${category.name}</option>`
|
||||
);
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
@endsection
|
||||
@@ -144,5 +144,256 @@ table.dataTable thead th.sorting:hover:before {
|
||||
@endsection
|
||||
|
||||
@section('javascripts')
|
||||
<script src="{{ asset('js/warehouse_management/products/index.js') }}"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
console.log("Products index.js loaded");
|
||||
|
||||
// Check if DataTables is available
|
||||
if (typeof $.fn.DataTable === "undefined") {
|
||||
console.error("DataTables not available!");
|
||||
return;
|
||||
}
|
||||
|
||||
// Wait for DOM to be fully ready
|
||||
setTimeout(function () {
|
||||
initializeDataTable();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
function initializeDataTable() {
|
||||
console.log("Initializing DataTable...");
|
||||
|
||||
// Destroy existing table if any
|
||||
if ($.fn.DataTable.isDataTable("#products-table")) {
|
||||
$("#products-table").DataTable().destroy();
|
||||
}
|
||||
|
||||
// Initialize DataTable
|
||||
var table = $("#products-table").DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
destroy: true,
|
||||
ajax: {
|
||||
url: $("#products-table").data("url"),
|
||||
type: "GET",
|
||||
data: function (d) {
|
||||
console.log("DataTables request data:", d);
|
||||
return d;
|
||||
},
|
||||
error: function (xhr, error, code) {
|
||||
console.error("DataTables AJAX error:", error, code);
|
||||
console.error("Response:", xhr.responseText);
|
||||
},
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
data: "DT_RowIndex",
|
||||
name: "DT_RowIndex",
|
||||
orderable: false,
|
||||
searchable: false,
|
||||
},
|
||||
{
|
||||
data: "code",
|
||||
name: "code",
|
||||
orderable: true,
|
||||
},
|
||||
{
|
||||
data: "name",
|
||||
name: "name",
|
||||
orderable: true,
|
||||
},
|
||||
{
|
||||
data: "category_name",
|
||||
name: "category_name",
|
||||
orderable: true,
|
||||
},
|
||||
{
|
||||
data: "unit",
|
||||
name: "unit",
|
||||
orderable: true,
|
||||
},
|
||||
{
|
||||
data: "total_stock",
|
||||
name: "total_stock",
|
||||
orderable: false,
|
||||
},
|
||||
{
|
||||
data: "action",
|
||||
name: "action",
|
||||
orderable: false,
|
||||
searchable: false,
|
||||
},
|
||||
],
|
||||
order: [[1, "asc"]], // Order by code asc
|
||||
pageLength: 10,
|
||||
responsive: true,
|
||||
ordering: true,
|
||||
orderMulti: false,
|
||||
});
|
||||
}
|
||||
|
||||
$(document).on("click", ".btn-destroy-product", function () {
|
||||
Swal.fire({
|
||||
title: "Hapus produk?",
|
||||
text: "Anda tidak akan bisa mengembalikannya!",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#d33",
|
||||
cancelButtonColor: "#dedede",
|
||||
confirmButtonText: "Hapus",
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
const url = $(this).data("action");
|
||||
$.ajax({
|
||||
url: url,
|
||||
method: "POST",
|
||||
data: {
|
||||
_method: "DELETE",
|
||||
_token: $('meta[name="csrf-token"]').attr("content"),
|
||||
},
|
||||
success: function () {
|
||||
Swal.fire(
|
||||
"Berhasil!",
|
||||
"Produk berhasil dihapus.",
|
||||
"success"
|
||||
);
|
||||
try {
|
||||
if ($.fn.DataTable.isDataTable("#products-table")) {
|
||||
$("#products-table").DataTable().ajax.reload();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Error reloading table:", e);
|
||||
location.reload(); // Fallback to page reload
|
||||
}
|
||||
},
|
||||
error: function (xhr) {
|
||||
Swal.fire("Error!", "Gagal menghapus produk.", "error");
|
||||
console.error(xhr.responseText);
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on("click", ".btn-toggle-active", function () {
|
||||
let button = $(this);
|
||||
let url = button.data("url");
|
||||
|
||||
Swal.fire({
|
||||
title: "Status produk?",
|
||||
text: "Anda yakin ingin mengganti status produk!",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#d33",
|
||||
cancelButtonColor: "#dedede",
|
||||
confirmButtonText: "Ya",
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
$.ajax({
|
||||
url: url,
|
||||
method: "POST",
|
||||
data: {
|
||||
_token: $('meta[name="csrf-token"]').attr("content"),
|
||||
},
|
||||
success: function (response) {
|
||||
if (response.success) {
|
||||
try {
|
||||
if ($.fn.DataTable.isDataTable("#products-table")) {
|
||||
$("#products-table")
|
||||
.DataTable()
|
||||
.ajax.reload(null, false);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Error reloading table:", e);
|
||||
location.reload(); // Fallback to page reload
|
||||
}
|
||||
Swal.fire("Berhasil!", response.message, "success");
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
Swal.fire(
|
||||
"Error!",
|
||||
"Gagal mengubah status produk.",
|
||||
"error"
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on("click", ".btn-product-stock-dealers", function () {
|
||||
const productId = $(this).data("id");
|
||||
const productName = $(this).data("name");
|
||||
const ajaxUrl = $(this).data("url");
|
||||
|
||||
// Check if modal elements exist
|
||||
if ($("#product-name-title").length === 0) {
|
||||
console.error("Modal title element not found");
|
||||
return;
|
||||
}
|
||||
|
||||
if ($("#dealer-stock-table").length === 0) {
|
||||
console.error("Dealer stock table element not found");
|
||||
return;
|
||||
}
|
||||
|
||||
// Set product name in modal title
|
||||
$("#product-name-title").text(productName);
|
||||
|
||||
// Destroy existing DataTable if any
|
||||
if ($.fn.DataTable.isDataTable("#dealer-stock-table")) {
|
||||
$("#dealer-stock-table").DataTable().destroy();
|
||||
}
|
||||
|
||||
// Initialize or reload DataTable inside modal
|
||||
$("#dealer-stock-table").DataTable({
|
||||
destroy: true,
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
ajax: {
|
||||
url: ajaxUrl,
|
||||
data: {
|
||||
product_id: productId,
|
||||
},
|
||||
error: function (xhr, error, thrown) {
|
||||
console.error(
|
||||
"Dealer stock DataTables Ajax Error:",
|
||||
error,
|
||||
thrown
|
||||
);
|
||||
console.error("Response:", xhr.responseText);
|
||||
},
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
data: "dealer_name",
|
||||
name: "dealer_name",
|
||||
orderable: true,
|
||||
searchable: true,
|
||||
},
|
||||
{
|
||||
data: "quantity",
|
||||
name: "quantity",
|
||||
orderable: true,
|
||||
searchable: false,
|
||||
},
|
||||
],
|
||||
initComplete: function () {
|
||||
try {
|
||||
if ($("#dealerStockModal").length > 0) {
|
||||
$("#dealerStockModal").modal("show");
|
||||
} else {
|
||||
console.error("Modal #dealerStockModal not found");
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Error showing modal:", e);
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on("click", "#dealerStockModal .close", function () {
|
||||
$("#dealerStockModal").modal("hide");
|
||||
});
|
||||
|
||||
</script>
|
||||
@endsection
|
||||
@@ -208,7 +208,425 @@ input.datepicker {
|
||||
@endsection
|
||||
|
||||
@section('javascripts')
|
||||
<script src="{{ mix('js/warehouse_management/stock_audit/index.js') }}"></script>
|
||||
<script>
|
||||
// Helper function to format date
|
||||
function formatDate(dateString) {
|
||||
if (!dateString) return "-";
|
||||
|
||||
const date = new Date(dateString);
|
||||
const months = [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"Mei",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Agu",
|
||||
"Sep",
|
||||
"Okt",
|
||||
"Nov",
|
||||
"Des",
|
||||
];
|
||||
|
||||
const day = date.getDate().toString().padStart(2, "0");
|
||||
const month = months[date.getMonth()];
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours().toString().padStart(2, "0");
|
||||
const minutes = date.getMinutes().toString().padStart(2, "0");
|
||||
|
||||
return `${day} ${month} ${year}, ${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
console.log("Initializing stock audit table...");
|
||||
|
||||
// Initialize Select2 without any event handlers
|
||||
$(".select2").select2({
|
||||
placeholder: "Pilih...",
|
||||
allowClear: true,
|
||||
width: "100%",
|
||||
});
|
||||
|
||||
// Initialize Datepicker
|
||||
$(".datepicker").datepicker({
|
||||
format: "yyyy-mm-dd",
|
||||
autoclose: true,
|
||||
todayHighlight: true,
|
||||
orientation: "bottom auto",
|
||||
language: "id",
|
||||
clearBtn: true,
|
||||
container: "body",
|
||||
});
|
||||
|
||||
const $table = $("#stock-audit-table");
|
||||
const indexRoute = $table.data("route");
|
||||
|
||||
console.log("Table route:", indexRoute);
|
||||
|
||||
let table = $table.DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
language: {
|
||||
processing:
|
||||
'<div class="d-flex justify-content-center"><div class="spinner-border text-primary" role="status"><span class="sr-only">Memproses...</span></div></div>',
|
||||
loadingRecords: "Memuat data...",
|
||||
zeroRecords: "Tidak ada data yang ditemukan",
|
||||
emptyTable: "Tidak ada data tersedia",
|
||||
},
|
||||
ajax: {
|
||||
url: indexRoute,
|
||||
data: function (d) {
|
||||
d.dealer = $("#filter-dealer").val();
|
||||
d.product = $("#filter-product").val();
|
||||
d.change_type = $("#filter-change-type").val();
|
||||
d.date = $("#filter-date").val();
|
||||
console.log("Ajax data with ordering:", d);
|
||||
console.log("Order info:", d.order);
|
||||
console.log("Columns info:", d.columns);
|
||||
},
|
||||
error: function (xhr, error, thrown) {
|
||||
console.error("Ajax error:", error);
|
||||
console.error("Response:", xhr.responseText);
|
||||
},
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
data: "DT_RowIndex",
|
||||
name: "DT_RowIndex",
|
||||
orderable: false,
|
||||
searchable: false,
|
||||
width: "5%",
|
||||
},
|
||||
{
|
||||
data: "product_name",
|
||||
name: "product_name",
|
||||
orderable: true,
|
||||
},
|
||||
{
|
||||
data: "dealer_name",
|
||||
name: "dealer_name",
|
||||
orderable: true,
|
||||
},
|
||||
{
|
||||
data: "change_type",
|
||||
name: "change_type",
|
||||
orderable: true,
|
||||
},
|
||||
{
|
||||
data: "quantity_change",
|
||||
name: "quantity_change",
|
||||
className: "text-center",
|
||||
orderable: true,
|
||||
},
|
||||
{
|
||||
data: "stock_before_after",
|
||||
name: "stock_before_after",
|
||||
className: "text-center",
|
||||
orderable: true,
|
||||
},
|
||||
{
|
||||
data: "source_info",
|
||||
name: "source_info",
|
||||
orderable: true,
|
||||
},
|
||||
{
|
||||
data: "user_name",
|
||||
name: "user_name",
|
||||
orderable: true,
|
||||
},
|
||||
{
|
||||
data: "created_at",
|
||||
name: "created_at",
|
||||
orderable: true,
|
||||
},
|
||||
{
|
||||
data: "action",
|
||||
name: "action",
|
||||
orderable: false,
|
||||
searchable: false,
|
||||
width: "10%",
|
||||
},
|
||||
],
|
||||
order: [[8, "desc"]], // Order by created_at desc (column index 8)
|
||||
pageLength: 10,
|
||||
responsive: true,
|
||||
ordering: true, // Enable column ordering
|
||||
orderMulti: false, // Single column ordering only
|
||||
});
|
||||
|
||||
console.log("Table initialized:", table);
|
||||
|
||||
// Add loading indicator for ordering
|
||||
table.on("processing.dt", function (e, settings, processing) {
|
||||
if (processing) {
|
||||
console.log("DataTable processing started (ordering/filtering)");
|
||||
} else {
|
||||
console.log("DataTable processing finished");
|
||||
}
|
||||
});
|
||||
|
||||
// Debug order events
|
||||
table.on("order.dt", function () {
|
||||
console.log("Order changed:", table.order());
|
||||
});
|
||||
|
||||
// Manual modal close handlers
|
||||
$(document).on(
|
||||
"click",
|
||||
"#modal-close-btn, #modal-close-footer-btn",
|
||||
function () {
|
||||
console.log("Manual close button clicked");
|
||||
$("#auditDetailModal").modal("hide");
|
||||
}
|
||||
);
|
||||
|
||||
// Modal backdrop click handler
|
||||
$(document).on("click", "#auditDetailModal", function (e) {
|
||||
if (e.target === this) {
|
||||
console.log("Modal backdrop clicked");
|
||||
$("#auditDetailModal").modal("hide");
|
||||
}
|
||||
});
|
||||
|
||||
// ESC key handler
|
||||
$(document).on("keydown", function (e) {
|
||||
if (e.keyCode === 27 && $("#auditDetailModal").hasClass("show")) {
|
||||
console.log("ESC key pressed");
|
||||
$("#auditDetailModal").modal("hide");
|
||||
}
|
||||
});
|
||||
|
||||
// Modal hidden event handler
|
||||
$("#auditDetailModal").on("hidden.bs.modal", function () {
|
||||
console.log("Modal hidden");
|
||||
// Reset modal content
|
||||
$("#modal-loading").show();
|
||||
$("#modal-error").hide();
|
||||
$("#modal-content").hide();
|
||||
});
|
||||
|
||||
// Apply filters button - only way to trigger table reload
|
||||
$("#apply-filters").click(function () {
|
||||
console.log("Apply filters clicked, reloading table...");
|
||||
console.log("Current filter values:", {
|
||||
dealer: $("#filter-dealer").val(),
|
||||
product: $("#filter-product").val(),
|
||||
change_type: $("#filter-change-type").val(),
|
||||
date: $("#filter-date").val(),
|
||||
});
|
||||
table.ajax.reload();
|
||||
});
|
||||
|
||||
// Allow Enter key to apply filters on datepicker
|
||||
$("#filter-date").keypress(function (e) {
|
||||
if (e.which == 13) {
|
||||
// Enter key
|
||||
console.log("Enter pressed on date filter, applying filters...");
|
||||
table.ajax.reload();
|
||||
}
|
||||
});
|
||||
|
||||
// Reset filters
|
||||
$("#reset-filters").click(function () {
|
||||
console.log("Resetting filters...");
|
||||
|
||||
// Reset select2 elements properly
|
||||
$("#filter-dealer").val(null).trigger("change.select2");
|
||||
$("#filter-product").val(null).trigger("change.select2");
|
||||
$("#filter-change-type").val(null).trigger("change.select2");
|
||||
|
||||
// Reset datepicker properly
|
||||
$("#filter-date").val("").datepicker("update");
|
||||
|
||||
console.log("Filters reset, values after reset:", {
|
||||
dealer: $("#filter-dealer").val(),
|
||||
product: $("#filter-product").val(),
|
||||
change_type: $("#filter-change-type").val(),
|
||||
date: $("#filter-date").val(),
|
||||
});
|
||||
|
||||
// Reload table after reset
|
||||
console.log("Reloading table after reset...");
|
||||
table.ajax.reload();
|
||||
});
|
||||
});
|
||||
|
||||
window.showAuditDetail = function (id) {
|
||||
console.log("Showing audit detail for ID:", id);
|
||||
|
||||
// Reset modal states first
|
||||
$("#modal-loading").show();
|
||||
$("#modal-error").hide();
|
||||
$("#modal-content").hide();
|
||||
|
||||
// Show modal
|
||||
$("#auditDetailModal").modal("show");
|
||||
|
||||
$.ajax({
|
||||
url: `/warehouse/stock-audit/${id}/detail`,
|
||||
method: "GET",
|
||||
success: function (response) {
|
||||
console.log("Detail response:", response);
|
||||
$("#modal-loading").hide();
|
||||
|
||||
if (response.success) {
|
||||
populateModalContent(response.data, response.source_detail);
|
||||
$("#modal-content").show();
|
||||
} else {
|
||||
$("#error-message").text(response.message);
|
||||
$("#modal-error").show();
|
||||
}
|
||||
},
|
||||
error: function (xhr) {
|
||||
console.error("Detail AJAX error:", xhr);
|
||||
$("#modal-loading").hide();
|
||||
$("#error-message").text("Gagal memuat detail audit");
|
||||
$("#modal-error").show();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
function populateModalContent(audit, sourceDetail) {
|
||||
console.log("Populating modal content:", audit);
|
||||
|
||||
// Populate basic stock information
|
||||
$("#product-name").text(audit.stock.product.name);
|
||||
$("#dealer-name").text(audit.stock.dealer.name);
|
||||
$("#previous-quantity").text(audit.previous_quantity);
|
||||
$("#new-quantity").text(audit.new_quantity);
|
||||
$("#user-name").text(audit.user ? audit.user.name : "-");
|
||||
$("#created-at").text(audit.created_at_formatted);
|
||||
$("#description").text(audit.description || "-");
|
||||
|
||||
// Set quantity change with styling
|
||||
let quantityChangeClass = "";
|
||||
let quantityChangeSign = "";
|
||||
if (audit.quantity_change > 0) {
|
||||
quantityChangeClass = "text-success";
|
||||
quantityChangeSign = "+";
|
||||
} else if (audit.quantity_change < 0) {
|
||||
quantityChangeClass = "text-danger";
|
||||
quantityChangeSign = "";
|
||||
} else {
|
||||
quantityChangeClass = "text-muted";
|
||||
quantityChangeSign = "";
|
||||
}
|
||||
$("#quantity-change").html(
|
||||
`<span class="${quantityChangeClass}">${quantityChangeSign}${audit.quantity_change}</span>`
|
||||
);
|
||||
|
||||
// Set change type with styling
|
||||
let changeTypeClass = "";
|
||||
switch (audit.change_type) {
|
||||
case "increase":
|
||||
changeTypeClass = "text-success";
|
||||
break;
|
||||
case "decrease":
|
||||
changeTypeClass = "text-danger";
|
||||
break;
|
||||
case "adjustment":
|
||||
changeTypeClass = "text-warning";
|
||||
break;
|
||||
default:
|
||||
changeTypeClass = "text-muted";
|
||||
}
|
||||
$("#change-type").html(
|
||||
`<span class="font-weight-bold ${changeTypeClass}">${audit.change_type_label}</span>`
|
||||
);
|
||||
|
||||
// Handle source detail
|
||||
if (sourceDetail) {
|
||||
$("#source-detail").show();
|
||||
|
||||
if (sourceDetail.type === "mutation") {
|
||||
let mutation = sourceDetail.data;
|
||||
$("#source-title").text(
|
||||
`Mutasi Stock: ${mutation.mutation_number}`
|
||||
);
|
||||
|
||||
let mutationContent = `
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<table class="table table-sm">
|
||||
<tr>
|
||||
<td><strong>Dari Dealer:</strong></td>
|
||||
<td>${
|
||||
mutation.from_dealer
|
||||
? mutation.from_dealer.name
|
||||
: "-"
|
||||
}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Ke Dealer:</strong></td>
|
||||
<td>${
|
||||
mutation.to_dealer
|
||||
? mutation.to_dealer.name
|
||||
: "-"
|
||||
}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Status:</strong></td>
|
||||
<td>${mutation.status}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<table class="table table-sm">
|
||||
<tr>
|
||||
<td><strong>Diminta oleh:</strong></td>
|
||||
<td>${
|
||||
mutation.requested_by
|
||||
? mutation.requested_by.name
|
||||
: "-"
|
||||
}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Disetujui oleh:</strong></td>
|
||||
<td>${
|
||||
mutation.approved_by
|
||||
? mutation.approved_by.name
|
||||
: "-"
|
||||
}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Tanggal Disetujui:</strong></td>
|
||||
<td>${
|
||||
mutation.approved_at_formatted || "-"
|
||||
}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
$("#source-content").html(mutationContent);
|
||||
} else if (sourceDetail.type === "opname") {
|
||||
let opname = sourceDetail.data;
|
||||
$("#source-title").text("Opname");
|
||||
|
||||
let opnameContent = `
|
||||
<table class="table table-sm">
|
||||
<tr>
|
||||
<td><strong>Dealer:</strong></td>
|
||||
<td>${opname.dealer ? opname.dealer.name : "-"}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>User:</strong></td>
|
||||
<td>${opname.user ? opname.user.name : "-"}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Status:</strong></td>
|
||||
<td>${opname.status || "-"}</td>
|
||||
</tr>
|
||||
</table>
|
||||
`;
|
||||
$("#source-content").html(opnameContent);
|
||||
}
|
||||
} else {
|
||||
$("#source-detail").hide();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
|
||||
Reference in New Issue
Block a user