mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 05:22:02 +00:00
fix: adjust share to whatsapp message
This commit is contained in:
ValdiANS
+138
-62
@@ -556,27 +556,68 @@ export function DetailDailyChecklistContent() {
|
||||
});
|
||||
};
|
||||
|
||||
const shareHandler = async () => {
|
||||
setIsGeneratingImage(true);
|
||||
|
||||
const htmlBlob = await htmlToImage.toBlob(document.body);
|
||||
const imgFile = new File(
|
||||
[htmlBlob!],
|
||||
`daily-checklist-${header?.date}-${header?.kandang_name}-${header?.category}.png`,
|
||||
{
|
||||
type: 'image/png',
|
||||
}
|
||||
const isMobileDevice = () => {
|
||||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
|
||||
navigator.userAgent
|
||||
);
|
||||
};
|
||||
|
||||
const getStatusMessage = () => {
|
||||
switch (header?.status) {
|
||||
case 'DRAFT':
|
||||
return 'Checklist harian perlu disubmit';
|
||||
case 'SUBMITTED':
|
||||
return 'Checklist harian menunggu persetujuan';
|
||||
case 'APPROVED':
|
||||
return 'Checklist harian telah disetujui';
|
||||
case 'REJECTED':
|
||||
return 'Checklist harian telah ditolak';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
const shareHandler = async () => {
|
||||
const isMobile = isMobileDevice();
|
||||
|
||||
if (isMobile) {
|
||||
setIsGeneratingImage(true);
|
||||
}
|
||||
|
||||
const baseTitle = `Daily Checklist - ${formatDate(header?.date || '')} - ${header?.kandang_name} - ${header?.category}`;
|
||||
const statusMsg = getStatusMessage();
|
||||
const statusInfo = `\nStatus: ${header?.status}${statusMsg ? ` - ${statusMsg}` : ''}`;
|
||||
const urlMessage = `\n\nView full checklist: ${window.location.href}`;
|
||||
const fullMessage = baseTitle + statusInfo + urlMessage;
|
||||
|
||||
let shareData: ShareData;
|
||||
|
||||
if (isMobile) {
|
||||
const htmlBlob = await htmlToImage.toBlob(document.body);
|
||||
const imgFile = new File(
|
||||
[htmlBlob!],
|
||||
`daily-checklist-${header?.date}-${header?.kandang_name}-${header?.category}.png`,
|
||||
{
|
||||
type: 'image/png',
|
||||
}
|
||||
);
|
||||
|
||||
shareData = {
|
||||
files: [imgFile],
|
||||
title: baseTitle,
|
||||
text: fullMessage,
|
||||
url: window.location.href,
|
||||
};
|
||||
} else {
|
||||
shareData = {
|
||||
title: baseTitle,
|
||||
text: fullMessage,
|
||||
url: window.location.href,
|
||||
};
|
||||
}
|
||||
|
||||
setIsGeneratingImage(false);
|
||||
|
||||
const shareData = {
|
||||
files: [imgFile],
|
||||
title: `Daily Checklist - ${formatDate(header?.date || '')} - ${header?.kandang_name} - ${header?.category}`,
|
||||
text: `Daily Checklist - ${formatDate(header?.date || '')} - ${header?.kandang_name} - ${header?.category}`,
|
||||
url: window.location.href,
|
||||
};
|
||||
|
||||
try {
|
||||
if (!navigator.canShare(shareData)) {
|
||||
toast.error(
|
||||
@@ -592,6 +633,25 @@ export function DetailDailyChecklistContent() {
|
||||
}
|
||||
};
|
||||
|
||||
const shareToWhatsAppHandler = async () => {
|
||||
const isMobile = isMobileDevice();
|
||||
setIsGeneratingImage(true);
|
||||
|
||||
const statusMsg = getStatusMessage();
|
||||
const category = header?.category || '';
|
||||
const message = encodeURIComponent(
|
||||
`Daily Checklist\n\nTanggal: ${formatDate(header?.date || '')}\nKandang: ${header?.kandang_name}\nKategori: ${CATEGORY_LABELS[category] || category}\nProgress: ${header?.progress_percent}%\nStatus: ${header?.status}${statusMsg ? ` - ${statusMsg}` : ''}\n\nLihat detail lengkap: ${window.location.href}`
|
||||
);
|
||||
|
||||
setIsGeneratingImage(false);
|
||||
|
||||
const whatsappUrl = isMobile
|
||||
? `https://wa.me/?text=${message}`
|
||||
: `https://web.whatsapp.com/send?text=${message}`;
|
||||
|
||||
window.open(whatsappUrl, '_blank');
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className='min-h-screen'>
|
||||
@@ -618,8 +678,8 @@ export function DetailDailyChecklistContent() {
|
||||
return (
|
||||
<div className='min-h-screen'>
|
||||
<div className='p-6'>
|
||||
{/* Page Title with Back Button */}
|
||||
<div className='mb-6 flex items-center gap-4'>
|
||||
{/* Action Buttons */}
|
||||
<div className='mb-6 flex items-start sm:items-center justify-between gap-4 flex-wrap'>
|
||||
<Button
|
||||
variant='outline'
|
||||
size='sm'
|
||||
@@ -630,51 +690,67 @@ export function DetailDailyChecklistContent() {
|
||||
Kembali
|
||||
</Button>
|
||||
|
||||
<div className='flex-1'>
|
||||
<h1 className='text-2xl font-semibold text-gray-900'>
|
||||
Detail Daily Checklist
|
||||
</h1>
|
||||
<p className='text-sm text-gray-600 mt-1'>
|
||||
Lihat detail checklist harian
|
||||
</p>
|
||||
<div className='flex items-center gap-2 flex-wrap'>
|
||||
{header.status === 'SUBMITTED' && (
|
||||
<RequirePermission permissions='lti.daily_checklist.create'>
|
||||
<div className='flex gap-2 flex-wrap'>
|
||||
<Button
|
||||
onClick={handleApprove}
|
||||
disabled={actionLoading}
|
||||
className='bg-green-600 hover:bg-green-700 text-white'
|
||||
>
|
||||
<CheckCircle className='w-4 h-4 mr-2' />
|
||||
Approve
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleReject}
|
||||
disabled={actionLoading}
|
||||
variant='destructive'
|
||||
className='bg-red-600 hover:bg-red-700 text-white'
|
||||
>
|
||||
<XCircle className='w-4 h-4 mr-2' />
|
||||
Reject
|
||||
</Button>
|
||||
</div>
|
||||
</RequirePermission>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant='outline'
|
||||
size='sm'
|
||||
onClick={shareHandler}
|
||||
disabled={isGeneratingImage}
|
||||
className='border-gray-200'
|
||||
>
|
||||
<Share2 className='w-4 h-4 mr-1' />
|
||||
{!isGeneratingImage && 'Bagikan'}
|
||||
|
||||
{isGeneratingImage && 'Memuat...'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant='outline'
|
||||
size='sm'
|
||||
onClick={shareToWhatsAppHandler}
|
||||
disabled={isGeneratingImage}
|
||||
className='border-gray-200'
|
||||
>
|
||||
<Icon icon='mdi:whatsapp' className='w-4 h-4 mr-1' />
|
||||
{!isGeneratingImage && 'Bagikan via WhatsApp'}
|
||||
|
||||
{isGeneratingImage && 'Memuat...'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{header.status === 'SUBMITTED' && (
|
||||
<RequirePermission permissions='lti.daily_checklist.create'>
|
||||
<div className='flex gap-2'>
|
||||
<Button
|
||||
onClick={handleApprove}
|
||||
disabled={actionLoading}
|
||||
className='bg-green-600 hover:bg-green-700 text-white'
|
||||
>
|
||||
<CheckCircle className='w-4 h-4 mr-2' />
|
||||
Approve
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleReject}
|
||||
disabled={actionLoading}
|
||||
variant='destructive'
|
||||
className='bg-red-600 hover:bg-red-700 text-white'
|
||||
>
|
||||
<XCircle className='w-4 h-4 mr-2' />
|
||||
Reject
|
||||
</Button>
|
||||
</div>
|
||||
</RequirePermission>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant='outline'
|
||||
size='sm'
|
||||
onClick={shareHandler}
|
||||
disabled={isGeneratingImage}
|
||||
className='border-gray-200'
|
||||
>
|
||||
<Share2 className='w-4 h-4 mr-1' />
|
||||
{!isGeneratingImage && 'Bagikan'}
|
||||
|
||||
{isGeneratingImage && 'Memuat...'}
|
||||
</Button>
|
||||
{/* Page Title */}
|
||||
<div className='mb-6'>
|
||||
<h1 className='text-2xl font-semibold text-gray-900'>
|
||||
Detail Daily Checklist
|
||||
</h1>
|
||||
<p className='text-sm text-gray-600 mt-1'>
|
||||
Lihat detail checklist harian
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Header Info Card */}
|
||||
|
||||
Reference in New Issue
Block a user