175 lines
6.7 KiB
JavaScript
175 lines
6.7 KiB
JavaScript
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 =>
|
|
template.title.toLowerCase().includes(keyword.toLowerCase())
|
|
);
|
|
|
|
const handleTemplateClick = (templateId) => {
|
|
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>;
|
|
|
|
return (
|
|
<aside className="menu">
|
|
<div className="control is-expanded">
|
|
<input
|
|
className="input is-small"
|
|
type="text"
|
|
placeholder="Search templates..."
|
|
onChange={(e) => setKeyword(e.target.value)}
|
|
/>
|
|
</div>
|
|
<PermissionGuard rolesRequired={["admin", "creator"]}>
|
|
<a
|
|
href="/template/create"
|
|
className="button is-primary is-small is-fullwidth"
|
|
style={{ marginBottom: "10px" }}
|
|
>
|
|
Create New Template
|
|
</a>
|
|
</PermissionGuard>
|
|
<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>
|
|
);
|
|
};
|
|
|
|
export default TemplateTab;
|