142 lines
5.2 KiB
JavaScript
142 lines
5.2 KiB
JavaScript
$(document).ready(function() {
|
|
selectOptionPegawai(0)
|
|
selectOptionUnitKerja(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 selectOptionUnitKerja(colCount) {
|
|
let selectUnit = $(`#unit_akses_${colCount}`);
|
|
selectUnit.select2({
|
|
placeholder: '-- Pilih Unit Kerja --',
|
|
allowClear: true,
|
|
width: '100%',
|
|
dropdownParent: selectUnit.parent(),
|
|
ajax:{
|
|
url : '/select-unit-kerja',
|
|
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 toggleUnitAkses(colCount) {
|
|
const wrapper = $(`#unit_akses_wrapper_${colCount}`);
|
|
const unitSelect = $(`#unit_akses_${colCount}`);
|
|
const isUnit = $(`#akses_unit_${colCount}`).is(':checked');
|
|
if (isUnit) {
|
|
wrapper.removeClass('d-none');
|
|
} else {
|
|
wrapper.addClass('d-none');
|
|
unitSelect.val(null).trigger('change');
|
|
}
|
|
}
|
|
|
|
|
|
|
|
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-4 mb-2">
|
|
<label>Nama</label>
|
|
<select class="form-control" name="data[${colCount}][pegawai_id]" id="pegawai_id_${colCount}" required>
|
|
</select>
|
|
</div>
|
|
<div class="col-12 col-md-2">
|
|
<label class="form-label mb-1 d-block">Akses</label>
|
|
<div class="d-flex flex-wrap gap-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio"
|
|
name="data[${colCount}][akses]" id="akses_all_${colCount}" value="all" checked
|
|
onchange="toggleUnitAkses(${colCount})">
|
|
<label class="form-check-label" for="akses_all_${colCount}">
|
|
Semua Akses
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio"
|
|
name="data[${colCount}][akses]" id="akses_unit_${colCount}" value="unit"
|
|
onchange="toggleUnitAkses(${colCount})">
|
|
<label class="form-check-label" for="akses_unit_${colCount}">
|
|
By Unit Akses
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox"
|
|
name="data[${colCount}][master_akses]" id="akses_unit_${colCount}" value="yes">
|
|
<label class="form-check-label">
|
|
Akses Master
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-2 d-none" id="unit_akses_wrapper_${colCount}">
|
|
<label>Unit Kerja</label>
|
|
<select class="form-control" name="data[${colCount}][unit_akses][]" id="unit_akses_${colCount}" multiple>
|
|
</select>
|
|
<small class="text-muted">Bisa pilih lebih dari satu.</small>
|
|
</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)
|
|
selectOptionUnitKerja(colCount)
|
|
colCount++;
|
|
|
|
}
|
|
|
|
|
|
function removeCol(count){
|
|
$(`#col-${count}`).remove()
|
|
}
|