feat(CMS): add faq , modal regulasi, modal panduan
Kevin Hendrawan
parent
bfb3d277ed
commit
009014f013
|
|
@ -99,6 +99,90 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Regulasi -->
|
||||
<dialog id="modal_regulasi" class="modal modal-bottom sm:modal-middle">
|
||||
<div class="modal-box w-full max-w-2xl p-6 bg-white rounded-2xl">
|
||||
<h3 id="modal_title" class="text-gray-900 text-xl font-semibold font-['Plus_Jakarta_Sans'] leading-8 mb-8">Tambah Regulasi</h3>
|
||||
<form id="formTambah" onsubmit="submitForm(event)">
|
||||
<input type="hidden" id="edit_mode" value="false">
|
||||
<div class="flex flex-col gap-3">
|
||||
<!-- Judul Regulasi -->
|
||||
<div class="flex flex-col">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend">
|
||||
Judul Regulasi
|
||||
<span class="text-red-500">*</span>
|
||||
</legend>
|
||||
<input type="text" id="judul_regulasi" placeholder="Judul Regulasi" class="input w-full" required />
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Sub Judul -->
|
||||
<div class="flex flex-col">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend">
|
||||
Judul Regulasi
|
||||
<span class="text-red-500">*</span>
|
||||
</legend>
|
||||
<input type="text" id="sub_regulasi" placeholder="Sub Judul Regulasi" class="input w-full" required />
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Tanggal Penetapan & Status -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div class="flex flex-col">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend">
|
||||
Tanggal Penetapan
|
||||
<span class="text-red-500">*</span>
|
||||
</legend>
|
||||
<input type="date" id="tgl_penetapan" class="input w-full" required />
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend">
|
||||
Status<span class="text-red-500">*</span>
|
||||
</legend>
|
||||
<select id="status" class="select w-full" required>
|
||||
<option value="" disabled selected>Pilih salah satu</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upload Dokumen -->
|
||||
<div class="flex flex-col">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend">
|
||||
Upload Dokumen<span class="text-red-500">*</span>
|
||||
</legend>
|
||||
<input type="file" class="file-input file-input-bordered w-full" accept="image/*, application/pdf" />
|
||||
<label class="label">
|
||||
<span class="label-text-alt text-base-content/60">Ukuran file maksimal 30 MB</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex flex-col sm:flex-row gap-3 justify-end">
|
||||
<button type="button" class="px-8 py-2.5 bg-white rounded-full outline outline-1 -outline-offset-1 outline-gray-300 text-slate-800 text-base font-semibold font-['Plus_Jakarta_Sans'] leading-6 hover:bg-gray-50 w-full sm:w-auto" onclick="closeModal()">
|
||||
Batal
|
||||
</button>
|
||||
<button type="submit" class="px-8 py-2.5 bg-green-800 rounded-full text-white text-base font-semibold font-['Plus_Jakarta_Sans'] leading-6 hover:bg-green-900 w-full sm:w-auto">
|
||||
Simpan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
<!-- /modal Regulasi -->
|
||||
|
||||
<!-- Regulasi -->
|
||||
<div class="collapse collapse-arrow bg-base-100 shadow-xl">
|
||||
<input type="checkbox" checked />
|
||||
|
|
@ -107,7 +191,7 @@
|
|||
</div>
|
||||
<div class="collapse-content">
|
||||
<div class="flex justify-end mb-4">
|
||||
<button type="button" class="btn bg-[#344054] text-white hover:bg-gray-900 px-4 py-2 rounded-full">
|
||||
<button type="button" class="btn bg-[#344054] text-white hover:bg-gray-900 px-4 py-2 rounded-full" onclick="modal_regulasi.showModal()">
|
||||
Tambah Regulasi
|
||||
<i class="ph ph-plus"></i>
|
||||
</button>
|
||||
|
|
@ -258,16 +342,76 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Panduan -->
|
||||
<dialog id="modal_panduan" class="modal modal-bottom sm:modal-middle">
|
||||
<div class="modal-box w-full max-w-2xl p-6 bg-white rounded-2xl">
|
||||
<h3 id="modal_title" class="text-gray-900 text-xl font-semibold font-['Plus_Jakarta_Sans'] leading-8 mb-8">Tambah Panduan</h3>
|
||||
<form id="formTambah" onsubmit="submitForm(event)">
|
||||
<input type="hidden" id="edit_mode" value="false">
|
||||
<div class="flex flex-col gap-3">
|
||||
<!-- Judul Regulasi -->
|
||||
<div class="flex flex-col">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend">
|
||||
Judul
|
||||
<span class="text-red-500">*</span>
|
||||
</legend>
|
||||
<input type="text" id="judul_regulasi" placeholder="Judul Panduan" class="input w-full" required />
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Sub Judul -->
|
||||
<div class="flex flex-col">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend">
|
||||
Jenis Panduan
|
||||
<span class="text-red-500">*</span>
|
||||
</legend>
|
||||
<input type="text" id="jenis_panduan" placeholder="Jenis Panduan" class="input w-full" required />
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Upload Dokumen -->
|
||||
<div class="flex flex-col">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend">
|
||||
Upload Dokumen / Video Panduan<span class="text-red-500">*</span>
|
||||
</legend>
|
||||
<input type="file" class="file-input file-input-bordered w-full" accept="image/*, application/pdf, video/*" />
|
||||
<label class="label">
|
||||
<span class="label-text-alt text-base-content/60">Ukuran file maksimal 5 MB</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex flex-col sm:flex-row gap-3 justify-end">
|
||||
<button type="button" class="px-8 py-2.5 bg-white rounded-full outline outline-1 -outline-offset-1 outline-gray-300 text-slate-800 text-base font-semibold font-['Plus_Jakarta_Sans'] leading-6 hover:bg-gray-50 w-full sm:w-auto" onclick="closeModal()">
|
||||
Batal
|
||||
</button>
|
||||
<button type="submit" class="px-8 py-2.5 bg-green-800 rounded-full text-white text-base font-semibold font-['Plus_Jakarta_Sans'] leading-6 hover:bg-green-900 w-full sm:w-auto">
|
||||
Simpan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
<!-- /modal Regulasi -->
|
||||
|
||||
<!-- Panduan -->
|
||||
<div class="collapse collapse-arrow bg-base-100 shadow-xl">
|
||||
<input type="checkbox" checked />
|
||||
<div class="collapse-title text-gray-900 text-base font-semibold font-['Plus_Jakarta_Sans'] leading-8">
|
||||
Regulasi
|
||||
Panduan
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<div class="flex justify-end mb-4">
|
||||
<button type="button" class="btn bg-[#344054] text-white hover:bg-gray-900 px-4 py-2 rounded-full">
|
||||
Tambah Regulasi
|
||||
<button type="button" class="btn bg-[#344054] text-white hover:bg-gray-900 px-4 py-2 rounded-full" onclick="modal_panduan.showModal()">
|
||||
Tambah Panduan
|
||||
<i class="ph ph-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -290,6 +434,54 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Frequently Ask Question (FAQ) -->
|
||||
|
||||
<div class="collapse collapse-arrow bg-base-100 shadow-xl">
|
||||
<input type="checkbox" checked />
|
||||
<div class="collapse-title text-gray-900 text-base font-semibold font-['Plus_Jakarta_Sans'] leading-8">
|
||||
Frequently Ask Question (FAQ)
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<div class="pt-4 flex flex-col gap-6">
|
||||
<div id="faqContainer">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="flex flex-col">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="text-base">
|
||||
Question
|
||||
</legend>
|
||||
<textarea class="textarea h-24 w-full" placeholder="Question">Question lorem ipsum</textarea>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="text-base">
|
||||
Answer
|
||||
</legend>
|
||||
<textarea class="textarea h-24 w-full" placeholder="Answer">Answer lorem ipsum</textarea>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
<div class="flex items-center mt-2 mb-4">
|
||||
<button type="button" class="btn btn-sm rounded-full bg-white" id="tambahFaqBtn">
|
||||
Tambah FAQ
|
||||
<i class="ph ph-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Buttons -->
|
||||
<div class="flex flex-col sm:flex-row gap-3 justify-end">
|
||||
<button type="submit" class="px-8 py-2.5 bg-green-800 rounded-full text-white text-base font-semibold font-['Plus_Jakarta_Sans'] leading-6 hover:bg-green-900 w-full sm:w-auto">
|
||||
Simpan
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -324,7 +516,7 @@
|
|||
});
|
||||
|
||||
// Delete button handler
|
||||
$('#example').on('click', '.delete-btn', function (e) {
|
||||
$('#example').on('click', '.delete', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var id = $(this).data('id');
|
||||
|
|
@ -378,7 +570,7 @@
|
|||
});
|
||||
|
||||
// Delete button handler
|
||||
$('#examplePanduan').on('click', '.delete-btn', function (e) {
|
||||
$('#examplePanduan').on('click', '.delete', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var id = $(this).data('id');
|
||||
|
|
@ -414,6 +606,36 @@
|
|||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
$('#tambahFaqBtn').click(function() {
|
||||
// Create a new FAQ row structure
|
||||
var newRow = `
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="flex flex-col">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="text-base">
|
||||
Question
|
||||
</legend>
|
||||
<textarea class="textarea h-24 w-full" placeholder="Question">Question lorem ipsum</textarea>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="text-base">
|
||||
Answer
|
||||
</legend>
|
||||
<textarea class="textarea h-24 w-full" placeholder="Answer">Answer lorem ipsum</textarea>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
`;
|
||||
|
||||
// Append the new row to the container
|
||||
$('#faqContainer').append(newRow);
|
||||
});
|
||||
|
||||
function submitForm(e) {
|
||||
|
|
@ -438,6 +660,10 @@
|
|||
table.ajax.reload();
|
||||
});
|
||||
}
|
||||
function closeModal(){
|
||||
modal_regulasi.close();
|
||||
modal_panduan.close();
|
||||
}
|
||||
</script>
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue