Magang-2025/Undangan
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update form ultah

Browse Source
This commit is contained in:
Farhaan4 2025-09-18 17:00:50 +07:00
parent 961fb7724e
commit 80c1fdda8b
1 changed files with 164 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

231
proyek-frontend/app/components/forms/UlangTahunForm.vue
View File

@ -21,92 +21,189 @@
<input :value="form.nama_template" type="text" placeholder="Nama Template" class="input-readonly" readonly /> <input :value="form.nama_template" type="text" placeholder="Nama Template" class="input-readonly" readonly />
<input :value="form.kategori" type="text" placeholder="Kategori" class="input-readonly" readonly /> <input :value="form.kategori" type="text" placeholder="Kategori" class="input-readonly" readonly />
<input :value="form.harga" type="text" placeholder="Harga" class="input-readonly" readonly /> <input :value="form.harga" type="text" placeholder="Harga" class="input-readonly" readonly />
<input :value="form.tanggal_pemesanan" type="text" placeholder="Tanggal Pemesanan" class="input-readonly" readonly /> <input :value="form.tanggal_pemesanan" type="text" placeholder="Tanggal Pemesanan" class="input-readonly"
readonly />
</div> </div>
</section> </section>
<!-- Pemesan --> <!-- Pemesan -->
<section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200"> <!-- Pemesan -->
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2"> <section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
<span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Pemesan Undangan <h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
</h2> <span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Pemesan Undangan
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> </h2>
<input v-model="form.nama_pemesan" type="text" placeholder="Nama Pemesan" class="input" required /> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<input v-model="form.no_hp" type="text" placeholder="No. WhatsApp" class="input" required /> <div class="relative">
<input v-model="form.email" type="email" placeholder="Email" class="input md:col-span-2" required /> <input v-model="form.nama_pemesan" type="text" id="nama_pemesan" placeholder=" " required
</div> class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
</section> <label for="nama_pemesan"
class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
Nama Pemesan
</label>
</div>
<div class="relative">
<input v-model="form.no_hp" type="text" id="no_hp" placeholder=" " required
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
<label for="no_hp"
class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
No. WhatsApp
</label>
</div>
<div class="relative md:col-span-2">
<input v-model="form.email" type="email" id="email" placeholder=" " required
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
<label for="email"
class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
Email
</label>
</div>
</div>
</section>
<!-- Data Anak --> <!-- Data Anak -->
<section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200"> <section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2"> <h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
<span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Data Anak <span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Data Anak
</h2> </h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<input v-model="form.nama_lengkap_anak" type="text" placeholder="Nama Lengkap Anak" class="input" required /> <div class="relative">
<input v-model="form.nama_panggilan_anak" type="text" placeholder="Nama Panggilan Anak" class="input" required /> <input v-model="form.nama_lengkap_anak" type="text" id="nama_lengkap_anak" placeholder=" " required
<input v-model="form.bapak_anak" type="text" placeholder="Nama Bapak" class="input" required /> class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
<input v-model="form.ibu_anak" type="text" placeholder="Nama Ibu" class="input" required /> <label for="nama_lengkap_anak"
<input v-model="form.umur_dirayakan" type="text" placeholder="Ulang Tahun ke-" class="input" required /> class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
<input v-model="form.anak_ke" type="text" placeholder="Anak ke-" class="input" required /> Nama Lengkap Anak
</div> </label>
</section> </div>
<div class="relative">
<input v-model="form.nama_panggilan_anak" type="text" id="nama_panggilan_anak" placeholder=" " required
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
<label for="nama_panggilan_anak"
class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
Nama Panggilan Anak
</label>
</div>
<div class="relative">
<input v-model="form.bapak_anak" type="text" id="bapak_anak" placeholder=" " required
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
<label for="bapak_anak"
class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
Nama Bapak
</label>
</div>
<div class="relative">
<input v-model="form.ibu_anak" type="text" id="ibu_anak" placeholder=" " required
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
<label for="ibu_anak"
class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
Nama Ibu
</label>
</div>
<div class="relative">
<input v-model="form.umur_dirayakan" type="text" id="umur_dirayakan" placeholder=" " required
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
<label for="umur_dirayakan"
class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
Ulang Tahun ke-
</label>
</div>
<div class="relative">
<input v-model="form.anak_ke" type="text" id="anak_ke" placeholder=" " required
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
<label for="anak_ke"
class="absolute left-2 top-1 text-gray-500 text-xs transition-all duration-200 peer-placeholder-shown:top-5 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600">
Anak ke-
</label>
</div>
</div>
</section>
<!-- Jadwal Acara --> <!-- Jadwal Acara -->
<section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200"> <section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2"> <h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
<span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Jadwal Acara <span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Jadwal Acara
</h2> </h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<input v-model="form.hari_tanggal_acara" type="date" class="input" required /> <div class="relative">
<input v-model="form.waktu_acara" type="text" placeholder="Waktu Acara (Contoh: 15:00 - Selesai)" class="input" required /> <input v-model="form.hari_tanggal_acara" type="date" id="hari_tanggal_acara" placeholder=" " required
<textarea v-model="form.alamat_acara" rows="3" placeholder="Alamat Lengkap Acara" class="input md:col-span-2" required></textarea> class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
<input v-model="form.maps_acara" type="text" placeholder="Link Google Maps (Opsional)" class="input md:col-span-2" /> <label for="hari_tanggal_acara"
</div> class="absolute left-2 top-1 text-gray-500 text-xs peer-focus:text-blue-600">Hari & Tanggal</label>
</section> </div>
<div class="relative">
<input v-model="form.waktu_acara" type="text" id="waktu_acara" placeholder=" " required
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
<label for="waktu_acara"
class="absolute left-2 top-1 text-gray-500 text-xs peer-focus:text-blue-600">Waktu Acara</label>
</div>
<div class="relative md:col-span-2">
<textarea v-model="form.alamat_acara" id="alamat_acara" rows="3" placeholder=" " required
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
<label for="alamat_acara"
class="absolute left-2 top-1 text-gray-500 text-xs peer-focus:text-blue-600">Alamat Lengkap</label>
</div>
<div class="relative md:col-span-2">
<input v-model="form.maps_acara" type="text" id="maps_acara" placeholder=" "
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
<label for="maps_acara"
class="absolute left-2 top-1 text-gray-500 text-xs peer-focus:text-blue-600">Link Google Maps (Opsional)</label>
</div>
</div>
</section>
<!-- Informasi Tambahan --> <!-- Informasi Tambahan -->
<section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200"> <section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2"> <h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
<span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Informasi Tambahan <span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Informasi Tambahan
</h2> </h2>
<input v-model="form.link_musik" type="text" placeholder="Link Musik Latar (Opsional)" class="input" /> <div class="relative">
</section> <input v-model="form.link_musik" type="text" id="link_musik" placeholder=" "
class="peer w-full border border-gray-300 rounded-lg px-3 pt-5 pb-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
<label for="link_musik"
class="absolute left-2 top-1 text-gray-500 text-xs peer-focus:text-blue-600">Link Musik (Opsional)</label>
</div>
</section>
<div class="p-6 bg-white rounded-xl shadow-sm border border-gray-200"> <!-- Galeri -->
<div class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
<h2 class="text-lg font-bold text-gray-800 mb-4">Galeri (max 5 gambar)</h2> <h2 class="text-lg font-bold text-gray-800 mb-4">Galeri (max 5 gambar)</h2>
<input type="file" multiple accept="image/*" @change="handleFileUpload" class="hidden" id="gallery-upload" /> <input type="file" multiple accept="image/*" @change="handleFileUpload" class="hidden" id="gallery-upload" />
<div class="grid grid-cols-2 md:grid-cols-3 gap-3"> <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
<div v-for="(img, i) in previewImages" :key="i" class="relative w-full aspect-square rounded-lg overflow-hidden shadow-sm group"> <div v-for="(img, i) in previewImages" :key="i"
class="relative w-full aspect-square rounded-lg overflow-hidden shadow-sm group">
<img :src="img" alt="Preview" class="object-cover w-full h-full" /> <img :src="img" alt="Preview" class="object-cover w-full h-full" />
<button <button type="button" @click="removeImage(i)"
type="button"
@click="removeImage(i)"
class="absolute top-1 right-1 bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity font-bold" class="absolute top-1 right-1 bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity font-bold"
aria-label="Hapus gambar" aria-label="Hapus gambar">
>
&times; &times;
</button> </button>
</div> </div>
<label v-if="previewImages.length < 5" for="gallery-upload" class="flex items-center justify-center w-full aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 transition"> <label v-if="previewImages.length < 5" for="gallery-upload"
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> class="flex items-center justify-center w-full aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 transition">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24"
</svg> stroke="currentColor">
</label> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</div> </svg>
</div> </label>
</form> </div>
</div>
</form>
<!-- Submit --> <!-- Submit -->
<div class="mt-10 text-center"> <div class="mt-10 text-center">
<button @click="submitForm" class="bg-blue-600 text-white px-10 py-3 rounded-xl font-semibold shadow-md hover:bg-blue-700 hover:shadow-lg transition" :disabled="loading"> <button @click="submitForm"
class="bg-blue-600 text-white px-10 py-3 rounded-xl font-semibold shadow-md hover:bg-blue-700 hover:shadow-lg transition"
:disabled="loading">
{{ loading ? "Mengirim..." : "Kirim & Konfirmasi Admin" }} {{ loading ? "Mengirim..." : "Kirim & Konfirmasi Admin" }}
</button> </button>
</div> </div>
<!-- Alert --> <!-- Alert -->
<div v-if="success" class="mt-6 p-4 text-green-800 bg-green-100 rounded-lg text-center font-medium">✅ Form berhasil dikirim!</div> <div v-if="success" class="mt-6 p-4 text-green-800 bg-green-100 rounded-lg text-center font-medium">✅ Form berhasil
<div v-if="error" class="mt-6 p-4 text-red-800 bg-red-100 rounded-lg text-center font-medium">❌ Gagal mengirim form. Pastikan semua data yang wajib diisi sudah lengkap.</div> dikirim!</div>
<div v-if="error" class="mt-6 p-4 text-red-800 bg-red-100 rounded-lg text-center font-medium">❌ Gagal mengirim form.
Pastikan semua data yang wajib diisi sudah lengkap.</div>
</div> </div>
</template> </template>
@ -133,8 +230,8 @@ const form = ref({
nama_panggilan_anak: "", nama_panggilan_anak: "",
bapak_anak: "", bapak_anak: "",
ibu_anak: "", ibu_anak: "",
umur_dirayakan: "", umur_dirayakan: "",
anak_ke: "", anak_ke: "",
hari_tanggal_acara: "", hari_tanggal_acara: "",
waktu_acara: "", waktu_acara: "",
alamat_acara: "", alamat_acara: "",
@ -172,7 +269,7 @@ const handleFileUpload = (event) => {
form.value.galeri = combinedFiles.slice(0, 5); form.value.galeri = combinedFiles.slice(0, 5);
// Buat ulang array preview berdasarkan data file yang sudah final // Buat ulang array preview berdasarkan data file yang sudah final
previewImages.value = []; previewImages.value = [];
form.value.galeri.forEach(file => { form.value.galeri.forEach(file => {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
@ -215,7 +312,7 @@ const submitForm = async () => {
success.value = true; success.value = true;
const adminNumber = "62895602603247"; const adminNumber = "62895602603247";
// Susun pesan WA // Susun pesan WA
@ -243,7 +340,7 @@ Tanggal Pemesanan: ${form.value.tanggal_pemesanan}
// Redirect ke WhatsApp // Redirect ke WhatsApp
const waUrl = `https://wa.me/${adminNumber}?text=${encodeURIComponent(message)}`; const waUrl = `https://wa.me/${adminNumber}?text=${encodeURIComponent(message)}`;
window.location.href = waUrl; window.location.href = waUrl;
} catch (err) { } catch (err) {
console.error(err); console.error(err);
error.value = true; error.value = true;