feat: initial commit
This commit is contained in:
@@ -0,0 +1,492 @@
|
||||
import { useState, useRef } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { Pencil, Trash2, Plus, Check, X, Upload, Download } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import {
|
||||
listRenderTemplates,
|
||||
createRenderTemplate,
|
||||
updateRenderTemplate,
|
||||
deleteRenderTemplate,
|
||||
reuploadBlendFile,
|
||||
} from '../../api/renderTemplates'
|
||||
import type { RenderTemplate } from '../../api/renderTemplates'
|
||||
import { listOutputTypes } from '../../api/outputTypes'
|
||||
import type { OutputType } from '../../api/outputTypes'
|
||||
|
||||
const ALL_CATEGORIES = [
|
||||
{ key: 'TRB', label: 'TRB' },
|
||||
{ key: 'Kugellager', label: 'Kugellager' },
|
||||
{ key: 'CRB', label: 'CRB' },
|
||||
{ key: 'Gleitlager', label: 'Gleitlager' },
|
||||
{ key: 'SRB_TORB', label: 'SRB/TORB' },
|
||||
{ key: 'Linear_schiene', label: 'Linear' },
|
||||
{ key: 'Anschlagplatten', label: 'Anschlag' },
|
||||
]
|
||||
|
||||
const EMPTY_FORM = {
|
||||
name: '',
|
||||
category_key: '' as string,
|
||||
output_type_id: '' as string,
|
||||
target_collection: 'Product',
|
||||
material_replace_enabled: false,
|
||||
lighting_only: false,
|
||||
shadow_catcher_enabled: false,
|
||||
camera_orbit: true,
|
||||
}
|
||||
|
||||
export default function RenderTemplateTable() {
|
||||
const qc = useQueryClient()
|
||||
const [showAdd, setShowAdd] = useState(false)
|
||||
const [form, setForm] = useState(EMPTY_FORM)
|
||||
const [addFile, setAddFile] = useState<File | null>(null)
|
||||
const [editingId, setEditingId] = useState<string | null>(null)
|
||||
const [editDraft, setEditDraft] = useState<Partial<RenderTemplate>>({})
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
const reuploadRef = useRef<HTMLInputElement>(null)
|
||||
const [reuploadId, setReuploadId] = useState<string | null>(null)
|
||||
|
||||
const { data: templates, isLoading } = useQuery({
|
||||
queryKey: ['render-templates'],
|
||||
queryFn: listRenderTemplates,
|
||||
})
|
||||
|
||||
const { data: outputTypes } = useQuery({
|
||||
queryKey: ['output-types-admin'],
|
||||
queryFn: () => listOutputTypes(true),
|
||||
})
|
||||
|
||||
const createMut = useMutation({
|
||||
mutationFn: () => {
|
||||
if (!addFile) throw new Error('Please select a .blend file')
|
||||
const fd = new FormData()
|
||||
fd.append('name', form.name.trim())
|
||||
fd.append('file', addFile)
|
||||
fd.append('category_key', form.category_key || '')
|
||||
fd.append('output_type_id', form.output_type_id || '')
|
||||
fd.append('target_collection', form.target_collection || 'Product')
|
||||
fd.append('material_replace_enabled', String(form.material_replace_enabled))
|
||||
fd.append('lighting_only', String(form.lighting_only))
|
||||
fd.append('shadow_catcher_enabled', String(form.shadow_catcher_enabled))
|
||||
fd.append('camera_orbit', String(form.camera_orbit))
|
||||
return createRenderTemplate(fd)
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success('Render template created')
|
||||
qc.invalidateQueries({ queryKey: ['render-templates'] })
|
||||
setForm(EMPTY_FORM)
|
||||
setAddFile(null)
|
||||
setShowAdd(false)
|
||||
},
|
||||
onError: (e: any) => toast.error(e.response?.data?.detail || 'Failed to create template'),
|
||||
})
|
||||
|
||||
const updateMut = useMutation({
|
||||
mutationFn: ({ id, data }: { id: string; data: Record<string, unknown> }) =>
|
||||
updateRenderTemplate(id, data as any),
|
||||
onSuccess: () => {
|
||||
toast.success('Template updated')
|
||||
qc.invalidateQueries({ queryKey: ['render-templates'] })
|
||||
setEditingId(null)
|
||||
},
|
||||
onError: (e: any) => toast.error(e.response?.data?.detail || 'Failed to update'),
|
||||
})
|
||||
|
||||
const deleteMut = useMutation({
|
||||
mutationFn: deleteRenderTemplate,
|
||||
onSuccess: () => {
|
||||
toast.success('Template deleted')
|
||||
qc.invalidateQueries({ queryKey: ['render-templates'] })
|
||||
},
|
||||
onError: (e: any) => toast.error(e.response?.data?.detail || 'Failed to delete'),
|
||||
})
|
||||
|
||||
const reuploadMut = useMutation({
|
||||
mutationFn: ({ id, file }: { id: string; file: File }) => reuploadBlendFile(id, file),
|
||||
onSuccess: () => {
|
||||
toast.success('.blend file updated')
|
||||
qc.invalidateQueries({ queryKey: ['render-templates'] })
|
||||
setReuploadId(null)
|
||||
},
|
||||
onError: (e: any) => toast.error(e.response?.data?.detail || 'Failed to upload'),
|
||||
})
|
||||
|
||||
function startEdit(t: RenderTemplate) {
|
||||
setEditingId(t.id)
|
||||
setEditDraft({
|
||||
name: t.name,
|
||||
category_key: t.category_key,
|
||||
output_type_id: t.output_type_id,
|
||||
target_collection: t.target_collection,
|
||||
material_replace_enabled: t.material_replace_enabled,
|
||||
lighting_only: t.lighting_only,
|
||||
shadow_catcher_enabled: t.shadow_catcher_enabled,
|
||||
camera_orbit: t.camera_orbit,
|
||||
is_active: t.is_active,
|
||||
})
|
||||
}
|
||||
|
||||
function saveEdit() {
|
||||
if (!editingId) return
|
||||
updateMut.mutate({ id: editingId, data: editDraft as Record<string, unknown> })
|
||||
}
|
||||
|
||||
const inputCls = 'px-2 py-1 text-sm border border-border-default rounded bg-surface focus:outline-none focus:ring-1 focus:ring-blue-400'
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-lg font-semibold text-content">Render Templates</h3>
|
||||
<button
|
||||
onClick={() => setShowAdd(!showAdd)}
|
||||
className="flex items-center gap-1 text-sm px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700"
|
||||
>
|
||||
<Plus size={14} /> Add Template
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Hidden file inputs */}
|
||||
<input
|
||||
ref={reuploadRef}
|
||||
type="file"
|
||||
accept=".blend"
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
const file = e.target.files?.[0]
|
||||
if (file && reuploadId) reuploadMut.mutate({ id: reuploadId, file })
|
||||
e.target.value = ''
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-surface-alt border-b text-left">
|
||||
<th className="px-3 py-2 font-medium">Name</th>
|
||||
<th className="px-3 py-2 font-medium">Category</th>
|
||||
<th className="px-3 py-2 font-medium">Output Type</th>
|
||||
<th className="px-3 py-2 font-medium">Collection</th>
|
||||
<th className="px-3 py-2 font-medium">Mat. Replace</th>
|
||||
<th className="px-3 py-2 font-medium">Lighting Only</th>
|
||||
<th className="px-3 py-2 font-medium" title="Enable Shadowcatcher collection (Cycles only)">Shadow Catcher</th>
|
||||
<th className="px-3 py-2 font-medium" title="Rotate camera around product instead of product rotation (faster GPU rendering)">Cam Orbit</th>
|
||||
<th className="px-3 py-2 font-medium">.blend File</th>
|
||||
<th className="px-3 py-2 font-medium">Active</th>
|
||||
<th className="px-3 py-2 font-medium w-24">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{/* Add row */}
|
||||
{showAdd && (
|
||||
<tr className="border-b bg-surface-hover/40">
|
||||
<td className="px-3 py-2">
|
||||
<input
|
||||
className={inputCls + ' w-40'}
|
||||
placeholder="Template name"
|
||||
value={form.name}
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<select
|
||||
className={inputCls}
|
||||
value={form.category_key}
|
||||
onChange={(e) => setForm({ ...form, category_key: e.target.value })}
|
||||
>
|
||||
<option value="">Any (default)</option>
|
||||
{ALL_CATEGORIES.map((c) => (
|
||||
<option key={c.key} value={c.key}>{c.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<select
|
||||
className={inputCls}
|
||||
value={form.output_type_id}
|
||||
onChange={(e) => setForm({ ...form, output_type_id: e.target.value })}
|
||||
>
|
||||
<option value="">Any (default)</option>
|
||||
{outputTypes?.map((ot: OutputType) => (
|
||||
<option key={ot.id} value={ot.id}>{ot.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<input
|
||||
className={inputCls + ' w-28'}
|
||||
value={form.target_collection}
|
||||
onChange={(e) => setForm({ ...form, target_collection: e.target.value })}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.material_replace_enabled}
|
||||
onChange={(e) => setForm({ ...form, material_replace_enabled: e.target.checked })}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.lighting_only}
|
||||
onChange={(e) => setForm({ ...form, lighting_only: e.target.checked })}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.shadow_catcher_enabled}
|
||||
title="Enable Shadowcatcher collection (Cycles only)"
|
||||
onChange={(e) => setForm({ ...form, shadow_catcher_enabled: e.target.checked })}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.camera_orbit}
|
||||
title="Rotate camera around product (better GPU performance)"
|
||||
onChange={(e) => setForm({ ...form, camera_orbit: e.target.checked })}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<label className="flex items-center gap-1 text-xs cursor-pointer text-accent hover:text-accent-hover">
|
||||
<Upload size={14} />
|
||||
{addFile ? addFile.name : 'Choose .blend'}
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".blend"
|
||||
className="hidden"
|
||||
onChange={(e) => setAddFile(e.target.files?.[0] || null)}
|
||||
/>
|
||||
</label>
|
||||
</td>
|
||||
<td />
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
onClick={() => createMut.mutate()}
|
||||
disabled={!form.name.trim() || !addFile || createMut.isPending}
|
||||
className="p-1 text-status-success-text hover:bg-surface-hover rounded disabled:opacity-40"
|
||||
title="Create"
|
||||
>
|
||||
<Check size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setShowAdd(false); setForm(EMPTY_FORM); setAddFile(null) }}
|
||||
className="p-1 text-content-muted hover:bg-surface-hover rounded"
|
||||
title="Cancel"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{/* Template rows */}
|
||||
{isLoading && (
|
||||
<tr><td colSpan={11} className="px-3 py-4 text-center text-content-muted">Loading...</td></tr>
|
||||
)}
|
||||
{templates?.map((t) => {
|
||||
const isEditing = editingId === t.id
|
||||
return (
|
||||
<tr key={t.id} className="border-b hover:bg-surface-hover/50">
|
||||
<td className="px-3 py-2">
|
||||
{isEditing ? (
|
||||
<input
|
||||
className={inputCls + ' w-40'}
|
||||
value={editDraft.name ?? t.name}
|
||||
onChange={(e) => setEditDraft({ ...editDraft, name: e.target.value })}
|
||||
/>
|
||||
) : (
|
||||
<span className="font-medium">{t.name}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
{isEditing ? (
|
||||
<select
|
||||
className={inputCls}
|
||||
value={editDraft.category_key ?? t.category_key ?? ''}
|
||||
onChange={(e) => setEditDraft({ ...editDraft, category_key: e.target.value || null })}
|
||||
>
|
||||
<option value="">Any</option>
|
||||
{ALL_CATEGORIES.map((c) => (
|
||||
<option key={c.key} value={c.key}>{c.label}</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
t.category_key || <span className="text-content-muted">Any</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
{isEditing ? (
|
||||
<select
|
||||
className={inputCls}
|
||||
value={editDraft.output_type_id ?? t.output_type_id ?? ''}
|
||||
onChange={(e) => setEditDraft({ ...editDraft, output_type_id: e.target.value || null })}
|
||||
>
|
||||
<option value="">Any</option>
|
||||
{outputTypes?.map((ot: OutputType) => (
|
||||
<option key={ot.id} value={ot.id}>{ot.name}</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
t.output_type_name || <span className="text-content-muted">Any</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
{isEditing ? (
|
||||
<input
|
||||
className={inputCls + ' w-28'}
|
||||
value={editDraft.target_collection ?? t.target_collection}
|
||||
onChange={(e) => setEditDraft({ ...editDraft, target_collection: e.target.value })}
|
||||
/>
|
||||
) : (
|
||||
<code className="text-xs bg-surface-muted px-1 rounded">{t.target_collection}</code>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
{isEditing ? (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editDraft.material_replace_enabled ?? t.material_replace_enabled}
|
||||
onChange={(e) => setEditDraft({ ...editDraft, material_replace_enabled: e.target.checked })}
|
||||
/>
|
||||
) : (
|
||||
t.material_replace_enabled ? (
|
||||
<span className="text-status-success-text text-xs font-medium">Yes</span>
|
||||
) : (
|
||||
<span className="text-content-muted text-xs">No</span>
|
||||
)
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
{isEditing ? (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editDraft.lighting_only ?? t.lighting_only}
|
||||
onChange={(e) => setEditDraft({ ...editDraft, lighting_only: e.target.checked })}
|
||||
/>
|
||||
) : (
|
||||
t.lighting_only ? (
|
||||
<span className="text-status-warning-text text-xs font-medium">HDR</span>
|
||||
) : (
|
||||
<span className="text-content-muted text-xs">—</span>
|
||||
)
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
{isEditing ? (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editDraft.shadow_catcher_enabled ?? t.shadow_catcher_enabled}
|
||||
title="Enable Shadowcatcher collection (Cycles only)"
|
||||
onChange={(e) => setEditDraft({ ...editDraft, shadow_catcher_enabled: e.target.checked })}
|
||||
/>
|
||||
) : (
|
||||
t.shadow_catcher_enabled ? (
|
||||
<span className="text-violet-600 text-xs font-medium">On</span>
|
||||
) : (
|
||||
<span className="text-content-muted text-xs">—</span>
|
||||
)
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
{isEditing ? (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editDraft.camera_orbit ?? t.camera_orbit}
|
||||
title="Rotate camera around product (better GPU performance)"
|
||||
onChange={(e) => setEditDraft({ ...editDraft, camera_orbit: e.target.checked })}
|
||||
/>
|
||||
) : (
|
||||
t.camera_orbit ? (
|
||||
<span className="text-teal-600 text-xs font-medium">Cam</span>
|
||||
) : (
|
||||
<span className="text-content-muted text-xs">Obj</span>
|
||||
)
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs text-content-secondary truncate max-w-[120px]" title={t.original_filename}>
|
||||
{t.original_filename}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => { setReuploadId(t.id); reuploadRef.current?.click() }}
|
||||
className="p-0.5 text-accent hover:bg-surface-hover rounded"
|
||||
title="Re-upload .blend"
|
||||
>
|
||||
<Upload size={12} />
|
||||
</button>
|
||||
<a
|
||||
href={`/api/render-templates/${t.id}/download`}
|
||||
className="p-0.5 text-accent hover:bg-surface-hover rounded"
|
||||
title="Download .blend"
|
||||
>
|
||||
<Download size={12} />
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
{isEditing ? (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editDraft.is_active ?? t.is_active}
|
||||
onChange={(e) => setEditDraft({ ...editDraft, is_active: e.target.checked })}
|
||||
/>
|
||||
) : (
|
||||
t.is_active ? (
|
||||
<span className="inline-block w-2 h-2 rounded-full bg-green-500" title="Active" />
|
||||
) : (
|
||||
<span className="inline-block w-2 h-2 rounded-full bg-surface-muted" title="Inactive" />
|
||||
)
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
{isEditing ? (
|
||||
<div className="flex gap-1">
|
||||
<button onClick={saveEdit} className="p-1 text-status-success-text hover:bg-surface-hover rounded" title="Save">
|
||||
<Check size={16} />
|
||||
</button>
|
||||
<button onClick={() => setEditingId(null)} className="p-1 text-content-muted hover:bg-surface-muted rounded" title="Cancel">
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex gap-1">
|
||||
<button onClick={() => startEdit(t)} className="p-1 text-accent hover:bg-surface-hover rounded" title="Edit">
|
||||
<Pencil size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (confirm(`Delete template "${t.name}"?`)) deleteMut.mutate(t.id)
|
||||
}}
|
||||
className="p-1 text-red-500 hover:bg-red-50 rounded"
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
|
||||
{!isLoading && (!templates || templates.length === 0) && !showAdd && (
|
||||
<tr>
|
||||
<td colSpan={11} className="px-3 py-6 text-center text-content-muted">
|
||||
No render templates configured. Click "Add Template" to create one.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-content-muted">
|
||||
Templates define pre-designed .blend studio setups. When rendering, the system matches templates by Category + Output Type with fallback cascade.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user