Projekte/web-base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replaced dayjs with date-fns

Browse Source
This commit is contained in:
Roman
2024-03-27 11:37:57 +01:00
parent 5da644acce
commit ec7fb0ecc3
6 changed files with 36 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
react/admin-panel/src/views/log-view.js
View File

@@ -1,14 +1,14 @@
import {useCallback, useContext, useEffect, useState} from "react";
import {LocaleContext} from "shared/locale";
import {Link, useNavigate} from "react-router-dom";
import {Link} from "react-router-dom";
import usePagination from "shared/hooks/pagination";
import {DataColumn, DataTable, DateTimeColumn, NumericColumn, StringColumn} from "shared/elements/data-table";
import dayjs, { Dayjs } from 'dayjs';
import {Chip, TextField} from "@mui/material";
import {DateTimePicker} from "@mui/x-date-pickers";
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import {TextField} from "@mui/material";
import {DesktopDateTimePicker} from "@mui/x-date-pickers";
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import {API_DATETIME_FORMAT_DAYJS} from "shared/constants";
import {API_DATETIME_FORMAT} from "shared/constants";
import {format, toDate} from "date-fns";
export default function LogView(props) {
@@ -18,7 +18,6 @@ export default function LogView(props) {
const api = props.api;
const showDialog = props.showDialog;
const {translate: L, requestModules, currentLocale} = useContext(LocaleContext);
const navigate = useNavigate();
const pagination = usePagination();
const [logEntries, setLogEntries] = useState([]);
@@ -37,7 +36,11 @@ export default function LogView(props) {
}, [currentLocale]);
const onFetchLogs = useCallback((page, count, orderBy, sortOrder) => {
api.fetchLogEntries(page, count, orderBy, sortOrder, LOG_LEVELS[logLevel], timestamp?.format(API_DATETIME_FORMAT_DAYJS), query).then((res) => {
api.fetchLogEntries(page, count, orderBy, sortOrder,
LOG_LEVELS[logLevel],
timestamp ? format(timestamp, API_DATETIME_FORMAT) : null,
query
).then((res) => {
if (res.success) {
setLogEntries(res.logs);
pagination.update(res.pagination);
@@ -99,13 +102,12 @@ export default function LogView(props) {
<div className={"col-4"}>
<div className={"form-group"}>
<label>{L("log.timestamp")}</label>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DateTimePicker className={"form-control"}
label="Select date time to filter..."
value={timestamp ? dayjs(timestamp) : null}
onChange={(newValue) => {console.log(newValue);
setTimestamp(newValue)
}}
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDateTimePicker className={"form-control"}
label={L("Select date time to filter...")}
value={timestamp ? toDate(new Date()) : null}
format={L("general.datefns_datetime_format_precise")}
onChange={(newValue) => setTimestamp(newValue)}
slotProps={{ textField: { size: 'small' } }}
/>
</LocalizationProvider>

1
react/package.json
View File

@@ -43,7 +43,6 @@
"chart.js": "^4.0.1",
"clsx": "^1.2.1",
"date-fns": "^2.29.3",
"dayjs": "^1.11.10",
"material-ui-color-picker": "^3.5.1",
"mini-css-extract-plugin": "^2.7.1",
"react": "^18.2.0",

3
react/shared/constants.js
View File

@@ -1,9 +1,6 @@
export const API_DATE_FORMAT = "yyyy-MM-dd";
export const API_TIME_FORMAT = "HH:mm:ss";
export const API_DATETIME_FORMAT = API_DATE_FORMAT + " " + API_TIME_FORMAT;
export const API_DATE_FORMAT_DAYJS = "YYYY-MM-DD";
export const API_TIME_FORMAT_DAYJS = "HH:mm:ss";
export const API_DATETIME_FORMAT_DAYJS = API_DATE_FORMAT_DAYJS + " " + API_TIME_FORMAT_DAYJS;
export const USER_GROUP_ADMIN = 1;

3
react/shared/locale.js
View File

@@ -1,6 +1,7 @@
import React, {useReducer} from 'react';
import {createContext, useCallback, useState} from "react";
import { enUS as dateFnsEN, de as dateFnsDE } from 'date-fns/locale';
import {getCookie, getParameter} from "./util";
const LocaleContext = createContext(null);
@@ -31,7 +32,7 @@ function reducer(entries, action) {
function LocaleProvider(props) {
const [entries, dispatch] = useReducer(reducer, window.languageEntries || {});
const [currentLocale, setCurrentLocale] = useState(window.languageCode || "en_US");
const [currentLocale, setCurrentLocale] = useState(window.languageCode || getParameter("lang") || getCookie("lang") || "en_US");
const translate = useCallback((key, defaultTranslation = null) => {

13
react/shared/util.js
View File

@@ -46,6 +46,16 @@ const getParameter = (key) => {
}
}
const getCookie = (name) => {
let cookieString = decodeURIComponent(document.cookie);
let match = cookieString.match(new RegExp('(^| )' + name + '=([^;]+)'));
if (match) {
return match[2];
} else {
return null;
}
}
const encodeText = (str) => {
return Uint8Array.from(str, c => c.charCodeAt(0));
}
@@ -87,7 +97,6 @@ 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))
@@ -100,7 +109,7 @@ const isInt = (value) => {
!isNaN(parseInt(value, 10));
}
export { humanReadableSize, removeParameter, getParameter,
export { humanReadableSize, removeParameter, getParameter, getCookie,
encodeText, decodeText, getBaseUrl,
formatDate, formatDateTime, formatDistance,
upperFirstChars, isInt, createDownload };