pagination + sql expressions + frontend improvements

2023-01-19 18:12:16 +01:00 · 2023-01-19 18:12:16 +01:00 · 92c78356ed
commit 92c78356ed
parent 878cd62bbe
16 changed files with 216 additions and 71 deletions
--- a/Core/API/Traits/Pagination.trait.php
+++ b/Core/API/Traits/Pagination.trait.php
@ -18,7 +18,7 @@ trait Pagination {
    return [
      'page' => new Parameter('page', Parameter::TYPE_INT, true, 1),
      'count' => new Parameter('count', Parameter::TYPE_INT, true, 25),
-      'orderBy' => new StringType('orderBy', -1, true, $defaultOrderBy, $orderColumns),
+      'orderBy' => new StringType('orderBy', -1, true, $defaultOrderBy, array_values($orderColumns)),
      'sortOrder' => new StringType('sortOrder', -1, true, $defaultSortOrder, ['asc', 'desc']),
    ];
  }
@ -36,7 +36,7 @@ trait Pagination {
    }

    $pageCount = intval(ceil($this->entityCount / $this->pageSize));
-    $this->page = min($this->page, $pageCount); // number of pages changed due to pageSize / filter
+    $this->page = max(1, min($this->page, $pageCount)); // number of pages changed due to pageSize / filter

    $this->result["pagination"] = [
      "current" => $this->page,
@ -91,18 +91,22 @@ trait Pagination {
    }

    if ($orderBy) {
-      $handler = $baseQuery->getHandler();
-      $baseTable = $handler->getTableName();
-      $sortColumn = DatabaseEntityHandler::buildColumnName($orderBy);
-      $fullyQualifiedColumn = "$baseTable.$sortColumn";
-      $selectedColumns = $baseQuery->getSelectValues();
-
-      if (in_array($sortColumn, $selectedColumns)) {
+      $sortColumn = array_search($orderBy, $this->paginationOrderColumns);
+      if (is_string($sortColumn)) {
        $entityQuery->orderBy($sortColumn);
-      } else if (in_array($fullyQualifiedColumn, $selectedColumns)) {
-        $entityQuery->orderBy($fullyQualifiedColumn);
      } else {
-        $entityQuery->orderBy($orderBy);
+        $handler = $baseQuery->getHandler();
+        $baseTable = $handler->getTableName();
+        $sortColumn = DatabaseEntityHandler::buildColumnName($orderBy);
+        $fullyQualifiedColumn = "$baseTable.$sortColumn";
+        $selectedColumns = $baseQuery->getSelectValues();
+        if (in_array($sortColumn, $selectedColumns)) {
+          $entityQuery->orderBy($sortColumn);
+        } else if (in_array($fullyQualifiedColumn, $selectedColumns)) {
+          $entityQuery->orderBy($fullyQualifiedColumn);
+        } else {
+          $entityQuery->orderBy($orderBy);
+        }
      }
    }

--- a/Core/Driver/SQL/Expression/AbstractFunction.class.php
+++ b/Core/Driver/SQL/Expression/AbstractFunction.class.php
@ -0,0 +1,28 @@
+<?php
+
+namespace Core\Driver\SQL\Expression;
+
+use Core\Driver\SQL\SQL;
+
+abstract class AbstractFunction extends Expression {
+
+  private string $functionName;
+  private mixed $value;
+
+  public function __construct(string $functionName, mixed $value) {
+    $this->functionName = $functionName;
+    $this->value = $value;
+  }
+
+  public function getExpression(SQL $sql, array &$params): string {
+    return $this->functionName . "(" . $sql->addValue($this->getValue(), $params) . ")";
+  }
+
+  public function getFunctionName(): string {
+    return $this->functionName;
+  }
+
+  public function getValue(): mixed {
+    return $this->value;
+  }
+}
--- a/Core/Driver/SQL/Expression/Distinct.class.php
+++ b/Core/Driver/SQL/Expression/Distinct.class.php
@ -2,21 +2,10 @@

 namespace Core\Driver\SQL\Expression;

-use Core\Driver\SQL\SQL;
-
-class Distinct extends Expression {
-
-  private mixed $value;
+class Distinct extends AbstractFunction {

  public function __construct(mixed $value) {
-    $this->value = $value;
+    parent::__construct("DISTINCT", $value);
  }

-  public function getValue(): mixed {
-    return $this->value;
-  }
-
-  function getExpression(SQL $sql, array &$params): string {
-    return "DISTINCT(" . $sql->addValue($this->getValue(), $params) . ")";
-  }
 }
--- a/Core/Driver/SQL/Expression/Lower.class.php
+++ b/Core/Driver/SQL/Expression/Lower.class.php
@ -0,0 +1,11 @@
+<?php
+
+namespace Core\Driver\SQL\Expression;
+
+class Lower extends AbstractFunction {
+
+  public function __construct(mixed $value) {
+    parent::__construct("LOWER", $value);
+  }
+
+}
--- a/Core/Driver/SQL/Expression/Sum.class.php
+++ b/Core/Driver/SQL/Expression/Sum.class.php
@ -2,15 +2,10 @@

 namespace Core\Driver\SQL\Expression;

-use Core\Driver\SQL\SQL;
+class Sum extends AbstractFunction {

-class Sum extends Alias {
-
-  public function __construct(mixed $value, string $alias) {
-    parent::__construct($value, $alias);
+  public function __construct(mixed $value) {
+    parent::__construct("SUM", $value);
  }

-  protected function addValue(SQL $sql, array &$params): string {
-    return "SUM(" . $sql->addValue($this->getValue(), $params) . ")";
-  }
 }
--- a/Core/Driver/SQL/Expression/Upper.class.php
+++ b/Core/Driver/SQL/Expression/Upper.class.php
@ -0,0 +1,11 @@
+<?php
+
+namespace Core\Driver\SQL\Expression;
+
+class Upper extends AbstractFunction {
+
+  public function __construct(mixed $value) {
+    parent::__construct("UPPER", $value);
+  }
+
+}
--- a/Core/Localization/de_DE/general.php
+++ b/Core/Localization/de_DE/general.php
@ -35,6 +35,7 @@ return [
  "rename" => "Umbenennen",
  "remove" => "Entfernen",
  "change" => "Bearbeiten",
+  "close" => "Schließen",
  "reset" => "Zurücksetzen",
  "move" => "Verschieben",
  "delete" => "Löschen",
--- a/Core/Localization/en_US/general.php
+++ b/Core/Localization/en_US/general.php
@ -27,6 +27,7 @@ return [
  "request" => "Request",
  "cancel" => "Cancel",
  "confirm" => "Confirm",
+  "close" => "Close",
  "ok" => "OK",
  "remove" => "Remove",
  "change" => "Change",
--- a/Core/Objects/DatabaseEntity/User.class.php
+++ b/Core/Objects/DatabaseEntity/User.class.php
@ -146,12 +146,12 @@ class User extends DatabaseEntity {
    return !empty($this->fullName) ? $this->fullName : $this->name;
  }

-  public static function buildSQLDisplayName(SQL $sql, string $joinColumn): Alias {
+  public static function buildSQLDisplayName(SQL $sql, string $joinColumn, string $alias = "user"): Alias {
    return new Alias(
      $sql->select(new Coalesce(
            new NullIf(new Column("User.full_name"), ""),
            new NullIf(new Column("User.name"), ""))
        )->from("User")->whereEq("User.id", new Column($joinColumn)),
-      "user");
+      $alias);
  }
 }
--- a/react/shared/api.js
+++ b/react/shared/api.js
@ -1,5 +1,9 @@
 import {USER_GROUP_ADMIN} from "./constants";
-import {isInt} from "./util";
+import {createDownload, isInt} from "./util";
+
+Date.prototype.toJSON = function() {
+    return Math.round(this.getTime() / 1000);
+};

 export default class API {
    constructor() {
@ -14,7 +18,7 @@ export default class API {
        return this.loggedIn ? this.session.csrfToken : null;
    }

-    async apiCall(method, params) {
+    async apiCall(method, params, expectBinary=false) {
        params = params || { };
        const csrfToken = this.csrfToken();
        const config = {method: 'post'};
@ -32,6 +36,16 @@ export default class API {
        }

        let response = await fetch("/api/" + method, config);
+        if (response.headers.has("content-disposition")) {
+            let contentDisposition = response.headers.get("content-disposition");
+            if (contentDisposition.toLowerCase().startsWith("attachment;")) {
+                let fileName = /filename="?([^"]*)"?/;
+                let blob = await response.blob();
+                createDownload(fileName.exec(contentDisposition)[1], blob);
+                return { success: true, msg: "" };
+            }
+        }
+
        let res = await response.json();
        if (!res.success && res.msg === "You are not logged in.") {
            this.loggedIn = false;
@ -56,7 +70,6 @@ export default class API {
        return false;
    }

-
    hasGroup(groupIdOrName) {
        if (this.loggedIn && this.user?.groups) {
            if (isInt(groupIdOrName)) {
--- a/react/shared/elements/data-table.css
+++ b/react/shared/elements/data-table.css
@ -24,4 +24,13 @@

 .data-table-clickable {
    cursor: pointer;
+}
+
+.pagination-controls {
+    margin-top: 6px;
+}
+
+.pagination-page-size > div {
+    padding-top: 5px;
+    padding-bottom: 5px;
 }
--- a/react/shared/elements/data-table.js
+++ b/react/shared/elements/data-table.js
@ -85,8 +85,10 @@ export function DataTable(props) {
    }

    const numColumns = columns.length;
+    let numRows = 0;
    let rows = [];
    if (data && data?.length) {
+        numRows = data.length;
        for (const [rowIndex, entry] of data.entries()) {
            let row = [];
            for (const [index, column] of columns.entries()) {
@ -96,14 +98,14 @@ export function DataTable(props) {
            }

            rows.push(<TableRow className={clsx({["data-table-clickable"]: typeof onClick === 'function'})}
-                                onClick={() => onRowClick(rowIndex, entry)}
+                                onClick={(e) => ["tr","td"].includes(e.target.tagName.toLowerCase()) && onRowClick(rowIndex, entry)}
                                key={"row-" + rowIndex}>
                { row }
            </TableRow>);
        }
    } else if (placeholder) {
        rows.push(<TableRow key={"row-placeholder"}>
-            <TableCell colSpan={numColumns}>
+            <TableCell colSpan={numColumns} align={"center"}>
                { placeholder }
            </TableCell>
        </TableRow>);
@ -126,7 +128,7 @@ export function DataTable(props) {
                    { rows }
                </TableBody>
            </Table>
-        {pagination.renderPagination(L, rows.length)}
+        {pagination.renderPagination(L, numRows)}
    </Box>
 }

@ -140,7 +142,7 @@ export class DataColumn {
    }

    renderData(L, entry, index) {
-        return entry[this.field]
+        return typeof this.field === 'function' ? this.field(entry) : entry[this.field];
    }

    renderHead() {
@ -228,14 +230,33 @@ export class ControlsColumn extends DataColumn {
    renderData(L, entry, index) {
        let buttonElements = [];
        for (const [index, button] of this.buttons.entries()) {
-            let element = button.element;
-            let props = {
-                key: "button-" + index,
-                onClick: (() => button.onClick(entry)),
-                className: "data-table-clickable"
+            let element = typeof button.element === 'function'
+                ? button.element(entry, index)
+                : button.element;
+
+            let buttonProps = {};
+            if (typeof button.props === 'function') {
+                buttonProps = button.props(entry, index);
+            } else {
+                buttonProps = button.props;
            }

-            if (typeof button.showIf !== 'function' || button.showIf(entry)) {
+            let props = {
+                ...buttonProps,
+                key: "button-" + index,
+                onClick: (e) => { e.stopPropagation(); button.onClick(entry, index); },
+                className: "data-table-clickable",
+            }
+
+            if (button.hasOwnProperty("disabled")) {
+                props.disabled = typeof button.disabled === 'function'
+                    ? button.disabled(entry, index)
+                    : button.disabled;
+            }
+
+            if ((!button.hasOwnProperty("hidden")) ||
+                (typeof button.hidden === 'function' && !button.hidden(entry, index)) ||
+                (!button.hidden)) {
                buttonElements.push(React.createElement(element, props))
            }
        }
--- a/react/shared/elements/dialog.jsx
+++ b/react/shared/elements/dialog.jsx
@ -1,8 +1,14 @@
-import React, {useContext} from "react";
-import {Dialog as MuiDialog,  DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material";
-import {Button} from "@material-ui/core";
-import {LocaleContext} from "../locale";
-import "./dialog.css";
+import React, {useState} from "react";
+import {
+    Box,
+    Button,
+    Dialog as MuiDialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    Input, TextField
+} from "@mui/material";

 export default function Dialog(props) {

@ -10,37 +16,55 @@ export default function Dialog(props) {
    const onClose = props.onClose || function() { };
    const onOption = props.onOption || function() { };
    const options = props.options || ["Close"];
-    const type = props.type || "default";
-    const {translate: L} = useContext(LocaleContext);
+    const inputs = props.inputs || [];

+    const [inputData, setInputData] = useState({});

    let buttons = [];
-    for (let name of options) {
-        let type = "default";
-        if (name === "Yes") type = "warning";
-        else if(name === "No") type = "danger";
-
+    for (const [index, name] of options.entries()) {
        buttons.push(
-            <Button variant={"outlined"} size={"small"} type="button" key={"button-" + name}
-                    data-dismiss={"modal"} onClick={() => { onClose(); onOption(name); }}>
+            <Button variant={"outlined"} size={"small"} key={"button-" + name}
+                    onClick={() => { onClose(); onOption(index, inputData); }}>
                {name}
            </Button>
        )
    }

+    let inputElements = [];
+    for (const input of inputs) {
+        let inputProps = { ...input };
+        delete inputProps.name;
+        delete inputProps.type;
+
+        switch (input.type) {
+            case 'text':
+                inputElements.push(<TextField
+                    {...inputProps}
+                    size={"small"} fullWidth={true}
+                    key={"input-" + input.name}
+                    value={inputData[input.name] || ""}
+                    onChange={e => setInputData({ ...inputData, [input.name]: e.target.value })}
+                />)
+                break;
+        }
+    }
+
    return <MuiDialog
        open={show}
-        onClose={onClose}
-        aria-labelledby="alert-dialog-title"
-        aria-describedby="alert-dialog-description">
-        <DialogTitle>{ props.title }</DialogTitle>
+        onClose={onClose}>
+        <DialogTitle>
+            { props.title }
+        </DialogTitle>
        <DialogContent>
            <DialogContentText>
                { props.message }
            </DialogContentText>
+            <Box mt={2}>
+                { inputElements }
+            </Box>
        </DialogContent>
        <DialogActions>
-            {buttons}
+            { buttons }
        </DialogActions>
    </MuiDialog>
 }
--- a/react/shared/hooks/current-path.js
+++ b/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;
+}
--- a/react/shared/hooks/pagination.js
+++ b/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>
    }
 }
--- a/react/shared/util.js
+++ b/react/shared/util.js
@ -1,6 +1,17 @@
 import {format, parse} from "date-fns";
 import {API_DATE_FORMAT, API_DATETIME_FORMAT} from "./constants";

+function createDownload(name, data) {
+    const url = window.URL.createObjectURL(new Blob([data]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', name);
+    link.setAttribute("target", "_blank");
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+}
+
 function humanReadableSize(bytes, dp = 1) {
    const thresh = 1024;

@ -87,4 +98,4 @@ const isInt = (value) => {
 }

 export { humanReadableSize, removeParameter, getParameter, encodeText, decodeText, getBaseUrl,
-    formatDate, formatDateTime, upperFirstChars, isInt };
+    formatDate, formatDateTime, upperFirstChars, isInt, createDownload };