Undangan/proyek-frontend/app/components/undangan/undangan-pernikahan-premium.vue
2025-10-24 17:05:32 +07:00

93 lines
3.8 KiB
Vue

<template>
<div>
<!-- Pastikan data sudah ada -->
<WeddingA v-if="props.data" :data="formattedData" />
<div v-else class="text-center py-20">
<p class="text-red-600 font-semibold">Undangan tidak ditemukan 😢</p>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
import WeddingA from '~/components/templates/wedding/weddingA.vue'
const props = defineProps({
data: {
type: Object,
required: true
}
})
const formattedData = computed(() => {
const f = props.data.form || {}
return {
id: props.data.id || '',
coverImage: f.cover_image ? `http://localhost:8000/storage/${f.cover_image}` : '/default-cover.jpg',
heroImage: f.hero_image ? `http://localhost:8000/storage/${f.hero_image}` : '/default-hero.jpg',
footerImage: f.footer_image ? `http://localhost:8000/storage/${f.footer_image}` : '/wedding1.png',
greeting: f.say_something || 'Dengan memohon rahmat dan ridho Allah SWT, kami bermaksud mengundang Anda...',
eventDate: f.hari_tanggal_resepsi || new Date(),
bride: {
fullname: f.nama_lengkap_wanita || '',
nickname: f.nama_panggilan_wanita || '',
photo: f.foto_wanita ? `http://localhost:8000/storage/${f.foto_wanita}` : '/wanita.jpg',
fatherName: f.nama_ayah_wanita || f.nama_bapak_wanita || '',
motherName: f.nama_ibu_wanita || '',
instagram: f.instagram_wanita || '',
twitter: f.twitter_wanita || '',
facebook: f.facebook_wanita || ''
},
groom: {
fullname: f.nama_lengkap_pria || '',
nickname: f.nama_panggilan_pria || '',
photo: f.foto_pria ? `http://localhost:8000/storage/${f.foto_pria}` : '/pria.jpg',
fatherName: f.nama_ayah_pria || f.nama_bapak_pria || '',
motherName: f.nama_ibu_pria || '',
instagram: f.instagram_pria || '',
twitter: f.twitter_pria || '',
facebook: f.facebook_pria || ''
},
akad: {
date: f.hari_tanggal_akad || new Date(),
time: f.waktu_akad || '',
place: f.tempat_akad || '',
address: f.alamat_akad || '',
mapUrl: f.link_gmaps_akad || '',
image: f.akad_image ? `http://localhost:8000/storage/${f.akad_image}` : '/wedding1.png'
},
resepsi: {
date: f.hari_tanggal_resepsi || new Date(),
time: f.waktu_resepsi || '',
place: f.tempat_resepsi || '',
address: f.alamat_resepsi || '',
mapUrl: f.link_gmaps_resepsi || '',
image: f.resepsi_image ? `http://localhost:8000/storage/${f.resepsi_image}` : '/wedding1.png'
},
story: {
image1: f.story_image1 ? `http://localhost:8000/storage/${f.story_image1}` : '/wedding1.png',
text1: f.story_text1 || 'Lorem ipsum dolor sit amet...',
image2: f.story_image2 ? `http://localhost:8000/storage/${f.story_image2}` : '/wedding1.png',
text2: f.story_text2 || 'Lorem ipsum dolor sit amet...'
},
gallery: [1, 2, 3, 4, 5, 6, 7, 8]
.map(i => f[`foto_${i}`])
.filter(Boolean)
.map(x => `http://localhost:8000/storage/${x}`),
gift: {
address: f.gift_address || 'Jl. Terusan Jakarta No.53, Cicaheum, Kec. Kiaracondong, Kota Bandung, Jawa Barat 40291',
mapUrl: f.gift_map_url || 'https://maps.google.com'
},
musicUrl: f.link_music || '',
foto_1: f.foto_1 ? `http://localhost:8000/storage/${f.foto_1}` : '',
foto_2: f.foto_2 ? `http://localhost:8000/storage/${f.foto_2}` : '',
foto_3: f.foto_3 ? `http://localhost:8000/storage/${f.foto_3}` : '',
foto_4: f.foto_4 ? `http://localhost:8000/storage/${f.foto_4}` : '',
foto_5: f.foto_5 ? `http://localhost:8000/storage/${f.foto_5}` : '',
foto_6: f.foto_6 ? `http://localhost:8000/storage/${f.foto_6}` : '',
foto_7: f.foto_7 ? `http://localhost:8000/storage/${f.foto_7}` : '',
foto_8: f.foto_8 ? `http://localhost:8000/storage/${f.foto_8}` : ''
}
})
</script>