233 lines
9.5 KiB
JavaScript
233 lines
9.5 KiB
JavaScript
import {useCallback, useContext, useEffect, useState} from "react";
|
|
import {Link, useNavigate, useParams} from "react-router-dom";
|
|
import {LocaleContext} from "shared/locale";
|
|
import {Button, CircularProgress} from "@material-ui/core";
|
|
import * as React from "react";
|
|
import ColorPicker from "material-ui-color-picker";
|
|
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";
|
|
|
|
const defaultGroupData = {
|
|
name: "",
|
|
color: "#ccc",
|
|
members: []
|
|
};
|
|
|
|
const ButtonBar = styled(Box)((props) => ({
|
|
"& > button": {
|
|
marginRight: props.theme.spacing(1)
|
|
}
|
|
}));
|
|
|
|
export default function EditGroupView(props) {
|
|
|
|
const {translate: L, requestModules, currentLocale} = useContext(LocaleContext);
|
|
|
|
const { groupId } = useParams();
|
|
const navigate = useNavigate();
|
|
const isNewGroup = groupId === "new";
|
|
const pagination = usePagination();
|
|
const api = props.api;
|
|
|
|
// data
|
|
const [fetchGroup, setFetchGroup] = useState(!isNewGroup);
|
|
const [group, setGroup] = useState(isNewGroup ? defaultGroupData : null);
|
|
const [members, setMembers] = useState([]);
|
|
|
|
// ui
|
|
const [dialogData, setDialogData] = useState({open: false});
|
|
const [isSaving, setSaving] = useState(false);
|
|
|
|
useEffect(() => {
|
|
requestModules(props.api, ["general", "account"], currentLocale).then(data => {
|
|
if (!data.success) {
|
|
props.showDialog(data.msg, "Error fetching localization");
|
|
}
|
|
});
|
|
}, [currentLocale]);
|
|
|
|
const onFetchGroup = useCallback((force = false) => {
|
|
if (force || fetchGroup) {
|
|
setFetchGroup(false);
|
|
api.getGroup(groupId).then(res => {
|
|
if (!res.success) {
|
|
props.showDialog(res.msg, "Error fetching group");
|
|
navigate("/admin/groups");
|
|
} else {
|
|
setGroup(res.group);
|
|
}
|
|
});
|
|
}
|
|
}, [api, fetchGroup]);
|
|
|
|
const onFetchMembers = useCallback(async (page, count, orderBy, sortOrder) => {
|
|
api.fetchGroupMembers(groupId, page, count, orderBy, sortOrder).then((res) => {
|
|
if (res.success) {
|
|
setMembers(res.users);
|
|
pagination.update(res.pagination);
|
|
} else {
|
|
props.showDialog(res.msg, "Error fetching group members");
|
|
return null;
|
|
}
|
|
});
|
|
}, [groupId, api, pagination]);
|
|
|
|
const onRemoveMember = useCallback(userId => {
|
|
api.removeGroupMember(groupId, userId).then(data => {
|
|
if (data.success) {
|
|
let newMembers = members.filter(u => u.id !== userId);
|
|
setMembers(newMembers);
|
|
} else {
|
|
props.showDialog(data.msg, "Error removing group member");
|
|
}
|
|
});
|
|
}, [api, groupId, members]);
|
|
|
|
const onSave = useCallback(() => {
|
|
setSaving(true);
|
|
if (isNewGroup) {
|
|
api.createGroup(group.name, group.color).then(data => {
|
|
if (!data.success) {
|
|
props.showDialog(data.msg, "Error creating group");
|
|
setSaving(false);
|
|
} else {
|
|
navigate(`/admin/groups/${data.id}`)
|
|
}
|
|
});
|
|
} else {
|
|
api.updateGroup(groupId, group.name, group.color).then(data => {
|
|
setSaving(false);
|
|
if (!data.success) {
|
|
props.showDialog(data.msg, "Error updating group");
|
|
}
|
|
});
|
|
}
|
|
}, [api, groupId, isNewGroup, 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"}>{L("account.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-4 pl-5 pr-5"}>
|
|
<FormGroup className={"my-2"}>
|
|
<FormLabel htmlFor={"name"}>
|
|
{L("account.group_name")}
|
|
</FormLabel>
|
|
<FormControl>
|
|
<TextField maxLength={32} value={group.name}
|
|
size={"small"} name={"name"}
|
|
placeholder={L("account.name")}
|
|
onChange={e => setGroup({...group, name: e.target.value})}/>
|
|
</FormControl>
|
|
</FormGroup>
|
|
|
|
<FormGroup className={"my-2"}>
|
|
<FormLabel htmlFor={"color"}>
|
|
{L("account.color")}
|
|
</FormLabel>
|
|
<FormControl>
|
|
<ColorPicker
|
|
value={group.color}
|
|
size={"small"}
|
|
variant={"outlined"}
|
|
style={{ backgroundColor: group.color }}
|
|
floatingLabelText={group.color}
|
|
onChange={color => setGroup({...group, color: color})}
|
|
/>
|
|
</FormControl>
|
|
</FormGroup>
|
|
|
|
<ButtonBar mt={2}>
|
|
<Button startIcon={<KeyboardArrowLeft />}
|
|
variant={"outlined"}
|
|
onClick={() => navigate("/admin/groups")}>
|
|
{L("general.cancel")}
|
|
</Button>
|
|
<Button startIcon={<Save />} color={"primary"}
|
|
variant={"outlined"} disabled={isSaving}
|
|
onClick={onSave}>
|
|
{isSaving ? L("general.saving") + "…" : L("general.save")}
|
|
</Button>
|
|
</ButtonBar>
|
|
</div>
|
|
</div>
|
|
{!isNewGroup && api.hasPermission("groups/getMembers") ?
|
|
<div className={"m-3"}>
|
|
<div className={"col-6"}>
|
|
<DataTable
|
|
data={members}
|
|
pagination={pagination}
|
|
defaultSortOrder={"asc"}
|
|
defaultSortColumn={0}
|
|
className={"table table-striped"}
|
|
fetchData={onFetchMembers}
|
|
placeholder={L("No members in this group")}
|
|
title={L("account.members")}
|
|
columns={[
|
|
new NumericColumn(L("general.id"), "id"),
|
|
new StringColumn(L("account.name"), "name"),
|
|
new StringColumn(L("account.full_name"), "fullName"),
|
|
new ControlsColumn(L("general.controls"), [
|
|
{
|
|
label: L("general.edit"),
|
|
element: EditIcon,
|
|
onClick: (entry) => navigate(`/admin/user/${entry.id}`)
|
|
},
|
|
{
|
|
label: L("general.remove"),
|
|
element: Delete,
|
|
disabled: !api.hasPermission("groups/removeMember"),
|
|
onClick: (entry) => setDialogData({
|
|
open: true,
|
|
title: L("Remove member"),
|
|
message: sprintf(L("Do you really want to remove user '%s' from this group?"), entry.fullName || entry.name),
|
|
onOption: (option) => option === 0 && onRemoveMember(entry.id)
|
|
})
|
|
}
|
|
]),
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
: <></>
|
|
}
|
|
</div>
|
|
<Dialog show={dialogData.open}
|
|
onClose={() => setDialogData({open: false})}
|
|
title={dialogData.title}
|
|
message={dialogData.message}
|
|
onOption={dialogData.onOption}
|
|
inputs={dialogData.inputs}
|
|
options={[L("general.ok"), L("general.cancel")]} />
|
|
</>
|
|
|
|
} |