pagination + sql expressions + frontend improvements

react/shared/hooks/current-path.js

@@ -0,0 +1,21 @@
+import {useLocation, useParams} from "react-router-dom";
+
+
+export default function useCurrentPath() {
+    const location = useLocation();
+    const params = useParams();
+
+    const { pathname } = location;
+
+    if (!Object.keys(params).length) {
+        return pathname; // we don't need to replace anything
+    }
+
+    let path = pathname;
+    Object.entries(params).forEach(([paramName, paramValue]) => {
+        if (paramValue) {
+            path = path.replace(paramValue, `:${paramName}`);
+        }
+    });
+    return path;
+}

react/shared/hooks/pagination.js

@@ -56,17 +56,23 @@ class Pagination {
     renderPagination(L, numEntries, options = null) {
         options = options || [10, 25, 50, 100];
 
-        return <Box>
+        return <Box display={"grid"} gridTemplateColumns={"75px auto"} className={"pagination-controls"}>
             <Select
                 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>)}
             </Select>
-            <MuiPagination count={this.getPageCount()} onChange={(_, page) => this.setPage(page)} />
-            {sprintf(L("general.showing_x_of_y_entries"), numEntries, this.data.total)}
+            <MuiPagination
+                count={this.getPageCount()}
+                onChange={(_, page) => this.setPage(page)}
+            />
+            <Box gridColumn={"1 / 3"} mt={1}>
+                {sprintf(L("general.showing_x_of_y_entries"), numEntries, this.data.total)}
+            </Box>
         </Box>
     }
 }