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

add: route to stand along page

Browse Source
This commit is contained in:
h z
2025-06-23 12:18:26 +01:00
parent 30a46d5064
commit a08164e914
5 changed files with 56 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/App.js
View File

@@ -6,6 +6,7 @@ import MainNavigation from "./components/Navigations/MainNavigation";
import SideNavigation from "./components/Navigations/SideNavigation"; import SideNavigation from "./components/Navigations/SideNavigation";
import MarkdownContent from "./components/Markdowns/MarkdownContent"; import MarkdownContent from "./components/Markdowns/MarkdownContent";
import MarkdownEditor from "./components/Markdowns/MarkdownEditor"; import MarkdownEditor from "./components/Markdowns/MarkdownEditor";
import StandaloneMarkdownPage from "./components/Markdowns/StandaloneMarkdownPage";
import "./App.css"; import "./App.css";
import Callback from "./components/KeycloakCallbacks/Callback"; import Callback from "./components/KeycloakCallbacks/Callback";
import Footer from "./components/Footer"; import Footer from "./components/Footer";
@@ -18,30 +19,35 @@ const App = () => {
return ( return (
<Provider store={store}> <Provider store={store}>
<Router> <Router>
<div className="app-container"> <Routes>
<MainNavigation /> <Route path="/pg/*" element={<StandaloneMarkdownPage />} />
<div className="content-container"> <Route path="*" element={
<SideNavigation /> <div className="app-container">
<main className="main-content"> <MainNavigation />
<Routes> <div className="content-container">
<Route <SideNavigation />
path="/" <main className="main-content">
element={<Navigate to = "/markdown/1"/>} <Routes>
/> <Route
<Route path="/testx" element={<h2>test2</h2>}/> path="/"
<Route path="/markdown/:strId" element={<MarkdownContent />} /> element={<Navigate to = "/markdown/1"/>}
<Route path="/callback" element={<Callback />} /> />
<Route path="/test" element={<h1>TEST</h1>}></Route> <Route path="/testx" element={<h2>test2</h2>}/>
<Route path="/markdown/create" element={<MarkdownEditor />} /> <Route path="/markdown/:strId" element={<MarkdownContent />} />
<Route path="/markdown/edit/:strId" element={<MarkdownEditor />} /> <Route path="/callback" element={<Callback />} />
<Route path="/popup_callback" element={<PopupCallback />} /> <Route path="/test" element={<h1>TEST</h1>}></Route>
<Route path="/silent_callback" element={<SilentCallback />} /> <Route path="/markdown/create" element={<MarkdownEditor />} />
<Route path="/template/create" element={<MarkdownTemplateEditor />} /> <Route path="/markdown/edit/:strId" element={<MarkdownEditor />} />
<Route path="/template/edit/:strId" element={<MarkdownTemplateEditor />} /> <Route path="/popup_callback" element={<PopupCallback />} />
</Routes> <Route path="/silent_callback" element={<SilentCallback />} />
</main> <Route path="/template/create" element={<MarkdownTemplateEditor />} />
</div> <Route path="/template/edit/:strId" element={<MarkdownTemplateEditor />} />
</div> </Routes>
</main>
</div>
</div>
} />
</Routes>
<Footer /> <Footer />
</Router> </Router>
</Provider> </Provider>

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

@@ -70,9 +70,11 @@ const ParametersManager = ({ parameters, onChange }) => {
<div style={{ maxHeight: "50vh", overflowY: "auto" }}> <div style={{ maxHeight: "50vh", overflowY: "auto" }}>
{_parameters.map((param, index) => ( {_parameters.map((param, index) => (
<div key={index} className="box" style={{ marginBottom: "0.5rem" }}> <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"> <div className="control is-expanded">
<label className="label mb-1">Name:</label>
<input <input
type="text" type="text"
className="input" className="input"

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

@@ -69,7 +69,6 @@ const TypeEditor = ({ type, onChange }) => {
case 'template': case 'template':
return ( return (
<div className="field"> <div className="field">
<label className="label">Template</label>
<div className="control"> <div className="control">
<TemplateSelector <TemplateSelector
template={_type.definition.template} template={_type.definition.template}
@@ -95,7 +94,7 @@ const TypeEditor = ({ type, onChange }) => {
return ( return (
<div className="box"> <div className="box">
<div className="field"> <div className="field">
<label className="label">Type</label> {/*<label className="label">Type</label>*/}
<div className="control"> <div className="control">
<div className="select is-fullwidth"> <div className="select is-fullwidth">
<select <select

25
src/components/Markdowns/MarkdownContent.js
View File

@@ -9,11 +9,13 @@ import {usePath} from "../../utils/queries/path-queries";
import {useMarkdownSetting} from "../../utils/queries/markdown-setting-queries"; import {useMarkdownSetting} from "../../utils/queries/markdown-setting-queries";
import {useMarkdownTemplate} from "../../utils/queries/markdown-template-queries"; import {useMarkdownTemplate} from "../../utils/queries/markdown-template-queries";
import {useMarkdownTemplateSetting} from "../../utils/queries/markdown-template-setting-queries"; import {useMarkdownTemplateSetting} from "../../utils/queries/markdown-template-setting-queries";
import MarkdownSettingModal from "../Modals/MarkdownSettingModal";
const MarkdownContent = () => { const MarkdownContent = () => {
const { strId } = useParams(); const { strId } = useParams();
const id = Number(strId); const id = Number(strId);
const [indexTitle, setIndexTitle] = useState(null); const [indexTitle, setIndexTitle] = useState(null);
const [isSettingModalOpen, setSettingModalOpen] = useState(false);
const {data: markdown, isLoading, error} = useMarkdown(id); const {data: markdown, isLoading, error} = useMarkdown(id);
const {data: path, isFetching: isPathFetching} = usePath(markdown?.path_id); const {data: path, isFetching: isPathFetching} = usePath(markdown?.path_id);
const {data: setting, isFetching: isSettingFetching} = useMarkdownSetting(markdown?.setting_id); const {data: setting, isFetching: isSettingFetching} = useMarkdownSetting(markdown?.setting_id);
@@ -50,15 +52,28 @@ const MarkdownContent = () => {
return ( return (
<div className="markdown-content-container"> <div className="markdown-content-container">
<div className="field has-addons markdown-content-container-header"> <div className="is-flex is-justify-content-space-between is-align-items-center markdown-content-container-header">
<h1 className="title control">{markdown.title === "index" ? indexTitle : markdown.title}</h1> <h1 className="title">{markdown.title === "index" ? indexTitle : markdown.title}</h1>
<PermissionGuard rolesRequired={['admin']}> <PermissionGuard rolesRequired={['admin']}>
<Link to={`/markdown/edit/${id}`} className="control button is-primary is-light"> <div className="field has-addons">
Edit <button
</Link> 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> </PermissionGuard>
</div> </div>
<MarkdownView content={JSON.parse(markdown.content)} template={template}/> <MarkdownView content={JSON.parse(markdown.content)} template={template}/>
<MarkdownSettingModal
isOpen={isSettingModalOpen}
markdown={markdown}
onClose={() => setSettingModalOpen(false)}
/>
</div> </div>
); );
}; };

1
src/utils/queries/markdown-queries.js
View File

@@ -52,6 +52,7 @@ export const useMarkdownsByPath = (pathId) => {
}); });
}; };
export const useSaveMarkdown = () => { export const useSaveMarkdown = () => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const config = useConfig(); const config = useConfig();