581 lines
19 KiB
JavaScript
581 lines
19 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) {
|
|
if (!query.length) return 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: null,
|
|
preload: true,
|
|
load: function (query, callback) {
|
|
if (!query.length) return 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)}</div>
|
|
</div>`;
|
|
},
|
|
item: function (item, escape) {
|
|
return `<div>${escape(item.nilai_kalori)}</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="Someday"]`);
|
|
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(){
|
|
let angka = this.value.replace(/[^0-9]/g, '');
|
|
this.value = formatAngka(angka)
|
|
})
|
|
})
|
|
|
|
|
|
});
|
|
|
|
// 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') || '[]')),
|
|
};
|
|
console.log(dataOld);
|
|
|
|
|
|
// 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 ? 'Someday' : '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 === 'Someday';
|
|
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) {
|
|
if (!query.length) return 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: null,
|
|
preload: true,
|
|
load: function (query, callback) {
|
|
if (!query.length) return 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.',
|
|
});
|
|
});
|
|
})
|