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

share link daftar-tamu

Browse Source
This commit is contained in:
Farhaan4 2025-10-23 10:10:33 +07:00
parent 8d84a54e79
commit 65508033d0
1 changed files with 76 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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()) {