feat: add condition - requirement field

main-dlh
shola 2025-12-08 10:52:31 +07:00
parent 63736bd235
commit e49e41fcde
No known key found for this signature in database
GPG Key ID: FA9358FFDCCD05D9
1 changed files with 56 additions and 12 deletions

View File

@ -76,20 +76,21 @@
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Jenis Edukasi <span class="text-red-500">*</span></legend>
<select name="JenisEdukasi" class="select select-bordered w-full" required>
<select name="JenisEdukasi" id="jenis_tambah" class="select select-bordered w-full" required>
<option value="">Pilih jenis edukasi.</option>
<option value="Dokumen">Dokumen</option>
<option value="LinkKonten">Link Konten</option>
</select>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Upload Dokumen <span class="text-red-500">*</span></legend>
<input type="file" name="Dokumen" class="file-input file-input-bordered w-full"
<fieldset class="fieldset" id="dokumen_tambah_field">
<legend class="fieldset-legend">Upload Dokumen <span class="text-red-500" id="dokumen_tambah_required">*</span></legend>
<input type="file" name="Dokumen" id="dokumen_tambah" class="file-input file-input-bordered w-full"
accept=".pdf,.doc,.docx,.jpg,.jpeg,.png" required/>
<p class="text-xs text-gray-500 mt-1">Ukuran maksimal 5MB.</p>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Link Konten <span class="text-red-500">*</span></legend>
<input type="url" name="LinkKonten" class="input input-bordered w-full"
<fieldset class="fieldset" id="link_tambah_field">
<legend class="fieldset-legend">Link Konten <span class="text-red-500" id="link_tambah_required">*</span></legend>
<input type="url" name="LinkKonten" id="link_tambah" class="input input-bordered w-full"
placeholder="http://" required />
</fieldset>
</div>
@ -133,16 +134,17 @@
<select id="edit_jenis" name="JenisEdukasi" class="select select-bordered w-full" required>
<option value="">Pilih jenis edukasi.</option>
<option value="Dokumen">Dokumen</option>
<option value="LinkKonten">Link Konten</option>
</select>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Upload Dokumen <span class="text-red-500">*</span></legend>
<input type="file" name="Dokumen" class="file-input file-input-bordered w-full"
<fieldset class="fieldset" id="dokumen_edit_field">
<legend class="fieldset-legend">Upload Dokumen <span class="text-red-500" id="dokumen_edit_required">*</span></legend>
<input type="file" name="Dokumen" id="dokumen_edit" class="file-input file-input-bordered w-full"
accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.mp4" required/>
<p class="text-xs text-gray-500 mt-1">Ukuran maksimal 5MB.</p>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Link Konten <span class="text-red-500">*</span></legend>
<fieldset class="fieldset" id="link_edit_field">
<legend class="fieldset-legend">Link Konten <span class="text-red-500" id="link_edit_required">*</span></legend>
<input type="url" id="edit_link" name="LinkKonten" class="input input-bordered w-full"
placeholder="http://" required />
</fieldset>
@ -239,7 +241,49 @@
modal_edit.close();
}
// Toggle fields based on jenis edukasi selection
function toggleFields(mode) {
const jenisValue = mode === 'tambah' ? $('#jenis_tambah').val() : $('#edit_jenis').val();
const prefix = mode === 'tambah' ? 'tambah' : 'edit';
const isTambah = mode === 'tambah';
// show fields
$(`#dokumen_${prefix}_field, #link_${prefix}_field`).show();
// set field requirement
const setRequired = (field, isRequired) => {
$(`#${field}_${prefix}`).prop('required', isRequired);
$(`#${field}_${prefix}_required`).toggle(isRequired);
};
if (jenisValue === 'Dokumen') {
setRequired('dokumen', isTambah);
setRequired('link', false);
} else if (jenisValue === 'LinkKonten') {
setRequired('dokumen', false);
setRequired('link', true);
} else {
setRequired('dokumen', isTambah);
setRequired('link', isTambah);
}
}
function toggleFieldsTambah() {
toggleFields('tambah');
}
function toggleFieldsEdit() {
toggleFields('edit');
}
$(document).ready(function () {
toggleFieldsTambah();
toggleFieldsEdit();
// Trigger changes jenis edukasi
$('#jenis_tambah').on('change', toggleFieldsTambah);
$('#edit_jenis').on('change', toggleFieldsEdit);
table = new DataTable('#edukasi-table', {
ajax: '@Url.Action("Table", "Edukasi")',
scrollX: true,