fix structure product categories table and crud product
This commit is contained in:
@@ -10,13 +10,8 @@ let table = $("#product-categories-table").DataTable({
|
||||
serverSide: true,
|
||||
ajax: url,
|
||||
columns: [
|
||||
{
|
||||
data: "DT_RowIndex",
|
||||
name: "DT_RowIndex",
|
||||
orderable: false,
|
||||
searchable: false,
|
||||
},
|
||||
{ data: "name", name: "name" },
|
||||
{ data: "parent", name: "parent" },
|
||||
{ data: "action", name: "action", orderable: false, searchable: false },
|
||||
],
|
||||
});
|
||||
@@ -27,6 +22,7 @@ $(document).ready(function () {
|
||||
$("#category_id").val("");
|
||||
$("#modalTitle").text("Tambah Kategori");
|
||||
$("#productCategoryModal").modal("show");
|
||||
loadParentCategories();
|
||||
});
|
||||
|
||||
// Submit form (baik tambah maupun edit)
|
||||
@@ -67,6 +63,26 @@ $(document).on("click", ".btn-edit-product-category", function () {
|
||||
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");
|
||||
},
|
||||
@@ -107,3 +123,24 @@ $(document).on("click", ".btn-destroy-product-category", function () {
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function loadParentCategories(selectedId = null) {
|
||||
$.ajax({
|
||||
url: "/warehouse/categories/parents", // create this route
|
||||
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>`
|
||||
);
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
43
resources/js/warehouse_management/products/create.js
Normal file
43
resources/js/warehouse_management/products/create.js
Normal file
@@ -0,0 +1,43 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const addBtn = document.getElementById("addDealerRow");
|
||||
const dealerRows = document.getElementById("dynamicDealerRows");
|
||||
|
||||
// Get dealer data from Blade
|
||||
const dealerDataDiv = document.getElementById("dealerData");
|
||||
const dealers = JSON.parse(dealerDataDiv.getAttribute("data-dealers")); // 👈 this reads JSON from Blade
|
||||
|
||||
let rowCount = 0;
|
||||
|
||||
function createDealerRow(index) {
|
||||
const dealerOptions = dealers
|
||||
.map((d) => `<option value="${d.id}">${d.name}</option>`)
|
||||
.join("");
|
||||
return `
|
||||
<div class="form-group row align-items-center dealer-row" data-index="${index}">
|
||||
<div class="col-md-5">
|
||||
<select name="dealer_stock[${index}][dealer_id]" class="form-control" required>
|
||||
<option value="">-- Pilih Dealer --</option>
|
||||
${dealerOptions}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="number" name="dealer_stock[${index}][quantity]" class="form-control" value="1" min="1" required>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<button type="button" class="btn btn-danger btn-sm removeDealerRow">Hapus</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
addBtn.addEventListener("click", function () {
|
||||
dealerRows.insertAdjacentHTML("beforeend", createDealerRow(rowCount));
|
||||
rowCount++;
|
||||
});
|
||||
|
||||
dealerRows.addEventListener("click", function (e) {
|
||||
if (e.target.classList.contains("removeDealerRow")) {
|
||||
e.target.closest(".dealer-row").remove();
|
||||
}
|
||||
});
|
||||
});
|
||||
48
resources/js/warehouse_management/products/edit.js
Normal file
48
resources/js/warehouse_management/products/edit.js
Normal file
@@ -0,0 +1,48 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
let dealerRowContainer = document.getElementById("dynamicDealerRows");
|
||||
let addDealerButton = document.getElementById("addDealerRow");
|
||||
|
||||
// Initial index from existing dealer rows
|
||||
let rowIndex =
|
||||
dealerRowContainer.querySelectorAll(".dealer-stock-row").length;
|
||||
|
||||
addDealerButton.addEventListener("click", function () {
|
||||
const newRow = document.createElement("div");
|
||||
newRow.className = "form-group row align-items-center dealer-stock-row";
|
||||
newRow.innerHTML = `
|
||||
<div class="col-md-6">
|
||||
<select name="dealer_stock[${rowIndex}][dealer_id]" class="form-control">
|
||||
<option value="">-- Pilih Dealer --</option>
|
||||
${generateDealerOptions()}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="number" name="dealer_stock[${rowIndex}][quantity]" class="form-control" value="1" min="1" required placeholder="Jumlah Stok" />
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<button type="button" class="btn btn-danger btn-sm remove-dealer-row"> Hapus </button>
|
||||
</div>
|
||||
`;
|
||||
dealerRowContainer.appendChild(newRow);
|
||||
rowIndex++;
|
||||
});
|
||||
|
||||
// Handle removal of dealer row
|
||||
dealerRowContainer.addEventListener("click", function (event) {
|
||||
if (
|
||||
event.target &&
|
||||
event.target.classList.contains("remove-dealer-row")
|
||||
) {
|
||||
event.target.closest(".dealer-stock-row").remove();
|
||||
}
|
||||
});
|
||||
|
||||
// Function to generate dealer <option> elements dynamically
|
||||
function generateDealerOptions() {
|
||||
const dealerDataDiv = document.getElementById("dealerData");
|
||||
const dealers = JSON.parse(dealerDataDiv.getAttribute("data-dealers"));
|
||||
return dealers
|
||||
.map((d) => `<option value="${d.id}">${d.name}</option>`)
|
||||
.join("");
|
||||
}
|
||||
});
|
||||
@@ -10,12 +10,6 @@ let table = $("#products-table").DataTable({
|
||||
serverSide: true,
|
||||
ajax: url,
|
||||
columns: [
|
||||
{
|
||||
data: "DT_RowIndex",
|
||||
name: "DT_RowIndex",
|
||||
orderable: false,
|
||||
searchable: false,
|
||||
},
|
||||
{ data: "code", name: "code" },
|
||||
{ data: "name", name: "name" },
|
||||
{ data: "category_name", name: "category.name" },
|
||||
@@ -24,65 +18,9 @@ let table = $("#products-table").DataTable({
|
||||
],
|
||||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
$("#addProductCategory").click(function () {
|
||||
$("#productCategoryForm")[0].reset();
|
||||
$("#category_id").val("");
|
||||
$("#modalTitle").text("Tambah Kategori");
|
||||
$("#productCategoryModal").modal("show");
|
||||
});
|
||||
|
||||
// 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);
|
||||
$("#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 () {
|
||||
$(document).on("click", ".btn-destroy-product", function () {
|
||||
Swal.fire({
|
||||
title: "Hapus nama kategori?",
|
||||
title: "Hapus produk?",
|
||||
text: "Anda tidak akan bisa mengembalikannya!",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#d33",
|
||||
@@ -99,11 +37,11 @@ $(document).on("click", ".btn-destroy-product-category", function () {
|
||||
_token: $('meta[name="csrf-token"]').attr("content"),
|
||||
},
|
||||
success: function () {
|
||||
alert("Kategori berhasil dihapus.");
|
||||
$("#product-categories-table").DataTable().ajax.reload();
|
||||
alert("Produk berhasil dihapus.");
|
||||
$("#products-table").DataTable().ajax.reload();
|
||||
},
|
||||
error: function (xhr) {
|
||||
alert("Gagal menghapus kategori.");
|
||||
alert("Gagal menghapus produk.");
|
||||
console.error(xhr.responseText);
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user