update form ultah
This commit is contained in:
Farhaan4
parent
961fb7724e
commit
80c1fdda8b
@ -21,92 +21,189 @@
|
||||
<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.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>
|
||||
</section>
|
||||
|
||||
<!-- Pemesan -->
|
||||
<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">
|
||||
<span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Pemesan Undangan
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<input v-model="form.nama_pemesan" type="text" placeholder="Nama Pemesan" class="input" required />
|
||||
<input v-model="form.no_hp" type="text" placeholder="No. WhatsApp" class="input" required />
|
||||
<input v-model="form.email" type="email" placeholder="Email" class="input md:col-span-2" required />
|
||||
</div>
|
||||
</section>
|
||||
<!-- Pemesan -->
|
||||
<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">
|
||||
<span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Pemesan Undangan
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="relative">
|
||||
<input v-model="form.nama_pemesan" type="text" id="nama_pemesan" 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_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 -->
|
||||
<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">
|
||||
<span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Data Anak
|
||||
</h2>
|
||||
<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 />
|
||||
<input v-model="form.nama_panggilan_anak" type="text" placeholder="Nama Panggilan Anak" class="input" required />
|
||||
<input v-model="form.bapak_anak" type="text" placeholder="Nama Bapak" class="input" required />
|
||||
<input v-model="form.ibu_anak" type="text" placeholder="Nama Ibu" class="input" required />
|
||||
<input v-model="form.umur_dirayakan" type="text" placeholder="Ulang Tahun ke-" class="input" required />
|
||||
<input v-model="form.anak_ke" type="text" placeholder="Anak ke-" class="input" required />
|
||||
</div>
|
||||
</section>
|
||||
<!-- Data Anak -->
|
||||
<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">
|
||||
<span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Data Anak
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="relative">
|
||||
<input v-model="form.nama_lengkap_anak" type="text" id="nama_lengkap_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_lengkap_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 Lengkap Anak
|
||||
</label>
|
||||
</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 -->
|
||||
<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">
|
||||
<span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Jadwal Acara
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<input v-model="form.hari_tanggal_acara" type="date" class="input" required />
|
||||
<input v-model="form.waktu_acara" type="text" placeholder="Waktu Acara (Contoh: 15:00 - Selesai)" class="input" required />
|
||||
<textarea v-model="form.alamat_acara" rows="3" placeholder="Alamat Lengkap Acara" class="input md:col-span-2" required></textarea>
|
||||
<input v-model="form.maps_acara" type="text" placeholder="Link Google Maps (Opsional)" class="input md:col-span-2" />
|
||||
</div>
|
||||
</section>
|
||||
<!-- Jadwal Acara -->
|
||||
<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">
|
||||
<span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Jadwal Acara
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="relative">
|
||||
<input v-model="form.hari_tanggal_acara" type="date" id="hari_tanggal_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="hari_tanggal_acara"
|
||||
class="absolute left-2 top-1 text-gray-500 text-xs peer-focus:text-blue-600">Hari & Tanggal</label>
|
||||
</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 -->
|
||||
<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">
|
||||
<span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Informasi Tambahan
|
||||
</h2>
|
||||
<input v-model="form.link_musik" type="text" placeholder="Link Musik Latar (Opsional)" class="input" />
|
||||
</section>
|
||||
<!-- Informasi Tambahan -->
|
||||
<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">
|
||||
<span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Informasi Tambahan
|
||||
</h2>
|
||||
<div class="relative">
|
||||
<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>
|
||||
<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 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" />
|
||||
<button
|
||||
type="button"
|
||||
@click="removeImage(i)"
|
||||
<button 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"
|
||||
aria-label="Hapus gambar"
|
||||
>
|
||||
aria-label="Hapus gambar">
|
||||
×
|
||||
</button>
|
||||
</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">
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<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">
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
<!-- Submit -->
|
||||
<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" }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 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="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 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="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>
|
||||
</template>
|
||||
|
||||
@ -133,8 +230,8 @@ const form = ref({
|
||||
nama_panggilan_anak: "",
|
||||
bapak_anak: "",
|
||||
ibu_anak: "",
|
||||
umur_dirayakan: "",
|
||||
anak_ke: "",
|
||||
umur_dirayakan: "",
|
||||
anak_ke: "",
|
||||
hari_tanggal_acara: "",
|
||||
waktu_acara: "",
|
||||
alamat_acara: "",
|
||||
@ -172,7 +269,7 @@ const handleFileUpload = (event) => {
|
||||
form.value.galeri = combinedFiles.slice(0, 5);
|
||||
|
||||
// Buat ulang array preview berdasarkan data file yang sudah final
|
||||
previewImages.value = [];
|
||||
previewImages.value = [];
|
||||
form.value.galeri.forEach(file => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
@ -215,7 +312,7 @@ const submitForm = async () => {
|
||||
|
||||
success.value = true;
|
||||
|
||||
|
||||
|
||||
const adminNumber = "62895602603247";
|
||||
|
||||
// Susun pesan WA
|
||||
@ -243,7 +340,7 @@ Tanggal Pemesanan: ${form.value.tanggal_pemesanan}
|
||||
// Redirect ke WhatsApp
|
||||
const waUrl = `https://wa.me/${adminNumber}?text=${encodeURIComponent(message)}`;
|
||||
window.location.href = waUrl;
|
||||
|
||||
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
error.value = true;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user