241 lines
8.2 KiB
Vue
241 lines
8.2 KiB
Vue
<template>
|
|
<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">
|
|
<h1 class="text-2xl font-bold mb-6 text-center text-gray-800">
|
|
Manajemen Daftar Tamu
|
|
</h1>
|
|
|
|
<!-- Input Kode Pelanggan -->
|
|
<div class="mb-6">
|
|
<form @submit.prevent="handleFetchGuests" class="flex gap-2">
|
|
<input
|
|
v-model="kodePelanggan"
|
|
type="text"
|
|
placeholder="Kode Pelanggan (contoh: PLG-123456)"
|
|
class="flex-1 border border-gray-300 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
required
|
|
/>
|
|
<button
|
|
type="submit"
|
|
class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition disabled:bg-gray-400 disabled:cursor-not-allowed whitespace-nowrap"
|
|
:disabled="loading"
|
|
>
|
|
{{ loading ? 'Memuat...' : 'Cari' }}
|
|
</button>
|
|
</form>
|
|
<p v-if="errorMessage && !dataLoaded" class="text-red-500 mt-3 text-sm">
|
|
{{ errorMessage }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Area Data Tamu (Muncul setelah fetch berhasil) -->
|
|
<div v-if="dataLoaded">
|
|
<!-- Info Kode Pelanggan -->
|
|
<div class="bg-blue-50 p-3 rounded-lg mb-6">
|
|
<p class="text-sm text-gray-700">
|
|
<span class="font-semibold">Kode Pelanggan:</span>
|
|
{{ kodePelanggan.toUpperCase() }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Form Tambah Tamu -->
|
|
<form @submit.prevent="handleAddGuest" class="mb-6">
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
|
Tambah Tamu Baru
|
|
</label>
|
|
<div class="flex gap-2">
|
|
<input
|
|
v-model="namaTamu"
|
|
type="text"
|
|
placeholder="Nama Tamu"
|
|
class="flex-1 border border-gray-300 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"
|
|
required
|
|
/>
|
|
<button
|
|
type="submit"
|
|
class="bg-green-500 text-white px-6 py-3 rounded-lg hover:bg-green-600 transition disabled:bg-gray-400 disabled:cursor-not-allowed whitespace-nowrap"
|
|
:disabled="loading"
|
|
>
|
|
{{ loading ? 'Menambahkan...' : 'Tambah' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<p v-if="errorMessage && dataLoaded" class="text-red-500 mb-4 text-sm">
|
|
{{ errorMessage }}
|
|
</p>
|
|
<p v-if="successMessage" class="text-green-500 mb-4 text-sm">
|
|
{{ successMessage }}
|
|
</p>
|
|
|
|
<!-- Tabel Daftar Tamu -->
|
|
<div class="mt-6">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-3">
|
|
Daftar Tamu ({{ guests.length }})
|
|
</h2>
|
|
|
|
<div v-if="guests.length > 0" class="overflow-x-auto rounded-lg border border-gray-200">
|
|
<table class="w-full">
|
|
<thead>
|
|
<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">Nama Tamu</th>
|
|
<th class="p-3 text-left font-semibold text-gray-700">Kode Invitasi</th>
|
|
<th class="p-3 text-center font-semibold text-gray-700">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="(guest, index) in guests"
|
|
:key="guest.id"
|
|
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-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>
|
|
<td class="p-3 text-center">
|
|
<button
|
|
@click="handleDeleteGuest(guest.id)"
|
|
class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition disabled:bg-gray-400 disabled:cursor-not-allowed text-sm"
|
|
:disabled="loading"
|
|
>
|
|
Hapus
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div v-else class="text-center py-8 bg-gray-50 rounded-lg border border-gray-200">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// State Management
|
|
const kodePelanggan = ref('');
|
|
const dataLoaded = ref(false);
|
|
const guests = ref([]);
|
|
const namaTamu = ref('');
|
|
const errorMessage = ref('');
|
|
const successMessage = ref('');
|
|
const loading = ref(false);
|
|
const config = useRuntimeConfig();
|
|
const backendUrl = config.public.apiBaseUrl;
|
|
|
|
// Runtime Config
|
|
const { public: { apiBase } } = useRuntimeConfig();
|
|
|
|
// Fetch guests data based on customer code
|
|
const handleFetchGuests = async () => {
|
|
if (!kodePelanggan.value.trim()) {
|
|
errorMessage.value = 'Kode pelanggan harus diisi.';
|
|
return;
|
|
}
|
|
|
|
loading.value = true;
|
|
errorMessage.value = '';
|
|
successMessage.value = '';
|
|
|
|
try {
|
|
const response = await $fetch(`${backendUrl}/api/guests/${kodePelanggan.value.toUpperCase()}`, {
|
|
method: 'GET',
|
|
});
|
|
|
|
if (response.success) {
|
|
dataLoaded.value = true;
|
|
guests.value = response.data || [];
|
|
successMessage.value = 'Data tamu berhasil dimuat!';
|
|
setTimeout(() => { successMessage.value = ''; }, 3000);
|
|
} else {
|
|
errorMessage.value = response.message || 'Gagal mengambil daftar tamu.';
|
|
dataLoaded.value = false;
|
|
}
|
|
} catch (error) {
|
|
console.error('Fetch guests error:', error);
|
|
errorMessage.value = error.data?.message || 'Pelanggan tidak ditemukan atau pesanan belum diterima.';
|
|
dataLoaded.value = false;
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
// Add new guest
|
|
const handleAddGuest = async () => {
|
|
if (!namaTamu.value.trim()) {
|
|
errorMessage.value = 'Nama tamu harus diisi.';
|
|
return;
|
|
}
|
|
|
|
loading.value = true;
|
|
errorMessage.value = '';
|
|
successMessage.value = '';
|
|
|
|
try {
|
|
const response = await $fetch(`${backendUrl}/api/guests`, {
|
|
baseURL: apiBase,
|
|
method: 'POST',
|
|
body: {
|
|
kode_pelanggan: kodePelanggan.value.toUpperCase(),
|
|
nama_tamu: namaTamu.value.trim(),
|
|
},
|
|
});
|
|
|
|
if (response.success) {
|
|
guests.value.push(response.data);
|
|
namaTamu.value = '';
|
|
successMessage.value = 'Tamu berhasil ditambahkan!';
|
|
setTimeout(() => { successMessage.value = ''; }, 3000);
|
|
} else {
|
|
errorMessage.value = response.message || 'Gagal menambahkan tamu.';
|
|
}
|
|
} catch (error) {
|
|
console.error('Add guest error:', error);
|
|
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) => {
|
|
if (!confirm('Apakah Anda yakin ingin menghapus tamu ini?')) {
|
|
return;
|
|
}
|
|
|
|
loading.value = true;
|
|
errorMessage.value = '';
|
|
successMessage.value = '';
|
|
|
|
try {
|
|
const response = await $fetch(`${backendUrl}/api/guests/${id}`, {
|
|
baseURL: apiBase,
|
|
method: 'DELETE',
|
|
});
|
|
|
|
if (response.success) {
|
|
guests.value = guests.value.filter(guest => guest.id !== id);
|
|
successMessage.value = 'Tamu berhasil dihapus!';
|
|
setTimeout(() => { successMessage.value = ''; }, 3000);
|
|
} 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> |