261 lines
12 KiB
JavaScript
261 lines
12 KiB
JavaScript
$(document).ready(function () {
|
|
$(document).on("change", ".form-select", function () {
|
|
if ($("option:selected", this).val() == "") {
|
|
$(".nama").css("display", "none");
|
|
$(".nopol").css("display", "none");
|
|
$(".nocard").css("display", "none");
|
|
$(".notrans").css("display", "none");
|
|
// $(".site").val('');
|
|
} else if ($("option:selected", this).val() == "nama") {
|
|
$(".nama").css("display", "block");
|
|
$(".nopol").css("display", "none");
|
|
$(".nocard").css("display", "none");
|
|
$(".notrans").css("display", "none");
|
|
$(".input-default").val("");
|
|
} else if ($("option:selected", this).val() == "nopol") {
|
|
$(".nama").css("display", "none");
|
|
$(".nopol").css("display", "block");
|
|
$(".nocard").css("display", "none");
|
|
$(".notrans").css("display", "none");
|
|
$(".input-default").val("");
|
|
} else if ($("option:selected", this).val() == "nocard") {
|
|
$(".nama").css("display", "none");
|
|
$(".nopol").css("display", "none");
|
|
$(".nocard").css("display", "block");
|
|
$(".notrans").css("display", "none");
|
|
$(".input-default").val("");
|
|
} else if ($("option:selected", this).val() == "notrans") {
|
|
$(".nama").css("display", "none");
|
|
$(".nopol").css("display", "none");
|
|
$(".nocard").css("display", "none");
|
|
$(".notrans").css("display", "block");
|
|
$(".input-default").val("");
|
|
} else {
|
|
$(".position").css("display", "none");
|
|
$(".level-area").css("display", "none");
|
|
$(".input-default").val("");
|
|
}
|
|
});
|
|
|
|
var url = $("#example").data("url");
|
|
|
|
function syncPeriode() {
|
|
const aktif = $("#isActive").is(":checked");
|
|
$("#periode").prop("disabled", false);
|
|
$("#periode-hint").text(
|
|
aktif
|
|
? "Aktif + periode: langganan berlaku saat ini dalam rentang tanggal."
|
|
: "Nonaktif: saring berdasarkan tanggal atau tgl diubah.",
|
|
);
|
|
}
|
|
$("#isActive").on("change", syncPeriode);
|
|
|
|
// Satu input periode (date-range) -> isi hidden tgl_awal/tgl_akhir (YYYY-MM-DD).
|
|
$(".input-daterange-filter").daterangepicker(
|
|
{
|
|
autoUpdateInput: false,
|
|
locale: { format: "DD-MM-YYYY", cancelLabel: "Hapus" },
|
|
parentEl: "#search-form",
|
|
},
|
|
);
|
|
$(".input-daterange-filter").on("apply.daterangepicker", function (ev, picker) {
|
|
$(this).val(picker.startDate.format("DD-MM-YYYY") + " - " + picker.endDate.format("DD-MM-YYYY"));
|
|
$("#tgl-awal").val(picker.startDate.format("YYYY-MM-DD"));
|
|
$("#tgl-akhir").val(picker.endDate.format("YYYY-MM-DD"));
|
|
});
|
|
$(".input-daterange-filter").on("cancel.daterangepicker", function () {
|
|
$(this).val("");
|
|
$("#tgl-awal").val("");
|
|
$("#tgl-akhir").val("");
|
|
});
|
|
syncPeriode();
|
|
|
|
$("#search-button").on("click", function () {
|
|
let searchBy = $("#search-by").val();
|
|
let searchValue = $("#search-value").val().trim();
|
|
|
|
let memberType = $("#member-type").val();
|
|
let department = $("#department").val();
|
|
let vehicle = $("#vehicle").val();
|
|
let isActive = $("#isActive").is(":checked") ? 1 : 0;
|
|
|
|
// =========================
|
|
// VALIDASI PENCARIAN
|
|
// =========================
|
|
|
|
if (searchBy !== "" && searchValue === "") {
|
|
let label = {
|
|
nama: "Nama",
|
|
alamat: "Alamat",
|
|
nopol: "No. Polisi",
|
|
nocard: "No. Card",
|
|
notrans: "No. Transaksi",
|
|
};
|
|
|
|
let message = "Harap masukkan " + (label[searchBy] || "kata kunci");
|
|
|
|
// Highlight input
|
|
$("#search-value").addClass("is-invalid").focus();
|
|
|
|
// Tampilkan pesan
|
|
$("#search-status").removeClass("text-success").addClass("text-danger").text(message);
|
|
|
|
$("#search-value").focus();
|
|
|
|
return;
|
|
}
|
|
|
|
let searchData = {
|
|
searchBy: searchBy,
|
|
searchValue: searchValue,
|
|
memberType: memberType,
|
|
department: department,
|
|
vehicle: vehicle,
|
|
isActive: isActive,
|
|
tgl_awal: $("#tgl-awal").val(),
|
|
tgl_akhir: $("#tgl-akhir").val(),
|
|
};
|
|
|
|
// =========================
|
|
// AJAX
|
|
// =========================
|
|
|
|
const btn = $("#search-button");
|
|
const btnHtml = btn.html();
|
|
btn.prop("disabled", true).html('<i class="fa fa-spinner fa-spin me-2"></i>Mencari...');
|
|
$("#example tbody").html(
|
|
`<tr><td colspan="11" class="text-center text-muted py-4"><span class="spinner-border spinner-border-sm me-2"></span>Memuat data...</td></tr>`,
|
|
);
|
|
|
|
$.ajax({
|
|
url: url,
|
|
type: "POST",
|
|
// data: $("#search-form").serialize(),
|
|
data: searchData,
|
|
headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
|
|
dataType: "json",
|
|
success: function (response) {
|
|
var tbody = $("#example tbody");
|
|
tbody.empty();
|
|
|
|
if (response.length !== 0) {
|
|
// Kelompokkan data berdasarkan notrans
|
|
var groupedData = {};
|
|
response.forEach((element) => {
|
|
if (!groupedData[element.notrans]) {
|
|
groupedData[element.notrans] = [];
|
|
}
|
|
groupedData[element.notrans].push(element);
|
|
});
|
|
|
|
// Generate HTML
|
|
Object.keys(groupedData).forEach((notrans, index) => {
|
|
var rows = groupedData[notrans];
|
|
var rowspan = rows.length;
|
|
|
|
rows.forEach((element, rowIndex) => {
|
|
var rowHtml = `
|
|
<tr class="mb-2"
|
|
data-notrans="${element.notrans}"
|
|
data-nama="${element.nama}"
|
|
data-alamat="${element.alamat}"
|
|
data-telp="${element.telepon}"
|
|
data-jmember="${element.jmember}"
|
|
data-dept="${element.dept}"
|
|
data-awal="${element.awal}"
|
|
data-akhir="${element.akhir}"
|
|
>
|
|
${rowIndex === 0 ? `<td rowspan="${rowspan}" class="p2 is-invalid" style="text-align: center;" width="3%">${index + 1}</td>` : ""}
|
|
${rowIndex === 0 ? oldAdmin(notrans, rowspan) : ""}
|
|
${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;" width="8%">${element.nama}</td>` : ""}
|
|
${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;" width="10%">${element.alamat}</td>` : ""}
|
|
${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;">${element.telepon}</td>` : ""}
|
|
${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;">${element.jmember}</td>` : ""}
|
|
${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;">${element.dept}</td>` : ""}
|
|
${rowIndex === 0 ? `<td rowspan="${rowspan}" width="200" style="text-align: center; padding: 2px;" width="11%">${element.awal} <br> ${element.akhir}</td>` : ""}
|
|
${rowIndex === 0 ? `<td rowspan="${rowspan}" class="p-2" style="padding: 2px;" width="10%"> ${[...new Set(rows.map((r) => `${r.nopol || "No. Polisi tidak ada"} (${r.vehicle || ""})`))].join("<br>")} </td>` : ""}
|
|
${rowIndex === 0 ? `<td rowspan="${rowspan}" style="text-align: center; padding: 2px;">${[...new Set(rows.map((r) => r.no_card || "Tidak ada kartu"))].join("<br>")}</td>` : ""}
|
|
</tr>
|
|
`;
|
|
// ${rowIndex === 0 ? `<td rowspan="${rowspan}" class="p-2" style="text-align: center;">
|
|
// <button class="btn btn-secondary btn-xs extend-button mb-1" data-id="${element.notrans}">Extend</button>
|
|
// <button class="btn btn-primary btn-xs edit-button mb-1" data-id="${element.notrans}">Edit</button>
|
|
// <button class="btn btn-danger btn-xs delete-button mb-1" data-id="${element.notrans}">Delete</button>
|
|
// </td>` : ''}
|
|
tbody.append(rowHtml);
|
|
});
|
|
});
|
|
} else {
|
|
// alert("Data tidak ditemukan.");
|
|
$("#example tbody").html(
|
|
`<tr>
|
|
<td colspan="11" style="text-align: center;"><p class="text-danger mt-3">Tidak ditemukan data</p></td>
|
|
<tr>`,
|
|
);
|
|
}
|
|
},
|
|
error: function (xhr) {
|
|
let msg = "Gagal memuat data.";
|
|
if (xhr.status === 422 && xhr.responseJSON?.message) msg = xhr.responseJSON.message;
|
|
$("#example tbody").html(
|
|
`<tr><td colspan="11" class="text-center text-danger py-4">${msg}</td></tr>`,
|
|
);
|
|
Swal.fire({icon: "error", title: "Pencarian gagal", text: msg});
|
|
},
|
|
complete: function () {
|
|
btn.prop("disabled", false).html(btnHtml);
|
|
},
|
|
});
|
|
});
|
|
|
|
$("#btnDelete").on("click", function () {
|
|
const notrans = typeof selectedRowData !== "undefined" ? selectedRowData?.notrans : null;
|
|
if (!notrans) {
|
|
Swal.fire({icon: "warning", title: "Belum pilih data", text: "Klik salah satu baris transaksi dulu."});
|
|
return;
|
|
}
|
|
const base = $("#btnDelete").data("destroy");
|
|
Swal.fire({
|
|
title: "Hapus transaksi?",
|
|
text: `${notrans} akan diarsipkan ke transaksi_stiker_res.`,
|
|
icon: "warning",
|
|
showCancelButton: true,
|
|
confirmButtonText: "Ya, arsipkan",
|
|
cancelButtonText: "Batal",
|
|
confirmButtonColor: "#dc3545",
|
|
showLoaderOnConfirm: true,
|
|
preConfirm: () =>
|
|
$.ajax({
|
|
url: base + "/" + encodeURIComponent(notrans),
|
|
type: "DELETE",
|
|
headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
|
|
}).catch((xhr) => {
|
|
Swal.showValidationMessage(xhr.responseJSON?.message || "Gagal menghapus data.");
|
|
}),
|
|
}).then((result) => {
|
|
if (result.isConfirmed && result.value) {
|
|
Swal.fire({icon: "success", title: "Berhasil", text: "Data diarsipkan.", timer: 1500, showConfirmButton: false}).then(() => {
|
|
$("#rowActions").addClass("d-none");
|
|
$("#search-button").click();
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
function oldAdmin(value, rowSpan) {
|
|
let hasSlash = value.includes("/");
|
|
if (hasSlash) {
|
|
return `<td rowspan="${rowSpan}" class="p2 text-danger" style="padding: 2px;" width="17%">
|
|
${value} <i class="mdi mdi-help-circle-outline ms-1"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-placement="bottom"
|
|
title="Gunakan manufacture versi lama">
|
|
</i>
|
|
</td>`;
|
|
}
|
|
return `<td rowspan="${rowSpan}" class="p2" style="padding: 2px;" width="17%">
|
|
${value}
|
|
</td>`;
|
|
}
|
|
});
|