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

fix

Browse Source
This commit is contained in:
Muzakki Parsaoran Siregar 2025-10-20 09:46:42 +07:00
parent 6d68f5eaf3
commit 3ab06a82e6
1 changed files with 0 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
proyek-frontend/app/components/undangan/undangan-ulang-tahun-starter.vue
View File

@ -1,108 +0,0 @@
<template>
<div class="min-h-screen bg-gradient-to-br from-yellow-200 via-yellow-300 to-yellow-400 relative overflow-hidden">
<!-- Navigation -->
<nav v-if="currentSection !== 'landing'" class="absolute top-4 left-1/2 transform -translate-x-1/2 z-20">
<ul
class="flex space-x-6 bg-white/40 backdrop-blur-md px-6 py-3 rounded-full shadow-md text-sm font-semibold text-gray-800">
<li><button @click="switchSection('introduction')" :class="navClass('introduction')">Intro</button></li>
<li><button @click="switchSection('event')" :class="navClass('event')">Event</button></li>
<li><button @click="switchSection('gallery')" :class="navClass('gallery')">Gallery</button></li>
<li><button @click="switchSection('thanks')" :class="navClass('thanks')">Thanks</button></li>
</ul>
</nav>
<main
class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out">
<!-- Landing Section -->
<Landing
v-if="currentSection === 'landing'"
:childName="formData.nama_lengkap"
@open-invitation="switchSection('introduction')"
/>
<!-- Introduction Section -->
<Introduction
v-if="currentSection === 'introduction'"
:childName="formData.nama_lengkap"
:age="formData.umur_yang_dirayakan"
:childPhoto="photoUrl(formData.foto_1)"
/>
<!-- Event Section -->
<Event
v-if="currentSection === 'event'"
:hari_tanggal_acara="formData.hari_tanggal_acara"
:waktu="formData.waktu"
:alamat="formData.alamat"
/>
<!-- Gallery Section -->
<Gallery
v-if="currentSection === 'gallery'"
:images="galleryImages"
/>
<!-- Thank You Section -->
<ThankYou
v-if="currentSection === 'thanks'"
:childName="formData.nama_lengkap"
:jsonData="formData"
/>
</main>
</div>
</template>
<script setup>
import { ref, computed, watchEffect } from 'vue'
import { useRuntimeConfig } from '#app'
// Komponen dasar
import Landing from '~/components/templates/Ultah/Landing.vue'
import Introduction from '~/components/templates/Ultah/Introduction.vue'
import Event from '~/components/templates/Ultah/Event.vue'
import Gallery from '~/components/templates/Ultah/Gallery.vue'
import ThankYou from '~/components/templates/Ultah/ThankYou.vue'
// Props dari halaman /p/[code].vue
const props = defineProps({
data: { type: Object, required: true }
})
// Runtime config
const config = useRuntimeConfig()
const backendUrl = config.public.apiBaseUrl
// Data dari backend
const formData = computed(() => props.data.form || {})
// ✅ Fungsi pembentuk URL aman untuk gambar
const photoUrl = (path) => {
if (!path) return null
if (path.startsWith('storage/') || path.startsWith('uploads/')) {
return `${backendUrl}/${path}`
}
return `${backendUrl}/storage/${path}`
}
// ✅ Ambil foto_1 dan foto_2 untuk galeri
const galleryImages = computed(() => {
return [formData.value.foto_1, formData.value.foto_2]
.filter(Boolean)
.map(photoUrl)
})
// Navigasi antar section
const currentSection = ref('landing')
const switchSection = (s) => (currentSection.value = s)
// Style untuk navigasi aktif
const navClass = (s) =>
currentSection.value === s ? 'text-orange-700 underline' : 'hover:text-orange-600'
// Debugging
watchEffect(() => {
console.log('🎂 formData Starter:', formData.value)
console.log('🖼️ galleryImages:', galleryImages.value)
})
</script>