189 lines
9.0 KiB
JavaScript
189 lines
9.0 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");
|
|
|
|
// Satu input periode (date-range) -> isi hidden tgl_awal/tgl_akhir (YYYY-MM-DD).
|
|
if ($.fn.daterangepicker && $(".input-daterange-filter").length) {
|
|
$(".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("");
|
|
});
|
|
}
|
|
|
|
$("#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();
|
|
|
|
// =========================
|
|
// VALIDASI PENCARIAN
|
|
// =========================
|
|
|
|
if (searchBy !== "" && searchValue === "") {
|
|
let label = {
|
|
nama: "Nama",
|
|
alamat: "Alamat",
|
|
nopol: "No. Polisi",
|
|
nocard: "No. Card",
|
|
notrans: "No. Transaksi",
|
|
};
|
|
|
|
Swal.fire({icon: "warning", title: "Belum lengkap", text: "Harap masukkan " + (label[searchBy] || "kata kunci")});
|
|
|
|
$("#search-value").focus();
|
|
|
|
return;
|
|
}
|
|
|
|
// =========================
|
|
// DEBUG
|
|
// =========================
|
|
|
|
console.log({
|
|
searchBy,
|
|
searchValue,
|
|
memberType,
|
|
department,
|
|
vehicle,
|
|
});
|
|
|
|
// =========================
|
|
// AJAX
|
|
// =========================
|
|
$.ajax({
|
|
url: url,
|
|
type: "POST",
|
|
data: $("#search-form").serialize(),
|
|
headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
|
|
dataType: "json",
|
|
beforeSend: function () {
|
|
$("#search-button").prop("disabled", true).html(`
|
|
<i class="fa fa-spinner fa-spin me-2"></i>
|
|
Mencari...
|
|
`);
|
|
},
|
|
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" style="text-align: center;">${index + 1}</td>` : ""}
|
|
${rowIndex === 0 ? `<td rowspan="${rowspan}" class="p2" style="padding: 2px;">${element.notrans}</td>` : ""}
|
|
${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;">${element.nama}</td>` : ""}
|
|
${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;">${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;">${element.awal} <br> ${element.akhir}</td>` : ""}
|
|
${rowIndex === 0 ? `<td rowspan="${rowspan}" class="p-2" style="padding: 2px;"> ${[...new Set(rows.map((r) => `${r.nopol || "No. Polisi tidak ada"} (${r.vehicle || ""})`))].join("<br>")} </td>` : ""}
|
|
${rowIndex === 0 ? `<td rowspan="${rowspan}" style="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 {
|
|
$("#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 () {
|
|
$("#search-button").prop("disabled", false).html('<i class="fa fa-search me-2"></i> Cari Data...');
|
|
},
|
|
});
|
|
});
|
|
});
|