128 lines
3.6 KiB
JavaScript
128 lines
3.6 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const formSetsContainer = document.getElementById('form-sets-container');
|
|
const btnTambahForm = document.getElementById('btnTambahForm');
|
|
|
|
// Auto-expand textarea
|
|
function autoExpand(textarea) {
|
|
textarea.addEventListener('input', function () {
|
|
this.style.height = 'auto';
|
|
this.style.height = this.scrollHeight + 'px';
|
|
});
|
|
}
|
|
|
|
// Inisialisasi Selectize
|
|
function initSelectizeAll(context = document) {
|
|
$(context).find('.tags-menu').selectize(selectizeConfigTagsMenu);
|
|
$(context).find('.date-input').selectize(selectizeConfigDateInput);
|
|
}
|
|
|
|
// Destroy semua selectize sebelum clone
|
|
function destroySelectize(context) {
|
|
context.querySelectorAll('select').forEach(select => {
|
|
const instance = select.selectize;
|
|
if (instance) instance.destroy();
|
|
});
|
|
}
|
|
|
|
// Inisialisasi awal
|
|
document.querySelectorAll('.auto-expand').forEach(autoExpand);
|
|
initSelectizeAll();
|
|
|
|
// Tambah form-set
|
|
btnTambahForm.addEventListener('click', function () {
|
|
const lastFormSet = formSetsContainer.querySelector('.form-set:last-of-type');
|
|
|
|
// Destroy selectize sebelum clone
|
|
destroySelectize(lastFormSet);
|
|
|
|
const clone = lastFormSet.cloneNode(true);
|
|
|
|
// Bersihkan input dan textarea
|
|
clone.querySelectorAll('input, textarea').forEach(el => {
|
|
if (el.type === 'file') {
|
|
el.value = null;
|
|
} else {
|
|
el.value = '';
|
|
}
|
|
});
|
|
|
|
// Bersihkan select (hapus .selectize dan reset element <select>)
|
|
clone.querySelectorAll('select').forEach(select => {
|
|
const wrapper = select.parentElement.querySelector('.selectize-control');
|
|
if (wrapper) wrapper.remove();
|
|
select.innerHTML = ''; // Kosongkan option, bisa diisi ulang lewat AJAX
|
|
});
|
|
|
|
// Tampilkan tombol hapus
|
|
clone.querySelector('.btn-remove-form').classList.remove('d-none');
|
|
|
|
// Tambahkan ke DOM
|
|
formSetsContainer.appendChild(clone);
|
|
|
|
// Inisialisasi ulang textarea & Selectize untuk elemen baru
|
|
clone.querySelectorAll('.auto-expand').forEach(autoExpand);
|
|
initSelectizeAll();
|
|
});
|
|
|
|
// Hapus form-set
|
|
formSetsContainer.addEventListener('click', function (e) {
|
|
if (e.target.closest('.btn-remove-form')) {
|
|
const formSets = formSetsContainer.querySelectorAll('.form-set');
|
|
if (formSets.length > 1) {
|
|
e.target.closest('.form-set').remove();
|
|
} else {
|
|
alert('Minimal satu form harus ada.');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// CONFIG SELECTIZE
|
|
|
|
const selectizeConfigTagsMenu = {
|
|
valueField: 'kategori_diet_id',
|
|
labelField: 'nama_kategori_diet',
|
|
searchField: ['nama_kategori_diet', 'kategori_diet_id'],
|
|
create: false,
|
|
placeholder: "Cari item kalibrasi...",
|
|
maxItems: null,
|
|
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>`;
|
|
}
|
|
}
|
|
};
|
|
|
|
const selectizeConfigDateInput = {
|
|
valueField: 'tgl',
|
|
labelField: 'tgl',
|
|
searchField: 'tgl',
|
|
create: true,
|
|
placeholder: "Masukkan Tanggal...",
|
|
};
|