Merge branch 'baru' of https://git.abbauf.com/Magang-2025/Undangan into baru
This commit is contained in:
commit
0b27ccd567
78
backend-baru/app/Http/Controllers/Api/RsvpApiController.php
Normal file
78
backend-baru/app/Http/Controllers/Api/RsvpApiController.php
Normal file
@ -0,0 +1,78 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Controllers\Api;
|
||||
|
||||
use App\Http\Controllers\Controller;
|
||||
use App\Models\Guest;
|
||||
use App\Models\Rsvp;
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
class RsvpApiController extends Controller
|
||||
{
|
||||
// 🔹 Simpan RSVP berdasarkan kode_invitasi (POST)
|
||||
public function store(Request $request, $kodeInvitasi)
|
||||
{
|
||||
try {
|
||||
$validated = $request->validate([
|
||||
'nama' => 'required|string|max:255',
|
||||
'pesan' => 'required|string',
|
||||
'status_kehadiran' => 'required|in:hadir,tidak_hadir,mungkin',
|
||||
]);
|
||||
|
||||
$guest = Guest::where('kode_invitasi', $kodeInvitasi)->first();
|
||||
|
||||
if (!$guest) {
|
||||
return response()->json([
|
||||
'success' => false,
|
||||
'message' => 'Kode invitasi tidak ditemukan.',
|
||||
], 404);
|
||||
}
|
||||
|
||||
$rsvp = Rsvp::create([
|
||||
'guest_id' => $guest->id,
|
||||
'nama' => $validated['nama'],
|
||||
'pesan' => $validated['pesan'],
|
||||
'status_kehadiran' => $validated['status_kehadiran'],
|
||||
]);
|
||||
|
||||
return response()->json([
|
||||
'success' => true,
|
||||
'message' => 'RSVP berhasil disimpan',
|
||||
'data' => $rsvp,
|
||||
], 201);
|
||||
|
||||
} catch (\Illuminate\Validation\ValidationException $e) {
|
||||
return response()->json([
|
||||
'success' => false,
|
||||
'message' => 'Validasi gagal',
|
||||
'errors' => $e->errors(),
|
||||
], 422);
|
||||
} catch (\Exception $e) {
|
||||
return response()->json([
|
||||
'success' => false,
|
||||
'message' => 'Gagal menyimpan RSVP.',
|
||||
], 500);
|
||||
}
|
||||
}
|
||||
|
||||
// 🔹 Ambil semua RSVP berdasarkan kode_invitasi (GET)
|
||||
public function index($kodeInvitasi)
|
||||
{
|
||||
$guest = Guest::where('kode_invitasi', $kodeInvitasi)->first();
|
||||
|
||||
if (!$guest) {
|
||||
return response()->json([
|
||||
'success' => false,
|
||||
'message' => 'Kode invitasi tidak ditemukan.',
|
||||
], 404);
|
||||
}
|
||||
|
||||
$rsvps = Rsvp::where('guest_id', $guest->id)->get();
|
||||
|
||||
return response()->json([
|
||||
'success' => true,
|
||||
'message' => 'Data RSVP ditemukan',
|
||||
'data' => $rsvps,
|
||||
]);
|
||||
}
|
||||
}
|
||||
49
backend-baru/app/Http/Controllers/RsvpController.php
Normal file
49
backend-baru/app/Http/Controllers/RsvpController.php
Normal file
@ -0,0 +1,49 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use Illuminate\Http\Request;
|
||||
use App\Models\Pelanggan;
|
||||
use App\Models\Rsvp;
|
||||
|
||||
class RsvpController extends Controller
|
||||
{
|
||||
// 🔹 Simpan data RSVP (POST)
|
||||
public function store(Request $request, $invitationCode)
|
||||
{
|
||||
$pelanggan = Pelanggan::where('invitation_code', $invitationCode)->first();
|
||||
|
||||
if (!$pelanggan) {
|
||||
return response()->json(['message' => 'Kode undangan tidak ditemukan'], 404);
|
||||
}
|
||||
|
||||
$rsvp = Rsvp::create([
|
||||
'pelanggan_id' => $pelanggan->id,
|
||||
'nama' => $request->nama,
|
||||
'pesan' => $request->pesan,
|
||||
'status_kehadiran' => $request->status_kehadiran,
|
||||
]);
|
||||
|
||||
return response()->json([
|
||||
'message' => 'RSVP berhasil disimpan',
|
||||
'data' => $rsvp,
|
||||
]);
|
||||
}
|
||||
|
||||
// 🔹 Ambil semua RSVP berdasarkan kode undangan (GET)
|
||||
public function show($invitationCode)
|
||||
{
|
||||
$pelanggan = Pelanggan::where('kode_invitasi', $invitationCode)->first();
|
||||
|
||||
if (!$pelanggan) {
|
||||
return response()->json(['message' => 'Kode undangan tidak ditemukan'], 404);
|
||||
}
|
||||
|
||||
$rsvp = Rsvp::where('pelanggan_id', $pelanggan->id)->get();
|
||||
|
||||
return response()->json([
|
||||
'message' => 'Data RSVP ditemukan',
|
||||
'data' => $rsvp
|
||||
]);
|
||||
}
|
||||
}
|
||||
@ -19,4 +19,9 @@ class Guest extends Model
|
||||
{
|
||||
return $this->belongsTo(Pelanggan::class, 'id_pelanggan');
|
||||
}
|
||||
|
||||
public function rsvps()
|
||||
{
|
||||
return $this->hasMany(Rsvp::class);
|
||||
}
|
||||
}
|
||||
|
||||
16
backend-baru/app/Models/Rsvp.php
Normal file
16
backend-baru/app/Models/Rsvp.php
Normal file
@ -0,0 +1,16 @@
|
||||
<?php
|
||||
|
||||
namespace App\Models;
|
||||
|
||||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class Rsvp extends Model
|
||||
{
|
||||
use HasFactory;
|
||||
protected $fillable = ['guest_id', 'nama', 'pesan', 'status_kehadiran'];
|
||||
|
||||
public function guest() {
|
||||
return $this->belongsTo(Guest::class);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration {
|
||||
public function up(): void
|
||||
{
|
||||
Schema::create('rsvps', function (Blueprint $table) {
|
||||
$table->id();
|
||||
$table->foreignId('guest_id')->constrained('guests')->cascadeOnDelete(); // Link ke guests table
|
||||
$table->string('nama');
|
||||
$table->text('pesan');
|
||||
$table->enum('status_kehadiran', ['hadir', 'tidak_hadir', 'mungkin'])->default('mungkin');
|
||||
$table->timestamps();
|
||||
});
|
||||
}
|
||||
|
||||
public function down(): void
|
||||
{
|
||||
Schema::dropIfExists('rsvps');
|
||||
}
|
||||
};
|
||||
@ -54,3 +54,11 @@ Route::delete('/reviews/{id}', [ReviewApiController::class, 'destroy']);
|
||||
Route::get('/guests/{code}', [GuestApiController::class, 'index']);
|
||||
Route::post('/guests', [GuestApiController::class, 'store']);
|
||||
Route::delete('/guests/{id}', [GuestApiController::class, 'destroy']);
|
||||
|
||||
use App\Http\Controllers\RsvpController;
|
||||
use App\Http\Controllers\Api\RsvpApiController;
|
||||
|
||||
// 🔹 RSVP Routes BARU
|
||||
Route::get('/rsvp/{kodeInvitasi}', [RsvpApiController::class, 'index']);
|
||||
Route::post('/rsvp/{kodeInvitasi}', [RsvpApiController::class, 'store']);
|
||||
|
||||
|
||||
@ -13,9 +13,9 @@
|
||||
class="w-full px-4 py-2 rounded-xl border-2 border-orange-400 focus:ring-2 focus:ring-orange-500"></textarea>
|
||||
<select v-model="form.attendance"
|
||||
class="w-full px-4 py-2 rounded-xl border-2 border-orange-400 focus:ring-2 focus:ring-orange-500">
|
||||
<option value="yes">Hadir</option>
|
||||
<option value="no">Tidak Hadir</option>
|
||||
<option value="maybe">Mungkin</option>
|
||||
<option value="hadir">Hadir</option>
|
||||
<option value="tidak_hadir">Tidak Hadir</option>
|
||||
<option value="mungkin">Mungkin</option>
|
||||
</select>
|
||||
<button type="submit"
|
||||
class="bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 rounded-xl font-semibold shadow-lg">
|
||||
@ -28,43 +28,119 @@
|
||||
<div class="space-y-4">
|
||||
<div v-for="msg in messages" :key="msg.id" class="bg-white rounded-xl shadow-md p-4 text-left">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-bold text-orange-800">{{ msg.name }}</span>
|
||||
<span :class="getAttendanceClass(msg.attendance)" class="text-sm px-2 py-1 rounded-lg">
|
||||
{{ msg.attendance }}
|
||||
<span class="font-bold text-orange-800">{{ msg.nama }}</span>
|
||||
<span :class="getAttendanceClass(msg.status_kehadiran)" class="text-sm px-2 py-1 rounded-lg">
|
||||
{{ formatAttendance(msg.status_kehadiran) }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-gray-700">{{ msg.message }}</p>
|
||||
<p class="text-gray-700">{{ msg.pesan }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRoute, useRuntimeConfig } from '#app';
|
||||
|
||||
const messages = ref([
|
||||
{ id: 1, name: 'Gempita', message: 'Selamat ulang tahun cipung', attendance: 'yes' },
|
||||
{ id: 2, name: 'Ayu Ting Ting', message: 'Selamat ulang tahun anak mama gigi', attendance: 'maybe' }
|
||||
])
|
||||
const route = useRoute();
|
||||
const config = useRuntimeConfig();
|
||||
const backendUrl = config.public.apiBaseUrl;
|
||||
const invitationCode = route.params.code || '';
|
||||
const guest = route.query.guest
|
||||
|
||||
const form = ref({ name: '', message: '', attendance: 'yes' })
|
||||
|
||||
const submitMessage = () => {
|
||||
if (form.value.name && form.value.message) {
|
||||
messages.value.push({
|
||||
id: Date.now(),
|
||||
...form.value
|
||||
})
|
||||
form.value = { name: '', message: '', attendance: 'yes' }
|
||||
const messages = ref([]);
|
||||
const form = ref({ name: '', message: '', attendance: 'hadir' });
|
||||
|
||||
|
||||
// Fungsi untuk mengambil daftar RSVP dari backend
|
||||
const fetchMessages = async () => {
|
||||
try {
|
||||
const response = await fetch(`${backendUrl}/api/rsvp/${invitationCode}`);
|
||||
if (!response.ok) throw new Error('Gagal mengambil data RSVP');
|
||||
|
||||
const data = await response.json();
|
||||
messages.value = data.data || [];
|
||||
} catch (error) {
|
||||
console.error('Error mengambil RSVP:', error);
|
||||
alert('Terjadi kesalahan saat mengambil data RSVP.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Fungsi untuk mengirim data RSVP ke backend
|
||||
const submitMessage = async () => {
|
||||
if (!form.value.name || !form.value.message) {
|
||||
alert('Nama dan ucapan harus diisi!');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const payload = {
|
||||
nama: form.value.name,
|
||||
pesan: form.value.message,
|
||||
status_kehadiran: form.value.attendance,
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${backendUrl}/api/rsvp/${invitationCode}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
nama: form.value.name,
|
||||
pesan: form.value.message,
|
||||
status_kehadiran: form.value.attendance,
|
||||
}),
|
||||
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Gagal menyimpan RSVP');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
messages.value.push(result.data); // Tambahkan RSVP baru ke daftar
|
||||
form.value = { name: '', message: '', attendance: 'yes' }; // Reset form
|
||||
alert(result.message); // Tampilkan pesan sukses dari backend
|
||||
} catch (error) {
|
||||
console.error('Error menyimpan RSVP:', error);
|
||||
alert('Terjadi kesalahan saat menyimpan RSVP.');
|
||||
}
|
||||
};
|
||||
|
||||
// Fungsi untuk mengatur kelas CSS berdasarkan status kehadiran
|
||||
const getAttendanceClass = (attendance) => {
|
||||
switch (attendance) {
|
||||
case 'yes': return 'bg-green-100 text-green-700'
|
||||
case 'no': return 'bg-red-100 text-red-700'
|
||||
case 'maybe': return 'bg-yellow-100 text-yellow-700'
|
||||
default: return 'bg-gray-100 text-gray-700'
|
||||
case 'yes':
|
||||
return 'bg-green-100 text-green-700';
|
||||
case 'no':
|
||||
return 'bg-red-100 text-red-700';
|
||||
case 'maybe':
|
||||
return 'bg-yellow-100 text-yellow-700';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-700';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
};
|
||||
|
||||
// Fungsi untuk memformat teks kehadiran
|
||||
const formatAttendance = (attendance) => {
|
||||
switch (attendance) {
|
||||
case 'yes':
|
||||
return 'Hadir';
|
||||
case 'no':
|
||||
return 'Tidak Hadir';
|
||||
case 'maybe':
|
||||
return 'Mungkin';
|
||||
default:
|
||||
return attendance;
|
||||
}
|
||||
};
|
||||
|
||||
// Panggil fetchMessages saat komponen dimuat
|
||||
onMounted(() => {
|
||||
fetchMessages();
|
||||
});
|
||||
</script>
|
||||
@ -1,64 +1,76 @@
|
||||
<template>
|
||||
<div class="p-6 text-center max-w-2xl mx-auto relative">
|
||||
<h2
|
||||
class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8"
|
||||
>
|
||||
<h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8">
|
||||
💌 Buku Tamu 💌
|
||||
</h2>
|
||||
|
||||
<!-- 🎈 Balon Kiri -->
|
||||
<img
|
||||
src="/balloon2.png"
|
||||
alt="Balloons Left"
|
||||
class="absolute w-32 md:w-40 -top-12 -left-7.5 animate-swing-top pointer-events-none select-none"
|
||||
/>
|
||||
<img src="/balloon2.png" alt="Balloons Left"
|
||||
class="absolute w-32 md:w-40 -top-12 -left-7.5 animate-swing-top pointer-events-none select-none" />
|
||||
|
||||
<!-- 🎈 Balon Kanan -->
|
||||
<img
|
||||
src="/balloon2.png"
|
||||
alt="Balloons Right"
|
||||
class="absolute w-32 md:w-40 -top-12 -right-10.5 animate-swing-top pointer-events-none select-none"
|
||||
/>
|
||||
<img src="/balloon2.png" alt="Balloons Right"
|
||||
class="absolute w-32 md:w-40 -top-12 -right-10.5 animate-swing-top pointer-events-none select-none" />
|
||||
|
||||
<!-- 💌 Card Utama -->
|
||||
<div
|
||||
class="bg-white/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-yellow-100 mb-8 relative z-10"
|
||||
>
|
||||
<!-- 💌 Form RSVP -->
|
||||
<div class="bg-white/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-yellow-100 mb-8 relative z-10">
|
||||
<form @submit.prevent="submitMessage" class="space-y-4">
|
||||
<textarea
|
||||
v-model="newMessage"
|
||||
class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300 resize-none"
|
||||
rows="4"
|
||||
placeholder="Tulis ucapan untuk {{ guestName }}..."
|
||||
></textarea>
|
||||
<!-- Nama Tamu -->
|
||||
<div>
|
||||
<input v-model="form.name" type="text" :placeholder="guest || 'Nama Lengkap Tamu'"
|
||||
class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300"
|
||||
:disabled="!!guest" />
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white px-8 py-3 rounded-full font-semibold shadow-lg transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
:disabled="!newMessage.trim()"
|
||||
>
|
||||
✨ Kirim Ucapan
|
||||
<!-- Pesan/Ucapan -->
|
||||
<div>
|
||||
<textarea v-model="form.message" rows="4" placeholder="Tulis ucapan dan harapan terbaik..."
|
||||
class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300 resize-none"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Status Kehadiran -->
|
||||
<div>
|
||||
<select v-model="form.attendance"
|
||||
class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300 appearance-none bg-white">
|
||||
<option value="hadir">✅ Saya Hadir</option>
|
||||
<option value="tidak_hadir">❌ Tidak Hadir</option>
|
||||
<option value="mungkin">🤔 Mungkin Hadir</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div v-if="errorMessage" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-xl">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button type="submit" :disabled="!form.name.trim() || !form.message.trim() || submitLoading"
|
||||
class="bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white px-8 py-4 rounded-full font-semibold shadow-lg transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed w-full text-lg">
|
||||
✨ {{ submitLoading ? 'Mengirim...' : 'Kirim RSVP' }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 💬 Daftar Pesan -->
|
||||
<div class="space-y-4 max-h-96 overflow-y-auto px-2 relative z-10">
|
||||
<div
|
||||
v-for="(msg, i) in messages"
|
||||
:key="i"
|
||||
class="bg-white/80 backdrop-blur-md p-6 rounded-2xl shadow-lg border-l-4 border-orange-400 transform hover:scale-105 transition-all duration-300"
|
||||
>
|
||||
<div class="flex items-start space-x-3">
|
||||
<div class="bg-gradient-to-r from-orange-500 to-yellow-500 p-2 rounded-full">
|
||||
<span class="text-white text-sm">💬</span>
|
||||
</div>
|
||||
<p class="text-gray-700 text-left flex-1">{{ msg }}</p>
|
||||
<div v-if="fetchLoading" class="flex items-center justify-center py-12">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-t-4 border-orange-500 mr-4"></div>
|
||||
<span class="text-2xl font-semibold text-orange-700">Memuat ucapan...</span>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-4 max-h-96 overflow-y-auto px-2 relative z-10">
|
||||
<div v-for="(msg, i) in messages" :key="msg.id || i"
|
||||
class="bg-white/80 backdrop-blur-md p-6 rounded-2xl shadow-lg border-l-4 border-orange-400 transform hover:scale-105 transition-all duration-300">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<span class="font-bold text-orange-800 text-lg">{{ msg.nama }}</span>
|
||||
<span :class="getAttendanceClass(msg.status_kehadiran)" class="px-3 py-1 rounded-full text-sm font-semibold">
|
||||
{{ formatAttendance(msg.status_kehadiran) }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-gray-700 text-left">{{ msg.pesan }}</p>
|
||||
</div>
|
||||
|
||||
<div v-if="messages.length === 0" class="bg-white/60 p-8 rounded-2xl">
|
||||
<p class="text-gray-600">
|
||||
<p class="text-gray-600 text-lg">
|
||||
Belum ada ucapan. Jadilah yang pertama mengucapkan!
|
||||
</p>
|
||||
</div>
|
||||
@ -67,21 +79,109 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRoute, useRuntimeConfig } from '#app';
|
||||
|
||||
const props = defineProps({
|
||||
guestName: String,
|
||||
messages: Array
|
||||
})
|
||||
const route = useRoute();
|
||||
const config = useRuntimeConfig();
|
||||
const backendUrl = config.public.apiBaseUrl;
|
||||
const invitationCode = route.params.code || '';
|
||||
const guest = route.query.guest
|
||||
|
||||
const emit = defineEmits(['addMessage'])
|
||||
const newMessage = ref('')
|
||||
|
||||
function submitMessage() {
|
||||
if (!newMessage.value.trim()) return
|
||||
emit('addMessage', newMessage.value)
|
||||
newMessage.value = ''
|
||||
}
|
||||
const messages = ref([]);
|
||||
const form = ref({ name: '', message: '', attendance: 'hadir' });
|
||||
|
||||
|
||||
// Fungsi untuk mengambil daftar RSVP dari backend
|
||||
const fetchMessages = async () => {
|
||||
try {
|
||||
const response = await fetch(`${backendUrl}/api/rsvp/${invitationCode}`);
|
||||
if (!response.ok) throw new Error('Gagal mengambil data RSVP');
|
||||
|
||||
const data = await response.json();
|
||||
messages.value = data.data || [];
|
||||
} catch (error) {
|
||||
console.error('Error mengambil RSVP:', error);
|
||||
alert('Terjadi kesalahan saat mengambil data RSVP.');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Fungsi untuk mengirim data RSVP ke backend
|
||||
const submitMessage = async () => {
|
||||
if (!form.value.name || !form.value.message) {
|
||||
alert('Nama dan ucapan harus diisi!');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const payload = {
|
||||
nama: form.value.name,
|
||||
pesan: form.value.message,
|
||||
status_kehadiran: form.value.attendance,
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${backendUrl}/api/rsvp/${invitationCode}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
nama: form.value.name,
|
||||
pesan: form.value.message,
|
||||
status_kehadiran: form.value.attendance,
|
||||
}),
|
||||
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Gagal menyimpan RSVP');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
messages.value.push(result.data); // Tambahkan RSVP baru ke daftar
|
||||
form.value = { name: '', message: '', attendance: 'yes' }; // Reset form
|
||||
alert(result.message); // Tampilkan pesan sukses dari backend
|
||||
} catch (error) {
|
||||
console.error('Error menyimpan RSVP:', error);
|
||||
alert('Terjadi kesalahan saat menyimpan RSVP.');
|
||||
}
|
||||
};
|
||||
|
||||
// Fungsi untuk mengatur kelas CSS berdasarkan status kehadiran
|
||||
const getAttendanceClass = (attendance) => {
|
||||
switch (attendance) {
|
||||
case 'yes':
|
||||
return 'bg-green-100 text-green-700';
|
||||
case 'no':
|
||||
return 'bg-red-100 text-red-700';
|
||||
case 'maybe':
|
||||
return 'bg-yellow-100 text-yellow-700';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-700';
|
||||
}
|
||||
};
|
||||
|
||||
// Fungsi untuk memformat teks kehadiran
|
||||
const formatAttendance = (attendance) => {
|
||||
switch (attendance) {
|
||||
case 'yes':
|
||||
return 'Hadir';
|
||||
case 'no':
|
||||
return 'Tidak Hadir';
|
||||
case 'maybe':
|
||||
return 'Mungkin';
|
||||
default:
|
||||
return attendance;
|
||||
}
|
||||
};
|
||||
|
||||
// Panggil fetchMessages saat komponen dimuat
|
||||
onMounted(() => {
|
||||
fetchMessages();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -89,9 +189,11 @@ function submitMessage() {
|
||||
0% {
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
@ -99,6 +201,7 @@ function submitMessage() {
|
||||
|
||||
.animate-swing-top {
|
||||
animation: swing-top 4s ease-in-out infinite;
|
||||
transform-origin: bottom center; /* ✅ Balon berayun dari bawah (tali diam) */
|
||||
transform-origin: bottom center;
|
||||
/* ✅ Balon berayun dari bawah (tali diam) */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -92,8 +92,28 @@
|
||||
>
|
||||
<td class="p-3 text-gray-700">{{ index + 1 }}</td>
|
||||
<td class="p-3 text-gray-800 font-medium">{{ guest.nama_tamu }}</td>
|
||||
<td class="p-3 text-gray-600 font-mono text-sm">
|
||||
<a :href="`${config.public.baseUrl}/p/${guest.kode_invitasi}`" target="_blank">{{ guest.kode_invitasi }}</a>
|
||||
<td class="p-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<a
|
||||
:href="`${config.public.baseUrl}/p/${guest.kode_invitasi}`"
|
||||
target="_blank"
|
||||
class="text-gray-600 font-mono text-sm hover:text-blue-600 hover:underline transition"
|
||||
@click.stop
|
||||
>
|
||||
{{ guest.kode_invitasi }}
|
||||
</a>
|
||||
<button
|
||||
@click="shareInvitationLink(guest.kode_invitasi)"
|
||||
class="bg-indigo-500 hover:bg-indigo-600 text-white px-3 py-1 rounded-lg text-xs font-medium transition shadow-sm whitespace-nowrap flex items-center gap-1"
|
||||
:disabled="loading"
|
||||
title="Bagikan Link Invitasi"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path>
|
||||
</svg>
|
||||
Share
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-3 text-center">
|
||||
<button
|
||||
@ -133,6 +153,60 @@ const backendUrl = config.public.apiBaseUrl;
|
||||
// Runtime Config
|
||||
const { public: { apiBase } } = useRuntimeConfig();
|
||||
|
||||
// Share invitation link
|
||||
const shareInvitationLink = async (kodeInvitasi) => {
|
||||
const inviteUrl = `${config.public.baseUrl}/p/${kodeInvitasi}`;
|
||||
|
||||
if (navigator.share) {
|
||||
// Native Web Share API (mobile)
|
||||
try {
|
||||
await navigator.share({
|
||||
title: 'Undangan Pernikahan',
|
||||
text: 'Silakan buka undangan pernikahan saya',
|
||||
url: inviteUrl,
|
||||
});
|
||||
} catch (error) {
|
||||
if (error.name !== 'AbortError') {
|
||||
copyToClipboard(inviteUrl);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Fallback to copy to clipboard (desktop)
|
||||
copyToClipboard(inviteUrl);
|
||||
}
|
||||
};
|
||||
|
||||
// Copy to clipboard function
|
||||
const copyToClipboard = (text) => {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
// Show temporary success message
|
||||
const originalText = successMessage.value;
|
||||
successMessage.value = 'Link undangan berhasil disalin!';
|
||||
setTimeout(() => {
|
||||
successMessage.value = originalText;
|
||||
}, 2000);
|
||||
}).catch((err) => {
|
||||
console.error('Failed to copy: ', err);
|
||||
// Fallback for older browsers
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
const originalText = successMessage.value;
|
||||
successMessage.value = 'Link undangan berhasil disalin!';
|
||||
setTimeout(() => {
|
||||
successMessage.value = originalText;
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
console.error('Fallback copy failed: ', err);
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
});
|
||||
};
|
||||
|
||||
// Fetch guests data based on customer code
|
||||
const handleFetchGuests = async () => {
|
||||
if (!kodePelanggan.value.trim()) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user