feat(19-02): template editor page, TemplatePageClient, and TemplatePanel
- Server component at /portal/templates/[id] queries documentTemplates with formTemplate relation - notFound() for archived/missing templates - TemplatePageClient: state owner mirroring DocumentPageClient pattern - deriveRolesFromFields initializes Buyer/Seller defaults or extracts from existing fields - handlePersist merges textFillData hints into f.hint for type='text' fields - handleAiAutoPlace POSTs to /api/templates/[id]/ai-prepare and increments aiPlacementKey - Role rename/remove re-fetches fields and PATCHes with updated signerEmail values - TemplatePanel: 280px right panel with inline styles matching portal design system - Signers/Roles section with color dots, click-to-rename, remove with ConfirmDialog - Add role input with preset chips (Buyer, Co-Buyer, Seller, Co-Seller) - AI Auto-place button (navy) with spinner/loading state and error display - Save Template button (gold) with success 'Saved' text fading after 3s
This commit is contained in:
Chandler Copeland
@@ -0,0 +1,186 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { PdfViewerWrapper } from '@/app/portal/(protected)/documents/[docId]/_components/PdfViewerWrapper';
|
||||
import { TemplatePanel } from './TemplatePanel';
|
||||
import type { SignatureFieldData, DocumentSigner } from '@/lib/db/schema';
|
||||
|
||||
interface TemplatePageClientProps {
|
||||
templateId: string;
|
||||
templateName: string;
|
||||
formName: string;
|
||||
initialFields: SignatureFieldData[];
|
||||
}
|
||||
|
||||
const ROLE_COLORS = ['#6366f1', '#f43f5e', '#10b981', '#f59e0b'];
|
||||
|
||||
function deriveRolesFromFields(fields: SignatureFieldData[]): DocumentSigner[] {
|
||||
const seen = new Map<string, string>();
|
||||
fields.forEach((f) => {
|
||||
if (f.signerEmail && !seen.has(f.signerEmail)) {
|
||||
seen.set(f.signerEmail, ROLE_COLORS[seen.size % ROLE_COLORS.length]);
|
||||
}
|
||||
});
|
||||
if (seen.size === 0) {
|
||||
return [
|
||||
{ email: 'Buyer', color: ROLE_COLORS[0] },
|
||||
{ email: 'Seller', color: ROLE_COLORS[1] },
|
||||
];
|
||||
}
|
||||
return Array.from(seen.entries()).map(([email, color]) => ({ email, color }));
|
||||
}
|
||||
|
||||
export function TemplatePageClient({
|
||||
templateId,
|
||||
templateName,
|
||||
initialFields,
|
||||
}: TemplatePageClientProps) {
|
||||
const [signers, setSigners] = useState<DocumentSigner[]>(() =>
|
||||
deriveRolesFromFields(initialFields)
|
||||
);
|
||||
const [selectedFieldId, setSelectedFieldId] = useState<string | null>(null);
|
||||
const [textFillData, setTextFillData] = useState<Record<string, string>>(() => {
|
||||
const data: Record<string, string> = {};
|
||||
initialFields.forEach((f) => {
|
||||
if (f.hint) data[f.id] = f.hint;
|
||||
});
|
||||
return data;
|
||||
});
|
||||
const [aiPlacementKey, setAiPlacementKey] = useState(0);
|
||||
const [name, setName] = useState(templateName);
|
||||
|
||||
const handlePersist = useCallback(
|
||||
async (rawFields: SignatureFieldData[]) => {
|
||||
const fieldsWithHints = rawFields.map((f) =>
|
||||
f.type === 'text' && textFillData[f.id]
|
||||
? { ...f, hint: textFillData[f.id] }
|
||||
: f
|
||||
);
|
||||
await fetch(`/api/templates/${templateId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ signatureFields: fieldsWithHints }),
|
||||
});
|
||||
},
|
||||
[templateId, textFillData]
|
||||
);
|
||||
|
||||
const handleFieldValueChange = useCallback((fieldId: string, value: string) => {
|
||||
setTextFillData((prev) => ({ ...prev, [fieldId]: value }));
|
||||
}, []);
|
||||
|
||||
const handleFieldsChanged = useCallback(() => {
|
||||
// No preview token to reset in template mode — no-op
|
||||
}, []);
|
||||
|
||||
const handleAiAutoPlace = useCallback(async () => {
|
||||
const res = await fetch(`/api/templates/${templateId}/ai-prepare`, { method: 'POST' });
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ error: 'AI placement failed' }));
|
||||
throw new Error((err as { error?: string }).error || 'AI placement failed');
|
||||
}
|
||||
setAiPlacementKey((k) => k + 1);
|
||||
}, [templateId]);
|
||||
|
||||
const handleSave = useCallback(async () => {
|
||||
// Fields are persisted via onPersist on every change (drag/drop/delete/resize).
|
||||
// The Save button additionally persists the current name.
|
||||
await fetch(`/api/templates/${templateId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name }),
|
||||
});
|
||||
}, [templateId, name]);
|
||||
|
||||
const handleRenameRole = useCallback(
|
||||
async (oldLabel: string, newLabel: string) => {
|
||||
setSigners((prev) =>
|
||||
prev.map((s) => (s.email === oldLabel ? { ...s, email: newLabel } : s))
|
||||
);
|
||||
const res = await fetch(`/api/templates/${templateId}/fields`);
|
||||
if (res.ok) {
|
||||
const fields = (await res.json()) as SignatureFieldData[];
|
||||
const updated = fields.map((f) =>
|
||||
f.signerEmail === oldLabel ? { ...f, signerEmail: newLabel } : f
|
||||
);
|
||||
await fetch(`/api/templates/${templateId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ signatureFields: updated }),
|
||||
});
|
||||
setAiPlacementKey((k) => k + 1);
|
||||
}
|
||||
},
|
||||
[templateId]
|
||||
);
|
||||
|
||||
const handleRemoveRole = useCallback(
|
||||
async (label: string) => {
|
||||
setSigners((prev) => prev.filter((s) => s.email !== label));
|
||||
const res = await fetch(`/api/templates/${templateId}/fields`);
|
||||
if (res.ok) {
|
||||
const fields = (await res.json()) as SignatureFieldData[];
|
||||
const updated = fields.map((f) =>
|
||||
f.signerEmail === label ? { ...f, signerEmail: undefined } : f
|
||||
);
|
||||
await fetch(`/api/templates/${templateId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ signatureFields: updated }),
|
||||
});
|
||||
setAiPlacementKey((k) => k + 1);
|
||||
}
|
||||
},
|
||||
[templateId]
|
||||
);
|
||||
|
||||
const handleAddRole = useCallback(
|
||||
(label: string) => {
|
||||
if (!label.trim() || signers.some((s) => s.email === label.trim())) return;
|
||||
setSigners((prev) => [
|
||||
...prev,
|
||||
{ email: label.trim(), color: ROLE_COLORS[prev.length % ROLE_COLORS.length] },
|
||||
]);
|
||||
},
|
||||
[signers]
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 1200, margin: '0 auto', padding: 32 }}>
|
||||
<h1
|
||||
style={{ fontSize: '1.5rem', fontWeight: 700, color: '#1B2B4B', marginBottom: 24 }}
|
||||
>
|
||||
Edit Template: {name}
|
||||
</h1>
|
||||
<div style={{ display: 'flex', gap: 24 }}>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<PdfViewerWrapper
|
||||
docId={templateId}
|
||||
docStatus="Draft"
|
||||
onFieldsChanged={handleFieldsChanged}
|
||||
selectedFieldId={selectedFieldId}
|
||||
textFillData={textFillData}
|
||||
onFieldSelect={setSelectedFieldId}
|
||||
onFieldValueChange={handleFieldValueChange}
|
||||
aiPlacementKey={aiPlacementKey}
|
||||
signers={signers}
|
||||
onPersist={handlePersist}
|
||||
fieldsUrl={`/api/templates/${templateId}/fields`}
|
||||
fileUrl={`/api/templates/${templateId}/file`}
|
||||
/>
|
||||
</div>
|
||||
<TemplatePanel
|
||||
templateId={templateId}
|
||||
name={name}
|
||||
onNameChange={setName}
|
||||
signers={signers}
|
||||
onAddRole={handleAddRole}
|
||||
onRenameRole={handleRenameRole}
|
||||
onRemoveRole={handleRemoveRole}
|
||||
onAiAutoPlace={handleAiAutoPlace}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,436 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import type { DocumentSigner } from '@/lib/db/schema';
|
||||
import { ConfirmDialog } from '@/app/portal/_components/ConfirmDialog';
|
||||
|
||||
interface TemplatePanelProps {
|
||||
templateId: string;
|
||||
name: string;
|
||||
onNameChange: (name: string) => void;
|
||||
signers: DocumentSigner[];
|
||||
onAddRole: (label: string) => void;
|
||||
onRenameRole: (oldLabel: string, newLabel: string) => Promise<void>;
|
||||
onRemoveRole: (label: string) => Promise<void>;
|
||||
onAiAutoPlace: () => Promise<void>;
|
||||
onSave: () => Promise<void>;
|
||||
}
|
||||
|
||||
const PRESET_ROLES = ['Buyer', 'Co-Buyer', 'Seller', 'Co-Seller'];
|
||||
|
||||
export function TemplatePanel({
|
||||
templateId,
|
||||
name,
|
||||
onNameChange,
|
||||
signers,
|
||||
onAddRole,
|
||||
onRenameRole,
|
||||
onRemoveRole,
|
||||
onAiAutoPlace,
|
||||
onSave,
|
||||
}: TemplatePanelProps) {
|
||||
const [nameFocused, setNameFocused] = useState(false);
|
||||
|
||||
// Role editing state
|
||||
const [editingRole, setEditingRole] = useState<string | null>(null);
|
||||
const [editRoleValue, setEditRoleValue] = useState('');
|
||||
|
||||
// Role removal confirm dialog
|
||||
const [confirmRemoveRole, setConfirmRemoveRole] = useState<string | null>(null);
|
||||
|
||||
// Add role input
|
||||
const [newRoleLabel, setNewRoleLabel] = useState('');
|
||||
|
||||
// AI button state
|
||||
const [aiLoading, setAiLoading] = useState(false);
|
||||
const [aiError, setAiError] = useState<string | null>(null);
|
||||
|
||||
// Save button state
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saveStatus, setSaveStatus] = useState<'idle' | 'saved' | 'error'>('idle');
|
||||
|
||||
const handleNameBlur = async () => {
|
||||
setNameFocused(false);
|
||||
await fetch(`/api/templates/${templateId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name }),
|
||||
});
|
||||
};
|
||||
|
||||
const handleStartEditRole = (label: string) => {
|
||||
setEditingRole(label);
|
||||
setEditRoleValue(label);
|
||||
};
|
||||
|
||||
const handleCommitRename = async () => {
|
||||
if (!editingRole) return;
|
||||
const trimmed = editRoleValue.trim();
|
||||
if (trimmed && trimmed !== editingRole) {
|
||||
await onRenameRole(editingRole, trimmed);
|
||||
}
|
||||
setEditingRole(null);
|
||||
setEditRoleValue('');
|
||||
};
|
||||
|
||||
const handleCancelRename = () => {
|
||||
setEditingRole(null);
|
||||
setEditRoleValue('');
|
||||
};
|
||||
|
||||
const handleRemoveClick = (label: string) => {
|
||||
setConfirmRemoveRole(label);
|
||||
};
|
||||
|
||||
const handleConfirmRemove = async () => {
|
||||
if (!confirmRemoveRole) return;
|
||||
await onRemoveRole(confirmRemoveRole);
|
||||
setConfirmRemoveRole(null);
|
||||
};
|
||||
|
||||
const handleAddRole = () => {
|
||||
const trimmed = newRoleLabel.trim();
|
||||
if (!trimmed) return;
|
||||
onAddRole(trimmed);
|
||||
setNewRoleLabel('');
|
||||
};
|
||||
|
||||
const handleAi = async () => {
|
||||
setAiLoading(true);
|
||||
setAiError(null);
|
||||
try {
|
||||
await onAiAutoPlace();
|
||||
} catch (e) {
|
||||
setAiError(
|
||||
e instanceof Error
|
||||
? e.message
|
||||
: 'AI placement failed. Check that the form PDF is accessible and try again.'
|
||||
);
|
||||
} finally {
|
||||
setAiLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveClick = async () => {
|
||||
setSaving(true);
|
||||
setSaveStatus('idle');
|
||||
try {
|
||||
await onSave();
|
||||
setSaveStatus('saved');
|
||||
setTimeout(() => setSaveStatus('idle'), 3000);
|
||||
} catch {
|
||||
setSaveStatus('error');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const availablePresets = PRESET_ROLES.filter(
|
||||
(r) => !signers.some((s) => s.email === r)
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: 280,
|
||||
flexShrink: 0,
|
||||
backgroundColor: '#F9FAFB',
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 24,
|
||||
position: 'sticky',
|
||||
top: 96,
|
||||
alignSelf: 'flex-start',
|
||||
}}
|
||||
>
|
||||
{/* Template name */}
|
||||
<div>
|
||||
<label
|
||||
style={{ display: 'block', fontSize: 12, fontWeight: 600, color: '#6B7280', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.08em' }}
|
||||
>
|
||||
Template Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => onNameChange(e.target.value)}
|
||||
onFocus={() => setNameFocused(true)}
|
||||
onBlur={handleNameBlur}
|
||||
style={{
|
||||
width: '100%',
|
||||
fontSize: 14,
|
||||
fontWeight: 400,
|
||||
color: '#1B2B4B',
|
||||
border: 'none',
|
||||
borderBottom: nameFocused ? '1px solid #C9A84C' : '1px solid #E5E7EB',
|
||||
outline: 'none',
|
||||
backgroundColor: 'transparent',
|
||||
padding: '4px 0',
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Signers / Roles */}
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
color: '#6B7280',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.08em',
|
||||
marginBottom: 12,
|
||||
}}
|
||||
>
|
||||
Signers / Roles
|
||||
</div>
|
||||
|
||||
{/* Role pills */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 12 }}>
|
||||
{signers.map((signer) => (
|
||||
<div
|
||||
key={signer.email}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
padding: '6px 8px',
|
||||
backgroundColor: 'white',
|
||||
borderRadius: 6,
|
||||
border: '1px solid #E5E7EB',
|
||||
}}
|
||||
>
|
||||
{/* Color dot */}
|
||||
<div
|
||||
style={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: signer.color,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Label or inline edit */}
|
||||
{editingRole === signer.email ? (
|
||||
<input
|
||||
type="text"
|
||||
value={editRoleValue}
|
||||
onChange={(e) => setEditRoleValue(e.target.value)}
|
||||
onBlur={handleCommitRename}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') handleCommitRename();
|
||||
if (e.key === 'Escape') handleCancelRename();
|
||||
}}
|
||||
autoFocus
|
||||
style={{
|
||||
flex: 1,
|
||||
fontSize: 14,
|
||||
fontWeight: 400,
|
||||
color: '#1B2B4B',
|
||||
border: 'none',
|
||||
borderBottom: '1px solid #C9A84C',
|
||||
outline: 'none',
|
||||
backgroundColor: 'transparent',
|
||||
padding: '0',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
onClick={() => handleStartEditRole(signer.email)}
|
||||
style={{
|
||||
flex: 1,
|
||||
fontSize: 14,
|
||||
fontWeight: 400,
|
||||
color: '#1B2B4B',
|
||||
cursor: 'text',
|
||||
}}
|
||||
title="Click to rename"
|
||||
>
|
||||
{signer.email}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Remove button */}
|
||||
<button
|
||||
onClick={() => handleRemoveClick(signer.email)}
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: '#9CA3AF',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
padding: '0 2px',
|
||||
lineHeight: 1,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
onMouseEnter={(e) => { (e.currentTarget as HTMLButtonElement).style.color = '#DC2626'; }}
|
||||
onMouseLeave={(e) => { (e.currentTarget as HTMLButtonElement).style.color = '#9CA3AF'; }}
|
||||
title={`Remove role: ${signer.email}`}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Add role input */}
|
||||
<div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
|
||||
<input
|
||||
type="text"
|
||||
value={newRoleLabel}
|
||||
onChange={(e) => setNewRoleLabel(e.target.value)}
|
||||
placeholder="Role label (e.g. Buyer)"
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') handleAddRole(); }}
|
||||
style={{
|
||||
flex: 1,
|
||||
fontSize: 13,
|
||||
padding: '6px 10px',
|
||||
border: '1px solid #E5E7EB',
|
||||
borderRadius: 6,
|
||||
outline: 'none',
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={handleAddRole}
|
||||
style={{
|
||||
fontSize: 13,
|
||||
fontWeight: 600,
|
||||
padding: '6px 12px',
|
||||
backgroundColor: '#C9A84C',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: 6,
|
||||
cursor: 'pointer',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Preset chips */}
|
||||
{availablePresets.length > 0 && (
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
|
||||
{availablePresets.map((preset) => (
|
||||
<button
|
||||
key={preset}
|
||||
onClick={() => onAddRole(preset)}
|
||||
style={{
|
||||
fontSize: 12,
|
||||
padding: '3px 10px',
|
||||
border: '1px solid #E5E7EB',
|
||||
borderRadius: 12,
|
||||
backgroundColor: 'white',
|
||||
color: '#374151',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{preset}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* AI Auto-place button */}
|
||||
<div>
|
||||
<button
|
||||
onClick={handleAi}
|
||||
disabled={aiLoading}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: 36,
|
||||
backgroundColor: '#1B2B4B',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: 6,
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
cursor: aiLoading ? 'not-allowed' : 'pointer',
|
||||
opacity: aiLoading ? 0.8 : 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
{aiLoading ? (
|
||||
<>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: 12,
|
||||
height: 12,
|
||||
border: '2px solid rgba(255,255,255,0.3)',
|
||||
borderTopColor: 'white',
|
||||
borderRadius: '50%',
|
||||
animation: 'spin 0.8s linear infinite',
|
||||
}}
|
||||
/>
|
||||
Placing...
|
||||
</>
|
||||
) : (
|
||||
'AI Auto-place Fields'
|
||||
)}
|
||||
</button>
|
||||
{aiError && (
|
||||
<p style={{ fontSize: 13, color: '#DC2626', marginTop: 6 }}>{aiError}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Save button */}
|
||||
<div>
|
||||
<button
|
||||
onClick={handleSaveClick}
|
||||
disabled={saving}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: 36,
|
||||
backgroundColor: '#C9A84C',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: 6,
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
cursor: saving ? 'not-allowed' : 'pointer',
|
||||
opacity: saving ? 0.7 : 1,
|
||||
}}
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save Template'}
|
||||
</button>
|
||||
{saveStatus === 'saved' && (
|
||||
<p style={{ fontSize: 13, color: '#059669', marginTop: 6 }}>Saved</p>
|
||||
)}
|
||||
{saveStatus === 'error' && (
|
||||
<p style={{ fontSize: 13, color: '#DC2626', marginTop: 6 }}>
|
||||
Save failed. Please try again.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Confirm remove role dialog */}
|
||||
<ConfirmDialog
|
||||
isOpen={confirmRemoveRole !== null}
|
||||
title="Remove role?"
|
||||
message={
|
||||
confirmRemoveRole
|
||||
? `Removing '${confirmRemoveRole}' will unassign its field(s). This cannot be undone.`
|
||||
: ''
|
||||
}
|
||||
confirmLabel="Remove Role"
|
||||
onConfirm={handleConfirmRemove}
|
||||
onCancel={() => setConfirmRemoveRole(null)}
|
||||
/>
|
||||
|
||||
<style>{`
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { db } from '@/lib/db';
|
||||
import { documentTemplates } from '@/lib/db/schema';
|
||||
import { and, eq, isNull } from 'drizzle-orm';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { TemplatePageClient } from './_components/TemplatePageClient';
|
||||
|
||||
export default async function TemplateEditorPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const template = await db.query.documentTemplates.findFirst({
|
||||
where: and(eq(documentTemplates.id, id), isNull(documentTemplates.archivedAt)),
|
||||
with: { formTemplate: true },
|
||||
});
|
||||
if (!template || !template.formTemplate) notFound();
|
||||
|
||||
return (
|
||||
<TemplatePageClient
|
||||
templateId={template.id}
|
||||
templateName={template.name}
|
||||
formName={template.formTemplate.name}
|
||||
initialFields={template.signatureFields ?? []}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user