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

add: markdown permission setting

Browse Source 
improve: template
This commit is contained in:
h z
2025-04-25 00:39:01 +01:00
parent c20cb168ff
commit 9ea44385ee
17 changed files with 893 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -74,7 +74,6 @@ const ParametersManager = ({ parameters, onChange }) => {
updated[index].type = newType;
setParameters(updated);
onChange(updated);
console.log("updated", updated);
}}
/>
</div>

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

@@ -1,43 +1,59 @@
import React, {useEffect, useState} from "react";
import {useMarkdownTemplates} from "../../utils/queries/markdown-template-queries";
import React, { useEffect, useState } from "react";
import { useMarkdownTemplates } from "../../utils/queries/markdown-template-queries";
const TemplateSelector = ({template, onChange}) => {
const {data:templates, isFetching: templatesAreFetching} = useMarkdownTemplates();
const [_template, setTemplate] = useState(templates?.find(t => t.id === template.id) || {
title: "",
parameters: [],
layout: ""
});
useEffect(() => {
setTemplate(templates?.find(t => t.id === template.id) || {
const TemplateSelector = ({ template, onChange }) => {
const { data: templates, isFetching: templatesAreFetching } = useMarkdownTemplates();
const [_template, setTemplate] = useState(
templates?.find((t) => t.id === template?.id) || {
title: "",
parameters: [],
layout: ""
});
}, [template]);
if(templatesAreFetching) {
return <p>Loading...</p>
layout: "",
}
);
useEffect(() => {
setTemplate(
templates?.find((t) => t.id === template?.id) || {
title: "",
parameters: [],
layout: "",
}
);
}, [template, templates]);
if (templatesAreFetching) {
return <p>Loading...</p>;
}
return (
<select
value={template.id}
onChange={(e) => {
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.id} >{tmpl.title}</option>
))
}
</select>
<div className="field">
<label className="label">Select Template</label>
<div className="control">
<div className="select is-fullwidth is-primary">
<select
value={template?.id || ""}
onChange={(e) => {
const id = parseInt(e.target.value, 10);
onChange(
templates.find((t) => t.id === id) || {
title: "",
parameters: [],
layout: "",
}
);
}}
>
<option value="">(None)</option>
{templates.map((tmpl) => (
<option key={tmpl.id} value={tmpl.id}>
{tmpl.title}
</option>
))}
</select>
</div>
</div>
</div>
);
};
export default TemplateSelector;
export default TemplateSelector;

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

@@ -4,91 +4,116 @@ import TemplateSelector from './TemplateSelector';
const TypeEditor = ({ type, onChange }) => {
const [_type, setType] = React.useState(type || {});
const updateType = (updated) => {
setType(updated);
onChange(updated);
};
const renderExtraFields = () => {
switch (_type.base_type) {
case 'enum':
return <EnumsEditor
enums={_type.definition.enums}
onChange={(newEnums) => {
const updated = {
..._type,
definition: {
..._type.definition,
enums: newEnums
}
};
setType(updated);
onChange(updated);
}}
/>;
case 'list':
return (
<div>
<TypeEditor
extendType={_type.extend_type}
onChange={(extendType) => {
const updated = {..._type, extend_type: extendType};
setType(updated);
onChange(updated);
}}
/>
<textarea
className="textarea"
value={_type.definition.iter_layout}
onChange={(e) => {
const updated = {
..._type,
definition: {
..._type.definition,
iter_layout: e.target.value
}
};
setType(updated);
onChange(updated);
}}
/>
<div className="field">
<label className="label">Enums</label>
<div className="control">
<EnumsEditor
enums={_type.definition.enums}
onChange={(newEnums) => {
updateType({
..._type,
definition: { ..._type.definition, enums: newEnums },
});
}}
/>
</div>
</div>
);
case 'list':
return (
<div className="box">
<div className="field">
<label className="label">Extend Type</label>
<div className="control">
<TypeEditor
type={_type.extend_type}
onChange={(extendType) => {
updateType({ ..._type, extend_type: extendType });
}}
/>
</div>
</div>
<div className="field">
<label className="label">Iter Layout</label>
<div className="control">
<textarea
className="textarea"
value={_type.definition.iter_layout || ''}
onChange={(e) => {
updateType({
..._type,
definition: {
..._type.definition,
iter_layout: e.target.value,
},
});
}}
/>
</div>
</div>
</div>
);
case 'template':
return <TemplateSelector
template={_type.definition.template}
onChange={(newTemplate) => {
return (
<div className="field">
<label className="label">Template</label>
<div className="control">
<TemplateSelector
template={_type.definition.template}
onChange={(newTemplate) => {
updateType({
..._type,
definition: {
..._type.definition,
template: newTemplate,
},
});
}}
/>
</div>
</div>
);
const updated = {
..._type,
definition: {
..._type.definition,
template: newTemplate
}
};
setType(updated);
onChange(updated);
}}
/>;
default:
return null;
}
};
return (
<div>
<label>type:</label>
<select value={_type.base_type} onChange={(e) => {
const updated = {
base_type: e.target.value,
definition: {}
};
setType(updated);
onChange(updated);
}}>
<option value="string">string</option>
<option value="markdown">markdown</option>
<option value="enum">enum</option>
<option value="list">list</option>
<option value="template">template</option>
</select>
<div className="box">
<div className="field">
<label className="label">Type</label>
<div className="control">
<div className="select is-fullwidth">
<select
value={_type.base_type || ''}
onChange={(e) => {
const updated = { base_type: e.target.value, definition: {} };
updateType(updated);
}}
>
<option value="string">string</option>
<option value="markdown">markdown</option>
<option value="enum">enum</option>
<option value="list">list</option>
<option value="template">template</option>
</select>
</div>
</div>
</div>
{renderExtraFields()}
</div>
);