141 lines
3.9 KiB
TypeScript
141 lines
3.9 KiB
TypeScript
import {
|
|
AppBar,
|
|
Button,
|
|
Checkbox,
|
|
FormControlLabel,
|
|
FormGroup,
|
|
IconButton,
|
|
Theme,
|
|
Toolbar,
|
|
Typography
|
|
} from "@mui/material";
|
|
import ResponsiveDialog from "common/ResponsiveDialog";
|
|
import CloseIcon from "@mui/icons-material/Close";
|
|
import React, { useState } from "react";
|
|
import TeamSearch from "./TeamSearch";
|
|
import { useTeamAPI } from "providers/pond/teamAPI";
|
|
import { useGlobalState, useUserAPI } from "providers";
|
|
import { Team } from "models";
|
|
import { makeStyles } from "@mui/styles";
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
setOpen: (value: React.SetStateAction<boolean>) => void;
|
|
title?: string;
|
|
info?: string;
|
|
hideKey?: string;
|
|
}
|
|
|
|
const useStyles = makeStyles((theme: Theme) => {
|
|
return ({
|
|
title: {
|
|
marginLeft: theme.spacing(2),
|
|
marginRight: theme.spacing(2),
|
|
flex: 1
|
|
},
|
|
searchBar: {
|
|
margin: theme.spacing(1)
|
|
},
|
|
viewingAs: {
|
|
margin: theme.spacing(2)
|
|
}
|
|
})
|
|
});
|
|
|
|
export default function TeamDialog(props: Props) {
|
|
const { open, setOpen, title, info, hideKey } = props;
|
|
const teamAPI = useTeamAPI();
|
|
const userAPI = useUserAPI();
|
|
const [, dispatch] = useGlobalState();
|
|
const [teamKey, setTeamKey] = useState<string>("");
|
|
const [{ team, user }] = useGlobalState();
|
|
const [viewAsTeam, setViewAsTeam] = useState(user.settings.useTeam)
|
|
const [doNotShow, setDoNotShow] = useState(false)
|
|
const classes = useStyles();
|
|
|
|
const shouldHide = hideKey ?
|
|
(localStorage.getItem(hideKey) === "true" ? true : false)
|
|
: false
|
|
|
|
const setTeam = () => {
|
|
onClose()
|
|
dispatch({ key: "as", value: teamKey });
|
|
if (teamKey === "" || teamKey.includes("auth")) {
|
|
dispatch({ key: "team", value: Team.create() });
|
|
return;
|
|
}
|
|
teamAPI.getTeam(teamKey).then(team => {
|
|
dispatch({ key: "team", value: team });
|
|
user.settings.defaultTeam = team.key();
|
|
user.settings.useTeam = viewAsTeam; //when selecting a team now set to view as team by default
|
|
userAPI.updateUser(user.id(), user.protobuf());
|
|
});
|
|
};
|
|
|
|
const onClose = () => {
|
|
console.log("close")
|
|
setOpen(false)
|
|
if (hideKey) localStorage.setItem(hideKey, ""+doNotShow)
|
|
}
|
|
|
|
return (
|
|
<ResponsiveDialog open={open && !shouldHide} onClose={onClose}>
|
|
<AppBar position="relative">
|
|
<Toolbar>
|
|
<IconButton
|
|
edge="start"
|
|
color="inherit"
|
|
onClick={() => setOpen(false)}
|
|
aria-label="close">
|
|
<CloseIcon />
|
|
</IconButton>
|
|
<Typography variant="h6" className={classes.title}>
|
|
{ title ? title : "Select a Team to View As"}
|
|
</Typography>
|
|
<Button color="inherit" onClick={setTeam} >
|
|
Save
|
|
</Button>
|
|
</Toolbar>
|
|
</AppBar>
|
|
{team.settings.name && (
|
|
<Typography variant="body1" className={classes.viewingAs}>
|
|
Viewing as: {team.name()}
|
|
</Typography>
|
|
)}
|
|
{info &&
|
|
<Typography variant="body1" className={classes.viewingAs}>
|
|
{info}
|
|
</Typography>
|
|
}
|
|
<TeamSearch
|
|
//style={{ width: theme.spacing(32) }}
|
|
className={classes.searchBar}
|
|
loadUsers={user.hasFeature("admin")}
|
|
setTeamCallback={setTeamKey}
|
|
/>
|
|
{/* <Checkbox checked={viewAsTeam} onChange={() => setViewAsTeam(!viewAsTeam)} /> */}
|
|
<FormGroup sx={{ margin: 1, marginLeft: 2 }}>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
checked={viewAsTeam}
|
|
onChange={() => setViewAsTeam(!viewAsTeam)}
|
|
/>
|
|
}
|
|
label="View as team"
|
|
/>
|
|
</FormGroup>
|
|
{hideKey && <FormGroup sx={{ margin: 1, marginLeft: 2 }}>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
checked={doNotShow}
|
|
onChange={() => setDoNotShow(!doNotShow)}
|
|
/>
|
|
}
|
|
label="Do not show again"
|
|
/>
|
|
</FormGroup>}
|
|
</ResponsiveDialog>
|
|
);
|
|
}
|