small fixes

This commit is contained in:
Roman 2024-03-29 14:06:27 +01:00
parent 80b5ac07d0
commit 12b8a0b386
5 changed files with 41 additions and 13 deletions

@ -35,7 +35,7 @@ class DocumentRoute extends Route {
public function preInsert(array &$row) { public function preInsert(array &$row) {
parent::preInsert($row); parent::preInsert($row);
$this->extra = json_encode($this->args); $this->extra = json_encode($this->args, JSON_UNESCAPED_SLASHES);
} }
#[Pure] private function getClassName(): string { #[Pure] private function getClassName(): string {

@ -9,6 +9,7 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import {API_DATETIME_FORMAT} from "shared/constants"; import {API_DATETIME_FORMAT} from "shared/constants";
import {format, toDate} from "date-fns"; import {format, toDate} from "date-fns";
import {Select} from "@material-ui/core";
export default function LogView(props) { export default function LogView(props) {
@ -59,6 +60,7 @@ export default function LogView(props) {
const messageColumn = (() => { const messageColumn = (() => {
let column = new DataColumn(L("message"), "message"); let column = new DataColumn(L("message"), "message");
column.sortable = false;
column.renderData = (L, entry) => { column.renderData = (L, entry) => {
return <pre>{entry.message}</pre> return <pre>{entry.message}</pre>
} }
@ -93,11 +95,11 @@ export default function LogView(props) {
<div className={"col-2"}> <div className={"col-2"}>
<div className={"form-group"}> <div className={"form-group"}>
<label>{L("log.severity")}</label> <label>{L("log.severity")}</label>
<select className={"form-control"} value={logLevel} onChange={e => setLogLevel(parseInt(e.target.value))}> <Select native className={"form-control"} value={logLevel} onChange={e => setLogLevel(parseInt(e.target.value))}>
{LOG_LEVELS.map((value, index) => {LOG_LEVELS.map((value, index) =>
<option key={"option-" + value} value={index}>{value}</option>) <option key={"option-" + value} value={index}>{value}</option>)
} }
</select> </Select>
</div> </div>
</div> </div>
<div className={"col-4"}> <div className={"col-4"}>
@ -109,7 +111,7 @@ export default function LogView(props) {
value={timestamp ? toDate(new Date()) : null} value={timestamp ? toDate(new Date()) : null}
format={L("general.datefns_datetime_format_precise")} format={L("general.datefns_datetime_format_precise")}
onChange={(newValue) => setTimestamp(newValue)} onChange={(newValue) => setTimestamp(newValue)}
slotProps={{ textField: { size: 'small' } }} slotProps={{ textField: { } }}
/> />
</LocalizationProvider> </LocalizationProvider>
</div> </div>

@ -17,6 +17,12 @@ const ButtonBar = styled(Box)((props) => ({
} }
})); }));
const MonoSpaceTextField = styled(TextField)((props) => ({
"& input": {
fontFamily: "monospace"
}
}));
export default function RouteEditView(props) { export default function RouteEditView(props) {
const {api, showDialog} = props; const {api, showDialog} = props;
@ -142,7 +148,7 @@ export default function RouteEditView(props) {
</ButtonBar> </ButtonBar>
<Box mt={3}> <Box mt={3}>
<h5>{L("Validate Route")}</h5> <h5>{L("Validate Route")}</h5>
<TextField value={routeTest} onChange={e => setRouteTest(e.target.value)} <MonoSpaceTextField value={routeTest} onChange={e => setRouteTest(e.target.value)}
variant={"outlined"} size={"small"} fullWidth={true} variant={"outlined"} size={"small"} fullWidth={true}
placeholder={L("Enter a path to test the route…")} /> placeholder={L("Enter a path to test the route…")} />
<pre> <pre>

@ -1,6 +1,6 @@
import {Box, Checkbox, FormControl, FormControlLabel, FormGroup, Select, styled, TextField} from "@material-ui/core"; import {Box, Checkbox, FormControl, FormControlLabel, FormGroup, Select, styled, TextField} from "@material-ui/core";
import * as React from "react"; import * as React from "react";
import {useCallback, useContext} from "react"; import {useCallback, useContext, useEffect, useRef} from "react";
import {LocaleContext} from "shared/locale"; import {LocaleContext} from "shared/locale";
const RouteFormControl = styled(FormControl)((props) => ({ const RouteFormControl = styled(FormControl)((props) => ({
@ -16,6 +16,7 @@ export default function RouteForm(props) {
const {route, setRoute} = props; const {route, setRoute} = props;
const {translate: L} = useContext(LocaleContext); const {translate: L} = useContext(LocaleContext);
const extraRef = useRef();
const onChangeRouteType = useCallback((type) => { const onChangeRouteType = useCallback((type) => {
let newRoute = {...route, type: type }; let newRoute = {...route, type: type };
@ -28,6 +29,13 @@ export default function RouteForm(props) {
setRoute(newRoute); setRoute(newRoute);
}, [route]); }, [route]);
useEffect(() => {
if (extraRef.current) {
const scrollHeight = extraRef.current.scrollHeight + 5;
extraRef.current.style.height = scrollHeight + "px";
}
}, [extraRef?.current, route.extra]);
const elements = [ const elements = [
<RouteFormControl key={"form-control-pattern"} fullWidth={true}> <RouteFormControl key={"form-control-pattern"} fullWidth={true}>
<label htmlFor={"route-pattern"}>{L("Pattern")}</label> <label htmlFor={"route-pattern"}>{L("Pattern")}</label>
@ -48,7 +56,7 @@ export default function RouteForm(props) {
<RouteFormControl key={"form-control-type"} fullWidth={true} size={"small"}> <RouteFormControl key={"form-control-type"} fullWidth={true} size={"small"}>
<label htmlFor={"route-type"}>{L("Type")}</label> <label htmlFor={"route-type"}>{L("Type")}</label>
<Select value={route.type} variant={"outlined"} size={"small"} labelId={"route-type"} <Select value={route.type} variant={"outlined"} size={"small"} labelId={"route-type"}
onChange={e => onChangeRouteType(e.target.value)}> onChange={e => onChangeRouteType(e.target.value)} native>
<option value={""}>Select</option> <option value={""}>Select</option>
<option value={"dynamic"}>Dynamic</option> <option value={"dynamic"}>Dynamic</option>
<option value={"static"}>Static</option> <option value={"static"}>Static</option>
@ -58,6 +66,14 @@ export default function RouteForm(props) {
</RouteFormControl>, </RouteFormControl>,
]; ];
const minifyJson = (value) => {
try {
return JSON.stringify(JSON.parse(value));
} catch (e) {
return value;
}
}
if (route.type) { if (route.type) {
elements.push( elements.push(
<RouteFormControl key={"form-control-target"} fullWidth={true}> <RouteFormControl key={"form-control-target"} fullWidth={true}>
@ -69,9 +85,11 @@ export default function RouteForm(props) {
); );
if (route.type === "dynamic") { if (route.type === "dynamic") {
let extraArgs; let extraArgs, type;
try { try {
extraArgs = JSON.parse(route.extra) extraArgs = JSON.parse(route.extra);
type = typeof extraArgs;
extraArgs = JSON.stringify(extraArgs, null, 2);
} catch (e) { } catch (e) {
extraArgs = null extraArgs = null
} }
@ -79,12 +97,13 @@ export default function RouteForm(props) {
<RouteFormControl key={"form-control-extra"} fullWidth={true}> <RouteFormControl key={"form-control-extra"} fullWidth={true}>
<label htmlFor={"route-extra"}>{L("Arguments")}</label> <label htmlFor={"route-extra"}>{L("Arguments")}</label>
<textarea id={"route-extra"} <textarea id={"route-extra"}
value={route.extra} ref={extraRef}
onChange={e => setRoute({...route, extra: e.target.value})}/> value={extraArgs ?? route.extra}
onChange={e => setRoute({...route, extra: minifyJson(e.target.value)})}/>
<i>{ <i>{
extraArgs === null ? extraArgs === null ?
"Invalid JSON-string" : "Invalid JSON-string" :
(typeof extraArgs !== "object" ? (type !== "object" ?
"JSON must be Array or Object" : "JSON ok!") "JSON must be Array or Object" : "JSON ok!")
}</i> }</i>
</RouteFormControl> </RouteFormControl>

@ -60,13 +60,14 @@ class Pagination {
return <Box display={"grid"} gridTemplateColumns={"75px auto"} className={"pagination-controls"}> return <Box display={"grid"} gridTemplateColumns={"75px auto"} className={"pagination-controls"}>
<FormControl> <FormControl>
<Select <Select
native
value={this.data.pageSize} value={this.data.pageSize}
className={"pagination-page-size"} className={"pagination-page-size"}
label={L("general.entries_per_page")} label={L("general.entries_per_page")}
onChange={(e) => this.setPageSize(parseInt(e.target.value))} onChange={(e) => this.setPageSize(parseInt(e.target.value))}
size={"small"} size={"small"}
> >
{options.map(size => <MenuItem key={"size-" + size} value={size}>{size}</MenuItem>)} {options.map(size => <option key={"size-" + size} value={size}>{size}</option>)}
</Select> </Select>
</FormControl> </FormControl>
<MuiPagination <MuiPagination