permission update, routes, etc.
This commit is contained in:
103
react/admin-panel/src/views/group/group-edit.js
Normal file
103
react/admin-panel/src/views/group/group-edit.js
Normal file
@@ -0,0 +1,103 @@
|
||||
import {useCallback, useContext, useEffect, useState} from "react";
|
||||
import {Link, useNavigate, useParams} from "react-router-dom";
|
||||
import {LocaleContext} from "shared/locale";
|
||||
import {CircularProgress} from "@material-ui/core";
|
||||
import * as React from "react";
|
||||
import ColorPicker from "material-ui-color-picker";
|
||||
|
||||
const defaultGroupData = {
|
||||
name: "",
|
||||
color: "#ccc",
|
||||
members: []
|
||||
};
|
||||
|
||||
export default function EditGroupView(props) {
|
||||
|
||||
const {translate: L, requestModules, currentLocale} = useContext(LocaleContext);
|
||||
|
||||
const { groupId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const isNewGroup = groupId === "new";
|
||||
|
||||
const [fetchGroup, setFetchGroup] = useState(!isNewGroup);
|
||||
const [group, setGroup] = useState(isNewGroup ? defaultGroupData : null);
|
||||
|
||||
const onFetchGroup = useCallback((force = false) => {
|
||||
if (force || fetchGroup) {
|
||||
setFetchGroup(false);
|
||||
props.api.getGroup(groupId).then(res => {
|
||||
if (!res.success) {
|
||||
props.showDialog(res.msg, "Error fetching group");
|
||||
navigate("/admin/groups");
|
||||
} else {
|
||||
setGroup(res.group);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
onFetchGroup();
|
||||
}, []);
|
||||
|
||||
if (group === null) {
|
||||
return <CircularProgress />
|
||||
}
|
||||
|
||||
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"}>
|
||||
{ isNewGroup ? L("account.new_group") : L("account.group") + ": " + group.name }
|
||||
</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"><Link to={"/admin/groups"}>Group</Link></li>
|
||||
<li className="breadcrumb-item active">{ isNewGroup ? L("general.new") : groupId }</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={"content"}>
|
||||
<div className={"row"}>
|
||||
<div className={"col-6 pl-5 pr-5"}>
|
||||
<form role={"form"} onSubmit={(e) => this.submitForm(e)}>
|
||||
<div className={"form-group"}>
|
||||
<label htmlFor={"name"}>Group Name</label>
|
||||
<input type={"text"} className={"form-control"} placeholder={"Name"}
|
||||
name={"name"} id={"name"} maxLength={32} value={group.name}/>
|
||||
</div>
|
||||
|
||||
<div className={"form-group"}>
|
||||
<label htmlFor={"color"}>Color</label>
|
||||
<div>
|
||||
<ColorPicker
|
||||
value={group.color}
|
||||
size={"small"}
|
||||
variant={"outlined"}
|
||||
style={{ backgroundColor: group.color }}
|
||||
floatingLabelText={group.color}
|
||||
onChange={color => setGroup({...group, color: color})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link to={"/admin/groups"} className={"btn btn-info mt-2 mr-2"}>
|
||||
Back
|
||||
</Link>
|
||||
<button type={"submit"} className={"btn btn-primary mt-2"}>Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
<div className={"col-6"}>
|
||||
<h3>Members</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
}
|
||||
96
react/admin-panel/src/views/group/group-list.js
Normal file
96
react/admin-panel/src/views/group/group-list.js
Normal file
@@ -0,0 +1,96 @@
|
||||
import {Link, useNavigate} from "react-router-dom";
|
||||
import {useCallback, useContext, useEffect, useState} from "react";
|
||||
import {LocaleContext} from "shared/locale";
|
||||
import {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 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) {
|
||||
props.showDialog(data.msg, "Error fetching localization");
|
||||
}
|
||||
});
|
||||
}, [currentLocale]);
|
||||
|
||||
const onFetchGroups = useCallback(async (page, count, orderBy, sortOrder) => {
|
||||
|
||||
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);
|
||||
column.renderData = (L, entry) => <>
|
||||
<IconButton size={"small"} title={L("general.edit")} onClick={() => navigate("/admin/group/" + entry.id)}>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
</>
|
||||
return column;
|
||||
})();
|
||||
|
||||
const columnDefinitions = [
|
||||
new NumericColumn(L("general.id"), "id"),
|
||||
new StringColumn(L("group.name"), "name"),
|
||||
new NumericColumn(L("group.member_count"), "memberCount"),
|
||||
actionColumn,
|
||||
];
|
||||
|
||||
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"}>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">Groups</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</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}
|
||||
defaultSortOrder={"asc"}
|
||||
defaultSortColumn={0}
|
||||
className={"table table-striped"}
|
||||
fetchData={onFetchGroups}
|
||||
placeholder={"No groups to display"}
|
||||
title={L("account.groups")}
|
||||
columns={columnDefinitions} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
Reference in New Issue
Block a user