2025-09-09 14:42:27 +07:00

131 lines
4.0 KiB
JavaScript

$(document).ready(function() {
selectOptionPegawai(0)
selectOptionUnit(0)
});
function selectOptionPegawai(colCount) {
let selectPegawai = $(`#pegawai_id_${colCount}`);
// inisialisasi select2 untuk Unit Kerja
selectPegawai.select2({
placeholder: '-- Pilih Pegawai --',
allowClear:true,
width: '100%',
dropdownParent: selectPegawai.parent(),
ajax:{
url : '/select-pegawai',
dataType: 'json',
delay: 250,
data: function(params){
return { q: params.term }
},
processResults: function(data){
return {
results : data?.data.map(item => ({
id: item.id,
text: item.nama,
}))
}
},
cache: true,
},
minimumInputLength: 1,
});
}
function selectOptionUnit(colCount) {
let selectUnit = $(`#unit_akses_${colCount}`);
// inisialisasi select2 untuk Unit Kerja
selectUnit.select2({
placeholder: '-- Pilih Unit --',
allowClear:true,
width: '100%',
dropdownParent: selectUnit.parent(),
ajax:{
url : '/select-unit-kerja-option',
dataType: 'json',
delay: 250,
data: function(params){
return { q: params.term }
},
processResults: function(data){
return {
results : data?.data.map(item => ({
id: item.id,
text: item.name,
}))
}
},
cache: true,
},
minimumInputLength: 1,
});
}
function selectAkses(colCount){
let aksesId = $(`#akses_id_${colCount}`);
let colUnit = $(`#col_select_unit_${colCount}`)
if(aksesId.val() === "all"){
colUnit.addClass('d-none')
}else{
colUnit.removeClass('d-none')
}
}
document.addEventListener('change', function(e){
e.preventDefault()
if(e.target && e.target.id.startsWith("akses_id")){
let colCount = e.target.id.split("_")[2];
selectAkses(colCount)
}
})
let colCount = 1;
function addForm(){
let col = $("#col_add_akses")
let html = '';
html += `
<div class="row mt-3" id="col-${colCount}">
<hr/>
<div class="col-md-6 mb-2">
<label>Nama</label>
<select class="form-control" name="data[${colCount}][pegawai_id]" id="pegawai_id_${colCount}" required>
</select>
</div>
<div class="col-md-6 mb-2">
<label>Akses</label>
<select class="form-control" name="data[${colCount}][akses]" id="akses_id_${colCount}" required>
<option value="" disable>Select Choose</option>
<option value="all">Semua Akses</option>
<option value="unit">By Unit Akses</option>
</select>
</div>
<div class="col-md-10 mb-2 d-none" id="col_select_unit_${colCount}">
<label>Pilih Unit</label>
<select class="form-control" name="data[${colCount}][unit_akses]" id="unit_akses_${colCount}">
<option value="" disable>Select Choose</option>
</select>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-danger mt-3 me-2" onclick="removeCol(${colCount})"><i class="fa-solid fa-trash"></i></button>
</div>
</div>
`
col.append(html)
selectOptionPegawai(colCount)
selectOptionUnit(colCount)
colCount++;
}
function removeCol(count){
$(`#col-${count}`).remove()
}