feat(template): view created template

2025-07-13 14:01:47 +03:00
parent 2a8cbbbce8
commit 23f8cde5af
8 changed files with 275 additions and 32 deletions
--- a/backend/controllers/template/template.go
+++ b/backend/controllers/template/template.go
@@ -5,6 +5,8 @@ import (
 	"backend/utils/jwt"
 	res "backend/utils/responses"
 	"net/http"
+	"strconv"
+	"time"

 	"github.com/gin-gonic/gin"
 	"github.com/go-playground/validator/v10"
@@ -60,6 +62,13 @@ func Create(c *gin.Context) {
 	res.Success(c, gin.H{"message": "Successfully created template"})
 }

+type TemplatePreview struct {
+	Id        int       `json:"id"`
+	Name      string    `json:"name"`
+	UserID    int       `json:"user_id"`
+	CreatedAt time.Time `json:"created_at"`
+}
+
 func Get(c *gin.Context) {
 	// Get user from context
 	user, err := jwt.GetUser(c)
@@ -75,7 +84,44 @@ func Get(c *gin.Context) {
 		return
 	}

-	res.Success(c, templates)
+	templatePreview := make([]TemplatePreview, len(templates))
+	for i, t := range templates {
+		templatePreview[i] = TemplatePreview{
+			Id:        t.ID,
+			Name:      t.Name,
+			UserID:    t.UserID,
+			CreatedAt: t.CreatedAt,
+		}
+	}
+
+	res.Success(c, templatePreview)
+}
+
+func GetID(c *gin.Context) {
+	id, err := strconv.Atoi(c.Param("id"))
+	if err != nil {
+		res.Error(c, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	user, err := jwt.GetUser(c)
+	if err != nil {
+		res.NeedsToLogin(c)
+		return
+	}
+
+	templates, err := template.Get("id = $1 AND user_id = $2", id, user.Id)
+	if err != nil {
+		res.Error(c, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	if len(templates) == 0 {
+		res.Error(c, "Template not found", http.StatusNotFound)
+		return
+	}
+
+	res.Success(c, gin.H{"template": templates[0]})
 }

 func Update(c *gin.Context) {
--- a/backend/routes/routes.go
+++ b/backend/routes/routes.go
@@ -26,6 +26,7 @@ func SetupRoutes() *gin.Engine {
 	// Template routes (REST FUCKING GOOOOO)
 	templates := auth.Group("/templates")
 	templates.GET("", template.Get)
+	templates.GET(":id", template.GetID)
 	templates.POST("", template.Create)
 	// PUT (Edit)
 	// DELETE (Delete)
--- a/frontend/src/components/Template.tsx
+++ b/frontend/src/components/Template.tsx
@@ -1,23 +1,13 @@
-import { withForm } from "@/hooks/formHook";
+import type { TemplatePreview } from "@/types/api";
+import { Link } from "@tanstack/react-router";

-const Template = withForm({
-    defaultValues: {
-        name: "",
-        template: "",
-    },
-    props: {},
-    render({ form }) {
-        return (
-            <div className="mt-4 flex flex-col gap-4">
-                <form.AppField
-                    name="name"
-                    children={(f) => <f.TextField maxLength={50} label="Name" placeholder="Template name" />}
-                />
-
-                <form.AppField name="template" children={(f) => <f.RichTextEdit />} />
+export default function Template({ template }: { template: TemplatePreview }) {
+    return (
+        <Link to={"/templates/$templateId"} params={{ templateId: template.id.toString() }}>
+            <div className="p-4 border rounded-lg hover:bg-muted/40">
+                <h2 className="text-xl font-semibold">{template.name}</h2>
            </div>
-        );
-    },
-});
+        </Link>
+    );
+}

-export default Template;
--- a/frontend/src/routeTree.gen.ts
+++ b/frontend/src/routeTree.gen.ts
@@ -14,8 +14,10 @@ import { Route as LoginRouteImport } from './routes/login'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as TemplatesIndexRouteImport } from './routes/templates/index'
 import { Route as TemplatesCreateRouteImport } from './routes/templates/create'
+import { Route as TemplatesTemplateIdRouteImport } from './routes/templates/$templateId'
 import { Route as CoverCreateRouteImport } from './routes/cover/create'
 import { Route as CoverCoverIdRouteImport } from './routes/cover/$coverId'
+import { Route as TemplatesEditTemplateIdRouteImport } from './routes/templates/edit.$templateId'
 import { Route as CoverEditCoverIdRouteImport } from './routes/cover/edit.$coverId'

 const RegisterRoute = RegisterRouteImport.update({
@@ -43,6 +45,11 @@ const TemplatesCreateRoute = TemplatesCreateRouteImport.update({
  path: '/templates/create',
  getParentRoute: () => rootRouteImport,
 } as any)
+const TemplatesTemplateIdRoute = TemplatesTemplateIdRouteImport.update({
+  id: '/templates/$templateId',
+  path: '/templates/$templateId',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const CoverCreateRoute = CoverCreateRouteImport.update({
  id: '/cover/create',
  path: '/cover/create',
@@ -53,6 +60,11 @@ const CoverCoverIdRoute = CoverCoverIdRouteImport.update({
  path: '/cover/$coverId',
  getParentRoute: () => rootRouteImport,
 } as any)
+const TemplatesEditTemplateIdRoute = TemplatesEditTemplateIdRouteImport.update({
+  id: '/templates/edit/$templateId',
+  path: '/templates/edit/$templateId',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const CoverEditCoverIdRoute = CoverEditCoverIdRouteImport.update({
  id: '/cover/edit/$coverId',
  path: '/cover/edit/$coverId',
@@ -65,9 +77,11 @@ export interface FileRoutesByFullPath {
  '/register': typeof RegisterRoute
  '/cover/$coverId': typeof CoverCoverIdRoute
  '/cover/create': typeof CoverCreateRoute
+  '/templates/$templateId': typeof TemplatesTemplateIdRoute
  '/templates/create': typeof TemplatesCreateRoute
  '/templates': typeof TemplatesIndexRoute
  '/cover/edit/$coverId': typeof CoverEditCoverIdRoute
+  '/templates/edit/$templateId': typeof TemplatesEditTemplateIdRoute
 }
 export interface FileRoutesByTo {
  '/': typeof IndexRoute
@@ -75,9 +89,11 @@ export interface FileRoutesByTo {
  '/register': typeof RegisterRoute
  '/cover/$coverId': typeof CoverCoverIdRoute
  '/cover/create': typeof CoverCreateRoute
+  '/templates/$templateId': typeof TemplatesTemplateIdRoute
  '/templates/create': typeof TemplatesCreateRoute
  '/templates': typeof TemplatesIndexRoute
  '/cover/edit/$coverId': typeof CoverEditCoverIdRoute
+  '/templates/edit/$templateId': typeof TemplatesEditTemplateIdRoute
 }
 export interface FileRoutesById {
  __root__: typeof rootRouteImport
@@ -86,9 +102,11 @@ export interface FileRoutesById {
  '/register': typeof RegisterRoute
  '/cover/$coverId': typeof CoverCoverIdRoute
  '/cover/create': typeof CoverCreateRoute
+  '/templates/$templateId': typeof TemplatesTemplateIdRoute
  '/templates/create': typeof TemplatesCreateRoute
  '/templates/': typeof TemplatesIndexRoute
  '/cover/edit/$coverId': typeof CoverEditCoverIdRoute
+  '/templates/edit/$templateId': typeof TemplatesEditTemplateIdRoute
 }
 export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
@@ -98,9 +116,11 @@ export interface FileRouteTypes {
    | '/register'
    | '/cover/$coverId'
    | '/cover/create'
+    | '/templates/$templateId'
    | '/templates/create'
    | '/templates'
    | '/cover/edit/$coverId'
+    | '/templates/edit/$templateId'
  fileRoutesByTo: FileRoutesByTo
  to:
    | '/'
@@ -108,9 +128,11 @@ export interface FileRouteTypes {
    | '/register'
    | '/cover/$coverId'
    | '/cover/create'
+    | '/templates/$templateId'
    | '/templates/create'
    | '/templates'
    | '/cover/edit/$coverId'
+    | '/templates/edit/$templateId'
  id:
    | '__root__'
    | '/'
@@ -118,9 +140,11 @@ export interface FileRouteTypes {
    | '/register'
    | '/cover/$coverId'
    | '/cover/create'
+    | '/templates/$templateId'
    | '/templates/create'
    | '/templates/'
    | '/cover/edit/$coverId'
+    | '/templates/edit/$templateId'
  fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -129,9 +153,11 @@ export interface RootRouteChildren {
  RegisterRoute: typeof RegisterRoute
  CoverCoverIdRoute: typeof CoverCoverIdRoute
  CoverCreateRoute: typeof CoverCreateRoute
+  TemplatesTemplateIdRoute: typeof TemplatesTemplateIdRoute
  TemplatesCreateRoute: typeof TemplatesCreateRoute
  TemplatesIndexRoute: typeof TemplatesIndexRoute
  CoverEditCoverIdRoute: typeof CoverEditCoverIdRoute
+  TemplatesEditTemplateIdRoute: typeof TemplatesEditTemplateIdRoute
 }

 declare module '@tanstack/react-router' {
@@ -171,6 +197,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof TemplatesCreateRouteImport
      parentRoute: typeof rootRouteImport
    }
+    '/templates/$templateId': {
+      id: '/templates/$templateId'
+      path: '/templates/$templateId'
+      fullPath: '/templates/$templateId'
+      preLoaderRoute: typeof TemplatesTemplateIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
    '/cover/create': {
      id: '/cover/create'
      path: '/cover/create'
@@ -185,6 +218,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof CoverCoverIdRouteImport
      parentRoute: typeof rootRouteImport
    }
+    '/templates/edit/$templateId': {
+      id: '/templates/edit/$templateId'
+      path: '/templates/edit/$templateId'
+      fullPath: '/templates/edit/$templateId'
+      preLoaderRoute: typeof TemplatesEditTemplateIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
    '/cover/edit/$coverId': {
      id: '/cover/edit/$coverId'
      path: '/cover/edit/$coverId'
@@ -201,9 +241,11 @@ const rootRouteChildren: RootRouteChildren = {
  RegisterRoute: RegisterRoute,
  CoverCoverIdRoute: CoverCoverIdRoute,
  CoverCreateRoute: CoverCreateRoute,
+  TemplatesTemplateIdRoute: TemplatesTemplateIdRoute,
  TemplatesCreateRoute: TemplatesCreateRoute,
  TemplatesIndexRoute: TemplatesIndexRoute,
  CoverEditCoverIdRoute: CoverEditCoverIdRoute,
+  TemplatesEditTemplateIdRoute: TemplatesEditTemplateIdRoute,
 }
 export const routeTree = rootRouteImport
  ._addFileChildren(rootRouteChildren)
--- a/frontend/src/routes/templates/$templateId.tsx
+++ b/frontend/src/routes/templates/$templateId.tsx
@@ -0,0 +1,79 @@
+import renderQueryState from "@/components/RenderQueryState";
+import Authorised from "@/layouts/Authorised";
+import requests from "@/lib/requests";
+import type { Template } from "@/types/api";
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import "../../editor.css";
+import { Button } from "@/components/ui/button";
+import { EditIcon, Trash2 } from "lucide-react";
+
+export const Route = createFileRoute("/templates/$templateId")({
+    component: RouteComponent,
+});
+
+function RouteComponent() {
+    const { templateId } = Route.useParams();
+    const navigate = useNavigate();
+
+    const template = useQuery({
+        queryKey: ["template", templateId],
+        queryFn: () => requests.get<{ template: Template }>(`/templates/${templateId}`, {}),
+    });
+    const templateState = renderQueryState({
+        query: template,
+        noFound: "template",
+        skeleton: {
+            count: 1,
+            className: "h-[400px]",
+        },
+    });
+
+    const handleDelete = async () => {
+        const a = confirm("Are you sure?");
+        if (!a) return;
+
+        requests.delete(`/template/${templateId}`, {
+            success() {
+                navigate({ to: "/" });
+            },
+        });
+    };
+
+    return (
+        <Authorised>
+            <div className="flex items-center gap-4 mb-8 md:justify-between">
+                <h1 className="text-2xl font-semibold">{template.data?.template.name || "Loading..."}</h1>
+
+                <div className="space-x-2">
+                    <Button
+                        className="hover:bg-danger hover:text-background"
+                        variant="ghost"
+                        onClick={handleDelete}
+                    >
+                        <Trash2 />
+                    </Button>
+                    <Link
+                        to={"/templates/edit/$templateId"}
+                        params={{ templateId: template.data?.template.id.toString() || "" }}
+                    >
+                        <Button variant="outline">
+                            <EditIcon />
+                        </Button>
+                    </Link>
+                </div>
+            </div>
+
+            <div className="bg-background p-4 border">
+                {templateState !== null ? (
+                    templateState
+                ) : (
+                    <div
+                        className="tiptap"
+                        dangerouslySetInnerHTML={{ __html: template.data?.template.template || "" }}
+                    />
+                )}
+            </div>
+        </Authorised>
+    );
+}
--- a/frontend/src/routes/templates/edit.$templateId.tsx
+++ b/frontend/src/routes/templates/edit.$templateId.tsx
@@ -0,0 +1,85 @@
+import renderQueryState from "@/components/RenderQueryState";
+import { Button } from "@/components/ui/button";
+import { useAppForm } from "@/hooks/formHook";
+import Authorised from "@/layouts/Authorised";
+import requests from "@/lib/requests";
+import type { Template } from "@/types/api";
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { z } from "zod/v4";
+
+export const Route = createFileRoute("/templates/edit/$templateId")({
+    component: RouteComponent,
+});
+
+const editSchema = z.object({
+    name: z.string().min(1, "Name is required"),
+    content: z.string().min(50, "Template is too short"),
+});
+
+function RouteComponent() {
+    const { templateId } = Route.useParams();
+    const navigate = useNavigate();
+    const loading = useState(false);
+
+    const template = useQuery({
+        queryKey: ["template", templateId],
+        queryFn: () => requests.get<{ template: Template }>(`/template/${templateId}`, {}),
+    });
+    const templateState = renderQueryState({
+        query: template,
+        noFound: "template",
+        skeleton: {
+            count: 1,
+            className: "h-[400px]",
+        },
+    });
+
+    const edit = useAppForm({
+        defaultValues: {
+            name: template.data?.template.name || "",
+            content: template.data?.template.content || null,
+        },
+        validators: {
+            onBlur: editSchema,
+        },
+        onSubmit({ value }) {
+            requests.put(`/template/${templateId}`, {
+                data: value,
+                before() {
+                    loading[1](true);
+                },
+                finally() {
+                    loading[1](false);
+                },
+                success() {
+                    navigate({ to: "/templates/$templateId", params: { templateId: templateId } });
+                },
+            });
+        },
+    });
+
+    return (
+        <Authorised>
+            <h1 className="text-2xl font-bold text-primary">Edit template</h1>
+
+            <div className="mt-4 space-y-4">
+                <edit.AppField
+                    name="name"
+                    children={(f) => <f.TextField label="Name" placeholder="Your template name" />}
+                />
+
+                {templateState !== null ? (
+                    templateState
+                ) : (
+                    <edit.AppField name="content" children={(f) => <f.RichTextEdit />} />
+                )}
+            </div>
+
+            <Button className="mt-4" onClick={edit.handleSubmit}>
+                Save
+            </Button>
+        </Authorised>
+    );
+}
--- a/frontend/src/routes/templates/index.tsx
+++ b/frontend/src/routes/templates/index.tsx
@@ -4,8 +4,9 @@ import requests from "@/lib/requests";
 import { useQuery } from "@tanstack/react-query";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { Plus } from "lucide-react";
-import type { Template } from "@/types/api";
+import type { TemplatePreview } from "@/types/api";
 import renderQueryState from "@/components/RenderQueryState";
+import Template from "@/components/Template";

 export const Route = createFileRoute("/templates/")({
    component: RouteComponent,
@@ -14,7 +15,7 @@ export const Route = createFileRoute("/templates/")({
 function RouteComponent() {
    const templates = useQuery({
        queryKey: ["user_templates"],
-        queryFn: () => requests.get<Template[]>("/templates", {}),
+        queryFn: () => requests.get<TemplatePreview[]>("/templates", {}),
    });
    const templatesState = renderQueryState({
        query: templates,
@@ -33,14 +34,10 @@ function RouteComponent() {
                </Link>
            </div>

-            <div className="flex flex-col gap-2 mt-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
                {templatesState !== null
                    ? templatesState
-                    : templates.data?.map((template, i) => (
-                          <div className="flex gap-2 items-center" key={i}>
-                              <p className="text-lg">{template.name}</p>
-                          </div>
-                      ))}
+                    : templates.data?.map((template, i) => <Template template={template} key={i} />)}
            </div>
        </Authorised>
    );
--- a/frontend/src/types/api.ts
+++ b/frontend/src/types/api.ts
@@ -20,14 +20,17 @@ export interface TokenUserInfo {
 }

 // -------- Templates --------
-export interface Template {
+export interface TemplatePreview {
    id: number;
-    user_id: number;
    name: string;
-    template: string;
+    user_id: number;
    created_at: string;
 }

+export interface Template extends TemplatePreview {
+    template: string;
+}
+
 // -------- Cover letters --------
 export interface CoverLetterPreview {
    id: number;