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

rsvp fix

Browse Source
This commit is contained in:
Farhaan4 2025-10-27 15:56:33 +07:00
parent fc6c4a214a
commit bda7f996f4
10 changed files with 289 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
backend-baru/app/Http/Controllers/Api/RsvpApiController.php
View File

@ -30,6 +30,7 @@ class RsvpApiController extends Controller
$rsvp = Rsvp::create([ $rsvp = Rsvp::create([
'guest_id' => $guest->id, 'guest_id' => $guest->id,
'pelanggan_id' => $guest -> id_pelanggan,
'nama' => $validated['nama'], 'nama' => $validated['nama'],
'pesan' => $validated['pesan'], 'pesan' => $validated['pesan'],
'status_kehadiran' => $validated['status_kehadiran'], 'status_kehadiran' => $validated['status_kehadiran'],
@ -41,16 +42,11 @@ class RsvpApiController extends Controller
'data' => $rsvp, 'data' => $rsvp,
], 201); ], 201);
} catch (\Illuminate\Validation\ValidationException $e) {
return response()->json([
'success' => false,
'message' => 'Validasi gagal',
'errors' => $e->errors(),
], 422);
} catch (\Exception $e) { } catch (\Exception $e) {
return response()->json([ return response()->json([
'success' => false, 'success' => false,
'message' => 'Gagal menyimpan RSVP.', 'message' => 'Gagal menyimpan RSVP.',
'error' => $e->getMessage(),
], 500); ], 500);
} }
} }

9
backend-baru/app/Models/Pelanggan.php
View File

@ -39,14 +39,7 @@ class Pelanggan extends Model
public function rsvp() public function rsvp()
{ {
return $this->hasManyThrough( return $this->hasMany(Rsvp::class, 'pelanggan_id');
Rsvp::class,
Guest::class,
'id_pelanggan',
'guest_id',
'id',
'id'
);
} }
} }

8
backend-baru/app/Models/Rsvp.php
View File

@ -8,9 +8,15 @@ use Illuminate\Database\Eloquent\Model;
class Rsvp extends Model class Rsvp extends Model
{ {
use HasFactory; use HasFactory;
protected $fillable = ['guest_id', 'nama', 'pesan', 'status_kehadiran']; protected $fillable = ['guest_id', 'nama', 'pesan', 'status_kehadiran','pelanggan_id'];
public function guest() { public function guest() {
return $this->belongsTo(Guest::class); return $this->belongsTo(Guest::class);
} }
public function pelanggan()
{
return $this->belongsTo(Pelanggan::class, 'pelanggan_id');
}
} }

2
backend-baru/config/cors.php
View File

@ -19,7 +19,7 @@ return [
'allowed_methods' => ['*'], 'allowed_methods' => ['*'],
'allowed_origins' => ['*'], 'allowed_origins' => ['http://localhost:3001'],
'allowed_origins_patterns' => [], 'allowed_origins_patterns' => [],

20
backend-baru/database/factories/RsvpFactory.php Normal file
View File

@ -0,0 +1,20 @@
<?php
namespace Database\Factories;
use App\Models\Rsvp;
use Illuminate\Database\Eloquent\Factories\Factory;
class RsvpFactory extends Factory
{
protected $model = Rsvp::class;
public function definition(): array
{
return [
'nama' => $this->faker->name(),
'pesan' => $this->faker->sentence(8),
'status_kehadiran' => $this->faker->randomElement(['hadir', 'tidak_hadir', 'mungkin']),
];
}
}

1
backend-baru/database/migrations/2025_10_23_032107_create_rsvps_tables.php
View File

@ -10,6 +10,7 @@ return new class extends Migration {
Schema::create('rsvps', function (Blueprint $table) { Schema::create('rsvps', function (Blueprint $table) {
$table->id(); $table->id();
$table->foreignId('guest_id')->constrained('guests')->cascadeOnDelete(); // Link ke guests table $table->foreignId('guest_id')->constrained('guests')->cascadeOnDelete(); // Link ke guests table
$table->foreignId('pelanggan_id')->constrained('pelanggans')->cascadeOnDelete(); // Link ke guests table
$table->string('nama'); $table->string('nama');
$table->text('pesan'); $table->text('pesan');
$table->enum('status_kehadiran', ['hadir', 'tidak_hadir', 'mungkin'])->default('mungkin'); $table->enum('status_kehadiran', ['hadir', 'tidak_hadir', 'mungkin'])->default('mungkin');

11
backend-baru/database/seeders/PelangganSeeder.php
View File

@ -2,6 +2,7 @@
namespace Database\Seeders; namespace Database\Seeders;
use App\Models\Rsvp;
use Illuminate\Database\Seeder; use Illuminate\Database\Seeder;
use App\Models\Pelanggan; use App\Models\Pelanggan;
use Illuminate\Support\Str; use Illuminate\Support\Str;
@ -18,9 +19,17 @@ class PelangganSeeder extends Seeder
'id_pelanggan' => $item->id, 'id_pelanggan' => $item->id,
])->toArray(); ])->toArray();
$guests = array_merge($guests, $guestData); $guests = array_merge($guests, $guestData);
} }
\App\Models\Guest::insert($guests); \App\Models\Guest::insert($guests);
foreach ($pelanggan as $item) {
$guest = $item->guests()->inRandomOrder()->first();
Rsvp::factory(3)->create([
"pelanggan_id"=>$item->id,
"guest_id"=>$guest
]);
}
// $pelanggans = [ // $pelanggans = [
// [ // [
// 'nama_pemesan' => 'Arief Dwi Wicaksono', // 'nama_pemesan' => 'Arief Dwi Wicaksono',

2
backend-baru/routes/api.php
View File

@ -30,7 +30,7 @@ Route::get('/pelanggans', [PelangganApiController::class, 'index']);
// Ambil pelanggan berdasarkan ID // Ambil pelanggan berdasarkan ID
Route::get('/pelanggans/id/{id}', [PelangganApiController::class, 'show']); Route::get('/pelanggans/id/{id}', [PelangganApiController::class, 'show']);
// Ambil pelanggan berdasarkan KODE UNDANGAN // Ambil undangan berdasarkan KODE UNDANGAN
Route::get('/pelanggans/code/{code}', [GuestApiController::class, 'getByInvitationCode']); Route::get('/pelanggans/code/{code}', [GuestApiController::class, 'getByInvitationCode']);
// Simpan pesanan baru // Simpan pesanan baru

56
proyek-frontend/app/components/templates/Ultah/GuestBook.vue
View File

@ -47,27 +47,20 @@ const route = useRoute();
const config = useRuntimeConfig(); const config = useRuntimeConfig();
const backendUrl = config.public.apiBaseUrl; const backendUrl = config.public.apiBaseUrl;
const invitationCode = route.params.code || ''; const invitationCode = route.params.code || '';
const guest = route.query.guest const guest = route.query.code
const props = defineProps({
const messages = ref([]); messages: {
const form = ref({ name: '', message: '', attendance: 'hadir' }); type: Array,
required: false,
default: () => []
// 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.');
} }
}; })
const messages = ref([...props.messages]) // duplikat supaya bisa diubah
const form = ref({ name: '', message: '', attendance: 'hadir' });
// Fungsi untuk mengirim data RSVP ke backend // Fungsi untuk mengirim data RSVP ke backend
const submitMessage = async () => { const submitMessage = async () => {
@ -84,6 +77,7 @@ const submitMessage = async () => {
} }
try { try {
console.log('POST to:', `${backendUrl}/api/rsvp/${invitationCode}`, payload)
const response = await fetch(`${backendUrl}/api/rsvp/${invitationCode}`, { const response = await fetch(`${backendUrl}/api/rsvp/${invitationCode}`, {
method: 'POST', method: 'POST',
headers: { headers: {
@ -97,13 +91,14 @@ const submitMessage = async () => {
}); });
if (!response.ok) { if (!response.ok) {
throw new Error('Gagal menyimpan RSVP'); console.log(response)
throw new Error(`Gagal menyimpan RSVP,${response.errors}`);
} }
const result = await response.json(); const result = await response.json();
messages.value.push(result.data); // Tambahkan RSVP baru ke daftar messages.value.push(result.data); // Tambahkan RSVP baru ke daftar
form.value = { name: '', message: '', attendance: 'yes' }; // Reset form form.value = { name: '', message: '', attendance: 'hadir' };
alert(result.message); // Tampilkan pesan sukses dari backend alert(result.message); // Tampilkan pesan sukses dari backend
} catch (error) { } catch (error) {
console.error('Error menyimpan RSVP:', error); console.error('Error menyimpan RSVP:', error);
@ -114,11 +109,11 @@ const submitMessage = async () => {
// Fungsi untuk mengatur kelas CSS berdasarkan status kehadiran // Fungsi untuk mengatur kelas CSS berdasarkan status kehadiran
const getAttendanceClass = (attendance) => { const getAttendanceClass = (attendance) => {
switch (attendance) { switch (attendance) {
case 'yes': case 'iya':
return 'bg-green-100 text-green-700'; return 'bg-green-100 text-green-700';
case 'no': case 'tidak':
return 'bg-red-100 text-red-700'; return 'bg-red-100 text-red-700';
case 'maybe': case 'mungkin':
return 'bg-yellow-100 text-yellow-700'; return 'bg-yellow-100 text-yellow-700';
default: default:
return 'bg-gray-100 text-gray-700'; return 'bg-gray-100 text-gray-700';
@ -128,19 +123,14 @@ const getAttendanceClass = (attendance) => {
// Fungsi untuk memformat teks kehadiran // Fungsi untuk memformat teks kehadiran
const formatAttendance = (attendance) => { const formatAttendance = (attendance) => {
switch (attendance) { switch (attendance) {
case 'yes': case 'iya':
return 'Hadir'; return 'Hadir';
case 'no': case 'tidak':
return 'Tidak Hadir'; return 'Tidak Hadir';
case 'maybe': case 'mungkin':
return 'Mungkin'; return 'Mungkin';
default: default:
return attendance; return attendance;
} }
}; };
// Panggil fetchMessages saat komponen dimuat
onMounted(() => {
fetchMessages();
});
</script> </script>

373
proyek-frontend/app/pages/p/daftar-tamu.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="min-h-screen bg-gray-100 flex items-center justify-center p-4"> <div class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
<div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-3xl"> <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-5xl">
<h1 class="text-2xl font-bold mb-6 text-center text-gray-800"> <h1 class="text-2xl font-bold mb-6 text-center text-gray-800">
Manajemen Daftar Tamu Manajemen Daftar Tamu & RSVP
</h1> </h1>
<!-- Input Kode Pelanggan --> <!-- Input Kode Pelanggan -->
@ -28,16 +28,39 @@
</p> </p>
</div> </div>
<!-- Area Data Tamu (Muncul setelah fetch berhasil) --> <!-- Area Data Tamu -->
<div v-if="dataLoaded"> <div v-if="dataLoaded">
<!-- Info Kode Pelanggan --> <!-- Info Kode Pelanggan -->
<div class="bg-blue-50 p-3 rounded-lg mb-6"> <div class="bg-blue-50 p-3 rounded-lg mb-6">
<p class="text-sm text-gray-700"> <p class="text-sm text-gray-700">
<span class="font-semibold">Kode Pelanggan:</span> <span class="font-semibold">Kode Pelanggan:</span>
{{ kodePelanggan.toUpperCase() }} {{ kodePelanggan.toUpperCase() }}
</p> </p>
</div> </div>
<!-- Ringkasan RSVP (4 kolom) -->
<div class="bg-green-50 p-4 rounded-lg mb-6 border border-green-200">
<h3 class="font-semibold text-green-800 mb-2">Ringkasan RSVP</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
<div>
<p class="text-gray-600">Hadir</p>
<p class="font-bold text-green-600">{{ rsvpSummary.hadir }}</p>
</div>
<div>
<p class="text-gray-600">Tidak Hadir</p>
<p class="font-bold text-red-600">{{ rsvpSummary.tidak_hadir }}</p>
</div>
<div>
<p class="text-gray-600">Mungkin</p>
<p class="font-bold text-yellow-600">{{ rsvpSummary.mungkin }}</p>
</div>
<div>
<p class="text-gray-600">Belum RSVP</p>
<p class="font-bold text-gray-600">{{ rsvpSummary.belum_rsvp }}</p>
</div>
</div>
</div>
<!-- Form Tambah Tamu --> <!-- Form Tambah Tamu -->
<form @submit.prevent="handleAddGuest" class="mb-6"> <form @submit.prevent="handleAddGuest" class="mb-6">
<label class="block text-sm font-semibold text-gray-700 mb-2"> <label class="block text-sm font-semibold text-gray-700 mb-2">
@ -60,7 +83,7 @@
</button> </button>
</div> </div>
</form> </form>
<p v-if="errorMessage && dataLoaded" class="text-red-500 mb-4 text-sm"> <p v-if="errorMessage && dataLoaded" class="text-red-500 mb-4 text-sm">
{{ errorMessage }} {{ errorMessage }}
</p> </p>
@ -73,29 +96,30 @@
<h2 class="text-lg font-semibold text-gray-800 mb-3"> <h2 class="text-lg font-semibold text-gray-800 mb-3">
Daftar Tamu ({{ guests.length }}) Daftar Tamu ({{ guests.length }})
</h2> </h2>
<div v-if="guests.length > 0" class="overflow-x-auto rounded-lg border border-gray-200"> <div v-if="guests.length > 0" class="overflow-x-auto rounded-lg border border-gray-200 mb-10">
<table class="w-full"> <table class="w-full">
<thead> <thead>
<tr class="bg-gray-100 border-b border-gray-200"> <tr class="bg-gray-100 border-b border-gray-200">
<th class="p-3 text-left font-semibold text-gray-700">No</th> <th class="p-3 text-left font-semibold text-gray-700">No</th>
<th class="p-3 text-left font-semibold text-gray-700">Nama Tamu</th> <th class="p-3 text-left font-semibold text-gray-700">Nama Tamu</th>
<th class="p-3 text-left font-semibold text-gray-700">Kode Invitasi</th> <th class="p-3 text-left font-semibold text-gray-700">Kode Invitasi</th>
<th class="p-3 text-left font-semibold text-gray-700">Status RSVP</th>
<th class="p-3 text-center font-semibold text-gray-700">Aksi</th> <th class="p-3 text-center font-semibold text-gray-700">Aksi</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr <tr
v-for="(guest, index) in guests" v-for="(guest, index) in guests"
:key="guest.id" :key="guest.id"
class="border-b border-gray-100 hover:bg-gray-50 transition" class="border-b border-gray-100 hover:bg-gray-50 transition"
> >
<td class="p-3 text-gray-700">{{ index + 1 }}</td> <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-800 font-medium">{{ guest.nama_tamu }}</td>
<td class="p-3"> <td class="p-3">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<a <a
:href="`${config.public.baseUrl}/p/${guest.kode_invitasi}`" :href="`${config.public.baseUrl}/p/${guest.kode_invitasi}`"
target="_blank" target="_blank"
class="text-gray-600 font-mono text-sm hover:text-blue-600 hover:underline transition" class="text-gray-600 font-mono text-sm hover:text-blue-600 hover:underline transition"
@click.stop @click.stop
@ -106,15 +130,31 @@
@click="shareInvitationLink(guest.kode_invitasi)" @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" 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" :disabled="loading"
title="Bagikan Link Invitasi" title="Bagikan Link"
> >
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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> <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"/>
</svg> </svg>
Share Share
</button> </button>
</div> </div>
</td> </td>
<td class="p-3">
<span
v-if="guest.rsvp"
:class="{
'px-3 py-1 rounded-full text-xs font-medium': true,
'bg-green-100 text-green-800': guest.rsvp.status_kehadiran === 'hadir',
'bg-red-100 text-red-800': guest.rsvp.status_kehadiran === 'tidak_hadir',
'bg-yellow-100 text-yellow-800': guest.rsvp.status_kehadiran === 'mungkin'
}"
>
{{ guest.rsvp.status_kehadiran === 'hadir' ? 'Hadir' :
guest.rsvp.status_kehadiran === 'tidak_hadir' ? 'Tidak Hadir' : 'Mungkin' }}
</span>
<span v-else class="text-gray-400 text-xs italic">Belum RSVP</span>
</td>
<td class="p-3 text-center"> <td class="p-3 text-center">
<button <button
@click="handleDeleteGuest(guest.id)" @click="handleDeleteGuest(guest.id)"
@ -128,9 +168,64 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div v-else class="text-center py-8 bg-gray-50 rounded-lg border border-gray-200"> </div>
<p class="text-gray-500">Belum ada tamu yang ditambahkan.</p>
<p class="text-gray-400 text-sm mt-2">Tambahkan tamu pertama menggunakan form di atas.</p> <!-- Daftar RSVP Lengkap -->
<div class="mt-10">
<h2 class="text-lg font-semibold text-gray-800 mb-3">
Daftar RSVP ({{ allRsvps.length }})
</h2>
<div v-if="allRsvps.length > 0" class="overflow-x-auto rounded-lg border border-gray-200">
<table class="w-full text-sm">
<thead>
<tr class="bg-indigo-50 border-b border-indigo-200">
<th class="p-3 text-left font-semibold text-indigo-700">No</th>
<th class="p-3 text-left font-semibold text-indigo-700">Nama (RSVP)</th>
<th class="p-3 text-left font-semibold text-indigo-700">Nama Tamu (Undangan)</th>
<th class="p-3 text-left font-semibold text-indigo-700">Kode</th>
<th class="p-3 text-left font-semibold text-indigo-700">Status</th>
<th class="p-3 text-left font-semibold text-indigo-700">Ucapan</th>
<th class="p-3 text-left font-semibold text-indigo-700">Waktu</th>
</tr>
</thead>
<tbody>
<tr
v-for="(rsvp, index) in allRsvps"
:key="rsvp.id"
class="border-b border-gray-100 hover:bg-indigo-50 transition"
>
<td class="p-3 text-gray-700">{{ index + 1 }}</td>
<td class="p-3 font-medium text-gray-800">{{ rsvp.nama || '-' }}</td>
<td class="p-3 text-gray-600 italic">{{ rsvp.nama_tamu || '-' }}</td>
<td class="p-3">
<code class="text-xs bg-gray-100 px-2 py-1 rounded">{{ rsvp.kode_invitasi }}</code>
</td>
<td class="p-3">
<span
:class="{
'px-2 py-1 rounded-full text-xs font-medium': true,
'bg-green-100 text-green-800': rsvp.status_kehadiran === 'hadir',
'bg-red-100 text-red-800': rsvp.status_kehadiran === 'tidak_hadir',
'bg-yellow-100 text-yellow-800': rsvp.status_kehadiran === 'mungkin'
}"
>
{{ rsvp.status_kehadiran === 'hadir' ? 'Hadir' :
rsvp.status_kehadiran === 'tidak_hadir' ? 'Tidak Hadir' : 'Mungkin' }}
</span>
</td>
<td class="p-3 text-gray-600 max-w-xs truncate" :title="rsvp.pesan">
{{ rsvp.pesan || '-' }}
</td>
<td class="p-3 text-xs text-gray-500">
{{ formatDate(rsvp.created_at) }}
</td>
</tr>
</tbody>
</table>
</div>
<div v-else class="text-center py-8 bg-indigo-50 rounded-lg border border-indigo-200">
<p class="text-indigo-600 font-medium">Belum ada RSVP dari tamu.</p>
</div> </div>
</div> </div>
</div> </div>
@ -139,7 +234,7 @@
</template> </template>
<script setup> <script setup>
// State Management // ---------- STATE ----------
const kodePelanggan = ref(''); const kodePelanggan = ref('');
const dataLoaded = ref(false); const dataLoaded = ref(false);
const guests = ref([]); const guests = ref([]);
@ -147,67 +242,63 @@ const namaTamu = ref('');
const errorMessage = ref(''); const errorMessage = ref('');
const successMessage = ref(''); const successMessage = ref('');
const loading = ref(false); const loading = ref(false);
const rsvpSummary = ref({ hadir: 0, tidak_hadir: 0, mungkin: 0, belum_rsvp: 0 });
const allRsvps = ref([]);
const config = useRuntimeConfig(); const config = useRuntimeConfig();
const backendUrl = config.public.apiBaseUrl; const backendUrl = config.public.apiBaseUrl;
// Runtime Config // ---------- UTILS ----------
const { public: { apiBase } } = useRuntimeConfig(); const formatDate = (dateString) => {
if (!dateString) return '-';
// Share invitation link return new Date(dateString).toLocaleString('id-ID', {
const shareInvitationLink = async (kodeInvitasi) => { day: '2-digit', month: 'short', year: 'numeric',
const inviteUrl = `${config.public.baseUrl}/p/${kodeInvitasi}`; hour: '2-digit', minute: '2-digit'
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 shareInvitationLink = async (kodeInvitasi) => {
const url = `${config.public.baseUrl}/p/${kodeInvitasi}`;
if (navigator.share) {
try { await navigator.share({ title: 'Undangan', url }); }
catch (e) { if (e.name !== 'AbortError') copyToClipboard(url); }
} else copyToClipboard(url);
};
const copyToClipboard = (text) => {
navigator.clipboard.writeText(text).then(() => {
const old = successMessage.value;
successMessage.value = 'Link disalin!';
setTimeout(() => successMessage.value = old, 2000);
});
};
// ---------- FETCH RSVP PER KODE ----------
const fetchRsvpForGuest = async (kodeInvitasi) => {
try {
const res = await $fetch(`${backendUrl}/api/rsvp/${kodeInvitasi}`, { method: 'GET' });
return res.success && res.data?.length ? res.data[0] : null;
} catch (e) {
console.error('RSVP fetch error:', e);
return null;
}
};
// ---------- FETCH SEMUA RSVP (hanya yang ada) ----------
const fetchAllRsvps = async () => {
const list = [];
for (const g of guests.value) {
const r = await fetchRsvpForGuest(g.kode_invitasi);
if (r) {
r.nama_tamu = g.nama_tamu; // tambahkan nama tamu
r.kode_invitasi = g.kode_invitasi; // tambahkan kode
list.push(r);
}
}
allRsvps.value = list.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
};
// ---------- FETCH GUESTS + COUNTER ----------
const handleFetchGuests = async () => { const handleFetchGuests = async () => {
if (!kodePelanggan.value.trim()) { if (!kodePelanggan.value.trim()) {
errorMessage.value = 'Kode pelanggan harus diisi.'; errorMessage.value = 'Kode pelanggan harus diisi.';
@ -217,99 +308,81 @@ const handleFetchGuests = async () => {
loading.value = true; loading.value = true;
errorMessage.value = ''; errorMessage.value = '';
successMessage.value = ''; successMessage.value = '';
rsvpSummary.value = { hadir: 0, tidak_hadir: 0, mungkin: 0, belum_rsvp: 0 };
allRsvps.value = [];
try { try {
const response = await $fetch(`${backendUrl}/api/guests/${kodePelanggan.value.toUpperCase()}`, { const res = await $fetch(`${backendUrl}/api/guests/${kodePelanggan.value.toUpperCase()}`, { method: 'GET' });
method: 'GET', if (!res.success) throw new Error(res.message || 'Gagal mengambil data tamu');
});
const raw = res.data || [];
if (response.success) { let hadir = 0, tidak_hadir = 0, mungkin = 0;
dataLoaded.value = true;
guests.value = response.data || []; const guestsWithRsvp = await Promise.all(
successMessage.value = 'Data tamu berhasil dimuat!'; raw.map(async (g) => {
setTimeout(() => { successMessage.value = ''; }, 3000); const r = await fetchRsvpForGuest(g.kode_invitasi);
} else { g.rsvp = r;
errorMessage.value = response.message || 'Gagal mengambil daftar tamu.';
dataLoaded.value = false; if (r?.status_kehadiran) {
} if (r.status_kehadiran === 'hadir') hadir++;
} catch (error) { else if (r.status_kehadiran === 'tidak_hadir') tidak_hadir++;
console.error('Fetch guests error:', error); else if (r.status_kehadiran === 'mungkin') mungkin++;
errorMessage.value = error.data?.message || 'Pelanggan tidak ditemukan atau pesanan belum diterima.'; }
return g;
})
);
const total = raw.length;
const belum = total - hadir - tidak_hadir - mungkin;
guests.value = guestsWithRsvp;
rsvpSummary.value = { hadir, tidak_hadir, mungkin, belum_rsvp: belum };
await fetchAllRsvps();
dataLoaded.value = true;
successMessage.value = 'Data tamu & RSVP berhasil dimuat!';
setTimeout(() => successMessage.value = '', 3000);
} catch (e) {
errorMessage.value = e.message || 'Pelanggan tidak ditemukan.';
dataLoaded.value = false; dataLoaded.value = false;
} finally { } finally {
loading.value = false; loading.value = false;
} }
}; };
// Add new guest // ---------- TAMBAH & HAPUS ----------
const handleAddGuest = async () => { const handleAddGuest = async () => {
if (!namaTamu.value.trim()) { if (!namaTamu.value.trim()) { errorMessage.value = 'Nama tamu harus diisi.'; return; }
errorMessage.value = 'Nama tamu harus diisi.';
return;
}
loading.value = true; loading.value = true;
errorMessage.value = '';
successMessage.value = '';
try { try {
const response = await $fetch(`${backendUrl}/api/guests`, { const res = await $fetch(`${backendUrl}/api/guests`, {
baseURL: apiBase,
method: 'POST', method: 'POST',
body: { body: { kode_pelanggan: kodePelanggan.value.toUpperCase(), nama_tamu: namaTamu.value.trim() }
kode_pelanggan: kodePelanggan.value.toUpperCase(),
nama_tamu: namaTamu.value.trim(),
},
}); });
if (res.success) {
if (response.success) {
guests.value.push(response.data);
namaTamu.value = ''; namaTamu.value = '';
successMessage.value = 'Tamu berhasil ditambahkan!'; successMessage.value = 'Tamu ditambahkan!';
setTimeout(() => { successMessage.value = ''; }, 3000); setTimeout(() => successMessage.value = '', 2000);
} else { await handleFetchGuests();
errorMessage.value = response.message || 'Gagal menambahkan tamu.'; } else errorMessage.value = res.message || 'Gagal tambah tamu.';
} } catch (e) {
} catch (error) { errorMessage.value = e.data?.message || 'Error saat tambah tamu.';
console.error('Add guest error:', error); } finally { loading.value = false; }
if (error.status === 422 && error.data?.errors) {
errorMessage.value = Object.values(error.data.errors).flat().join(' ');
} else {
errorMessage.value = error.data?.message || 'Terjadi kesalahan saat menambahkan tamu.';
}
} finally {
loading.value = false;
}
}; };
// Delete guest
const handleDeleteGuest = async (id) => { const handleDeleteGuest = async (id) => {
if (!confirm('Apakah Anda yakin ingin menghapus tamu ini?')) { if (!confirm('Hapus tamu ini?')) return;
return;
}
loading.value = true; loading.value = true;
errorMessage.value = '';
successMessage.value = '';
try { try {
const response = await $fetch(`${backendUrl}/api/guests/${id}`, { const res = await $fetch(`${backendUrl}/api/guests/${id}`, { method: 'DELETE' });
baseURL: apiBase, if (res.success) {
method: 'DELETE', successMessage.value = 'Tamu dihapus!';
}); setTimeout(() => successMessage.value = '', 2000);
await handleFetchGuests();
if (response.success) { } else errorMessage.value = res.message || 'Gagal hapus.';
guests.value = guests.value.filter(guest => guest.id !== id); } catch (e) {
successMessage.value = 'Tamu berhasil dihapus!'; errorMessage.value = e.data?.message || 'Error hapus tamu.';
setTimeout(() => { successMessage.value = ''; }, 3000); } finally { loading.value = false; }
} else {
errorMessage.value = response.message || 'Gagal menghapus tamu.';
}
} catch (error) {
console.error('Delete guest error:', error);
errorMessage.value = error.data?.message || 'Terjadi kesalahan saat menghapus tamu.';
} finally {
loading.value = false;
}
}; };
</script> </script>