feat: gestion templates mockup dans les paramètres avec familles depuis Sheets
This commit is contained in:
@@ -2,24 +2,31 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import type { MockupTemplate } from '@/types/mockup'
|
||||
|
||||
const FAMILIES = ['Menuiserie', 'Baies vitrées', 'Carrelage', 'Tous']
|
||||
|
||||
export function TemplateLibrary() {
|
||||
const [templates, setTemplates] = useState<MockupTemplate[]>([])
|
||||
const [families, setFamilies] = useState<string[]>(['Tous'])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [uploading, setUploading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [name, setName] = useState('')
|
||||
const [family, setFamily] = useState('Menuiserie')
|
||||
const [family, setFamily] = useState('Tous')
|
||||
const [description, setDescription] = useState('')
|
||||
const fileRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
const load = () => {
|
||||
setLoading(true)
|
||||
fetch('/api/mockup/templates')
|
||||
.then(r => r.json())
|
||||
.then(setTemplates)
|
||||
.finally(() => setLoading(false))
|
||||
Promise.all([
|
||||
fetch('/api/mockup/templates').then(r => r.json()),
|
||||
fetch('/api/sheets/tabs').then(r => r.json()),
|
||||
]).then(([tplData, tabsData]) => {
|
||||
setTemplates(tplData as MockupTemplate[])
|
||||
const tabs: string[] = (tabsData.tabs ?? []).filter((t: string) =>
|
||||
!['COLLECTIONS', 'LIVRAISONS', 'ECOPART', 'RECAP'].some(x => t.toUpperCase().includes(x))
|
||||
)
|
||||
const allFamilies = ['Tous', ...tabs]
|
||||
setFamilies(allFamilies)
|
||||
if (!allFamilies.includes(family)) setFamily(allFamilies[0])
|
||||
}).finally(() => setLoading(false))
|
||||
}
|
||||
|
||||
useEffect(load, [])
|
||||
@@ -53,91 +60,84 @@ export function TemplateLibrary() {
|
||||
load()
|
||||
}
|
||||
|
||||
const byFamily = FAMILIES.reduce<Record<string, MockupTemplate[]>>((acc, f) => {
|
||||
acc[f] = templates.filter(t => t.family === f)
|
||||
return acc
|
||||
}, {})
|
||||
const allUsedFamilies = Array.from(new Set(templates.map(t => t.family)))
|
||||
const displayFamilies = families.filter(f => allUsedFamilies.includes(f) || f === 'Tous')
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Upload form */}
|
||||
<div className="bg-slate-800 rounded-xl p-4 border border-slate-700">
|
||||
<h2 className="text-sm font-semibold text-white mb-3">Ajouter un template</h2>
|
||||
<form onSubmit={upload} className="space-y-3">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-xs text-gray-400 mb-1">Nom</label>
|
||||
<input
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
<input value={name} onChange={e => setName(e.target.value)}
|
||||
placeholder="ex: Entrée moderne"
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
/>
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-400 mb-1">Famille</label>
|
||||
<select
|
||||
value={family}
|
||||
onChange={e => setFamily(e.target.value)}
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
>
|
||||
{FAMILIES.map(f => <option key={f}>{f}</option>)}
|
||||
<select value={family} onChange={e => setFamily(e.target.value)}
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
{families.map(f => <option key={f}>{f}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-400 mb-1">Description (optionnel)</label>
|
||||
<input
|
||||
value={description}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
<input value={description} onChange={e => setDescription(e.target.value)}
|
||||
placeholder="ex: Pièce lumineuse avec parquet"
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
/>
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-400 mb-1">Image</label>
|
||||
<input ref={fileRef} type="file" accept="image/*" className="text-sm text-gray-300" />
|
||||
</div>
|
||||
{error && <p className="text-xs text-red-400">{error}</p>}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={uploading || !name || !family}
|
||||
className="px-4 py-2 bg-indigo-600 text-white text-sm rounded-lg disabled:opacity-40 hover:bg-indigo-500"
|
||||
>
|
||||
<button type="submit" disabled={uploading || !name || !family}
|
||||
className="px-4 py-2 bg-indigo-600 text-white text-sm rounded-lg disabled:opacity-40 hover:bg-indigo-500">
|
||||
{uploading ? 'Ajout…' : '+ Ajouter'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Templates grouped by family */}
|
||||
{loading ? (
|
||||
<p className="text-sm text-gray-400">Chargement…</p>
|
||||
) : templates.length === 0 ? (
|
||||
<p className="text-sm text-gray-500">Aucun template. Ajoutez-en un ci-dessus.</p>
|
||||
) : (
|
||||
FAMILIES.map(f => byFamily[f]?.length > 0 ? (
|
||||
<div key={f}>
|
||||
<h3 className="text-sm font-medium text-gray-300 mb-2">{f}</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{byFamily[f].map(t => (
|
||||
<div key={t.id} className="relative rounded-lg overflow-hidden border border-slate-600 group">
|
||||
<img
|
||||
src={`/api/mockup/templates/image/${t.filename}`}
|
||||
alt={t.name}
|
||||
className="w-full h-32 object-cover"
|
||||
/>
|
||||
<div className="p-2 bg-slate-800">
|
||||
<p className="text-xs text-white font-medium truncate">{t.name}</p>
|
||||
{t.description && <p className="text-xs text-gray-400 truncate">{t.description}</p>}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => remove(t.id)}
|
||||
className="absolute top-1 right-1 bg-red-600/80 hover:bg-red-500 text-white text-xs rounded px-1.5 py-0.5 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<div className="space-y-6">
|
||||
{displayFamilies.map(f => {
|
||||
const byFamily = templates.filter(t => t.family === f)
|
||||
if (byFamily.length === 0) return null
|
||||
return (
|
||||
<div key={f}>
|
||||
<h3 className="text-sm font-medium text-gray-300 mb-2 flex items-center gap-2">
|
||||
{f}
|
||||
<span className="text-xs text-gray-500">{byFamily.length} template{byFamily.length > 1 ? 's' : ''}</span>
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||
{byFamily.map(t => (
|
||||
<div key={t.id} className="relative rounded-lg overflow-hidden border border-slate-600 group">
|
||||
<img src={`/api/mockup/templates/image/${t.filename}`} alt={t.name}
|
||||
className="w-full h-32 object-cover" />
|
||||
<div className="p-2 bg-slate-800">
|
||||
<p className="text-xs text-white font-medium truncate">{t.name}</p>
|
||||
{t.description && <p className="text-xs text-gray-400 truncate">{t.description}</p>}
|
||||
</div>
|
||||
<button type="button" onClick={() => remove(t.id)}
|
||||
className="absolute top-1 right-1 bg-red-600/80 hover:bg-red-500 text-white text-xs rounded px-1.5 py-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null)
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user