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) {
parent::preInsert($row);
$this->extra = json_encode($this->args);
$this->extra = json_encode($this->args, JSON_UNESCAPED_SLASHES);
}
#[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 {API_DATETIME_FORMAT} from "shared/constants";
import {format, toDate} from "date-fns";
import {Select} from "@material-ui/core";
export default function LogView(props) {
@ -59,6 +60,7 @@ export default function LogView(props) {
const messageColumn = (() => {
let column = new DataColumn(L("message"), "message");
column.sortable = false;
column.renderData = (L, entry) => {
return <pre>{entry.message}</pre>
}
@ -93,11 +95,11 @@ export default function LogView(props) {
<div className={"col-2"}>
<div className={"form-group"}>
<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) =>
<option key={"option-" + value} value={index}>{value}</option>)
}
</select>
</Select>
</div>
</div>
<div className={"col-4"}>
@ -109,7 +111,7 @@ export default function LogView(props) {
value={timestamp ? toDate(new Date()) : null}
format={L("general.datefns_datetime_format_precise")}
onChange={(newValue) => setTimestamp(newValue)}
slotProps={{ textField: { size: 'small' } }}
slotProps={{ textField: { } }}
/>
</LocalizationProvider>
</div>

@ -17,6 +17,12 @@ const ButtonBar = styled(Box)((props) => ({
}
}));
const MonoSpaceTextField = styled(TextField)((props) => ({
"& input": {
fontFamily: "monospace"
}
}));
export default function RouteEditView(props) {
const {api, showDialog} = props;
@ -142,7 +148,7 @@ export default function RouteEditView(props) {
</ButtonBar>
<Box mt={3}>
<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}
placeholder={L("Enter a path to test the route…")} />
<pre>

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

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