import { Head, useForm } from '@inertiajs/react'; import { useEffect, useRef, useState, type FormEvent } from 'react'; import CompanySettingController from '@/actions/App/Http/Controllers/Admin/CompanySettingController'; import Heading from '@/components/heading'; import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { useCan } from '@/hooks/use-can'; import { edit } from '@/routes/admin/settings/company'; import type { CompanySettingData } from '@/types/company-setting'; export default function CompanyIdentitySettings({ company, }: { company: CompanySettingData; }) { const canUpdate = useCan('settings.update'); const logoInputRef = useRef(null); const [logoPreview, setLogoPreview] = useState( company.logo_url, ); const form = useForm({ name: company.name, legal_name: company.legal_name, address: company.address ?? '', city: company.city ?? '', country: company.country, logo: null as File | null, remove_logo: false, }); useEffect(() => { setLogoPreview(company.logo_url); }, [company.logo_url]); useEffect(() => { return () => { if (logoPreview && logoPreview.startsWith('blob:')) { URL.revokeObjectURL(logoPreview); } }; }, [logoPreview]); function submit(event: FormEvent) { event.preventDefault(); form.transform((data) => ({ ...data, _method: 'put', })); form.post(CompanySettingController.updateIdentity.url(), { forceFormData: true, preserveScroll: true, onSuccess: () => { form.setData('logo', null); form.setData('remove_logo', false); if (logoInputRef.current) { logoInputRef.current.value = ''; } }, }); } function handleLogoChange(event: React.ChangeEvent) { const file = event.target.files?.[0] ?? null; form.setData('logo', file); form.setData('remove_logo', false); if (file) { setLogoPreview(URL.createObjectURL(file)); } } function removeLogo() { form.setData('logo', null); form.setData('remove_logo', true); setLogoPreview(null); } return ( <>

Identité de l'entreprise

{logoPreview ? ( Logo entreprise ) : (
Aucun logo
)} {canUpdate && (
{logoPreview && ( )}
)}
form.setData('name', event.target.value) } required disabled={!canUpdate || form.processing} placeholder="Nom commercial" />
form.setData('legal_name', event.target.value) } required disabled={!canUpdate || form.processing} placeholder="Raison sociale" />
form.setData('address', event.target.value) } disabled={!canUpdate || form.processing} placeholder="Adresse" />
form.setData('city', event.target.value) } disabled={!canUpdate || form.processing} placeholder="Ville" />
form.setData('country', event.target.value) } disabled={!canUpdate || form.processing} placeholder="Pays" />
{canUpdate && (
)}
); } CompanyIdentitySettings.layout = { breadcrumbs: [ { title: 'Paramètres de l\'entreprise', href: edit(), }, ], };