route bugfix, localization

react/shared/api.js

@@ -10,7 +10,7 @@ export default class API {
         this.loggedIn = false;
         this.user = null;
         this.session = null;
-        this.language = { id: 1, code: "en_US", shortCode: "en", name: "American English" };
+        this.language = { id: 1, code: "en_US", shortCode: "en", name: "English (US)" };
         this.permissions = [];
     }
 

react/shared/elements/data-table.css

@@ -9,6 +9,7 @@
 
 .data-table th {
     background-color: #bbb;
+    white-space: nowrap;
 }
 
 .data-table th > svg {
@@ -33,4 +34,14 @@
 .pagination-page-size > div {
     padding-top: 5px;
     padding-bottom: 5px;
+}
+
+.data-table-buttons {
+    white-space: nowrap;
+}
+
+.data-table-buttons > svg {
+    margin-left: 4px;
+    margin-right: 4px;
+    cursor: pointer;
 }

react/shared/elements/data-table.js

@@ -293,7 +293,6 @@ export class ControlsColumn extends DataColumn {
                 ...buttonProps,
                 key: "button-" + index,
                 onClick: (e) => { e.stopPropagation(); button.onClick(entry, index); },
-                className: "data-table-clickable",
             }
 
             if (button.hasOwnProperty("disabled")) {
@@ -309,8 +308,8 @@ export class ControlsColumn extends DataColumn {
             }
         }
 
-        return <>
+        return <Box className={"data-table-buttons"}>
             {buttonElements}
-        </>
+        </Box>
     }
 }

react/shared/hooks/async-search.js

@@ -7,7 +7,8 @@ export default function useAsyncSearch(callback, minLength = 1) {
     const [results, setResults] = useState(null);
 
     useEffect(() => {
-        if (!searchString || searchString.length < minLength) {
+        console.log("searchString:", searchString);
+        if (minLength > 0 && (!searchString || searchString.length < minLength)) {
             setResults([]);
             return;
         }

react/shared/util.js

@@ -1,4 +1,4 @@
-import {format, parse} from "date-fns";
+import {format, parse, formatDistance as formatDistanceDateFns } from "date-fns";
 import {API_DATE_FORMAT, API_DATETIME_FORMAT} from "./constants";
 
 function createDownload(name, data) {
@@ -58,33 +58,36 @@ const getBaseUrl = () => {
     return window.location.protocol + "//" + window.location.host;
 }
 
-const formatDate = (L, apiDate) => {
-    if (!(apiDate instanceof Date)) {
+const toDate = (apiDate, apiFormat = API_DATETIME_FORMAT) => {
+    if (apiDate === null) {
+        return "";
+    } else if (!(apiDate instanceof Date)) {
         if (!isNaN(apiDate)) {
             apiDate = new Date(apiDate * 1000);
         } else {
-            apiDate = parse(apiDate, API_DATE_FORMAT, new Date());
+            apiDate = parse(apiDate, apiFormat, new Date());
         }
     }
 
-    return format(apiDate, L("general.datefns_date_format", "YYY/MM/dd"));
+    return apiDate;
+}
+
+const formatDate = (L, apiDate) => {
+    return format(toDate(apiDate), L("general.datefns_date_format", "YYY/MM/dd"));
 }
 
 const formatDateTime = (L, apiDate, precise=false) => {
-    if (!(apiDate instanceof Date)) {
-        if (!isNaN(apiDate)) {
-            apiDate = new Date(apiDate * 1000);
-        } else {
-            apiDate = parse(apiDate, API_DATETIME_FORMAT, new Date());
-        }
-    }
-
     let dateFormat = precise ?
-        L("general.datefns_date_time_format_precise", "YYY/MM/dd HH:mm:ss") :
-        L("general.datefns_date_time_format", "YYY/MM/dd HH:mm");
-    return format(apiDate, dateFormat);
+        L("general.datefns_datetime_format_precise", "YYY/MM/dd HH:mm:ss") :
+        L("general.datefns_datetime_format", "YYY/MM/dd HH:mm");
+    return format(toDate(apiDate), dateFormat);
 }
 
+function formatDistance(dateFns, apiDate) {
+    return formatDistanceDateFns(toDate(apiDate), new Date(), { addSuffix: true, locale: dateFns });
+}
+
+
 const upperFirstChars = (str) => {
     return str.split(" ")
         .map(block => block.charAt(0).toUpperCase() + block.substring(1))
@@ -97,5 +100,7 @@ const isInt = (value) => {
         !isNaN(parseInt(value, 10));
 }
 
-export { humanReadableSize, removeParameter, getParameter, encodeText, decodeText, getBaseUrl,
-    formatDate, formatDateTime, upperFirstChars, isInt, createDownload };
+export { humanReadableSize, removeParameter, getParameter,
+    encodeText, decodeText, getBaseUrl,
+    formatDate, formatDateTime, formatDistance,
+    upperFirstChars, isInt, createDownload };

react/shared/views/login.jsx

@@ -15,7 +15,6 @@ import React, {useCallback, useContext, useEffect, useState} from "react";
 import ReplayIcon from '@material-ui/icons/Replay';
 import LanguageSelection from "../elements/language-selection";
 import {decodeText, encodeText, getParameter, removeParameter} from "shared/util";
-import Icon from "shared/elements/icon";
 import {LocaleContext} from "shared/locale";
 
 const useStyles = makeStyles((theme) => ({