optimize dockerfile and copy js library used

This commit is contained in:
2025-07-14 16:10:52 +07:00
parent 5b14523f84
commit 4b9be55d32
17 changed files with 2439 additions and 174 deletions

View File

@@ -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

View File

@@ -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

View File

@@ -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