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/Settings/MarkdownSettings/MarkdownTemplateSettingPanel.js
+++ b/src/components/Settings/MarkdownSettings/MarkdownTemplateSettingPanel.js
@@ -0,0 +1,85 @@
+import {
+    useCreateMarkdownTemplateSetting,
+    useMarkdownTemplate,
+    useMarkdownTemplates,
+    useMarkdownTemplateSetting, useUpdateMarkdownTemplateSetting
+} from "../../../utils/queries/template-queries";
+import {useState} from "react";
+import {useUpdateMarkdownSetting} from "../../../utils/queries/setting-queries";
+
+const MarkdownTemplateSettingPanel = ({markdownSetting, onClose}) => {
+    const {data: setting, isFetching: settingIsFetching } = useMarkdownTemplateSetting(markdownSetting.template_setting_id || 0);
+    const {data: templates, isFetching: templatesAreFetching}=useMarkdownTemplates();
+    const {data: template, isFetching: templateIsFetching} = useMarkdownTemplate(setting?.template_id);
+    const [selectedTemplate, setSelectedTemplate] = useState(template);
+
+    const createMarkdownTemplateSetting = useCreateMarkdownTemplateSetting();
+    const updateMarkdownSetting = useUpdateMarkdownSetting();
+    const updateMarkdownTemplateSetting = useUpdateMarkdownTemplateSetting();
+    const handleCreateTemplateSetting = () => {
+        createMarkdownTemplateSetting.mutate({}, {
+           onSuccess: (data) => {
+               updateMarkdownSetting.mutate({
+                   id: markdownSetting.id,
+                   data: {
+                       template_setting_id: data.id,
+                   }
+               });
+           }
+        });
+    };
+
+    const handleSaveMarkdownTemplateSetting = () => {
+        updateMarkdownTemplateSetting.mutate({
+            id: setting.id,
+            data: {
+                template_id: selectedTemplate.id,
+            }
+        }, {
+            onSuccess: () => alert("Saved"),
+            onError: () => alert("Failed to save"),
+        });
+        onClose();
+    };
+
+    if (settingIsFetching || templatesAreFetching || templatesAreFetching || templateIsFetching) {
+        return (<p>Loading...</p>);
+    }
+    return setting ? (
+        <div className="box" style={{marginTop: "1rem"}}>
+            <h4 className="title is-5">Template Setting</h4>
+            <div className="field">
+                <label className="label">Use Template</label>
+                <div className="select is-fullwidth">
+                    <select
+                        value={selectedTemplate.title}
+                        onChange={(e) => setSelectedTemplate(e.target.value)}
+                    >
+                        <option value="">(default)</option>
+                        {templates.map((_template, index) => (
+                            <option key={index} value={_template}>{_template.title}</option>
+                        ))}
+
+                    </select>
+                </div>
+            </div>
+            <button
+                className="button is-primary"
+                type="button"
+                onClick={handleSaveMarkdownTemplateSetting}
+            >
+                Save Template Setting
+            </button>
+        </div>
+    ) : (
+        <button
+            className="button is-primary"
+            type="button"
+            onClick={handleCreateTemplateSetting}
+            >
+            Create Template Setting
+        </button>
+    );
+};
+
+export default MarkdownTemplateSettingPanel;