91 lines
3.5 KiB
JavaScript
91 lines
3.5 KiB
JavaScript
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;
|