From 30a46d50640adfb3d792a0f2fc757f4b40728fba Mon Sep 17 00:00:00 2001
From: hzhang <hzhang@hangman-lab.top>
Date: Mon, 12 May 2025 09:59:23 +0100
Subject: [PATCH] add: markdown template to json schema

---
 src/components/Modals/JsonSchemaModal.js      |  42 +++++
 .../Navigations/SideTabs/TemplateTab.js       | 146 ++++++++++++++++--
 2 files changed, 171 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Modals/JsonSchemaModal.js

diff --git a/src/components/Modals/JsonSchemaModal.js b/src/components/Modals/JsonSchemaModal.js
new file mode 100644
index 0000000..f6d4017
--- /dev/null
+++ b/src/components/Modals/JsonSchemaModal.js
@@ -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; 
\ No newline at end of file
diff --git a/src/components/Navigations/SideTabs/TemplateTab.js b/src/components/Navigations/SideTabs/TemplateTab.js
index 7313505..d366d37 100644
--- a/src/components/Navigations/SideTabs/TemplateTab.js
+++ b/src/components/Navigations/SideTabs/TemplateTab.js
@@ -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>
     );
 };