permission update, routes, etc.

react/admin-panel/src/AdminDashboard.jsx

@@ -16,8 +16,8 @@ import clsx from "clsx";
 const Overview = lazy(() => import('./views/overview'));
 const UserListView = lazy(() => import('./views/user/user-list'));
 const UserEditView = lazy(() => import('./views/user/user-edit'));
-const GroupListView = lazy(() => import('./views/group-list'));
-const EditGroupView = lazy(() => import('./views/group-edit'));
+const GroupListView = lazy(() => import('./views/group/group-list'));
+const EditGroupView = lazy(() => import('./views/group/group-edit'));
 const LogView = lazy(() => import("./views/log-view"));
 const AccessControlList = lazy(() => import("./views/access-control-list"));
 

react/admin-panel/src/elements/sidebar.js

@@ -29,9 +29,13 @@ export default function Sidebar(props) {
             "icon": "chart-bar",
         },
         "users": {
-            "name": "admin.user_groups",
+            "name": "admin.users",
             "icon": "users"
         },
+        "groups": {
+            "name": "admin.groups",
+            "icon": "users-cog"
+        },
         "pages": {
             "name": "admin.page_routes",
             "icon": "copy",

react/admin-panel/src/views/group/group-list.js

@@ -5,30 +5,40 @@ import {DataColumn, DataTable, NumericColumn, StringColumn} from "shared/element
 import {Button, IconButton} from "@material-ui/core";
 import EditIcon from '@mui/icons-material/Edit';
 import AddIcon from '@mui/icons-material/Add';
+import usePagination from "shared/hooks/pagination";
 
 
 export default function GroupListView(props) {
 
+    // meta
     const {translate: L, requestModules, currentLocale} = useContext(LocaleContext);
     const navigate = useNavigate();
+    const pagination = usePagination();
+    const api = props.api;
+
+    // data
+    const [groups, setGroups] = useState([]);
 
     useEffect(() => {
         requestModules(props.api, ["general", "account"], currentLocale).then(data => {
             if (!data.success) {
-                alert(data.msg);
+                props.showDialog(data.msg, "Error fetching localization");
             }
         });
     }, [currentLocale]);
 
     const onFetchGroups = useCallback(async (page, count, orderBy, sortOrder) => {
-        let res = await props.api.fetchGroups(page, count, orderBy, sortOrder);
-        if (res.success) {
-            return Promise.resolve([res.groups, res.pagination]);
-        } else {
-            props.showAlert("Error fetching groups", res.msg);
-            return null;
-        }
-    }, []);
+
+        api.fetchGroups(page, count, orderBy, sortOrder).then((res) => {
+            if (res.success) {
+                setGroups(res.groups);
+                pagination.update(res.pagination);
+            } else {
+                props.showDialog(res.msg, "Error fetching groups");
+                return null;
+            }
+        });
+    }, [api, pagination]);
 
     const actionColumn = (() => {
         let column = new DataColumn(L("general.actions"), null, false);
@@ -69,10 +79,16 @@ export default function GroupListView(props) {
                             {L("general.create_new")}
                         </Button>
                     </Link>
-                    <DataTable className={"table table-striped"}
-                               fetchData={onFetchGroups}
-                               placeholder={"No groups to display"}
-                               columns={columnDefinitions} />
+                    <DataTable
+                        data={groups}
+                        pagination={pagination}
+                        defaultSortOrder={"asc"}
+                        defaultSortColumn={0}
+                        className={"table table-striped"}
+                        fetchData={onFetchGroups}
+                        placeholder={"No groups to display"}
+                        title={L("account.groups")}
+                        columns={columnDefinitions} />
                 </div>
             </div>
         </div>

react/shared/elements/data-table.js

@@ -123,8 +123,8 @@ export function DataTable(props) {
             {title ?
                 <h3>
                     {fetchData ?
-                        <IconButton onClick={() => onFetchData(true)}>
-                            <CachedIcon/>
+                        <IconButton onClick={() => onFetchData(true)} title={L("general.reload")}>
+                            <CachedIcon/>&nbsp;
                         </IconButton>
                         : <></>
                     }

react/shared/elements/dialog.jsx

@@ -50,6 +50,7 @@ export default function Dialog(props) {
 
         switch (input.type) {
             case 'label':
+                delete inputProps.value;
                 inputElements.push(<span {...inputProps}>{input.value}</span>);
                 break;
             case 'text':
@@ -57,11 +58,9 @@ export default function Dialog(props) {
                 inputElements.push(<TextField
                     {...inputProps}
                     type={input.type}
-                    sx={{marginTop: 1}}
                     size={"small"} fullWidth={true}
                     key={"input-" + input.name}
                     value={inputData[input.name] || ""}
-                    defaultValue={input.defaultValue || ""}
                     onChange={e => setInputData({ ...inputData, [input.name]: e.target.value })}
                 />)
                 break;

react/shared/hooks/pagination.js

@@ -1,6 +1,7 @@
 import React, {useState} from "react";
 import {Box, MenuItem, Select, Pagination as MuiPagination} from "@mui/material";
 import {sprintf} from "sprintf-js";
+import {FormControl} from "@material-ui/core";
 
 class Pagination {
 
@@ -57,15 +58,17 @@ class Pagination {
         options = options || [10, 25, 50, 100];
 
         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>
+            <FormControl>
+                <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>
+            </FormControl>
             <MuiPagination
                 count={this.getPageCount()}
                 onChange={(_, page) => this.setPage(page)}