123 lines
3.6 KiB
TypeScript
123 lines
3.6 KiB
TypeScript
import {
|
|
IconButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Menu,
|
|
MenuItem,
|
|
Tooltip
|
|
} from "@mui/material";
|
|
import { AccountCircle, MoreVert, Settings } from "@mui/icons-material";
|
|
import { isOffline } from "utils/environment";
|
|
import { mineScope } from "models";
|
|
import { pond } from "protobuf-ts/pond";
|
|
import React, { useState } from "react";
|
|
import ObjectUsers from "user/ObjectUsers";
|
|
import { or } from "utils";
|
|
import EditorSettings from "./EditorSettings";
|
|
import ObjectTeams from "teams/ObjectTeams";
|
|
import ObjectTeamsIcon from "@mui/icons-material/SupervisedUserCircle";
|
|
import { useGlobalState } from "providers";
|
|
|
|
interface Props {
|
|
mine: pond.MineSettings;
|
|
setMine: React.Dispatch<React.SetStateAction<pond.MineSettings>>;
|
|
permissions: any;
|
|
refreshCallback: () => void;
|
|
}
|
|
|
|
export default function EditorActions(props: Props) {
|
|
const { mine, setMine, permissions, refreshCallback } = props;
|
|
const [settingsDialog, setSettingsDialog] = useState(false);
|
|
const [userDialog, setUserDialog] = useState(false);
|
|
const [teamDialog, setTeamDialog] = useState(false);
|
|
const [menuAnchorEl, setMenuAnchorEl] = useState<Element | null>(null);
|
|
const [{ user }] = useGlobalState();
|
|
|
|
const menu = () => {
|
|
const canManageUsers = permissions.includes(pond.Permission.PERMISSION_USERS);
|
|
const canManageTeams = canManageUsers && user.hasFeature("teams");
|
|
return (
|
|
<Menu
|
|
anchorEl={menuAnchorEl ? menuAnchorEl : null}
|
|
open={menuAnchorEl !== null}
|
|
onClose={() => setMenuAnchorEl(null)}
|
|
disableAutoFocusItem>
|
|
{/* Users menu item */}
|
|
{!isOffline() && canManageUsers && (
|
|
<MenuItem onClick={() => setUserDialog(true)} dense>
|
|
<ListItemIcon>
|
|
<AccountCircle />
|
|
</ListItemIcon>
|
|
<ListItemText secondary="Users" />
|
|
</MenuItem>
|
|
)}
|
|
{!isOffline() && canManageTeams && (
|
|
<MenuItem onClick={() => setTeamDialog(true)} dense>
|
|
<ListItemIcon>
|
|
<ObjectTeamsIcon />
|
|
</ListItemIcon>
|
|
<ListItemText secondary="Teams" />
|
|
</MenuItem>
|
|
)}
|
|
</Menu>
|
|
);
|
|
};
|
|
|
|
const users = () => {
|
|
return (
|
|
<ObjectUsers
|
|
scope={mineScope(or(mine.key, ""))}
|
|
label={or(mine.name, "No Name")}
|
|
permissions={or(permissions, [])}
|
|
isDialogOpen={or(userDialog, false)}
|
|
closeDialogCallback={() => setUserDialog(false)}
|
|
refreshCallback={refreshCallback}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const buttons = () => {
|
|
return (
|
|
<React.Fragment>
|
|
<Tooltip title="Settings">
|
|
<IconButton onClick={() => setSettingsDialog(true)}>
|
|
<Settings />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title={mine.key ? "More" : "Save or load mine first"}>
|
|
<span>
|
|
<IconButton
|
|
aria-owns={"deviceMenu"}
|
|
aria-haspopup="true"
|
|
disabled={mine.key === undefined || mine.key === ""}
|
|
onClick={event => setMenuAnchorEl(event.currentTarget)}>
|
|
<MoreVert />
|
|
</IconButton>
|
|
</span>
|
|
</Tooltip>
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<React.Fragment>
|
|
{buttons()}
|
|
{menu()}
|
|
{users()}
|
|
<EditorSettings
|
|
open={settingsDialog}
|
|
setOpen={setSettingsDialog}
|
|
mine={mine}
|
|
setMine={setMine}
|
|
/>
|
|
<ObjectTeams
|
|
scope={mineScope(mine.key)}
|
|
label="Teams"
|
|
permissions={permissions}
|
|
isDialogOpen={teamDialog}
|
|
refreshCallback={refreshCallback}
|
|
closeDialogCallback={() => setTeamDialog(false)}
|
|
/>
|
|
</React.Fragment>
|
|
);
|
|
}
|