From e1440bcea7c237159997acd589305d52b20dfb20 Mon Sep 17 00:00:00 2001
From: Ken Yasue <ken@clover.studio!>
Date: Tue, 25 Mar 2025 11:43:47 +0100
Subject: [PATCH] Add title field to EmailTemplate model and update UI

---
 .../components/EditEmailTemplate.tsx          | 25 ++++++++++++++++---
 .../email-templates/detail/[id]/page.tsx      |  6 +++++
 .../(admin)/admin/email-templates/page.tsx    |  6 ++---
 src/app/api/email-templates/[id]/route.ts     |  7 +++---
 src/app/api/email-templates/route.ts          |  7 +++---
 src/lib/database/entities/EmailTemplate.ts    |  3 +++
 6 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/app/(admin)/admin/email-templates/components/EditEmailTemplate.tsx b/src/app/(admin)/admin/email-templates/components/EditEmailTemplate.tsx
index 33fe90f..8661ffd 100644
--- a/src/app/(admin)/admin/email-templates/components/EditEmailTemplate.tsx
+++ b/src/app/(admin)/admin/email-templates/components/EditEmailTemplate.tsx
@@ -6,6 +6,7 @@ import Link from 'next/link';
 
 interface EmailTemplate {
     id: string;
+    title: string;
     content: string;
     createdAt: string;
     modifiedAt: string;
@@ -18,6 +19,7 @@ interface EditEmailTemplateProps {
 export default function EditEmailTemplate({ id }: EditEmailTemplateProps) {
     const router = useRouter();
     const [formData, setFormData] = useState({
+        title: '',
         content: '',
     });
     const [isLoading, setIsLoading] = useState(!!id); // Only loading if editing
@@ -42,6 +44,7 @@ export default function EditEmailTemplate({ id }: EditEmailTemplateProps) {
                 const template: EmailTemplate = await response.json();
 
                 setFormData({
+                    title: template.title,
                     content: template.content,
                 });
 
@@ -55,7 +58,7 @@ export default function EditEmailTemplate({ id }: EditEmailTemplateProps) {
         fetchEmailTemplate();
     }, [id]);
 
-    const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         const { name, value } = e.target;
         setFormData((prev) => ({ ...prev, [name]: value }));
     };
@@ -67,8 +70,8 @@ export default function EditEmailTemplate({ id }: EditEmailTemplateProps) {
 
         try {
             // Validate form
-            if (!formData.content) {
-                throw new Error('Content is required');
+            if (!formData.title || !formData.content) {
+                throw new Error('Title and content are required');
             }
 
             // Determine if creating or updating
@@ -132,6 +135,22 @@ export default function EditEmailTemplate({ id }: EditEmailTemplateProps) {
             )}
 
             <form onSubmit={handleSubmit} className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+                <div className="mb-4">
+                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="title">
+                        Title
+                    </label>
+                    <input
+                        className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                        id="title"
+                        type="text"
+                        name="title"
+                        value={formData.title}
+                        onChange={handleChange}
+                        placeholder="Email template title"
+                        required
+                    />
+                </div>
+
                 <div className="mb-6">
                     <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="content">
                         Content
diff --git a/src/app/(admin)/admin/email-templates/detail/[id]/page.tsx b/src/app/(admin)/admin/email-templates/detail/[id]/page.tsx
index c872247..6115081 100644
--- a/src/app/(admin)/admin/email-templates/detail/[id]/page.tsx
+++ b/src/app/(admin)/admin/email-templates/detail/[id]/page.tsx
@@ -83,6 +83,12 @@ export default async function EmailTemplateDetailPage(props: { params: Promise<{
                             </dd>
                         </div>
                         <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                            <dt className="text-sm font-medium text-gray-500">Title</dt>
+                            <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                                {emailTemplate.title}
+                            </dd>
+                        </div>
+                        <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                             <dt className="text-sm font-medium text-gray-500">Content</dt>
                             <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 whitespace-pre-wrap">
                                 {emailTemplate.content}
diff --git a/src/app/(admin)/admin/email-templates/page.tsx b/src/app/(admin)/admin/email-templates/page.tsx
index c9211a0..48f675a 100644
--- a/src/app/(admin)/admin/email-templates/page.tsx
+++ b/src/app/(admin)/admin/email-templates/page.tsx
@@ -40,7 +40,7 @@ export default async function AdminEmailTemplates() {
                                             scope="col"
                                             className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
                                         >
-                                            Content Preview
+                                            Title
                                         </th>
                                         <th
                                             scope="col"
@@ -76,9 +76,7 @@ export default async function AdminEmailTemplates() {
                                                         href={`/admin/email-templates/detail/${template.id}`}
                                                         className="text-indigo-600 hover:text-indigo-900"
                                                     >
-                                                        {template.content.length > 100
-                                                            ? template.content.substring(0, 100) + '...'
-                                                            : template.content}
+                                                        {template.title}
                                                     </Link>
                                                 </td>
                                                 <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
diff --git a/src/app/api/email-templates/[id]/route.ts b/src/app/api/email-templates/[id]/route.ts
index 7acd56a..33dd4b6 100644
--- a/src/app/api/email-templates/[id]/route.ts
+++ b/src/app/api/email-templates/[id]/route.ts
@@ -55,17 +55,18 @@ export async function PUT(
         }
 
         const data = await request.json();
-        const { content } = data;
+        const { title, content } = data;
 
         // Validate required fields
-        if (!content) {
+        if (!title || !content) {
             return NextResponse.json(
-                { error: 'Content is required' },
+                { error: 'Title and content are required' },
                 { status: 400 }
             );
         }
 
         // Update email template fields
+        emailTemplate.title = title;
         emailTemplate.content = content;
 
         // Save the updated email template
diff --git a/src/app/api/email-templates/route.ts b/src/app/api/email-templates/route.ts
index 04d51ab..59b3875 100644
--- a/src/app/api/email-templates/route.ts
+++ b/src/app/api/email-templates/route.ts
@@ -28,18 +28,19 @@ export async function POST(request: NextRequest) {
         const emailTemplateRepository = dataSource.getRepository(EmailTemplate);
 
         const data = await request.json();
-        const { content } = data;
+        const { title, content } = data;
 
         // Validate required fields
-        if (!content) {
+        if (!title || !content) {
             return NextResponse.json(
-                { error: 'Content is required' },
+                { error: 'Title and content are required' },
                 { status: 400 }
             );
         }
 
         // Create and save the new email template
         const emailTemplate = new EmailTemplate();
+        emailTemplate.title = title;
         emailTemplate.content = content;
 
         const savedEmailTemplate = await emailTemplateRepository.save(emailTemplate);
diff --git a/src/lib/database/entities/EmailTemplate.ts b/src/lib/database/entities/EmailTemplate.ts
index f2405b3..2e286be 100644
--- a/src/lib/database/entities/EmailTemplate.ts
+++ b/src/lib/database/entities/EmailTemplate.ts
@@ -5,6 +5,9 @@ export class EmailTemplate {
     @PrimaryGeneratedColumn('uuid')
     id: string;
 
+    @Column()
+    title: string;
+
     @Column('text')
     content: string;