From 9edb6bbb2f8555bb9eb941a290dd750a89ba631e Mon Sep 17 00:00:00 2001 From: Carter Date: Thu, 30 Jan 2025 11:38:39 -0600 Subject: [PATCH] fixed permission issue with groups, added groups and devices links to team page --- src/app/UserWrapper.tsx | 3 +-- src/pages/Group.tsx | 11 +++++++-- src/pages/Groups.tsx | 49 ++++++++++++++++++++++++++++++++++++++--- src/pages/Team.tsx | 26 +++++++++++++++++++--- src/user/UserMenu.tsx | 3 ++- 5 files changed, 81 insertions(+), 11 deletions(-) diff --git a/src/app/UserWrapper.tsx b/src/app/UserWrapper.tsx index 58a41cf..0c6ff41 100644 --- a/src/app/UserWrapper.tsx +++ b/src/app/UserWrapper.tsx @@ -63,14 +63,13 @@ export default function UserWrapper(props: Props) { const hasFetched = useRef(false); const [global, setGlobal] = useState(undefined) - let user_id = or(useAuth.user?.sub, "") + const user_id = or(useAuth.user?.sub, "") const loadUser = useCallback(() => { if (!userAPI.getUserWithTeam) return; if (hasFetched.current) return; setLoading(true) userAPI.getUserWithTeam(user_id).then(resp => { - console.log(resp.data.user) setGlobal({ user: resp.data.user ? User.create(resp.data.user) : User.create(), team: resp.data.team ? Team.create(resp.data.team) : Team.create(), diff --git a/src/pages/Group.tsx b/src/pages/Group.tsx index 3b0ac4a..4537f69 100644 --- a/src/pages/Group.tsx +++ b/src/pages/Group.tsx @@ -81,9 +81,11 @@ export default function GroupPage() { const loadGroup = () => { setLoadingGroup(true) groupAPI.getGroupAndPermissions(groupID).then(resp => { + console.log(resp.data) if (resp.data.group) setGroup(Group.create(resp.data.group)) let newPerms: pond.Permission[] = [] resp.data.permissions.forEach(perm => { + console.log(perm) if (typeof(perm) === "string") { const permNumber = pond.Permission[perm as keyof typeof pond.Permission] newPerms.push(permNumber) @@ -98,9 +100,10 @@ export default function GroupPage() { } useEffect(() => { - if (group.id() === groupID) return; + // if (group.id() === groupID) return; loadGroup() - }, [group, groupID]) + // }, [group, groupID]) + }, []) const loadDevices = () => { setLoadingDevices(true) @@ -195,6 +198,10 @@ export default function GroupPage() { setLimit(event.target.value); }; + useEffect(() => { + console.log(permissions) + }, [permissions]) + return ( diff --git a/src/pages/Groups.tsx b/src/pages/Groups.tsx index 8b2ef90..e03ee5c 100644 --- a/src/pages/Groups.tsx +++ b/src/pages/Groups.tsx @@ -1,4 +1,5 @@ -import { Box, Chip, Theme, Tooltip, Typography } from "@mui/material"; +import { Box, Chip, Grid2, IconButton, Theme, Tooltip, Typography } from "@mui/material"; +import { LibraryAdd as CreateGroupIcon } from "@mui/icons-material" import { makeStyles } from "@mui/styles"; import ResponsiveTable, { Column } from "common/ResponsiveTable"; import SmartBreadcrumb from "common/SmartBreadcrumb"; @@ -10,6 +11,8 @@ import { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import { or } from "utils/types"; import PageContainer from "./PageContainer"; +import GroupSettings from "group/GroupSettings"; +import { green } from "@mui/material/colors"; const useStyles = makeStyles((theme: Theme) => { const isMobile = useMobile() @@ -32,6 +35,9 @@ const useStyles = makeStyles((theme: Theme) => { display: "flex", width: theme.spacing(1), }, + green: { + color: green["600"] + }, }); }); @@ -47,13 +53,14 @@ export default function GroupsPage() { const [loading, setLoading] = useState(false) const [groups, setGroups] = useState([]) + const [groupSettingsIsOpen, setGroupSettingsIsOpen] = useState(false) const classes = useStyles() const loadGroups = () => { setLoading(true) groupAPI.listGroups(limit, page*limit, order, orderBy, search).then(resp => { - setGroups(resp.data.groups) + setGroups(or(resp.data.groups, [])) setTotal(resp.data.total) }).finally(() => { setLoading(false) @@ -115,10 +122,37 @@ export default function GroupsPage() { if (row.settings?.groupId) navigate(appendToUrl(or(row.settings?.groupId, "")), { state: {group: row} }) } + const groupButton = () => { + return ( + + setGroupSettingsIsOpen(true)} + aria-label="Create Group" + size="small" + > + + + + ) + } + + const title = () => { + return ( + + + + + + {groupButton()} + + + ) + } + return ( - title={} + title={title()} rows={groups} columns={columns()} total={total} @@ -130,6 +164,15 @@ export default function GroupsPage() { setSearchText={setSearch} onRowClick={handleRowClick} /> + setGroupSettingsIsOpen(false)} + refreshCallback={loadGroups} + canEdit={true} + /> ) } \ No newline at end of file diff --git a/src/pages/Team.tsx b/src/pages/Team.tsx index 809ab0f..af2afda 100644 --- a/src/pages/Team.tsx +++ b/src/pages/Team.tsx @@ -1,4 +1,4 @@ -import { Avatar, AvatarGroup, Box, Button, Card, Grid2, Theme, Typography } from "@mui/material"; +import { Avatar, AvatarGroup, Box, Button, Card, Divider, Grid2, List, ListItemButton, Theme, Typography } from "@mui/material"; import { makeStyles } from "@mui/styles"; import LoadingScreen from "app/LoadingScreen"; import Chat from "chat/Chat"; @@ -6,13 +6,14 @@ import Chat from "chat/Chat"; import { useMobile } from "hooks"; import { cloneDeep } from "lodash"; import { Team, teamScope, User } from "models"; +import { appendToUrl } from "navigation/Router"; // import { useSnackbar } from "notistack"; import PageContainer from "pages/PageContainer"; import { getContextKeys, getContextTypes } from "pbHelpers/Context"; import { pond } from "protobuf-ts/pond"; import { useSnackbar, useTeamAPI, useUserAPI } from "providers"; import { useEffect, useState } from "react"; -import { useLocation, useParams } from 'react-router-dom'; +import { useLocation, useNavigate, useParams } from 'react-router-dom'; import { getSignatureAccentColour } from "services/whiteLabel"; import TeamActions from "teams/TeamActions"; import ObjectUsers from "user/ObjectUsers"; @@ -75,6 +76,7 @@ export default function TeamPage() { const isMobile = useMobile(); const classes = useStyles({isMobile}); const { state } = useLocation(); + const navigate = useNavigate(); // const { teamID } = useParams<{ teamID: string }>() as { teamID: string }; const { teamID } = useParams<{ teamID: string }>(); // const [{ user }, dispatch] = useGlobalState(); @@ -199,6 +201,14 @@ export default function TeamPage() { ) } + + const toDevices = () => { + navigate(appendToUrl("devices")) + } + + const toGroups = () => { + navigate(appendToUrl("groups")) + } return ( @@ -233,7 +243,17 @@ export default function TeamPage() { - + + + + Devices + + + + Groups + + + diff --git a/src/user/UserMenu.tsx b/src/user/UserMenu.tsx index ea60bab..870ed79 100644 --- a/src/user/UserMenu.tsx +++ b/src/user/UserMenu.tsx @@ -139,7 +139,8 @@ export default function UserMenu(props: Props) { onMouseEnter={lockHover} onMouseLeave={lockNoHover} size="small" - className={classes.signIn}> + className={classes.signIn} + > Sign In {lockIsHovered ? (