265 lines
8.5 KiB
TypeScript
265 lines
8.5 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { useRouter, useParams } from 'next/navigation';
|
|
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Input } from '@/components/ui/Input';
|
|
import { showToast } from '@/components/ui/Toast';
|
|
|
|
export default function EditQRPage() {
|
|
const router = useRouter();
|
|
const params = useParams();
|
|
const qrId = params.id as string;
|
|
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [qrCode, setQrCode] = useState<any>(null);
|
|
const [title, setTitle] = useState('');
|
|
const [content, setContent] = useState<any>({});
|
|
|
|
useEffect(() => {
|
|
const fetchQRCode = async () => {
|
|
try {
|
|
const response = await fetch(`/api/qrs/${qrId}`);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setQrCode(data);
|
|
setTitle(data.title);
|
|
setContent(data.content || {});
|
|
} else {
|
|
showToast('Failed to load QR code', 'error');
|
|
router.push('/dashboard');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching QR code:', error);
|
|
showToast('Failed to load QR code', 'error');
|
|
router.push('/dashboard');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchQRCode();
|
|
}, [qrId, router]);
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true);
|
|
|
|
try {
|
|
const response = await fetch(`/api/qrs/${qrId}`, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
title,
|
|
content,
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
showToast('QR code updated successfully!', 'success');
|
|
router.push('/dashboard');
|
|
} else {
|
|
const error = await response.json();
|
|
showToast(error.error || 'Failed to update QR code', 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error updating QR code:', error);
|
|
showToast('Failed to update QR code', 'error');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<div className="text-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto mb-4"></div>
|
|
<p className="text-gray-600">Loading QR code...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!qrCode) {
|
|
return null;
|
|
}
|
|
|
|
// Static QR codes cannot be edited
|
|
if (qrCode.type === 'STATIC') {
|
|
return (
|
|
<div className="max-w-2xl mx-auto mt-12">
|
|
<Card>
|
|
<CardContent className="p-12 text-center">
|
|
<div className="w-20 h-20 bg-warning-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<svg className="w-10 h-10 text-warning-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
</div>
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-2">Static QR Code</h2>
|
|
<p className="text-gray-600 mb-8">
|
|
Static QR codes cannot be edited because their content is embedded directly in the QR code image.
|
|
</p>
|
|
<Button onClick={() => router.push('/dashboard')}>
|
|
Back to Dashboard
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-3xl mx-auto">
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900">Edit QR Code</h1>
|
|
<p className="text-gray-600 mt-2">Update your dynamic QR code content</p>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>QR Code Details</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<Input
|
|
label="Title"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="Enter QR code title"
|
|
required
|
|
/>
|
|
|
|
{qrCode.contentType === 'URL' && (
|
|
<Input
|
|
label="URL"
|
|
type="url"
|
|
value={content.url || ''}
|
|
onChange={(e) => setContent({ ...content, url: e.target.value })}
|
|
placeholder="https://example.com"
|
|
required
|
|
/>
|
|
)}
|
|
|
|
{qrCode.contentType === 'PHONE' && (
|
|
<Input
|
|
label="Phone Number"
|
|
type="tel"
|
|
value={content.phone || ''}
|
|
onChange={(e) => setContent({ ...content, phone: e.target.value })}
|
|
placeholder="+1234567890"
|
|
required
|
|
/>
|
|
)}
|
|
|
|
{qrCode.contentType === 'VCARD' && (
|
|
<>
|
|
<Input
|
|
label="First Name"
|
|
value={content.firstName || ''}
|
|
onChange={(e) => setContent({ ...content, firstName: e.target.value })}
|
|
placeholder="John"
|
|
required
|
|
/>
|
|
<Input
|
|
label="Last Name"
|
|
value={content.lastName || ''}
|
|
onChange={(e) => setContent({ ...content, lastName: e.target.value })}
|
|
placeholder="Doe"
|
|
required
|
|
/>
|
|
<Input
|
|
label="Email"
|
|
type="email"
|
|
value={content.email || ''}
|
|
onChange={(e) => setContent({ ...content, email: e.target.value })}
|
|
placeholder="john@example.com"
|
|
/>
|
|
<Input
|
|
label="Phone"
|
|
value={content.phone || ''}
|
|
onChange={(e) => setContent({ ...content, phone: e.target.value })}
|
|
placeholder="+1234567890"
|
|
/>
|
|
<Input
|
|
label="Organization"
|
|
value={content.organization || ''}
|
|
onChange={(e) => setContent({ ...content, organization: e.target.value })}
|
|
placeholder="Company Name"
|
|
/>
|
|
<Input
|
|
label="Job Title"
|
|
value={content.title || ''}
|
|
onChange={(e) => setContent({ ...content, title: e.target.value })}
|
|
placeholder="CEO"
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
{qrCode.contentType === 'GEO' && (
|
|
<>
|
|
<Input
|
|
label="Latitude"
|
|
type="number"
|
|
step="any"
|
|
value={content.latitude || ''}
|
|
onChange={(e) => setContent({ ...content, latitude: parseFloat(e.target.value) || 0 })}
|
|
placeholder="37.7749"
|
|
required
|
|
/>
|
|
<Input
|
|
label="Longitude"
|
|
type="number"
|
|
step="any"
|
|
value={content.longitude || ''}
|
|
onChange={(e) => setContent({ ...content, longitude: parseFloat(e.target.value) || 0 })}
|
|
placeholder="-122.4194"
|
|
required
|
|
/>
|
|
<Input
|
|
label="Location Label (Optional)"
|
|
value={content.label || ''}
|
|
onChange={(e) => setContent({ ...content, label: e.target.value })}
|
|
placeholder="Golden Gate Bridge"
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
{qrCode.contentType === 'TEXT' && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Text Content
|
|
</label>
|
|
<textarea
|
|
value={content.text || ''}
|
|
onChange={(e) => setContent({ ...content, text: e.target.value })}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
|
rows={4}
|
|
placeholder="Enter your text content"
|
|
required
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-end space-x-4 pt-4">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => router.push('/dashboard')}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={handleSave}
|
|
loading={saving}
|
|
>
|
|
Save Changes
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|