hzhang/HangmanLab.Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: template defects

Browse Source
This commit is contained in:
h z
2025-04-18 02:16:17 +01:00
parent 137ea649f8
commit c20cb168ff
10 changed files with 55 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/MarkdownTemplate/LayoutEditor.js
View File

@@ -1,13 +1,14 @@
import React, {useState} from 'react';
import React, {useEffect, useState} from 'react';
const LayoutEditor = ({layout, onChange}) => {
const [_layout, setLayout] = useState(layout || "");
useEffect(() => {setLayout(layout)}, [layout]);
return (
<textarea
className="textarea"
value={_layout}
onChange={(e) => {
setLayout(e.target.value);
onChange(layout);
onChange(e.target.value);
}}
/>
);

15
src/components/MarkdownTemplate/MarkdownTemplateEditor.js
View File

@@ -1,4 +1,4 @@
import React, { useContext, useState } from "react";
import React, {useContext, useEffect, useState} from "react";
import { AuthContext } from "../../AuthProvider";
import { useNavigate, useParams } from "react-router-dom";
import { useMarkdownTemplate, useSaveMarkdownTemplate } from "../../utils/queries/markdown-template-queries";
@@ -7,9 +7,7 @@ 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();
@@ -19,11 +17,20 @@ const MarkdownTemplateEditor = () => {
const [title, setTitle] = useState(template?.id || "");
const [parameters, setParameters] = useState(template?.parameters || []);
const [layout, setLayout] = useState(template?.layout || "");
const { roles } = useContext(AuthContext);
useEffect(() => {
setTitle(template?.title || "");
setParameters(template?.parameters || []);
setLayout(template?.layout || "");
}, [template]);
if (templateIsFetching) {
return <p>Loading...</p>;
}
if (!roles.includes("admin") || roles.includes("creator"))
return <div className="notification is-danger">Permission Denied</div>;
const handleSave = () => {
saveMarkdownTemplate.mutate(
{ id, data: { title, parameters, layout } },

6
src/components/MarkdownTemplate/ParametersManager.js
View File

@@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, {useEffect, useState} from "react";
import TypeEditor from "./TypeEditor";
const ParametersManager = ({ parameters, onChange }) => {
@@ -15,6 +15,9 @@ const ParametersManager = ({ parameters, onChange }) => {
setParameters(updated);
onChange(updated);
};
useEffect(() => {
setParameters(parameters);
}, [parameters]);
const handleNameChange = (index, newName) => {
const updated = [..._parameters];
@@ -71,6 +74,7 @@ const ParametersManager = ({ parameters, onChange }) => {
updated[index].type = newType;
setParameters(updated);
onChange(updated);
console.log("updated", updated);
}}
/>
</div>

27
src/components/MarkdownTemplate/TemplateSelector.js
View File

@@ -1,26 +1,39 @@
import React, {useState} from "react";
import React, {useEffect, useState} from "react";
import {useMarkdownTemplates} from "../../utils/queries/markdown-template-queries";
const TemplateSelector = ({template, onChange}) => {
const [_template, setTemplate] = useState(template || {
const {data:templates, isFetching: templatesAreFetching} = useMarkdownTemplates();
const [_template, setTemplate] = useState(templates?.find(t => t.id === template.id) || {
title: "",
parameters: [],
layout: ""
});
const {data:templates, isFetching: templatesAreFetching} = useMarkdownTemplates();
useEffect(() => {
setTemplate(templates?.find(t => t.id === template.id) || {
title: "",
parameters: [],
layout: ""
});
}, [template]);
if(templatesAreFetching) {
return <p>Loading...</p>
}
return (
<select
value={_template.title}
value={template.id}
onChange={(e) => {
setTemplate(e.target.value);
onChange(e.target.value);
const templateId = parseInt(e.target.value, 10);
onChange(templates.find(t => t.id === templateId) || {
title: "",
parameters: [],
layout: ""
});
}}>
<option value="">(None)</option>
{
templates.map((tmpl, index) => (
<option key={index} value={tmpl} >{tmpl.title}</option>
<option key={index} value={tmpl.id} >{tmpl.title}</option>
))
}
</select>

3
src/components/MarkdownTemplate/TypeEditor.js
View File

@@ -53,6 +53,7 @@ const TypeEditor = ({ type, onChange }) => {
return <TemplateSelector
template={_type.definition.template}
onChange={(newTemplate) => {
const updated = {
..._type,
definition: {
@@ -62,6 +63,8 @@ const TypeEditor = ({ type, onChange }) => {
};
setType(updated);
onChange(updated);
}}
/>;
default:

9
src/components/Markdowns/MarkdownContent.js
View File

@@ -8,6 +8,7 @@ import {useMarkdown} from "../../utils/queries/markdown-queries";
import {usePath} from "../../utils/queries/path-queries";
import {useMarkdownSetting} from "../../utils/queries/markdown-setting-queries";
import {useMarkdownTemplate} from "../../utils/queries/markdown-template-queries";
import {useMarkdownTemplateSetting} from "../../utils/queries/markdown-template-setting-queries";
const MarkdownContent = () => {
const { id } = useParams();
@@ -15,8 +16,8 @@ const MarkdownContent = () => {
const {data: markdown, isLoading, error} = useMarkdown(id);
const {data: path, isFetching: isPathFetching} = usePath(markdown?.path_id);
const {data: setting, isFetching: isSettingFetching} = useMarkdownSetting(markdown?.setting_id);
const {data: template_setting, isFetching: isTemplateSettingFetching} = useMarkdownTemplate(setting?.template_setting_id);
const {data: templateSetting, isFetching: isTemplateSettingFetching} = useMarkdownTemplateSetting(setting?.template_setting_id);
const {data: template, isFetching: isTemplateFetching} = useMarkdownTemplate(templateSetting?.template_id);
useEffect(() => {
if(markdown && markdown.title === "index" && path){
@@ -25,7 +26,7 @@ const MarkdownContent = () => {
}, [markdown, path]);
const notReady = isLoading || isPathFetching || isSettingFetching || isTemplateSettingFetching;
const notReady = isLoading || isPathFetching || isSettingFetching || isTemplateSettingFetching || isTemplateFetching;
if (notReady) {
return <div>Loading...</div>;
@@ -45,7 +46,7 @@ const MarkdownContent = () => {
</Link>
</PermissionGuard>
</div>
<MarkdownView content={JSON.parse(markdown.content)} template={template_setting}/>
<MarkdownView content={JSON.parse(markdown.content)} template={template}/>
</div>
);
};

4
src/components/Markdowns/MarkdownView.js
View File

@@ -34,11 +34,12 @@ const Translate = ({variable, value}) => {
const ParseTemplate = ({template, variables}) => {
if(!template || !Array.isArray(template.parameters)) return '';
const vars = variables || {};
let res = template.layout ?? '';
for (const parameter of template.parameters) {
res = res.replaceAll(`<${parameter.name}/>`, Translate({
variable: parameter,
value: variables[parameter.name]
value: vars[parameter.name]
}));
}
return res;
@@ -64,6 +65,7 @@ const MarkdownView = ({ content, template, height="auto" }) => {
layout: "<markdown/>",
title: "default"
};
return (
<div className="markdown-preview" style={{height}}>
<ReactMarkdown

4
src/components/Markdowns/TemplatedEditor.js
View File

@@ -1,7 +1,7 @@
import React, {useState} from "react";
import {useMarkdownTemplate} from "../../utils/queries/markdown-template-queries";
const TemplatedEditorComponent = ({ variable, value, namespace, onContentChanged }) => {
const TemplatedEditorComponent = ({ variable, value={}, namespace, onContentChanged }) => {
if(variable.type.base_type === "string") {
return (
<div>
@@ -102,7 +102,7 @@ const TemplatedEditorComponent = ({ variable, value, namespace, onContentChanged
}
if(variable.type.base_type === 'template'){
const {data: _template, isFetching: _templateIsFetching} = useMarkdownTemplate(variable.type.definition.template_id);
const {data: _template, isFetching: _templateIsFetching} = useMarkdownTemplate(variable.type.definition.template.id);
if(_templateIsFetching){
return(<p>Loading...</p>);
}

3
src/components/Navigations/PathNode.js
View File

@@ -86,12 +86,13 @@ const PathNode = ({ path, isRoot = false }) => {
<MarkdownNode
markdown={markdown}
handleMoveMarkdown={handleMoveMarkdown}
key={markdown.id}
/>
))}
</ul>
);
return (
<li>
<li key={path.id}>
<div className="path-node-header field has-addons">
<span className="control has-text-weight-bold path-toggle" onClick={isRoot ? undefined : toggleExpand}>
{isExpanded ? "-" : "+"}

4
src/components/Settings/MarkdownSettings/MarkdownTemplateSettingPanel.js
View File

@@ -15,7 +15,6 @@ const MarkdownTemplateSettingPanel = ({markdownSetting, onClose}) => {
const {data: templates, isFetching: templatesAreFetching}=useMarkdownTemplates();
const {data: template, isFetching: templateIsFetching} = useMarkdownTemplate(setting?.template_id);
const [selectedTemplateId, setSelectedTemplateId] = useState(template?.id ?? undefined);
const [selectedTemplate, setSelectedTemplate] = useState(templates?.find(t => t.id === selectedTemplateId) || undefined);
const createMarkdownTemplateSetting = useCreateMarkdownTemplateSetting();
const updateMarkdownSetting = useUpdateMarkdownSetting();
@@ -49,14 +48,11 @@ const MarkdownTemplateSettingPanel = ({markdownSetting, onClose}) => {
useEffect(() => {
if(template?.id && selectedTemplateId === undefined) {
setSelectedTemplateId(template?.id ?? undefined);
setSelectedTemplate(templates?.find(t => t.id === selectedTemplateId) || undefined);
}
},[template, selectedTemplateId]);
if (settingIsFetching || templatesAreFetching || templatesAreFetching || templateIsFetching) {
return (<p>Loading...</p>);
}
console.log("template", template);
console.log("selectedTemplateId", selectedTemplateId);
return setting ? (
<div className="box" style={{marginTop: "1rem"}}>
<h4 className="title is-5">Template Setting</h4>