add: template editor

2025-04-14 17:02:22 +01:00
parent 09338a2683
commit 947b59e3ea
29 changed files with 1277 additions and 166 deletions
--- a/src/components/MarkdownTemplate/MarkdownTemplateEditor.js
+++ b/src/components/MarkdownTemplate/MarkdownTemplateEditor.js
@@ -0,0 +1,90 @@
+import React, { useContext, useState } from "react";
+import { AuthContext } from "../../AuthProvider";
+import { useNavigate, useParams } from "react-router-dom";
+import { useMarkdownTemplate, useSaveMarkdownTemplate } from "../../utils/queries/template-queries";
+import LayoutEditor from "./LayoutEditor";
+import ParametersManager from "./ParametersManager";
+import "bulma/css/bulma.min.css";
+
+const MarkdownTemplateEditor = () => {
+    const { roles } = useContext(AuthContext);
+    if (!roles.includes("admin") || roles.includes("creator"))
+        return <div className="notification is-danger">Permission Denied</div>;
+
+    const navigate = useNavigate();
+    const { id } = useParams();
+    const { data: template, isFetching: templateIsFetching } = useMarkdownTemplate(id);
+    const saveMarkdownTemplate = useSaveMarkdownTemplate();
+
+    const [title, setTitle] = useState(template?.id || "");
+    const [parameters, setParameters] = useState(template?.parameters || []);
+    const [layout, setLayout] = useState(template?.layout || "");
+
+    if (templateIsFetching) {
+        return <p>Loading...</p>;
+    }
+
+    const handleSave = () => {
+        saveMarkdownTemplate.mutate(
+            { id, data: { title, parameters, layout } },
+            {
+                onSuccess: () => {
+                    navigate("/");
+                },
+                onError: () => {
+                    alert("Error saving template.");
+                }
+            }
+        );
+    };
+
+    return (
+        <section className="section">
+            <div className="container">
+                <h2 className="title is-4">Markdown Template Editor</h2>
+                <div className="field">
+                    <label className="label">Title:</label>
+                    <div className="control">
+                        <input
+                            className="input"
+                            type="text"
+                            placeholder="Enter template title"
+                            value={title}
+                            onChange={(e) => setTitle(e.target.value)}
+                        />
+                    </div>
+                </div>
+                <div className="columns is-variable is-8">
+                    <div className="column">
+                        <h3 className="title is-5">Layout</h3>
+                        <div className="box">
+                            <LayoutEditor
+                                layout={layout}
+                                parameters={parameters}
+                                onChange={(newLayout) => setLayout(newLayout)}
+                            />
+                        </div>
+                    </div>
+                    <div className="column">
+                        <h3 className="title is-5">Parameters</h3>
+                        <div className="box">
+                            <ParametersManager
+                                parameters={parameters}
+                                onChange={(newParameters) => setParameters(newParameters)}
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div className="field is-grouped">
+                    <div className="control">
+                        <button className="button is-primary" onClick={handleSave}>
+                            Save Template
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default MarkdownTemplateEditor;