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

add: markdown template to json schema

Browse Source
This commit is contained in:
h z
2025-05-12 09:59:23 +01:00
parent e5affe3465
commit 30a46d5064
2 changed files with 171 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/Modals/JsonSchemaModal.js Normal file
View File

@@ -0,0 +1,42 @@
import React from 'react';
const JsonSchemaModal = ({ isActive, onClose, schema }) => {
const handleCopy = () => {
navigator.clipboard.writeText(JSON.stringify(schema, null, 2));
};
return (
<div className={`modal ${isActive ? 'is-active' : ''}`}>
<div className="modal-background" onClick={onClose}></div>
<div className="modal-card">
<header className="modal-card-head">
<p className="modal-card-title">JSON Schema</p>
<button className="delete" aria-label="close" onClick={onClose}></button>
</header>
<section className="modal-card-body">
<div className="field">
<div className="control">
<textarea
className="textarea"
value={JSON.stringify(schema, null, 2)}
readOnly
style={{ height: "50vh" }}
/>
</div>
</div>
</section>
<footer className="modal-card-foot">
<button className="button is-primary" onClick={handleCopy}>
<span className="icon">
<i className="fas fa-copy"></i>
</span>
<span>copy</span>
</button>
<button className="button" onClick={onClose}>close</button>
</footer>
</div>
</div>
);
};
export default JsonSchemaModal;

146
src/components/Navigations/SideTabs/TemplateTab.js
View File

@@ -2,10 +2,12 @@ import React, { useState } from "react";
import { useMarkdownTemplates } from "../../../utils/queries/markdown-template-queries";
import PermissionGuard from "../../PermissionGuard";
import { useNavigate } from "react-router-dom";
import JsonSchemaModal from "../../Modals/JsonSchemaModal";
const TemplateTab = () => {
const { data: templates, isLoading, error } = useMarkdownTemplates();
const [keyword, setKeyword] = useState("");
const [selectedSchema, setSelectedSchema] = useState(null);
const navigate = useNavigate();
const filteredTemplates = templates?.filter(template =>
@@ -16,6 +18,99 @@ const TemplateTab = () => {
navigate(`/template/edit/${templateId}`);
};
const generateJsonSchema = (template) => {
const schema = {
type: "object",
properties: {},
$defs: {}
};
const generateTypeSchema = (param, defName) => {
switch (param.type.base_type) {
case "string":
return {
type: "string"
};
case "markdown":
return {
type: "string",
description: "Markdown content"
};
case "enum":
return {
type: "string",
enum: param.type.definition.enums
};
case "list":
if (param.type.extend_type.base_type === "string") {
return {
type: "array",
items: {
type: "string"
}
};
} else if (param.type.extend_type.base_type === "list" ||
param.type.extend_type.base_type === "template") {
const itemsDefName = `${defName}_items`;
schema.$defs[itemsDefName] = generateTypeSchema(
{ type: param.type.extend_type },
itemsDefName
);
return {
type: "array",
items: {
$ref: `#/$defs/${itemsDefName}`
}
};
} else {
return {
type: "array",
items: generateTypeSchema(
{ type: param.type.extend_type },
`${defName}_items`
)
};
}
case "template":
const nestedTemplate = templates.find(t => t.id === param.type.definition.template.id);
if (nestedTemplate) {
const nestedSchema = {
type: "object",
properties: {}
};
nestedTemplate.parameters.forEach(nestedParam => {
nestedSchema.properties[nestedParam.name] = generateTypeSchema(
nestedParam,
`${defName}_${nestedParam.name}`
);
});
return nestedSchema;
} else {
return {
type: "object",
properties: {}
};
}
default:
return {
type: "object",
properties: {}
};
}
};
template.parameters.forEach(param => {
const defName = `param_${param.name}`;
schema.properties[param.name] = generateTypeSchema(param, defName);
});
if (Object.keys(schema.$defs).length === 0) {
delete schema.$defs;
}
return schema;
};
if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error loading templates</p>;
@@ -38,23 +133,40 @@ const TemplateTab = () => {
Create New Template
</a>
</PermissionGuard>
{!filteredTemplates || filteredTemplates.length === 0 ? (
<p>No templates found</p>
) : (
<div className="template-list">
{filteredTemplates.map(template => (
<button
key={template.id}
className="button is-light is-fullwidth template-button"
onClick={() => handleTemplateClick(template.id)}
style={{ marginBottom: "5px", textAlign: "left", justifyContent: "flex-start" }}
>
{template.title}
</button>
))}
</div>
)}
<ul className="menu-list">
{filteredTemplates?.map((template) => (
<li key={template.id}>
<div className="is-flex is-justify-content-space-between is-align-items-center">
<span>{template.title}</span>
<div className="field has-addons is-justify-content-flex-end">
<button
className="button is-small control"
onClick={() => handleTemplateClick(template.id)}
type="button"
>
<span className="icon">
<i className="fas fa-edit"></i>
</span>
</button>
<button
className="button is-small control"
onClick={() => setSelectedSchema(generateJsonSchema(template))}
type="button"
>
<span className="icon">
<i className="fas fa-code"></i>
</span>
</button>
</div>
</div>
</li>
))}
</ul>
<JsonSchemaModal
isActive={selectedSchema !== null}
onClose={() => setSelectedSchema(null)}
schema={selectedSchema}
/>
</aside>
);
};