feat(CMS): add faq , modal regulasi, modal panduan
Kevin Hendrawan
parent
bfb3d277ed
commit
009014f013
|
|
@ -99,6 +99,90 @@
|
||||||
</div>
|
</div>
|
||||||
</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 -->
|
<!-- Regulasi -->
|
||||||
<div class="collapse collapse-arrow bg-base-100 shadow-xl">
|
<div class="collapse collapse-arrow bg-base-100 shadow-xl">
|
||||||
<input type="checkbox" checked />
|
<input type="checkbox" checked />
|
||||||
|
|
@ -107,7 +191,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="collapse-content">
|
<div class="collapse-content">
|
||||||
<div class="flex justify-end mb-4">
|
<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
|
Tambah Regulasi
|
||||||
<i class="ph ph-plus"></i>
|
<i class="ph ph-plus"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -258,16 +342,76 @@
|
||||||
</div>
|
</div>
|
||||||
</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 -->
|
<!-- Panduan -->
|
||||||
<div class="collapse collapse-arrow bg-base-100 shadow-xl">
|
<div class="collapse collapse-arrow bg-base-100 shadow-xl">
|
||||||
<input type="checkbox" checked />
|
<input type="checkbox" checked />
|
||||||
<div class="collapse-title text-gray-900 text-base font-semibold font-['Plus_Jakarta_Sans'] leading-8">
|
<div class="collapse-title text-gray-900 text-base font-semibold font-['Plus_Jakarta_Sans'] leading-8">
|
||||||
Regulasi
|
Panduan
|
||||||
</div>
|
</div>
|
||||||
<div class="collapse-content">
|
<div class="collapse-content">
|
||||||
<div class="flex justify-end mb-4">
|
<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_panduan.showModal()">
|
||||||
Tambah Regulasi
|
Tambah Panduan
|
||||||
<i class="ph ph-plus"></i>
|
<i class="ph ph-plus"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -290,6 +434,54 @@
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
|
|
@ -324,7 +516,7 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// Delete button handler
|
// Delete button handler
|
||||||
$('#example').on('click', '.delete-btn', function (e) {
|
$('#example').on('click', '.delete', function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
var id = $(this).data('id');
|
var id = $(this).data('id');
|
||||||
|
|
@ -378,7 +570,7 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// Delete button handler
|
// Delete button handler
|
||||||
$('#examplePanduan').on('click', '.delete-btn', function (e) {
|
$('#examplePanduan').on('click', '.delete', function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
var id = $(this).data('id');
|
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) {
|
function submitForm(e) {
|
||||||
|
|
@ -438,6 +660,10 @@
|
||||||
table.ajax.reload();
|
table.ajax.reload();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
function closeModal(){
|
||||||
|
modal_regulasi.close();
|
||||||
|
modal_panduan.close();
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue