order_gizi/public/js/menu/action.js
2025-08-12 17:24:34 +07:00

661 lines
23 KiB
JavaScript

// Fungsi inisialisasi Selectize dan Auto-expand
function initSelectize(formElement) {
const kategoriSelect = formElement.querySelector('.tags-menu');
const kaloriSelect = formElement.querySelector('.kalori-menu');
const tanggalSelect = formElement.querySelector('.date-input');
if (kategoriSelect) {
$(kategoriSelect).selectize({
valueField: 'kategori_diet_id',
labelField: 'nama_kategori_diet',
searchField: ['nama_kategori_diet', 'kategori_diet_id'],
create: false,
placeholder: "Kualifikasi Menu...",
maxItems: null,
preload: true,
load: function (query, callback) {
$.ajax({
url: '/dashboard/option/klasifikasi-menu',
data: { search: query },
success: function (response) {
if (response.error === 0 && Array.isArray(response.data)) {
callback(response.data);
} else {
callback();
}
},
error: function () {
callback();
}
});
},
render: {
option: function (item, escape) {
return `<div class="p-1">
<div class="fw-semibold" style="font-size: 0.85rem;">${escape(item.nama_kategori_diet)}</div>
</div>`;
},
item: function (item, escape) {
return `<div>${escape(item.nama_kategori_diet)}</div>`;
}
}
});
}
if (kaloriSelect) {
$(kaloriSelect).selectize({
valueField: 'kalori_id',
labelField: 'nilai_kalori',
searchField: ['nilai_kalori', 'kalori_id'],
create: false,
placeholder: "Kualifikasi kalori...",
maxItems: 1,
preload: true,
load: function (query, callback) {
$.ajax({
url: '/dashboard/option/kalori',
data: { search: query },
success: function (response) {
if (response.error === 0 && Array.isArray(response.data)) {
callback(response.data);
} else {
callback();
}
},
error: function () {
callback();
}
});
},
render: {
option: function (item, escape) {
return `<div class="p-1">
<div class="fw-semibold" style="font-size: 0.85rem;">${escape(item.nilai_kalori)} kkal</div>
</div>`;
},
item: function (item, escape) {
return `<div>${escape(item.nilai_kalori)} kkal</div>`;
}
}
});
}
if (tanggalSelect) {
$(tanggalSelect).selectize({
valueField: 'tanggal',
labelField: 'tgl',
create: true,
placeholder: "Masukkan Tanggal...",
});
}
formElement.querySelectorAll('.auto-expand').forEach(textarea => {
textarea.addEventListener('input', function () {
this.style.height = 'auto';
this.style.height = this.scrollHeight + 'px';
});
});
formElement.querySelectorAll('.money').forEach(input => {
input.addEventListener('input', function () {
let angka = this.value.replace(/[^0-9]/g, '');
this.value = formatAngka(angka);
});
});
const radioSomeday = formElement.querySelector(`input[value="Sameday"]`);
const radioMenuNormal = formElement.querySelector(`input[value="Menu Normal"]`);
const tanggalWrapper = formElement.querySelector('.date-input')?.closest('.col-md-12');
function toggleTanggalField() {
if (radioMenuNormal && radioMenuNormal.checked) {
tanggalWrapper?.classList.remove('d-none');
} else {
tanggalWrapper?.classList.add('d-none');
}
}
if (radioSomeday && radioMenuNormal) {
radioSomeday.addEventListener('change', toggleTanggalField);
radioMenuNormal.addEventListener('change', toggleTanggalField);
toggleTanggalField(); // jalankan di awal
}
}
// Jalankan saat halaman dimuat untuk form pertama
document.addEventListener('DOMContentLoaded', function () {
const firstForm = document.querySelector('.form-set');
initSelectize(firstForm);
const money = document.querySelectorAll('.money')
money.forEach(input => {
input.addEventListener('input', function () {
// Simpan posisi kursor awal
let start = this.selectionStart;
console.log(start);
let end = this.selectionEnd;
// Ambil angka saja
let angka = this.value.replace(/[^0-9]/g, '');
let formatted = formatAngka(angka);
// Hitung perbedaan panjang string sebelum dan sesudah format
let selisih = formatted.length - this.value.length;
// Update value
this.value = formatted;
// Pulihkan posisi kursor (geser sesuai perubahan panjang)
this.setSelectionRange(start + selisih, end + selisih);
});
});
});
// Fungsi untuk menambah form baru
let countForm = 1; // karena form pertama pakai index 0
function addFormMenu() {
const container = document.getElementById('form-sets-container');
const original = container.querySelector('.form-set');
const html = original.outerHTML
.replace(/\[0\]/g, `[${countForm}]`)
.replace(/name="jenis_customer"/g, `name="jenis_customer_${countForm}"`)
.replace(/id="radio_karyawan"/g, `id="radio_karyawan_${countForm}"`)
.replace(/id="radio_kp"/g, `id="radio_kp_${countForm}"`)
.replace(/for="radio_karyawan"/g, `for="radio_karyawan_${countForm}"`)
.replace(/for="radio_kp"/g, `for="radio_kp_${countForm}"`);
const wrapper = document.createElement('div');
wrapper.innerHTML = html.trim();
const newForm = wrapper.firstChild;
// Kosongkan semua input
newForm.querySelectorAll('input, textarea').forEach(el => {
if (el.type === 'file') el.value = null;
else if (el.type === 'radio' || el.type === 'checkbox') el.checked = false;
else el.value = '';
});
// Hapus Selectize wrapper jika ada
newForm.querySelectorAll('select').forEach(select => {
const wrapper = select.nextElementSibling;
if (wrapper?.classList.contains('selectize-control')) wrapper.remove();
select.value = '';
if (select.multiple) {
// Untuk multiple select, pastikan semua opsi tidak terseleksi
Array.from(select.options).forEach(option => option.selected = false);
}
});
container.appendChild(newForm);
initSelectize(newForm);
countForm++;
}
// Hapus form-set (kecuali jika hanya 1)
document.addEventListener('click', function (e) {
if (e.target.closest('.btn-remove-form')) {
const targetForm = e.target.closest('.form-set');
const total = document.querySelectorAll('.form-set').length;
if (total > 1) {
targetForm.remove();
} else {
alert('Minimal satu form harus ada.');
}
}
});
function formatAngka(angka) {
return angka.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
}
document.getElementById('formMasterMenu').addEventListener('submit', function(e){
e.preventDefault();
const allFormSetsBeforSubmit = document.querySelectorAll('.form-set');
for (let i = 0; i < allFormSetsBeforSubmit.length; i++) {
const checkSiang = allFormSetsBeforSubmit[i].querySelector(`input[name="data[${i}][apakah_menu_siang]"]`);
const checkSore = allFormSetsBeforSubmit[i].querySelector(`input[name="data[${i}][apakah_menu_sore]"]`);
if (!checkSiang?.checked && !checkSore?.checked) {
e.preventDefault();
alert(`Form ke-${i + 1}: Pilih minimal Siang atau Sore`);
return;
}
}
const form = this;
const actionUrl = form.getAttribute('action');
const formData = new FormData(form);
fetch(actionUrl, {
method: 'POST',
headers: {
'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
},
body: formData
}).then(async (res) => {
const data = await res.json();
if (data.status) {
const handler = function () {
Swal.fire({
icon: 'success',
title: 'Berhasil',
text: data.message,
timer: 2000,
showConfirmButton: false,
backdrop: true,
});
datatableMasterMenu.bootstrapTable('refresh');
modalAddMenu.removeEventListener('hidden.bs.modal', handler); // ✅ pakai DOM
};
modalAddMenu.addEventListener('hidden.bs.modal', handler); // ✅ pakai DOM
bootstrap.Modal.getInstance(modalAddMenu).hide(); // ✅ pakai instance
const allFormSets = document.querySelectorAll('.form-set');
for(let i = 1; i < allFormSets.length; i++){
allFormSets[i].remove();
}
document.querySelectorAll('.form-set').forEach((formSet, index) => {
formSet.querySelectorAll('input, textarea, select').forEach(el => {
if (el.type === 'file') {
el.value = null;
} else if (el.type === 'checkbox' || el.type === 'radio') {
el.checked = false;
} else {
el.value = '';
}
// Reset Selectize jika ada
if (el.classList.contains('selectized')) {
const selectize = el.selectize;
if (selectize) {
selectize.clear();
}
}
});
});
} else {
throw new Error(data.message || 'Terjadi kesalahan saat mengubah status.');
}
}).catch(err => {
console.error(err);
Swal.fire({
icon: 'error',
title: 'Gagal',
text: err.message || 'Terjadi kesalahan pada server.',
});
});
})
function deleteMasterMenu(e){
let id = $(e).data('master_menu_id')
Swal.fire({
title: "Apakah kamu yakin ingin menghapus data ini?",
text : $(e).data('nama'),
icon: "warning",
showCancelButton: true,
backdrop: true,
}).then((result) => {
if(result.isConfirmed){
fetch(`/dashboard/menu/${id}`, {
method:'DELETE',
headers: {
"X-CSRF-TOKEN": document.querySelector('input[name="_token"]').value,
"Content-Type": "application/json"
}
}).then((response) => {
if(!response.ok){
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
if(data.status){
Swal.fire({
title: "Success",
text: "Data berhasil dihapus",
icon:"success",
showConfirmButton: false,
timer: 1000
}).then(() => {
datatableMasterMenu.bootstrapTable("refresh")
})
}else{
Swal.fire({
title: "Error!",
text: data.message || "Failed to delete Item.",
icon: "error"
});
}
})
.catch(error => {
Swal.fire({
title: "Error!",
text: "Something went wrong. Please try again later.",
icon: "error"
});
});
}
})
}
let tanggalSelectizeInstance = null;
let klasifikasiMenuSelectizeInstance = null;
let kaloriSelectizeInstance = null;
function editMasterMenu(e) {
const el = $(e);
const modal = new bootstrap.Modal(modalEditMenu);
formEditMenu.setAttribute('action', `/dashboard/menu/${el.data('master_menu_id')}`)
modal.show();
// Ambil data
let dataOld = {
master_menu_id: el.data('master_menu_id'),
nama_menu: el.data('nama'),
harga_public: el.data('harga_public'),
harga_karyawan: el.data('harga_karyawan'),
jenis_menu: el.data('jenis_menu'),
apakah_someday: el.data('apakah_someday') == 1,
apakah_menu_siang: el.data('apakah_menu_siang') == 1,
apakah_menu_sore: el.data('apakah_menu_sore') == 1,
deskripsi: el.data('deskripsi') || '',
tgl: JSON.parse(decodeURIComponent(el.data('tgl') || '[]')),
kalori: JSON.parse(decodeURIComponent(el.data('kalori') || '[]')),
kategori_diet: JSON.parse(decodeURIComponent(el.data('kategori_diet') || '[]')),
};
if(el.data('foto')){
document.getElementById('gambar_old').classList.remove('d-none')
document.getElementById('gambar_old').setAttribute('href', `/gambar/${el.data('foto')}`)
}
// Set value ke input form
$("#nama_edit").val(dataOld.nama_menu);
$("#harga_public_edit").val(dataOld.harga_public);
$("#harga_karyawan_edit").val(dataOld.harga_karyawan);
$("#jenis_makanan_edit").val(dataOld.jenis_menu);
$("#deskripsi_edit").val(dataOld.deskripsi);
$(`input[name="kategori_menu"][value="${dataOld.apakah_someday ? 'Sameday' : 'Menu Normal'}"]`).prop('checked', true);
$(`input[name="apakah_menu_siang"][value="${dataOld.apakah_menu_siang ? 'iya' : ''}"]`).prop('checked', true);
$(`input[name="apakah_menu_sore"][value="${dataOld.apakah_menu_sore ? 'iya' : ''}"]`).prop('checked', true);
const tanggalWrapper = document.querySelector('.tgl-part');
const tanggalField = document.getElementById('tanggal_edit');
if(tanggalSelectizeInstance){
tanggalSelectizeInstance.destroy();
tanggalSelectizeInstance = null
}
if (!dataOld.apakah_someday) {
tanggalWrapper.classList.remove('d-none');
tanggalField.style.display = 'block';
tanggalSelectizeInstance =$('#tanggal_edit').selectize({
valueField: 'tanggal',
labelField: 'tgl',
create: true,
placeholder: 'Masukkan Tanggal...',
onInitialize: function () {
const s = this;
dataOld.tgl.forEach(item => {
const tglValue = item?.tgl_harian || item?.tanggal || item;
s.addOption({ tanggal: tglValue, tgl: tglValue });
s.addItem(tglValue);
});
}
})[0].selectize;
} else {
tanggalWrapper.classList.add('d-none');
tanggalField.style.display = 'none';
}
$('input[name="kategori_menu"]').on('change', function(){
const selected = $(this).val();
const isSomeday = selected === 'Sameday';
if(isSomeday){
tanggalWrapper.classList.add('d-none');
if (tanggalSelectizeInstance) {
tanggalSelectizeInstance.destroy();
tanggalSelectizeInstance = null;
}
}else{
tanggalWrapper.classList.remove('d-none');
tanggalSelectizeInstance =$('#tanggal_edit').selectize({
valueField: 'tanggal',
labelField: 'tgl',
create: true,
placeholder: 'Masukkan Tanggal...'
})[0].selectize;
}
})
if (klasifikasiMenuSelectizeInstance) {
klasifikasiMenuSelectizeInstance.destroy();
klasifikasiMenuSelectizeInstance = null;
}
klasifikasiMenuSelectizeInstance = $('#kategori_diet_id_edit').selectize({
valueField: 'kategori_diet_id',
labelField: 'nama_kategori_diet',
searchField: ['nama_kategori_diet'],
create: false,
placeholder: "Klasifikasi Diet...",
maxItems: null,
preload: true,
load: function (query, callback) {
$.ajax({
url: '/dashboard/option/klasifikasi-menu',
data: { search: query },
success: function (response) {
if (response.error === 0 && Array.isArray(response.data)) {
callback(response.data);
} else {
callback();
}
},
error: function () {
callback();
}
});
},
onInitialize: function () {
const s = this;
dataOld.kategori_diet.forEach(item => {
// Manual tambahkan ke Selectize
s.addOption(item); // agar bisa dipilih
s.addItem(item.kategori_diet_id); // agar muncul sebagai selected
});
},
render: {
option: function (item, escape) {
return `<div class="p-1">
<div class="fw-semibold" style="font-size: 0.85rem;">${escape(item.nama_kategori_diet)}</div>
</div>`;
},
item: function (item, escape) {
return `<div>${escape(item.nama_kategori_diet)}</div>`;
}
}
})[0].selectize;
if (kaloriSelectizeInstance) {
kaloriSelectizeInstance.destroy();
kaloriSelectizeInstance = null;
}
kaloriSelectizeInstance = $('#kalori_id_edit').selectize({
valueField: 'kalori_id',
labelField: 'nilai_kalori',
searchField: ['nilai_kalori'],
create: false,
placeholder: "Kalori...",
maxItems: 1,
preload: true,
load: function (query, callback) {
$.ajax({
url: '/dashboard/option/kalori',
data: { search: query },
success: function (response) {
if (response.error === 0 && Array.isArray(response.data)) {
callback(response.data);
} else {
callback();
}
},
error: function () {
callback();
}
});
},
onInitialize: function () {
const s = this;
dataOld?.kalori.forEach(item => {
// Manual tambahkan ke Selectize
s.addOption(item); // agar bisa dipilih
s.addItem(item.kalori_id); // agar muncul sebagai selected
});
},
render: {
option: function (item, escape) {
return `<div class="p-1">
<div class="fw-semibold" style="font-size: 0.85rem;">${escape(item.nilai_kalori)}</div>
</div>`;
},
item: function (item, escape) {
return `<div>${escape(item.nilai_kalori)}</div>`;
}
}
})[0].selectize;
}
document.getElementById('formMasterMenuEdit').addEventListener('submit', function(e){
e.preventDefault();
const form = this;
const actionUrl = form.getAttribute('action');
const formData = new FormData(form);
fetch(actionUrl, {
method: 'POST',
headers: {
'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
},
body: formData
}).then(async (res) => {
const data = await res.json();
if (data.status) {
const handler = function () {
Swal.fire({
icon: 'success',
title: 'Berhasil',
text: data.message,
timer: 2000,
showConfirmButton: false,
backdrop: true,
});
datatableMasterMenu.bootstrapTable('refresh');
modalEditMenu.removeEventListener('hidden.bs.modal', handler); // ✅ pakai DOM
};
modalEditMenu.addEventListener('hidden.bs.modal', handler); // ✅ pakai DOM
bootstrap.Modal.getInstance(modalEditMenu).hide(); // ✅ pakai instance
} else {
throw new Error(data.message || 'Terjadi kesalahan saat mengubah status.');
}
}).catch(err => {
console.error(err);
Swal.fire({
icon: 'error',
title: 'Gagal',
text: err.message || 'Terjadi kesalahan pada server.',
});
});
})
function detailMasterMenu(e){
const el = $(e);
const modal = new bootstrap.Modal(modalDetailMenu);
modal.show()
const someday = el.data('apakah_someday');
const siang = el.data('apakah_menu_siang');
const sore = el.data('apakah_menu_sore');
const kalori = JSON.parse(decodeURIComponent(el.data('kalori')))
const kaloriMenu = kalori.map(kal => `
<span class="badge bg-secondary me-1 mb-1">${kal.nilai_kalori} (kkal)</span>
`).join('');
const tags = JSON.parse(decodeURIComponent(el.data('klasifikasi_menu')));
const klasifikasiMenu = tags.map(tag => `
<span class="badge bg-secondary me-1 mb-1">${tag.nama_kategori_diet}</span>
`).join('');
const tgl = JSON.parse(decodeURIComponent(el.data('tgl') || '[]'))
const tglMenuTersedia = `
<div class="mb-1 small text-muted">
<i class="fa fa-calendar-check me-1"></i>
${someday ? 'Tersedia setiap hari (Senin - Minggu)' :
tgl.length ? `Tersedia pada tanggal: ${tgl.map(d => d.tgl_harian).join(', ')}` :
'Tidak ada info tanggal tersedia'}
</div>
<div class="mb-1 small text-muted">
<i class="fa fa-utensils me-1"></i> Menu: <strong>${someday ? 'Sameday' : 'Menu Normal'}</strong>
</div>
<div class="mb-1 small text-muted">
${
siang && sore
? '<i class="fa fa-clock me-1 text-success"></i> Tersedia untuk makan siang dan sore'
: siang
? '<i class="fa fa-sun me-1 text-warning"></i> Tersedia untuk makan siang'
: sore
? '<i class="fa fa-moon me-1 text-info"></i> Tersedia untuk makan sore'
: '<i class="fa fa-ban me-1 text-danger"></i> Tidak tersedia untuk waktu makan apapun'
}
</div>
`;
$('#cathering_order_photo').attr('src', `/gambar/${el.data('foto') || 'default.jpg'}`);
$('#cathering_order_name').text(el.data('nama'));
$('#cathering_order_deskripsi').text(el.data('deskripsi') || '');
$('#cathering_order_price_karyawan').text("Rp " + parseInt(el.data('harga_karyawan') || 0).toLocaleString('id-ID'));
$('#cathering_order_price_public').text("Rp " + parseInt(el.data('harga_public') || 0).toLocaleString('id-ID'));
$('#tag_klasifikasi_menu').html(`
<div class="mb-2">
<p class="mb-1 fw-semibold">Klasifikasi Menu:</p>
${klasifikasiMenu || '<span class="text-muted">Tidak ada klasifikasi</span>'}
</div>
`);
$('#kalori_menu').html(`
<div class="mb-2">
<p class="mb-1 fw-semibold">Kalori:</p>
${kaloriMenu || '<span class="text-muted">-</span>'}
</div>
`);
$('#tgl_menu_tersedia').html(tglMenuTersedia);
$('#apakah_someday').val(someday ? 1 : 0);
$('#apakah_menu_siang').val(siang ? 1 : 0);
$('#apakah_menu_sore').val(sore ? 1 : 0);
$('#tgl_tersedia').val(el.data('tgl_tersedia'));
}