committing all group related code

2025-01-07 10:34:18 -06:00 · 2025-01-07 10:34:18 -06:00 · 2d98917322
commit 2d98917322
parent 0ec54b2d31
14 changed files with 541 additions and 102 deletions
--- a/src/group/GroupActions.tsx
+++ b/src/group/GroupActions.tsx
@ -0,0 +1,204 @@
+import {
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Theme,
+  Tooltip
+} from "@mui/material";
+import { blue } from "@mui/material/colors";
+import RemoveSelfIcon from "@mui/icons-material/ExitToApp";
+import MoreIcon from "@mui/icons-material/MoreVert";
+import GroupSettingsIcon from "@mui/icons-material/Settings";
+import ShareObjectIcon from "@mui/icons-material/Share";
+import ObjectUsersIcon from "@mui/icons-material/AccountCircle";
+import ObjectTeamsIcon from "@mui/icons-material/SupervisedUserCircle";
+import GroupSettings from "group/GroupSettings";
+import { Device, Group, groupScope } from "models";
+import { pond } from "protobuf-ts/pond";
+import { useState } from "react";
+// import ObjectTeams from "teams/ObjectTeams";
+import ObjectUsers from "user/ObjectUsers";
+import RemoveSelfFromObject from "user/RemoveSelfFromObject";
+import ShareObject from "user/ShareObject";
+import { isOffline } from "utils/environment";
+import { makeStyles } from "@mui/styles";
+
+// const useStyles = makeStyles((theme: Theme) => {
+//   // const isMobile = useMobile()
+//   return ({
+    
+//   });
+// });
+
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
+    shareIcon: {
+      color: blue["500"],
+      "&:hover": {
+        color: blue["600"]
+      }
+    },
+    removeIcon: {
+      color: "var(--status-alert)"
+    },
+    red: {
+      color: "var(--status-alert)"
+    }
+  });
+});
+
+interface Props {
+  group: Group;
+  devices: Device[];
+  permissions: pond.Permission[];
+  refreshCallback: () => void;
+}
+
+export default function GroupActions(props: Props) {
+  const classes = useStyles();
+  const { group, permissions, refreshCallback, devices } = props;
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [groupSettingsOpen, setGroupSettingsOpen] = useState(false);
+  const [shareOpen, setShareOpen] = useState(false);
+  const [usersOpen, setUsersOpen] = useState(false);
+  const [teamsOpen, setTeamsOpen] = useState(false);
+  const [removeSelfOpen, setRemoveSelfOpen] = useState(false);
+
+  const groupMenu = () => {
+    const canShare = permissions.includes(pond.Permission.PERMISSION_SHARE);
+    const canManageUsers = permissions.includes(pond.Permission.PERMISSION_USERS);
+    const canTeams = canManageUsers;
+    return (
+      <Menu
+        id="groupMenu"
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={() => setAnchorEl(null)}
+        keepMounted
+        disableAutoFocusItem>
+        {!isOffline() && canShare && (
+          <MenuItem
+            dense
+            onClick={() => {
+              setShareOpen(true);
+              setAnchorEl(null);
+            }}
+          >
+            <ListItemIcon>
+              <ShareObjectIcon className={classes.shareIcon} />
+            </ListItemIcon>
+            <ListItemText primary="Share" />
+          </MenuItem>
+        )}
+        {!isOffline() && canManageUsers && (
+          <MenuItem
+            dense
+            onClick={() => {
+              setUsersOpen(true);
+              setAnchorEl(null);
+            }}
+          >
+            <ListItemIcon>
+              <ObjectUsersIcon />
+            </ListItemIcon>
+            <ListItemText primary="Users" />
+          </MenuItem>
+        )}
+        {!isOffline() && canTeams && (
+          <MenuItem
+            dense
+            onClick={() => {
+              setTeamsOpen(true);
+              setAnchorEl(null);
+            }}
+          >
+            <ListItemIcon>
+              <ObjectTeamsIcon />
+            </ListItemIcon>
+            <ListItemText primary="Teams" />
+          </MenuItem>
+        )}
+        <MenuItem
+          dense
+          onClick={() => {
+            setRemoveSelfOpen(true);
+            setAnchorEl(null);
+          }}
+        >
+          <ListItemIcon>
+            <RemoveSelfIcon className={classes.red} />
+          </ListItemIcon>
+          <ListItemText primary="Leave" />
+        </MenuItem>
+      </Menu>
+    );
+  };
+
+  const dialogs = () => {
+    const hasWritePermission = permissions.includes(pond.Permission.PERMISSION_WRITE);
+    const key = group.id().toString();
+    const label = group.name();
+    return (
+      <>
+        <GroupSettings
+          mode="update"
+          initialGroup={group}
+          canEdit={hasWritePermission}
+          isDialogOpen={groupSettingsOpen}
+          refreshCallback={refreshCallback}
+          closeDialogCallback={() => setGroupSettingsOpen(false)}
+          groupDevices={devices}
+        />
+        <ShareObject
+          scope={groupScope(key)}
+          label={label}
+          permissions={permissions}
+          isDialogOpen={shareOpen}
+          closeDialogCallback={() => setShareOpen(false)}
+        />
+        <ObjectUsers
+          scope={groupScope(key)}
+          label={label}
+          permissions={permissions}
+          isDialogOpen={usersOpen}
+          closeDialogCallback={() => setUsersOpen(false)}
+          refreshCallback={refreshCallback}
+        />
+        {/* <ObjectTeams
+          scope={groupScope(key)}
+          label={label}
+          permissions={permissions}
+          isDialogOpen={teamsOpen}
+          closeDialogCallback={() => setTeamsOpen(false)}
+          refreshCallback={refreshCallback}
+        /> */}
+        <RemoveSelfFromObject
+          scope={groupScope(key)}
+          label={label}
+          isDialogOpen={removeSelfOpen}
+          closeDialogCallback={() => setRemoveSelfOpen(false)}
+        />
+      </>
+    );
+  };
+
+  return (
+    <>
+      <Tooltip title="Group Settings">
+        <IconButton onClick={() => setGroupSettingsOpen(true)}>
+          <GroupSettingsIcon />
+        </IconButton>
+      </Tooltip>
+      <IconButton
+        aria-owns={anchorEl ? "groupMenu" : undefined}
+        aria-haspopup="true"
+        onClick={(event: React.MouseEvent<HTMLButtonElement>) => setAnchorEl(event.currentTarget)}>
+        <MoreIcon />
+      </IconButton>
+      {groupMenu()}
+      {dialogs()}
+    </>
+  );
+}