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

removed mui v4

Browse Source
This commit is contained in:
Roman
2024-04-05 17:14:36 +02:00
parent 964b98c22a
commit c6f9c8894c
31 changed files with 228 additions and 495 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
react/admin-panel/src/App.jsx
View File

@@ -2,8 +2,8 @@ import React, {useCallback, useContext, useEffect, useMemo, useState} from 'reac
import API from "shared/api";
import Icon from "shared/elements/icon";
import LoginForm from "shared/views/login";
import {Alert} from "@material-ui/lab";
import {Button} from "@material-ui/core";
import {Alert} from "@mui/lab";
import {Button} from "@mui/material";
import {LocaleContext} from "shared/locale";
import AdminDashboard from "./AdminDashboard";

8
react/admin-panel/src/elements/language-selection.js
View File

@@ -1,8 +1,8 @@
import React, {useCallback, useContext, useState} from 'react';
import {Box} from "@material-ui/core";
import {makeStyles} from "@material-ui/core/styles";
import {Box} from "@mui/material";
import {LocaleContext} from "shared/locale";
/*
const useStyles = makeStyles((theme) => ({
languageFlag: {
margin: theme.spacing(0.2),
@@ -10,11 +10,13 @@ const useStyles = makeStyles((theme) => ({
border: 0,
}
}));
*/
export default function LanguageSelection(props) {
const api = props.api;
const classes = useStyles();
// const classes = useStyles();
const classes = {};
const [languages, setLanguages] = useState(null);
const {translate: L, setLanguageByCode} = useContext(LocaleContext);

10
react/admin-panel/src/views/access-control-list.js
View File

@@ -12,9 +12,9 @@ import {
TableContainer,
TableHead,
TableRow,
IconButton, styled, FormGroup, FormLabel, FormControl, Box
} from "@material-ui/core";
import {Add, Delete, Edit, Refresh} from "@material-ui/icons";
IconButton, styled, FormGroup, FormLabel, Box
} from "@mui/material";
import {Add, Delete, Edit, Refresh} from "@mui/icons-material";
import {USER_GROUP_ADMIN} from "shared/constants";
import Dialog from "shared/elements/dialog";
@@ -238,11 +238,11 @@ export default function AccessControlList(props) {
<FormLabel>{L("general.controls")}</FormLabel>
</Box>
<Box mb={2}>
<Button variant={"outlined"} color={"primary"} className={"mr-1"}
<Button variant={"outlined"} color={"primary"} className={"mr-1"} size={"small"}
startIcon={<Refresh />} onClick={() => onFetchACL(true)}>
{L("general.reload")}
</Button>
<Button variant={"outlined"} startIcon={<Add />}
<Button variant={"outlined"} startIcon={<Add />} size={"small"}
disabled={!props.api.hasGroup(USER_GROUP_ADMIN)}
onClick={() => setDialogData({
open: true,

66
react/admin-panel/src/views/group/group-edit.js
View File

@@ -2,16 +2,14 @@ import {useCallback, useContext, useEffect, useState} from "react";
import {Link, useNavigate, useParams} from "react-router-dom";
import {LocaleContext} from "shared/locale";
import SearchField from "shared/elements/search-field";
import {Button, CircularProgress} from "@material-ui/core";
import * as React from "react";
import ColorPicker from "material-ui-color-picker";
import React from "react";
import {ControlsColumn, DataTable, NumericColumn, StringColumn} from "shared/elements/data-table";
import EditIcon from "@mui/icons-material/Edit";
import usePagination from "shared/hooks/pagination";
import {Delete, KeyboardArrowLeft, Save} from "@material-ui/icons";
import Dialog from "shared/elements/dialog";
import {Box, FormControl, FormGroup, FormLabel, styled, TextField} from "@mui/material";
import {Add} from "@mui/icons-material";
import {Box, FormControl, FormGroup, FormLabel, styled, TextField, Button, CircularProgress} from "@mui/material";
import {Add, Delete, KeyboardArrowLeft, Save} from "@mui/icons-material";
import {MuiColorInput} from "mui-color-input";
const defaultGroupData = {
name: "",
@@ -146,6 +144,24 @@ export default function EditGroupView(props) {
});
}, [api, groupId]);
const onOpenMemberDialog = useCallback(() => {
setDialogData({
open: true,
title: L("account.add_group_member_title"),
message: L("account.add_group_member_text"),
inputs: [
{
type: "custom", name: "search", element: SearchField,
size: "small", key: "search",
onSearch: v => onSearchUser(v),
onSelect: u => setSelectedUser(u),
displayText: u => u.fullName || u.name
}
],
onOption: (option) => option === 0 ? onAddMember() : setSelectedUser(null)
});
}, []);
useEffect(() => {
onFetchGroup();
}, []);
@@ -202,12 +218,11 @@ export default function EditGroupView(props) {
{L("account.color")}
</FormLabel>
<FormControl>
<ColorPicker
<MuiColorInput
format={"hex"}
value={group.color}
size={"small"}
variant={"outlined"}
style={{ backgroundColor: group.color }}
floatingLabelText={group.color}
onChange={color => setGroup({...group, color: color})}
/>
</FormControl>
@@ -243,6 +258,7 @@ export default function EditGroupView(props) {
</div>
{!isNewGroup && api.hasPermission("groups/getMembers") ?
<div className={"m-3 col-6"}>
<h4>{L("account.members")}</h4>
<DataTable
data={members}
pagination={pagination}
@@ -250,8 +266,7 @@ export default function EditGroupView(props) {
defaultSortColumn={0}
className={"table table-striped"}
fetchData={onFetchMembers}
placeholder={L("No members in this group")}
title={L("account.members")}
placeholder={L("account.no_members")}
columns={[
new NumericColumn(L("general.id"), "id"),
new StringColumn(L("account.name"), "name"),
@@ -266,6 +281,7 @@ export default function EditGroupView(props) {
label: L("general.remove"),
element: Delete,
disabled: !api.hasPermission("groups/removeMember"),
color: "secondary",
onClick: (entry) => setDialogData({
open: true,
title: L("account.remove_group_member_title"),
@@ -275,27 +291,15 @@ export default function EditGroupView(props) {
}
]),
]}
buttons={[{
key: "btn-add-member",
color: "primary",
startIcon: <Add />,
disabled: !api.hasPermission("groups/addMember"),
children: L("general.add"),
onClick: onOpenMemberDialog
}]}
/>
<Button startIcon={<Add />} color={"primary"}
variant={"outlined"} disabled={!api.hasPermission("groups/addMember")}
onClick={() => setDialogData({
open: true,
title: L("account.add_group_member_title"),
message: L("account.add_group_member_text"),
inputs: [
{
type: "custom", name: "search", element: SearchField,
size: "small", key: "search",
onSearch: v => onSearchUser(v),
onSelect: u => setSelectedUser(u),
displayText: u => u.fullName || u.name
}
],
onOption: (option) => option === 0 ? onAddMember() : setSelectedUser(null)
})
}>
{L("general.add")}
</Button>
</div>
: <></>
}

25
react/admin-panel/src/views/group/group-list.js
View File

@@ -1,10 +1,8 @@
import {Link, useNavigate} from "react-router-dom";
import {useCallback, useContext, useEffect, useState} from "react";
import {LocaleContext} from "shared/locale";
import {ControlsColumn, DataColumn, DataTable, NumericColumn, StringColumn} from "shared/elements/data-table";
import {Button, IconButton} from "@material-ui/core";
import EditIcon from '@mui/icons-material/Edit';
import AddIcon from '@mui/icons-material/Add';
import {ControlsColumn, DataTable, NumericColumn, StringColumn} from "shared/elements/data-table";
import {Add, Edit} from "@mui/icons-material";
import usePagination from "shared/hooks/pagination";
@@ -44,7 +42,7 @@ export default function GroupListView(props) {
new StringColumn(L("account.name"), "name"),
new NumericColumn(L("account.member_count"), "memberCount", { align: "center" }),
new ControlsColumn(L("general.controls"), [
{ label: L("general.edit"), element: EditIcon, onClick: (entry) => navigate(`/admin/group/${entry.id}`) }
{ label: L("general.edit"), element: Edit, onClick: (entry) => navigate(`/admin/group/${entry.id}`) }
]),
];
@@ -53,6 +51,7 @@ export default function GroupListView(props) {
<div className={"container-fluid"}>
<div className={"row mb-2"}>
<div className={"col-sm-6"}>
<h1 className={"m-0 text-dark"}>{L("account.groups")}</h1>
</div>
<div className={"col-sm-6"}>
<ol className={"breadcrumb float-sm-right"}>
@@ -64,11 +63,6 @@ export default function GroupListView(props) {
</div>
<div className={"content"}>
<div className={"container-fluid"}>
<Link to="/admin/group/new">
<Button variant={"outlined"} startIcon={<AddIcon />} size={"small"}>
{L("general.create_new")}
</Button>
</Link>
<DataTable
data={groups}
pagination={pagination}
@@ -77,8 +71,15 @@ export default function GroupListView(props) {
className={"table table-striped"}
fetchData={onFetchGroups}
placeholder={"No groups to display"}
title={L("account.groups")}
columns={columnDefinitions} />
columns={columnDefinitions}
buttons={[{
key: "btn-create-group",
color: "primary",
startIcon: <Add />,
onClick: () => navigate("/admin/group/new"),
disabled: !api.hasPermission("groups/create"),
children: L("general.create_new")
}]}/>
</div>
</div>
</div>

4
react/admin-panel/src/views/group/index.js
View File

@@ -1,4 +0,0 @@
import EditGroupView from "./group-edit";
import GroupListView from "./group-list";
export default { EditGroupView, GroupListView };

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

@@ -3,14 +3,13 @@ import {LocaleContext} from "shared/locale";
import {Link} from "react-router-dom";
import usePagination from "shared/hooks/pagination";
import {DataColumn, DataTable, DateTimeColumn, NumericColumn, StringColumn} from "shared/elements/data-table";
import {TextField} from "@mui/material";
import {Box, FormControl, FormGroup, FormLabel, IconButton, MenuItem, TextField} from "@mui/material";
import {DateTimePicker} 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} from "shared/constants";
import {format, toDate} from "date-fns";
import {Box, FormControl, FormGroup, FormLabel, IconButton, MenuItem, Select} from "@material-ui/core";
import {ExpandLess, ExpandMore} from "@material-ui/icons";
import {ExpandLess, ExpandMore} from "@mui/icons-material";
export default function LogView(props) {

12
react/admin-panel/src/views/login.jsx
View File

@@ -7,17 +7,17 @@ import {
Link,
TextField,
Typography
} from "@material-ui/core";
} from "@mui/material";
import {makeStyles} from '@material-ui/core/styles';
import {Alert} from '@material-ui/lab';
import {Alert} from '@mui/lab';
import React, {useCallback, useContext, useEffect, useState} from "react";
import ReplayIcon from '@material-ui/icons/Replay';
import ReplayIcon from '@mui/icons-material';
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) => ({
paper: {
marginTop: theme.spacing(8),
@@ -66,11 +66,13 @@ const useStyles = makeStyles((theme) => ({
}
}
}));
*/
export default function LoginForm(props) {
const api = props.api;
const classes = useStyles();
// const classes = useStyles();
const classes = {};
let [username, setUsername] = useState("");
let [password, setPassword] = useState("");
let [rememberMe, setRememberMe] = useState(true);

9
react/admin-panel/src/views/overview.js
View File

@@ -1,11 +1,10 @@
import * as React from "react";
import {Link} from "react-router-dom";
import {format, getDaysInMonth} from "date-fns";
import {CircularProgress} from "@material-ui/core";
import {useCallback, useContext, useEffect, useState} from "react";
import {LocaleContext} from "shared/locale";
import {LibraryBooks, People} from "@material-ui/icons";
import {ArrowCircleRight, Groups} from "@mui/icons-material";
import {ArrowCircleRight, BugReport, Groups, LibraryBooks, People} from "@mui/icons-material";
import {CircularProgress} from "@mui/material";
const StatBox = (props) => <div className={"col-lg-3 col-6"}>
<div className={"small-box bg-" + props.color}>
@@ -131,6 +130,10 @@ export default function Overview(props) {
text={L("admin.routes_defined")}
icon={<LibraryBooks />}
link={"/admin/routes"} />
<StatBox color={"danger"} count={stats?.errorCount}
text={L("admin.error_count")}
icon={<BugReport />}
link={"/admin/logs"} />
</div>
</div>
</section>

4
react/admin-panel/src/views/route/index.js
View File

@@ -1,4 +0,0 @@
import RouteEditView from "./route-edit";
import RouteListView from "./route-list";
export default { RouteEditView, RouteListView };

12
react/admin-panel/src/views/route/route-edit.js
View File

@@ -4,12 +4,12 @@ import {LocaleContext} from "shared/locale";
import {
Box,
Button,
TextField,
CircularProgress, styled,
} from "@material-ui/core";
} from "@mui/material";
import * as React from "react";
import RouteForm from "./route-form";
import {KeyboardArrowLeft, Save} from "@material-ui/icons";
import {TextField} from "@mui/material";
import {KeyboardArrowLeft, Save} from "@mui/icons-material";
const ButtonBar = styled(Box)((props) => ({
"& > button": {
@@ -74,7 +74,7 @@ export default function RouteEditView(props) {
setFetchRoute(false);
api.getRoute(routeId).then((res) => {
if (!res.success) {
showDialog(res.msg, L("Error fetching route"));
showDialog(res.msg, L("routes.fetch_route_error"));
navigate("/admin/routes");
} else {
setRoute(res.route);
@@ -93,7 +93,7 @@ export default function RouteEditView(props) {
if (res.success) {
navigate("/admin/routes/" + res.routeId);
} else {
showDialog(res.msg, L("Error saving route"));
showDialog(res.msg, L("routes.save_route_error"));
}
});
} else {
@@ -101,7 +101,7 @@ export default function RouteEditView(props) {
api.updateRoute(...args).then(res => {
setSaving(false);
if (!res.success) {
showDialog(res.msg, L("Error saving route"));
showDialog(res.msg, L("routes.save_route_error"));
}
});
}

4
react/admin-panel/src/views/route/route-form.js
View File

@@ -1,8 +1,8 @@
import {Box, Checkbox, FormControl, FormControlLabel, Select, styled, TextField} from "@material-ui/core";
import {Box, Checkbox, FormControl, FormControlLabel, Select, styled, TextField} from "@mui/material";
import * as React from "react";
import {useCallback, useContext, useEffect, useRef} from "react";
import {LocaleContext} from "shared/locale";
import {CheckCircle, ErrorRounded} from "@material-ui/icons";
import {CheckCircle, ErrorRounded} from "@mui/icons-material";
const RouteFormControl = styled(FormControl)((props) => ({
"& > label": {

14
react/admin-panel/src/views/route/route-list.js
View File

@@ -8,11 +8,12 @@ import {
TableContainer,
TableHead,
TableRow,
IconButton, Button, Checkbox
} from "@material-ui/core";
Button,
IconButton, Checkbox
} from "@mui/material";
import {useCallback, useContext, useEffect, useState} from "react";
import {LocaleContext} from "shared/locale";
import {Add, Cached, Delete, Edit, Refresh} from "@material-ui/icons";
import {Add, Cached, Delete, Edit, Refresh} from "@mui/icons-material";
import Dialog from "shared/elements/dialog";
const RouteTableRow = styled(TableRow)((props) => ({
@@ -136,15 +137,16 @@ export default function RouteListView(props) {
<div className={"col-6"} />
<div className={"col-6 text-right"}>
<div className={"form-group"}>
<Button variant={"outlined"} color={"primary"} className={"m-1"} startIcon={<Refresh />} onClick={() => onFetchRoutes(true)}>
<Button variant={"outlined"} color={"primary"} className={"m-1"} size={"small"}
startIcon={<Refresh />} onClick={() => onFetchRoutes(true)}>
{L("general.reload")}
</Button>
<Button variant={"outlined"} className={"m-1"} startIcon={<Add />}
<Button variant={"outlined"} className={"m-1"} startIcon={<Add />} size={"small"}
disabled={!props.api.hasPermission("routes/add")}
onClick={() => navigate("/admin/routes/new")} >
{L("general.add")}
</Button>
<Button variant={"outlined"} className={"m-1"} startIcon={<Cached />}
<Button variant={"outlined"} className={"m-1"} startIcon={<Cached />} size={"small"}
disabled={!props.api.hasPermission("routes/generateCache") || isGeneratingCache}
onClick={onRegenerateCache} >
{isGeneratingCache ? L("routes.regenerating_cache") + "…" : L("routes.regenerate_cache")}

2
react/admin-panel/src/views/settings.js
View File

@@ -10,6 +10,7 @@ import {
TableBody,
TableCell,
TableHead,
TableContainer,
TableRow,
Tabs, TextField
} from "@mui/material";
@@ -25,7 +26,6 @@ import {
Send,
SettingsApplications
} from "@mui/icons-material";
import {TableContainer} from "@material-ui/core";
import TIME_ZONES from "shared/time-zones";
const SettingsFormGroup = styled(FormGroup)((props) => ({

4
react/admin-panel/src/views/user/index.js
View File

@@ -1,4 +0,0 @@
import UserEditView from "./user-edit";
import UserListView from "./user-list";
export default { UserEditView, UserListView };

2
react/admin-panel/src/views/user/user-edit.js
View File

@@ -1,6 +1,6 @@
import {Link, useNavigate, useParams} from "react-router-dom";
import {useCallback, useContext, useEffect, useState} from "react";
import {CircularProgress} from "@material-ui/core";
import {CircularProgress} from "@mui/material";
import {LocaleContext} from "shared/locale";
import * as React from "react";

46
react/admin-panel/src/views/user/user-list.js
View File

@@ -9,10 +9,8 @@ import {
NumericColumn,
StringColumn
} from "shared/elements/data-table";
import {Button} from "@material-ui/core";
import EditIcon from '@mui/icons-material/Edit';
import {Chip} from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import {Edit, Add} from "@mui/icons-material";
import usePagination from "shared/hooks/pagination";
@@ -67,19 +65,29 @@ export default function UserListView(props) {
new BoolColumn(L("account.active"), "active", { align: "center" }),
new BoolColumn(L("account.confirmed"), "confirmed", { align: "center" }),
new ControlsColumn(L("general.controls"), [
{ label: L("general.edit"), element: EditIcon, onClick: (entry) => navigate(`/admin/user/${entry.id}`) }
{ label: L("general.edit"), element: Edit, onClick: (entry) => navigate(`/admin/user/${entry.id}`) }
]),
];
return <div className={"content-header"}>
<div className={"container-fluid"}>
<ol className={"breadcrumb"}>
<li className={"breadcrumb-item"}><Link to={"/admin/dashboard"}>Home</Link></li>
<li className="breadcrumb-item active">Users</li>
</ol>
return <>
<div className={"content-header"}>
<div className={"container-fluid"}>
<div className={"row mb-2"}>
<div className={"col-sm-6"}>
<h1 className={"m-0 text-dark"}>{L("account.users")}</h1>
</div>
<div className={"col-sm-6"}>
<ol className={"breadcrumb float-sm-right"}>
<li className={"breadcrumb-item"}><Link to={"/admin/dashboard"}>Home</Link></li>
<li className="breadcrumb-item active">{L("account.users")}</li>
</ol>
</div>
</div>
</div>
</div>
<div className={"content"}>
<div className={"container-fluid"}>
<DataTable
data={users}
pagination={pagination}
@@ -88,14 +96,16 @@ export default function UserListView(props) {
className={"table table-striped"}
fetchData={onFetchUsers}
placeholder={"No users to display"}
title={L("account.users")}
columns={columnDefinitions} />
<Link to="/admin/user/new">
<Button variant={"outlined"} startIcon={<AddIcon />} size={"small"}>
{L("general.create_new")}
</Button>
</Link>
columns={columnDefinitions}
buttons={[{
key: "btn-create",
color: "primary",
startIcon: <Add />,
children: L("general.create_new"),
disabled: !api.hasPermission("user/create") && !api.hasPermission("user/invite"),
onClick: () => navigate("/admin/user/new")
}]}/>
</div>
</div>
</div>
</>
}