178 lines
11 KiB
React
178 lines
11 KiB
React
import { useState, useEffect } from 'react'
|
|
import { useParams, useNavigate } from 'react-router-dom'
|
|
|
|
export default function DomainForm({ token, user }) {
|
|
const { id } = useParams()
|
|
const navigate = useNavigate()
|
|
const [d, setD] = useState(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [saving, setSaving] = useState(false)
|
|
const [saved, setSaved] = useState(false)
|
|
|
|
useEffect(() => {
|
|
fetch('/api/domains/' + id, { headers: { Authorization: 'Bearer ' + token } })
|
|
.then(r => r.json()).then(data => { setD(data); setLoading(false) })
|
|
}, [id, token])
|
|
|
|
const u = (field, val) => { setD(p => ({ ...p, [field]: val })); setSaved(false) }
|
|
|
|
const save = async () => {
|
|
setSaving(true)
|
|
const res = await fetch('/api/domains/' + id, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
|
|
body: JSON.stringify(d)
|
|
})
|
|
setD(await res.json())
|
|
setSaving(false)
|
|
setSaved(true)
|
|
setTimeout(() => setSaved(false), 2000)
|
|
}
|
|
|
|
const addEmail = () => { const e = JSON.parse(d.email_addresses || '[]'); e.push(''); u('email_addresses', JSON.stringify(e)) }
|
|
const updateEmail = (i, v) => { const e = JSON.parse(d.email_addresses || '[]'); e[i] = v; u('email_addresses', JSON.stringify(e)) }
|
|
const removeEmail = (i) => { const e = JSON.parse(d.email_addresses || '[]'); e.splice(i, 1); u('email_addresses', JSON.stringify(e)); u('email_count', e.length) }
|
|
const addMember = () => { const m = JSON.parse(d.team_members || '[]'); m.push({ first_name: '', last_name: '' }); u('team_members', JSON.stringify(m)) }
|
|
const updateMember = (i, f, v) => { const m = JSON.parse(d.team_members || '[]'); m[i][f] = v; u('team_members', JSON.stringify(m)) }
|
|
const removeMember = (i) => { const m = JSON.parse(d.team_members || '[]'); m.splice(i, 1); u('team_members', JSON.stringify(m)) }
|
|
|
|
if (loading) return <div className="text-slate-400 text-center py-12">Chargement...</div>
|
|
if (!d) return <div className="text-red-400 text-center py-12">Domaine non trouve</div>
|
|
|
|
const Toggle = ({ checked, onChange, label }) => (
|
|
<div className="flex items-center justify-between py-3">
|
|
<span className="text-slate-300 text-sm">{label}</span>
|
|
<button type="button" onClick={() => onChange(!checked)}
|
|
className={'relative w-11 h-6 rounded-full transition-colors ' + (checked ? 'bg-blue-600' : 'bg-slate-600')}>
|
|
<div className={'absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white transition-transform ' + (checked ? 'translate-x-5' : '')} />
|
|
</button>
|
|
</div>
|
|
)
|
|
|
|
const Section = ({ title, color, children }) => (
|
|
<div className="bg-slate-800/40 rounded-2xl border border-slate-700/30 p-6">
|
|
<h3 className={'font-semibold mb-4 ' + color}>{title}</h3>
|
|
{children}
|
|
</div>
|
|
)
|
|
|
|
const Input = ({ label, value, onChange, placeholder, type = 'text' }) => (
|
|
<div className="mb-3">
|
|
<label className="block text-slate-400 text-xs mb-1.5">{label}</label>
|
|
<input type={type} value={value || ''} onChange={e => onChange(e.target.value)} placeholder={placeholder}
|
|
className="w-full px-3 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white text-sm placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<div>
|
|
<button onClick={() => navigate('/')} className="mb-6 text-slate-400 hover:text-white text-sm flex items-center gap-1 transition">
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
|
|
Retour
|
|
</button>
|
|
|
|
<div className="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h2 className="text-xl font-bold text-white">{d.company_name}</h2>
|
|
<p className="text-slate-400 text-sm">{d.name}</p>
|
|
</div>
|
|
<button onClick={save} disabled={saving}
|
|
className="px-5 py-2.5 bg-blue-600 hover:bg-blue-500 disabled:bg-blue-600/50 text-white text-sm font-medium rounded-xl transition-colors">
|
|
{saving ? 'Sauvegarde...' : saved ? '\u2713 Sauvegarde' : 'Sauvegarder'}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<Section title="Cloud" color="text-sky-400">
|
|
<Toggle checked={!!d.has_cloud} onChange={v => u('has_cloud', v ? 1 : 0)} label="Besoin d'un cloud" />
|
|
{d.has_cloud ? (
|
|
<textarea value={d.cloud_details} onChange={e => u('cloud_details', e.target.value)}
|
|
placeholder="Precisez le besoin (espace, usage, type de stockage...)" rows={3}
|
|
className="w-full px-3 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white text-sm placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none" />
|
|
) : <p className="text-slate-500 text-xs italic">Aucun besoin cloud renseigne</p>}
|
|
</Section>
|
|
|
|
<Section title="Site internet" color="text-violet-400">
|
|
<Toggle checked={!!d.has_website} onChange={v => u('has_website', v ? 1 : 0)} label="Besoin d'un site internet" />
|
|
{d.has_website ? (
|
|
<div className="space-y-3">
|
|
<Toggle checked={!!d.website_wordpress} onChange={v => u('website_wordpress', v ? 1 : 0)} label="WordPress" />
|
|
<div className="mb-3">
|
|
<label className="block text-slate-400 text-xs mb-1.5">Qui gere le site ?</label>
|
|
<select value={d.website_managed_by || ''} onChange={e => u('website_managed_by', e.target.value)}
|
|
className="w-full px-3 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
|
<option value="">Non precise</option>
|
|
<option value="charles">L'equipe de Charles</option>
|
|
<option value="pierre">Pierre (SecourIT)</option>
|
|
</select>
|
|
</div>
|
|
<textarea value={d.website_details} onChange={e => u('website_details', e.target.value)}
|
|
placeholder="Details (nombre de pages, fonctionnalites specifiques...)" rows={3}
|
|
className="w-full px-3 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white text-sm placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none" />
|
|
</div>
|
|
) : <p className="text-slate-500 text-xs italic">Aucun site web renseigne</p>}
|
|
</Section>
|
|
|
|
<Section title="Adresses mail" color="text-amber-400">
|
|
<Toggle checked={!!d.has_emails} onChange={v => u('has_emails', v ? 1 : 0)} label="Besoin d'adresses mail" />
|
|
{d.has_emails ? (
|
|
<div className="space-y-3">
|
|
<Input label="Nombre d'adresses" type="number" value={d.email_count} onChange={v => u('email_count', parseInt(v) || 0)} placeholder="0" />
|
|
<div>
|
|
<label className="block text-slate-400 text-xs mb-1.5">Adresses mail</label>
|
|
{JSON.parse(d.email_addresses || '[]').map((email, i) => (
|
|
<div key={i} className="flex gap-2 mb-2">
|
|
<input type="text" value={email} onChange={e => updateEmail(i, e.target.value)} placeholder="prenom@domaine.fr"
|
|
className="flex-1 px-3 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white text-sm placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
|
|
<button onClick={() => removeEmail(i)} className="p-2.5 text-red-400 hover:bg-red-500/10 rounded-xl transition">
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
|
|
</button>
|
|
</div>
|
|
))}
|
|
<button onClick={addEmail} className="text-blue-400 hover:text-blue-300 text-xs flex items-center gap-1 transition">
|
|
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
|
|
Ajouter une adresse
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : <p className="text-slate-500 text-xs italic">Aucune adresse mail renseignee</p>}
|
|
</Section>
|
|
|
|
<Section title="Utilisateurs" color="text-emerald-400">
|
|
<Toggle checked={!!d.has_team} onChange={v => u('has_team', v ? 1 : 0)} label="Besoin d'utilisateurs" />
|
|
{d.has_team ? (
|
|
<div className="space-y-3">
|
|
{JSON.parse(d.team_members || '[]').map((m, i) => (
|
|
<div key={i} className="flex gap-2">
|
|
<input type="text" value={m.first_name} onChange={e => updateMember(i, 'first_name', e.target.value)} placeholder="Prenom"
|
|
className="flex-1 px-3 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white text-sm placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
|
|
<input type="text" value={m.last_name} onChange={e => updateMember(i, 'last_name', e.target.value)} placeholder="Nom"
|
|
className="flex-1 px-3 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white text-sm placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
|
|
<button onClick={() => removeMember(i)} className="p-2.5 text-red-400 hover:bg-red-500/10 rounded-xl transition">
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
|
|
</button>
|
|
</div>
|
|
))}
|
|
<button onClick={addMember} className="text-blue-400 hover:text-blue-300 text-xs flex items-center gap-1 transition">
|
|
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
|
|
Ajouter un utilisateur
|
|
</button>
|
|
</div>
|
|
) : <p className="text-slate-500 text-xs italic">Aucun utilisateur renseigne</p>}
|
|
</Section>
|
|
|
|
{user.role === 'admin' && (
|
|
<Section title="Tarif mensuel" color="text-emerald-400">
|
|
<Input label="Prix mensuel (EUR)" type="number" value={d.monthly_price} onChange={v => u('monthly_price', parseFloat(v) || 0)} placeholder="0" />
|
|
</Section>
|
|
)}
|
|
|
|
<Section title="Notes" color="text-slate-400">
|
|
<textarea value={d.notes} onChange={e => u('notes', e.target.value)} placeholder="Notes additionnelles..." rows={4}
|
|
className="w-full px-3 py-2.5 bg-slate-900/50 border border-slate-600 rounded-xl text-white text-sm placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none" />
|
|
</Section>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|