From a08164e914aa951bf3058a6c5e8c711b5dba2b14 Mon Sep 17 00:00:00 2001
From: hzhang <hzhang@hangman-lab.top>
Date: Mon, 23 Jun 2025 12:18:26 +0100
Subject: [PATCH] add: route to stand along page

---
 src/App.js                                    | 54 ++++++++++---------
 .../MarkdownTemplate/ParametersManager.js     |  6 ++-
 src/components/MarkdownTemplate/TypeEditor.js |  3 +-
 src/components/Markdowns/MarkdownContent.js   | 25 +++++++--
 src/utils/queries/markdown-queries.js         |  1 +
 5 files changed, 56 insertions(+), 33 deletions(-)

diff --git a/src/App.js b/src/App.js
index ad1ca89..96d9ca8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,7 @@ import MainNavigation from "./components/Navigations/MainNavigation";
 import SideNavigation from "./components/Navigations/SideNavigation";
 import MarkdownContent from "./components/Markdowns/MarkdownContent";
 import MarkdownEditor from "./components/Markdowns/MarkdownEditor";
+import StandaloneMarkdownPage from "./components/Markdowns/StandaloneMarkdownPage";
 import "./App.css";
 import Callback from "./components/KeycloakCallbacks/Callback";
 import Footer from "./components/Footer";
@@ -18,30 +19,35 @@ const App = () => {
     return (
         <Provider store={store}>
             <Router>
-                <div className="app-container">
-                    <MainNavigation />
-                    <div className="content-container">
-                        <SideNavigation />
-                        <main className="main-content">
-                            <Routes>
-                                <Route
-                                    path="/"
-                                    element={<Navigate to = "/markdown/1"/>}
-                                />
-                                <Route path="/testx" element={<h2>test2</h2>}/>
-                                <Route path="/markdown/:strId" element={<MarkdownContent />} />
-                                <Route path="/callback" element={<Callback />} />
-                                <Route path="/test" element={<h1>TEST</h1>}></Route>
-                                <Route path="/markdown/create" element={<MarkdownEditor />} />
-                                <Route path="/markdown/edit/:strId" element={<MarkdownEditor />} />
-                                <Route path="/popup_callback" element={<PopupCallback />} />
-                                <Route path="/silent_callback" element={<SilentCallback />} />
-                                <Route path="/template/create" element={<MarkdownTemplateEditor />} />
-                                <Route path="/template/edit/:strId" element={<MarkdownTemplateEditor />} />
-                            </Routes>
-                        </main>
-                    </div>
-                </div>
+                <Routes>
+                    <Route path="/pg/*" element={<StandaloneMarkdownPage />} />
+                    <Route path="*" element={
+                        <div className="app-container">
+                            <MainNavigation />
+                            <div className="content-container">
+                                <SideNavigation />
+                                <main className="main-content">
+                                    <Routes>
+                                        <Route
+                                            path="/"
+                                            element={<Navigate to = "/markdown/1"/>}
+                                        />
+                                        <Route path="/testx" element={<h2>test2</h2>}/>
+                                        <Route path="/markdown/:strId" element={<MarkdownContent />} />
+                                        <Route path="/callback" element={<Callback />} />
+                                        <Route path="/test" element={<h1>TEST</h1>}></Route>
+                                        <Route path="/markdown/create" element={<MarkdownEditor />} />
+                                        <Route path="/markdown/edit/:strId" element={<MarkdownEditor />} />
+                                        <Route path="/popup_callback" element={<PopupCallback />} />
+                                        <Route path="/silent_callback" element={<SilentCallback />} />
+                                        <Route path="/template/create" element={<MarkdownTemplateEditor />} />
+                                        <Route path="/template/edit/:strId" element={<MarkdownTemplateEditor />} />
+                                    </Routes>
+                                </main>
+                            </div>
+                        </div>
+                    } />
+                </Routes>
                 <Footer />
             </Router>
         </Provider>
diff --git a/src/components/MarkdownTemplate/ParametersManager.js b/src/components/MarkdownTemplate/ParametersManager.js
index a84ec78..9b8753d 100644
--- a/src/components/MarkdownTemplate/ParametersManager.js
+++ b/src/components/MarkdownTemplate/ParametersManager.js
@@ -70,9 +70,11 @@ const ParametersManager = ({ parameters, onChange }) => {
             <div style={{ maxHeight: "50vh", overflowY: "auto" }}>
                 {_parameters.map((param, index) => (
                     <div key={index} className="box" style={{ marginBottom: "0.5rem" }}>
-                        <div className="field is-grouped is-grouped-multiline">
+                        <div className="field is-grouped is-align-items-end">
+                            <div className="control">
+                                <label className="label">Name:</label>
+                            </div>
                             <div className="control is-expanded">
-                                <label className="label mb-1">Name:</label>
                                 <input
                                     type="text"
                                     className="input"
diff --git a/src/components/MarkdownTemplate/TypeEditor.js b/src/components/MarkdownTemplate/TypeEditor.js
index 84c973f..3fd88a4 100644
--- a/src/components/MarkdownTemplate/TypeEditor.js
+++ b/src/components/MarkdownTemplate/TypeEditor.js
@@ -69,7 +69,6 @@ const TypeEditor = ({ type, onChange }) => {
             case 'template':
                 return (
                     <div className="field">
-                        <label className="label">Template</label>
                         <div className="control">
                             <TemplateSelector
                                 template={_type.definition.template}
@@ -95,7 +94,7 @@ const TypeEditor = ({ type, onChange }) => {
     return (
         <div className="box">
             <div className="field">
-                <label className="label">Type</label>
+                {/*<label className="label">Type</label>*/}
                 <div className="control">
                     <div className="select is-fullwidth">
                         <select
diff --git a/src/components/Markdowns/MarkdownContent.js b/src/components/Markdowns/MarkdownContent.js
index 1e81cf7..5ce1b8f 100644
--- a/src/components/Markdowns/MarkdownContent.js
+++ b/src/components/Markdowns/MarkdownContent.js
@@ -9,11 +9,13 @@ 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";
+import MarkdownSettingModal from "../Modals/MarkdownSettingModal";
 
 const MarkdownContent = () => {
     const { strId } = useParams();
     const id = Number(strId);
     const [indexTitle, setIndexTitle] = useState(null);
+    const [isSettingModalOpen, setSettingModalOpen] = useState(false);
     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);
@@ -50,15 +52,28 @@ const MarkdownContent = () => {
 
     return (
         <div className="markdown-content-container">
-            <div className="field has-addons markdown-content-container-header">
-                <h1 className="title control">{markdown.title === "index" ? indexTitle : markdown.title}</h1>
+            <div className="is-flex is-justify-content-space-between is-align-items-center markdown-content-container-header">
+                <h1 className="title">{markdown.title === "index" ? indexTitle : markdown.title}</h1>
                 <PermissionGuard rolesRequired={['admin']}>
-                    <Link to={`/markdown/edit/${id}`} className="control button is-primary is-light">
-                        Edit
-                    </Link>
+                    <div className="field has-addons">
+                        <button
+                            className="control button is-info is-light"
+                            onClick={() => setSettingModalOpen(true)}
+                        >
+                            Settings
+                        </button>
+                        <Link to={`/markdown/edit/${id}`} className="control button is-primary is-light">
+                            Edit
+                        </Link>
+                    </div>
                 </PermissionGuard>
             </div>
             <MarkdownView content={JSON.parse(markdown.content)} template={template}/>
+            <MarkdownSettingModal 
+                isOpen={isSettingModalOpen}
+                markdown={markdown}
+                onClose={() => setSettingModalOpen(false)}
+            />
         </div>
     );
 };
diff --git a/src/utils/queries/markdown-queries.js b/src/utils/queries/markdown-queries.js
index c2671f8..d9f5552 100644
--- a/src/utils/queries/markdown-queries.js
+++ b/src/utils/queries/markdown-queries.js
@@ -52,6 +52,7 @@ export const useMarkdownsByPath = (pathId) => {
     });
 };
 
+
 export const useSaveMarkdown = () => {
     const queryClient = useQueryClient();
     const config = useConfig();