From 12b8a0b386b3097e72cf11503ce0e3e1890ffdfe Mon Sep 17 00:00:00 2001
From: Roman <mail@romanh.de>
Date: Fri, 29 Mar 2024 14:06:27 +0100
Subject: [PATCH] small fixes

---
 Core/Objects/Router/DocumentRoute.class.php   |  2 +-
 react/admin-panel/src/views/log-view.js       |  8 +++--
 .../admin-panel/src/views/route/route-edit.js |  8 ++++-
 .../admin-panel/src/views/route/route-form.js | 33 +++++++++++++++----
 react/shared/hooks/pagination.js              |  3 +-
 5 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/Core/Objects/Router/DocumentRoute.class.php b/Core/Objects/Router/DocumentRoute.class.php
index b00cdd8..5739a5f 100644
--- a/Core/Objects/Router/DocumentRoute.class.php
+++ b/Core/Objects/Router/DocumentRoute.class.php
@@ -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 {
diff --git a/react/admin-panel/src/views/log-view.js b/react/admin-panel/src/views/log-view.js
index 2b328b5..97dd80d 100644
--- a/react/admin-panel/src/views/log-view.js
+++ b/react/admin-panel/src/views/log-view.js
@@ -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>
diff --git a/react/admin-panel/src/views/route/route-edit.js b/react/admin-panel/src/views/route/route-edit.js
index df94b88..01dfdac 100644
--- a/react/admin-panel/src/views/route/route-edit.js
+++ b/react/admin-panel/src/views/route/route-edit.js
@@ -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>
diff --git a/react/admin-panel/src/views/route/route-form.js b/react/admin-panel/src/views/route/route-form.js
index 5187f2d..8c328a3 100644
--- a/react/admin-panel/src/views/route/route-form.js
+++ b/react/admin-panel/src/views/route/route-form.js
@@ -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>
diff --git a/react/shared/hooks/pagination.js b/react/shared/hooks/pagination.js
index a1093d8..bc675e2 100644
--- a/react/shared/hooks/pagination.js
+++ b/react/shared/hooks/pagination.js
@@ -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