import { Head, router, useForm, usePage } from '@inertiajs/react'; import { useRef, useState } from 'react'; import SignatureController from '@/actions/App/Http/Controllers/Settings/SignatureController'; import { ConfirmDialog } from '@/components/confirm-dialog'; import Heading from '@/components/heading'; import InputError from '@/components/input-error'; import { SignaturePad, type SignaturePadHandle, } from '@/components/signature-pad'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { ToggleGroup, ToggleGroupItem, } from '@/components/ui/toggle-group'; type PageProps = { signatureUrl: string | null; }; export default function SignatureSettings() { const { signatureUrl } = usePage().props; const [mode, setMode] = useState<'draw' | 'upload'>('draw'); const [uploadPreview, setUploadPreview] = useState(null); const signaturePadRef = useRef(null); const form = useForm<{ signature: File | null }>({ signature: null, }); async function handleSave() { const file = mode === 'draw' ? await signaturePadRef.current?.toFile() : form.data.signature; if (!file) { return; } form.transform(() => ({ signature: file })); form.post(SignatureController.update.url(), { forceFormData: true, preserveScroll: true, onSuccess: () => { setUploadPreview(null); signaturePadRef.current?.clear(); }, }); } return ( <>

Signature actuelle

{signatureUrl ? (
Votre signature
) : (

Aucune signature enregistrée.

)} {signatureUrl && ( Supprimer la signature } title="Supprimer votre signature ?" description="Elle ne sera plus apposée sur les documents que vous validerez." onConfirm={() => router.delete( SignatureController.destroy.url(), { preserveScroll: true }, ) } /> )}
{ if (value === 'draw' || value === 'upload') { setMode(value); } }} > Dessiner Importer {mode === 'draw' ? ( ) : (
{ const file = e.target.files?.[0] ?? null; form.setData('signature', file); setUploadPreview( file ? URL.createObjectURL(file) : null, ); }} /> {uploadPreview && (
Aperçu de la signature
)}
)}
); }