401 lines
15 KiB
JavaScript
401 lines
15 KiB
JavaScript
let colCount = 1;
|
|
$(document).ready(function() {
|
|
$('.unit_kerja').select2({
|
|
placeholder: '--- Pilih Unit Kerja ---',
|
|
allowClear: true,
|
|
width: '100%',
|
|
ajax: {
|
|
url : '/select-unit-kerja',
|
|
dataType: 'json',
|
|
delay: 250,
|
|
data: function(params){
|
|
let q = '';
|
|
if(allAkses){
|
|
q = params.term;
|
|
}else{
|
|
q = authUnitKerja?.name ?? '';
|
|
}
|
|
|
|
return { q };
|
|
},
|
|
processResults: function(data){
|
|
let results = data?.data.map(item => ({
|
|
id: item.id,
|
|
text: item.name
|
|
}));
|
|
return { results };
|
|
},
|
|
cache: true,
|
|
},
|
|
minimumInputLength: 0,
|
|
});
|
|
|
|
$('.sub_unit_kerja').select2({
|
|
placeholder: '-- Pilih Sub Unit Kerja --',
|
|
allowClear: true,
|
|
width: '100%',
|
|
});
|
|
|
|
// --- isi default unit kerja ---
|
|
// if(authUnitKerja){
|
|
// let option = new Option(authUnitKerja.name, authUnitKerja.id, true, true);
|
|
// $('.unit_kerja').append(option).trigger('change');
|
|
// }
|
|
|
|
let initialUnit = $('.unit_kerja').val();
|
|
if(initialUnit){
|
|
loadSubUnitKerja(initialUnit);
|
|
}
|
|
|
|
let prefillSubIds = [];
|
|
let prefillSubMeta = {};
|
|
|
|
// jalankan setiap kali unit_kerja berubah
|
|
$('.unit_kerja').on('change', function(){
|
|
let idUnit = $(this).val();
|
|
if(idUnit){
|
|
loadSubUnitKerja(idUnit, prefillSubIds, prefillSubMeta);
|
|
prefillSubIds = [];
|
|
prefillSubMeta = {};
|
|
}
|
|
});
|
|
|
|
$('.kategori_dok').select2();
|
|
|
|
if(allAkses){
|
|
selectOptionUnitKerjaV1(0);
|
|
}else{
|
|
selectOptionUnitKerjaV2(0);
|
|
}
|
|
|
|
if (window.__folderPrefillApplied) return;
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const prefill = window.__prefillFromSession || null;
|
|
|
|
const unitId = prefill?.unitId || urlParams.get('unitKerja');
|
|
const subParam = prefill?.subId || urlParams.get('subUnit');
|
|
const katParam = prefill?.kategoriId || urlParams.get('kategori');
|
|
const unitName = prefill?.unitName || urlParams.get('unitName');
|
|
const subName = prefill?.subName || urlParams.get('subName');
|
|
const kategoriName = prefill?.kategoriName || urlParams.get('kategoriName');
|
|
|
|
let prefillSubIdsFinal = [];
|
|
let prefillKatIdsFinal = [];
|
|
|
|
if (unitId) {
|
|
window.__folderPrefillApplied = true;
|
|
window.__prefillFromSession = null;
|
|
$('.unit_kerja').val(null).trigger('change');
|
|
$('.sub_unit_kerja').val(null).trigger('change');
|
|
$('.kategori_dok').val(null).trigger('change');
|
|
|
|
const unitLabel = unitName || unitId;
|
|
const unitOption = new Option(unitLabel, unitId, true, true);
|
|
const selectedSubIds = subParam ? Array.from(new Set(subParam.split(',').filter(Boolean))) : [];
|
|
const subNames = subName ? subName.split(',').map(s => s.trim()).filter(Boolean) : [];
|
|
|
|
prefillSubIds = selectedSubIds;
|
|
prefillSubMeta = selectedSubIds.reduce((acc, id, idx) => {
|
|
let label = subNames[idx] || subNames[0] || id;
|
|
label = label.replace(/^\d+\s*\/\s*/, '');
|
|
acc[id] = label;
|
|
return acc;
|
|
}, {});
|
|
$('.unit_kerja').append(unitOption).trigger('change');
|
|
|
|
if (selectedSubIds.length) {
|
|
$('.sub_unit_kerja').val(selectedSubIds).trigger('change');
|
|
}
|
|
|
|
prefillSubIdsFinal = selectedSubIds;
|
|
}
|
|
|
|
if (katParam) {
|
|
const katIds = Array.from(new Set(katParam.split(',').filter(Boolean)));
|
|
if (katIds.length) {
|
|
$('.kategori_dok').val(katIds).trigger('change');
|
|
prefillKatIdsFinal = katIds;
|
|
} else if (kategoriName) {
|
|
const katOption = new Option(kategoriName, katParam, true, true);
|
|
$('.kategori_dok').append(katOption).trigger('change');
|
|
prefillKatIdsFinal = katParam ? [katParam] : [];
|
|
}
|
|
}
|
|
|
|
if ((unitId || subParam || katParam) && typeof index === 'function') {
|
|
index(prefillKatIdsFinal, unitId, prefillSubIdsFinal, '');
|
|
}
|
|
});
|
|
|
|
function loadSubUnitKerja(unitId, selectedSubIds = [], selectedSubMeta = {}){
|
|
$('.sub_unit_kerja').empty().append('<option value="" disabled>-- Pilih Sub Unit Kerja --</option>');
|
|
|
|
$.ajax({
|
|
url: `/select-sub-unit-kerja/${unitId}`,
|
|
method: 'GET',
|
|
success: function(response) {
|
|
if (response?.data) {
|
|
response.data.forEach(unit => {
|
|
let selected = false;
|
|
if (selectedSubIds.length) {
|
|
selected = selectedSubIds.includes(String(unit.id));
|
|
} else if (authSubUnitKerja) {
|
|
selected = unit.id === authSubUnitKerja.objectsubunitkerjapegawaifk;
|
|
}
|
|
const option = new Option(unit.name, unit.id, false, selected);
|
|
$('.sub_unit_kerja').append(option);
|
|
});
|
|
if (selectedSubIds.length) {
|
|
selectedSubIds.forEach(id => {
|
|
if ($(`.sub_unit_kerja option[value="${id}"]`).length === 0) {
|
|
const label = selectedSubMeta[id] || id;
|
|
const opt = new Option(label, id, false, true);
|
|
$('.sub_unit_kerja').append(opt);
|
|
}
|
|
});
|
|
}
|
|
$('.sub_unit_kerja').trigger('change');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
function addForm(){
|
|
let col = $("#col_add_file")
|
|
|
|
let html = '';
|
|
|
|
html += `
|
|
<div class="row g-3 align-items-start mt-2" id="col-${colCount}">
|
|
<hr class="my-2" />
|
|
<div class="col-12 d-flex justify-content-end">
|
|
<button type="button"
|
|
class="btn btn-sm btn-danger"
|
|
onclick="removeCol(${colCount})">
|
|
<i class="fa-solid fa-trash"></i> Hapus
|
|
</button>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-semibold">Unit <span class="text-danger">*</span></label>
|
|
<select class="form-control"
|
|
name="data[${colCount}][id_unit_kerja]"
|
|
id="select_id_unit_kerja_${colCount}"
|
|
required>
|
|
<option value="" disable>Select Choose</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-semibold">Sub Unit <span class="text-danger">*</span></label>
|
|
<select class="form-control"
|
|
name="data[${colCount}][id_sub_unit_kerja]"
|
|
id="select_id_sub_unit_kerja_${colCount}"
|
|
required>
|
|
<option value="" disable>Select Choose</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-semibold">Kategori Dokumen</label>
|
|
<select class="form-control"
|
|
name="data[${colCount}][master_kategori_directory_id]"
|
|
id="select_kategori_${colCount}"
|
|
required>
|
|
<option value="" disable>Select Choose</option>
|
|
${katDok.map(dok => `
|
|
<option value="${dok?.master_kategori_directory_id}/${dok?.nama_kategori_directory}">${dok?.nama_kategori_directory}</option>
|
|
`).join('')}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-semibold">Nomor Dokumen</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text">#</span>
|
|
<input type="text"
|
|
class="form-control"
|
|
name="data[${colCount}][no_dokumen]"
|
|
placeholder="Contoh: 001/RS/IT/I/2026">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<label class="form-label fw-semibold">Tanggal Terbit</label>
|
|
<input class="form-control"
|
|
type="date"
|
|
name="data[${colCount}][date_active]"
|
|
required>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<label class="form-label fw-semibold">Boleh dilihat unit lain? <span class="text-danger">*</span></label>
|
|
|
|
<div class="border rounded-3 p-2 bg-light">
|
|
<div class="form-check">
|
|
<input class="form-check-input"
|
|
type="radio"
|
|
name="data[${colCount}][is_permission]"
|
|
id="perm_yes_${colCount}"
|
|
value="1"
|
|
required>
|
|
<label class="form-check-label" for="perm_yes_${colCount}">Ya</label>
|
|
</div>
|
|
|
|
<div class="form-check mt-1">
|
|
<input class="form-check-input"
|
|
type="radio"
|
|
name="data[${colCount}][is_permission]"
|
|
id="perm_no_${colCount}"
|
|
value="2"
|
|
required>
|
|
<label class="form-check-label" for="perm_no_${colCount}">Tidak</label>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<label for="fileUpload_${colCount}" class="form-label fw-semibold">📂 Upload Dokumen (PDF)</label>
|
|
|
|
<div class="border rounded-3 p-3 bg-white shadow-sm">
|
|
<input class="form-control file-input"
|
|
type="file"
|
|
id="fileUpload_${colCount}"
|
|
accept=".pdf"
|
|
name="data[${colCount}][file]">
|
|
<div class="mt-2 text-success fw-semibold d-none file-name" id="fileName_${colCount}"></div>
|
|
</div>
|
|
|
|
<div class="form-text text-muted">
|
|
Format yang didukung: <b>PDF</b> Maksimal <b>10mb</b>.
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
`
|
|
col.append(html)
|
|
let newInput = document.querySelector(`#fileUpload_${colCount}`);
|
|
bindFileUpload(newInput);
|
|
if(allAkses){
|
|
selectOptionUnitKerjaV1(colCount)
|
|
}else{
|
|
selectOptionUnitKerjaV2(colCount)
|
|
}
|
|
colCount++;
|
|
|
|
}
|
|
|
|
|
|
function removeCol(count){
|
|
$(`#col-${count}`).remove()
|
|
}
|
|
|
|
|
|
function selectOptionUnitKerjaV1(colCount) {
|
|
let selectUnit = $(`#select_id_unit_kerja_${colCount}`);
|
|
let selectSubUnit = $(`#select_id_sub_unit_kerja_${colCount}`);
|
|
|
|
// inisialisasi select2 untuk Unit Kerja
|
|
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+'/'+item.name,
|
|
text: item.name,
|
|
sub_units: item.sub_unit_kerja // kirim ke front
|
|
}))
|
|
}
|
|
},
|
|
cache: true,
|
|
},
|
|
minimumInputLength: 1,
|
|
});
|
|
|
|
selectSubUnit.select2({
|
|
placeholder: '-- Pilih Sub Unit Kerja --',
|
|
allowClear: true,
|
|
width: '100%',
|
|
dropdownParent: selectSubUnit.parent()
|
|
});
|
|
|
|
// event ketika unit kerja dipilih
|
|
selectUnit.on('select2:select', function (e) {
|
|
let data = e.params.data; // data unit kerja terpilih
|
|
selectSubUnit.empty().append('<option value="" disabled selected>-- Pilih Sub Unit Kerja --</option>');
|
|
|
|
if (data.sub_units && data.sub_units.length > 0) {
|
|
data.sub_units.forEach(sub => {
|
|
selectSubUnit.append(`<option value="${sub.id}/${sub.name}">${sub.name}</option>`);
|
|
});
|
|
}
|
|
|
|
// aktifkan select2 untuk sub unit
|
|
|
|
});
|
|
}
|
|
|
|
|
|
function selectOptionUnitKerjaV2(colCount) {
|
|
let selectUnit = $(`#select_id_unit_kerja_${colCount}`);
|
|
let selectSubUnit = $(`#select_id_sub_unit_kerja_${colCount}`);
|
|
|
|
// Kosongkan dulu
|
|
selectUnit.empty().append('<option value="" disabled selected>-- Pilih Unit Kerja --</option>');
|
|
selectSubUnit.empty().append('<option value="" disabled selected>-- Pilih Sub Unit Kerja --</option>');
|
|
|
|
// Load semua unit kerja tanpa ajax
|
|
$.ajax({
|
|
url: '/select-unit-kerja', // endpoint tetap sama
|
|
method: 'GET',
|
|
success: function(response) {
|
|
if (response?.data) {
|
|
response.data.forEach(unit => {
|
|
const option = new Option(unit.name, unit.id +'/'+unit.name, false, false);
|
|
$(option).data('sub_units', unit.sub_unit_kerja); // simpan sub unit di data attribute
|
|
selectUnit.append(option);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
// Inisialisasi select2 tanpa ajax
|
|
selectUnit.select2({
|
|
placeholder: '-- Pilih Unit Kerja --',
|
|
allowClear: true,
|
|
width: '100%',
|
|
dropdownParent: selectUnit.parent()
|
|
});
|
|
|
|
selectSubUnit.select2({
|
|
placeholder: '-- Pilih Sub Unit Kerja --',
|
|
allowClear: true,
|
|
width: '100%',
|
|
dropdownParent: selectSubUnit.parent()
|
|
});
|
|
|
|
// Event ketika unit kerja dipilih
|
|
selectUnit.on('change', function () {
|
|
const selectedOption = $(this).find(':selected');
|
|
const subUnits = selectedOption.data('sub_units') || [];
|
|
|
|
selectSubUnit.empty().append('<option value="" disabled selected>-- Pilih Sub Unit Kerja --</option>');
|
|
|
|
if (subUnits.length > 0) {
|
|
subUnits.forEach(sub => {
|
|
selectSubUnit.append(`<option value="${sub.id}/${sub.name}">${sub.name}</option>`);
|
|
});
|
|
}
|
|
});
|
|
}
|