pushing this stuff up so carter can take a look

src/tasks/TaskCard.tsx

@@ -3,25 +3,17 @@ import {
   Card,
   CardActionArea,
   Grid2 as Grid,
-  IconButton,
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
   Typography
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { useCallback, useEffect, useState } from "react";
 import { Task } from "models";
 import { useGlobalState } from "providers";
-import { useUserAPI } from "hooks";
-import { Done, MoreVert } from "@mui/icons-material";
-import Edit from "@mui/icons-material/Edit";
-import DeleteIcon from "@mui/icons-material/Delete";
+import { usePermissionAPI } from "hooks";
 import { red } from "@mui/material/colors";
 import { pond } from "protobuf-ts/pond";
-import { taskScope, teamScope } from "models/Scope";
 import EventBlocker from "common/EventBlocker";
+import TaskActions from "./taskActions";
 
 interface Props {
   task: Task;
@@ -30,6 +22,8 @@ interface Props {
   markComplete: (task: Task) => void;
   deleteTask: (task: Task) => void;
   openTaskPage: (taskId: string) => void;
+  keys: string[]
+  types: string[]
 }
 
 const useStyles = makeStyles(() => ({
@@ -59,21 +53,14 @@ export default function TaskCard(props: Props) {
   const classes = useStyles();
   const [permissions, setPermissions] = useState<pond.Permission[]>([]);
   const [{ user, as }] = useGlobalState();
-  const userAPI = useUserAPI();
-  const [menuAnchorEl, setMenuAnchorEl] = useState<Element | null>(null);
+  const permissionAPI = usePermissionAPI();
 
   const loadPermissions = useCallback(() => {
-    let scope = taskScope(props.task.key);
-    if(as){//if viewing as a team use the permissions to the team, and not the task itself
-      scope = teamScope(as)
-    }
-    userAPI
-      .getUser(user.id(), scope)
-      .then(resp => {
-        setPermissions(resp.permissions);
-      })
-      .catch(err => {});
-  }, [props.task, userAPI, user, as]);
+    permissionAPI.getPermissions(user.id(), props.keys, props.types).then(resp => {
+      setPermissions(pond.EvaluatePermissionsResponse.fromObject(resp.data).permissions)
+    })
+
+  }, [props.task, permissionAPI, user, as]);
 
   useEffect(() => {
     loadPermissions();
@@ -89,51 +76,51 @@ export default function TaskCard(props: Props) {
     setDay(date.getUTCDate());
   }, [props.task]);
 
-  const taskActions = () => {
-    return (
-      <Menu
-        id="viewMenu"
-        anchorEl={menuAnchorEl ? menuAnchorEl : null}
-        open={menuAnchorEl !== null}
-        onClose={() => setMenuAnchorEl(null)}
-        disableAutoFocusItem>
-        <MenuItem
-          onClick={() => {
-            props.markComplete(props.task);
-            setMenuAnchorEl(null);
-          }}>
-          <ListItemIcon>
-            <Done style={{ color: "green" }} />
-          </ListItemIcon>
-          <ListItemText primary="Mark Complete" />
-        </MenuItem>
-        {permissions.includes(pond.Permission.PERMISSION_WRITE) && (
-          <MenuItem
-            onClick={() => {
-              props.editTaskMethod(props.task);
-              setMenuAnchorEl(null);
-            }}>
-            <ListItemIcon>
-              <Edit />
-            </ListItemIcon>
-            <ListItemText primary="Edit" />
-          </MenuItem>
-        )}
-        {permissions.includes(pond.Permission.PERMISSION_WRITE) && (
-          <MenuItem
-            onClick={() => {
-              props.deleteTask(props.task);
-              setMenuAnchorEl(null);
-            }}>
-            <ListItemIcon>
-              <DeleteIcon className={classes.red} />
-            </ListItemIcon>
-            <ListItemText primary="Delete" />
-          </MenuItem>
-        )}
-      </Menu>
-    );
-  };
+  // const taskActions = () => {
+  //   return (
+  //     <Menu
+  //       id="viewMenu"
+  //       anchorEl={menuAnchorEl ? menuAnchorEl : null}
+  //       open={menuAnchorEl !== null}
+  //       onClose={() => setMenuAnchorEl(null)}
+  //       disableAutoFocusItem>
+  //       <MenuItem
+  //         onClick={() => {
+  //           props.markComplete(props.task);
+  //           setMenuAnchorEl(null);
+  //         }}>
+  //         <ListItemIcon>
+  //           <Done style={{ color: "green" }} />
+  //         </ListItemIcon>
+  //         <ListItemText primary="Mark Complete" />
+  //       </MenuItem>
+  //       {permissions.includes(pond.Permission.PERMISSION_WRITE) && (
+  //         <MenuItem
+  //           onClick={() => {
+  //             props.editTaskMethod(props.task);
+  //             setMenuAnchorEl(null);
+  //           }}>
+  //           <ListItemIcon>
+  //             <Edit />
+  //           </ListItemIcon>
+  //           <ListItemText primary="Edit" />
+  //         </MenuItem>
+  //       )}
+  //       {permissions.includes(pond.Permission.PERMISSION_WRITE) && (
+  //         <MenuItem
+  //           onClick={() => {
+  //             props.deleteTask(props.task);
+  //             setMenuAnchorEl(null);
+  //           }}>
+  //           <ListItemIcon>
+  //             <DeleteIcon className={classes.red} />
+  //           </ListItemIcon>
+  //           <ListItemText primary="Delete" />
+  //         </MenuItem>
+  //       )}
+  //     </Menu>
+  //   );
+  // };
 
   return (
     <Card style={{ width: "100%", paddingLeft: 5 }}>
@@ -164,18 +151,31 @@ export default function TaskCard(props: Props) {
             </Box>
           </Grid>
           <Grid size={1}>
-            <EventBlocker style={{ margin: "auto" }}>
+            {/* <EventBlocker style={{ margin: "auto" }}>
               <IconButton
                 aria-owns={"taskOptions"}
                 aria-haspopup="true"
                 onClick={event => setMenuAnchorEl(event.currentTarget)}>
                 <MoreVert />
               </IconButton>
+            </EventBlocker> */}
+            <EventBlocker style={{ margin: "auto" }}>
+              <TaskActions 
+                markComplete={props.markComplete}
+                removeTask={props.deleteTask}
+                task={props.task}
+                permissions={permissions}
+                refreshCallback={() => {
+                  props.reLoad()
+                }}
+                keys={props.keys}
+                types={props.types}
+                />
             </EventBlocker>
           </Grid>
         </Grid>
       </CardActionArea>
-      {taskActions()}
+      {/* {taskActions()} */}
     </Card>
   );
 }

src/tasks/TaskDrawer.tsx

@@ -22,17 +22,21 @@ import NotesIcon from "@mui/icons-material/Notes";
 import DeleteIcon from "@mui/icons-material/Delete";
 import Chat from "chat/Chat";
 import { pond } from "protobuf-ts/pond";
-import { useMobile, useUserAPI } from "hooks";
+import { useMobile, usePermissionAPI, useUserAPI } from "hooks";
 import { getThemeType } from "theme";
 import { makeStyles } from "@mui/styles";
+import ObjectTeamsIcon from "@mui/icons-material/SupervisedUserCircle";
+import TaskActions from "./taskActions";
+import { useGlobalState } from "providers";
 
 interface Props {
   task: Task;
   open: boolean;
   closeCallback: () => void;
-  editTask: (task: Task) => void;
   deleteTask: (task: Task) => void;
   completeTask: (task: Task) => void;
+  keys: string[]
+  types: string[]
 }
 
 // interface TabPanelProps {
@@ -103,17 +107,23 @@ export default function TaskDrawer(props: Props) {
     "Nov",
     "Dec"
   ];
-  const { task, open, closeCallback, completeTask, deleteTask, editTask } = props;
+  const { task, open, closeCallback, completeTask, deleteTask } = props;
   const [month, setMonth] = useState(0);
   const [day, setDay] = useState(0);
-  const [menuAnchorEl, setMenuAnchorEl] = useState<Element | null>(null);
+  const [permissions, setPermissions] = useState<pond.Permission[]>([])
+  const [{user}] = useGlobalState();
+  // const [menuAnchorEl, setMenuAnchorEl] = useState<Element | null>(null);
   const [openNote, setOpenNote] = useState(false);
   const isMobile = useMobile();
   const classes = useStyles();
   const userAPI = useUserAPI();
+  const permissionAPI = usePermissionAPI();
   const [worker, setWorker] = useState<pond.UserProfile>();
 
   useEffect(() => {
+    permissionAPI.getPermissions(user.id(), [task.key], ["task"]).then(resp => {
+      setPermissions(pond.EvaluatePermissionsResponse.fromObject(resp.data).permissions)
+    })
     if (task.start()) {
       let date = new Date(task.start());
       setMonth(date.getUTCMonth());
@@ -122,40 +132,40 @@ export default function TaskDrawer(props: Props) {
     userAPI.getProfile(task.worker()).then(resp => {
       setWorker(resp);
     });
-  }, [task, userAPI]);
+  }, [user, task, userAPI, permissionAPI]);
 
-  const taskActions = () => {
-    return (
-      <Menu
-        id="viewMenu"
-        anchorEl={menuAnchorEl ? menuAnchorEl : null}
-        open={menuAnchorEl !== null}
-        onClose={() => setMenuAnchorEl(null)}
-        disableAutoFocusItem>
-        <MenuItem
-          onClick={() => {
-            editTask(props.task);
-            setMenuAnchorEl(null);
-          }}>
-          <ListItemIcon>
-            <Edit />
-          </ListItemIcon>
-          <ListItemText primary="Edit" />
-        </MenuItem>
-        <MenuItem
-          onClick={() => {
-            deleteTask(props.task);
-            setMenuAnchorEl(null);
-            closeCallback();
-          }}>
-          <ListItemIcon>
-            <DeleteIcon style={{ color: "red" }} />
-          </ListItemIcon>
-          <ListItemText primary="Delete" />
-        </MenuItem>
-      </Menu>
-    );
-  };
+  // const taskActions = () => {
+  //   return (
+  //     <Menu
+  //       id="viewMenu"
+  //       anchorEl={menuAnchorEl ? menuAnchorEl : null}
+  //       open={menuAnchorEl !== null}
+  //       onClose={() => setMenuAnchorEl(null)}
+  //       disableAutoFocusItem>
+  //       <MenuItem
+  //         onClick={() => {
+  //           editTask(props.task);
+  //           setMenuAnchorEl(null);
+  //         }}>
+  //         <ListItemIcon>
+  //           <Edit />
+  //         </ListItemIcon>
+  //         <ListItemText primary="Edit" />
+  //       </MenuItem>
+  //       <MenuItem
+  //         onClick={() => {
+  //           deleteTask(props.task);
+  //           setMenuAnchorEl(null);
+  //           closeCallback();
+  //         }}>
+  //         <ListItemIcon>
+  //           <DeleteIcon style={{ color: "red" }} />
+  //         </ListItemIcon>
+  //         <ListItemText primary="Delete" />
+  //       </MenuItem>
+  //     </Menu>
+  //   );
+  // };
 
   const bodyButtons = () => {
     return (
@@ -175,11 +185,20 @@ export default function TaskDrawer(props: Props) {
             </IconButton>
           </Tooltip>
           <Tooltip title="More">
-            <IconButton
+            {/* <IconButton
               className={classes.avatar}
               onClick={event => setMenuAnchorEl(event.currentTarget)}>
               <MoreVert />
-            </IconButton>
+            </IconButton> */}
+        <TaskActions 
+          markComplete={(t) => completeTask(t)}
+          permissions={permissions}
+          task={task}
+          removeTask={deleteTask}
+          refreshCallback={closeCallback}
+          keys={props.keys}
+          types={props.types}
+        />
           </Tooltip>
         </Grid>
       </Grid>
@@ -303,7 +322,7 @@ export default function TaskDrawer(props: Props) {
           {taskTime()}
           {assignees()}
         </Box>
-        {taskActions()}
+        {/* {taskActions()} */}
         {noteDrawer()}
       </Box>
     );

src/tasks/TaskList.tsx

@@ -20,6 +20,8 @@ interface Props {
   listHeight?: string | number;
   label?: string;
   dateToView?: Date;
+  keys: string[]
+  types: string[]
 }
 
 export default function TaskList(props: Props) {
@@ -31,7 +33,9 @@ export default function TaskList(props: Props) {
     reLoad,
     listHeight,
     label,
-    dateToView
+    dateToView,
+    keys,
+    types
   } = props;
   const [tasks, setTasks] = useState(props.tasks);
   const [incomplete, setIncomplete] = useState<Task[]>([]);
@@ -128,6 +132,8 @@ export default function TaskList(props: Props) {
         deleteTask={(task: Task) => deleteTask(task)}
         reLoad={reLoad}
         openTaskPage={(taskId: string) => openTask(taskId)}
+        keys={keys}
+        types={types}
       />
     </ListItem>
   ));
@@ -141,6 +147,8 @@ export default function TaskList(props: Props) {
         deleteTask={(task: Task) => deleteTask(task)}
         reLoad={reLoad}
         openTaskPage={(taskId: string) => openTask(taskId)}
+        keys={keys}
+        types={types}
       />
     </ListItem>
   ));

src/tasks/TaskSettings.tsx

@@ -24,14 +24,15 @@ import ResponsiveDialog from "common/ResponsiveDialog";
 interface Props {
   open: boolean;
   onClose: (reLoad?: boolean) => void;
-  markComplete?: boolean;
   startDate?: any;
   task?: Task;
-  objectKey?: string;
+  objectKey?: string; //deprecated, with the new permission structure keys and types will be what determine what a task is connected to
   type?: string;
   hasCost?: boolean;
   costTitle?: string;
   secondaryCostTitle?: string;
+  keys?: string[]
+  types?: string[]
 }
 
 export default function TaskSettings(props: Props) {
@@ -104,7 +105,7 @@ export default function TaskSettings(props: Props) {
       startTime: startTime,
       end: endDate,
       endTime: endTime,
-      objectKey: props.objectKey ? props.objectKey : user.id(),
+      objectKey: props.objectKey ? props.objectKey : user.id(), //deprecated
       description: taskDescription,
       worker: worker,
       complete: false,
@@ -120,7 +121,7 @@ export default function TaskSettings(props: Props) {
     returnTask.settings = taskSettings;
 
     taskAPI
-      .addTask(taskSettings, as)
+      .addTask(taskSettings, as, props.keys, props.types)
       .then(resp => {
         props.onClose(true);
       })

src/tasks/TaskViewer.tsx

@@ -26,10 +26,12 @@ import moment from "moment";
 import { makeStyles } from "@mui/styles";
 
 interface ViewProps {
-  objectKey?: string; //only used to save it for the object
+  // objectKey?: string; //only used to save it for the object --Deprecated with new permission structure--
+  keys?: string[]//the keys and types are used to give th object permissions to the task, that is how they will be linked now
+  types?: string[]
   label?: string;
   drawerView?: boolean;
-  loadKeys?: string[]; //if you want to load tasks for a specific object(s)
+  // loadKeys?: string[]; //if you want to load tasks for a specific object(s) --Deprecated with new permission structure-- it should use the keys and types now
   overlayButton?: boolean;
 }
 
@@ -87,7 +89,15 @@ const useStyles = makeStyles((theme: Theme) => {
 });
 
 export default function TaskViewer(props: ViewProps) {
-  const { objectKey, label, drawerView, loadKeys, overlayButton } = props;
+  const { 
+    //objectKey, 
+    label, 
+    drawerView, 
+    //loadKeys,
+    keys,
+    types, 
+    overlayButton 
+  } = props;
   const [{ user, as }] = useGlobalState();
   //const [{ as }] = useGlobalState();
   const taskAPI = useTaskAPI();
@@ -143,36 +153,36 @@ export default function TaskViewer(props: ViewProps) {
   };
 
 
-  const loadMultitask = useCallback(() => {
-    if (!loadKeys) return;
-    if (loadKeys.length > 0) {
-      let temp = new Map<string, Task>();
-      setLoaded(false);
-      taskAPI
-        .getMultiTasks(loadKeys, as)
-        .then(resp => {
-          if(resp.data.tasks){
-            resp.data.tasks.forEach(task => {
-              if (task.settings) {
-                temp.set(task.key, Task.any(task));
-              }
-            });
-          }
-          setTasks(temp);
-          setLoaded(true);
-        })
-        .catch(err => {
-          openSnack("Failed to load");
-        });
-    }
-  }, [loadKeys, openSnack, taskAPI, as]);
+  // const loadMultitask = useCallback(() => {
+  //   if (!loadKeys) return;
+  //   if (loadKeys.length > 0) {
+  //     let temp = new Map<string, Task>();
+  //     setLoaded(false);
+  //     taskAPI
+  //       .getMultiTasks(loadKeys, as)
+  //       .then(resp => {
+  //         if(resp.data.tasks){
+  //           resp.data.tasks.forEach(task => {
+  //             if (task.settings) {
+  //               temp.set(task.key, Task.any(task));
+  //             }
+  //           });
+  //         }
+  //         setTasks(temp);
+  //         setLoaded(true);
+  //       })
+  //       .catch(err => {
+  //         openSnack("Failed to load");
+  //       });
+  //   }
+  // }, [loadKeys, openSnack, taskAPI, as]);
 
   //loads tasks from the backend database
   const loadTasks = useCallback(() => {
     if (!user.id()) return;
     let temp = new Map<string, Task>();
     taskAPI
-      .listTasks(50, 0, "asc", "start", undefined, undefined, as, prevMonth, nextMonth)
+      .listTasks(50, 0, "asc", "start", undefined, undefined, as, prevMonth, nextMonth, keys, types)
       .then(resp => {
         if(resp.data.tasks){
           resp.data.tasks.forEach(task => {
@@ -185,20 +195,20 @@ export default function TaskViewer(props: ViewProps) {
         setLoaded(true);
       })
       .catch(err => {
-        console.log(err)
         openSnack("Failed to load tasks");
       });
-  }, [taskAPI, as, user, openSnack, nextMonth, prevMonth]);
+  }, [taskAPI, as, user, openSnack, nextMonth, prevMonth, keys, types]);
 
   useEffect(() => {
-    if (drawerView) {
-      setTasks(new Map<string, Task>());
-      setValue(1);
-      loadMultitask();
-    } else {
-      loadTasks();
-    }
-  }, [loadTasks, loadMultitask, as, drawerView]);
+    // if (drawerView) {
+    //   setTasks(new Map<string, Task>());
+    //   setValue(1);
+    //   loadMultitask();
+    // } else {
+    //   loadTasks();
+    // }
+    loadTasks()
+  }, [loadTasks, as, drawerView]);
 
   const markComplete = (task: Task) => {
     task.settings.complete = !task.settings.complete;
@@ -320,6 +330,8 @@ export default function TaskViewer(props: ViewProps) {
                 reLoad={() => loadTasks()}
                 dateToView={drawerView ? undefined : currentDate}
                 openTask={(taskId: string) => openSelectedTask(taskId)}
+                keys={[]}
+                types={[]}
               />
             </TabPanelMine>
             <Fab
@@ -380,6 +392,8 @@ export default function TaskViewer(props: ViewProps) {
                   listHeight={"40vh"}
                   dateToView={currentDate}
                   openTask={(taskId: string) => openSelectedTask(taskId)}
+                  keys={[]}
+                  types={[]}
                   />
               </Box>
             </Grid>
@@ -423,16 +437,19 @@ export default function TaskViewer(props: ViewProps) {
       <TaskSettings
         open={newTaskDialog}
         task={editTask}
-        objectKey={objectKey}
+        //objectKey={objectKey}
+        keys={keys}
+        types={types}
         startDate={startDate}
         onClose={r => {
-          if (r) {
-            if (drawerView) {
-              loadMultitask();
-            } else {
-              loadTasks();
-            }
-          }
+          // if (r) {
+          //   if (drawerView) {
+          //     loadMultitask();
+          //   } else {
+          //     loadTasks();
+          //   }
+          // }
+          loadTasks();
           setEditTask(undefined);
           setNewTaskDialog(false);
         }}
@@ -441,10 +458,14 @@ export default function TaskViewer(props: ViewProps) {
       <TaskDrawer
         task={viewTask}
         open={openDrawer}
-        closeCallback={() => setOpenDrawer(false)}
+        closeCallback={() => {
+          setOpenDrawer(false)
+          loadTasks()
+        }}
         completeTask={markComplete}
         deleteTask={deleteTask}
-        editTask={setTaskToEdit}
+        keys={[]}
+        types={[]}
       />
       }
     </Box>

src/tasks/taskActions.tsx

@@ -0,0 +1,236 @@
+import {
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Theme
+} from "@mui/material";
+import { blue } from "@mui/material/colors";
+import MoreIcon from "@mui/icons-material/MoreVert";
+import ObjectTeamsIcon from "@mui/icons-material/SupervisedUserCircle";
+import { pond } from "protobuf-ts/pond";
+import React, { useState } from "react";
+import { isOffline } from "utils/environment";
+import ObjectTeams from "teams/ObjectTeams";
+import { Task, taskScope } from "models";
+import { makeStyles } from "@mui/styles";
+import { Done, Edit } from "@mui/icons-material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import TaskSettings from "./TaskSettings";
+
+const useStyles = makeStyles((theme: Theme) => ({
+    shareIcon: {
+      color: blue["500"],
+      "&:hover": {
+        color: blue["600"]
+      }
+    },
+    removeIcon: {
+      color: "var(--status-alert)"
+    },
+    red: {
+      color: "var(--status-alert)"
+    }
+}));
+
+interface Props {
+  task: Task;
+  permissions: pond.Permission[];
+  keys: string[]
+  types: string[]
+  refreshCallback: () => void;
+  markComplete: (task: Task) => void;
+  removeTask: (task: Task) => void;
+}
+
+interface OpenState {
+  // share: boolean;
+  // users: boolean;
+  teams: boolean;
+  settings: boolean;
+  // removeSelf: boolean;
+  delete: boolean
+}
+
+export default function TaskActions(props: Props) {
+  const classes = useStyles();
+  const { task, permissions, refreshCallback, keys, types } = props;
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [openState, setOpenState] = useState<OpenState>({
+    // share: false,
+    // users: false,
+    teams: false,
+    settings: false,
+    // removeSelf: false
+    delete: false
+  });
+
+  const groupMenu = () => {
+    // const canShare = permissions.includes(pond.Permission.PERMISSION_SHARE);
+    const canEdit = permissions.includes(pond.Permission.PERMISSION_WRITE);
+    const canManageUsers = permissions.includes(pond.Permission.PERMISSION_USERS);
+    return (
+      <Menu
+        id="groupMenu"
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={() => setAnchorEl(null)}
+        keepMounted
+        disableAutoFocusItem>
+        {/* {!isOffline() && canShare && (
+          <MenuItem
+            dense
+            onClick={() => {
+              setOpenState({ ...openState, share: true });
+              setAnchorEl(null);
+            }}>
+            <ListItemIcon>
+              <ShareObjectIcon className={classes.shareIcon} />
+            </ListItemIcon>
+            <ListItemText primary="Share" />
+          </MenuItem>
+        )} */}
+        {/* {!isOffline() && canManageUsers && (
+          <MenuItem
+            dense
+            onClick={() => {
+              setOpenState({ ...openState, users: true });
+              setAnchorEl(null);
+            }}>
+            <ListItemIcon>
+              <ObjectUsersIcon />
+            </ListItemIcon>
+            <ListItemText primary="Users" />
+          </MenuItem>
+        )} */}
+        {!isOffline() && canEdit && (
+        <MenuItem
+          onClick={() => {
+            props.markComplete(props.task);
+            setAnchorEl(null);
+          }}>
+          <ListItemIcon>
+            <Done style={{ color: "green" }} />
+          </ListItemIcon>
+          <ListItemText primary="Mark Complete" />
+        </MenuItem>
+        )}
+        {!isOffline() && canEdit && (
+          <MenuItem
+            dense
+            onClick={() => {
+              setOpenState({ ...openState, settings: true });
+              setAnchorEl(null);
+            }}>
+            <ListItemIcon>
+              <Edit />
+            </ListItemIcon>
+            <ListItemText primary="Edit" />
+          </MenuItem>
+        )}
+        {!isOffline() && canManageUsers && (
+          <MenuItem
+            dense
+            onClick={() => {
+              setOpenState({ ...openState, teams: true });
+              setAnchorEl(null);
+            }}>
+            <ListItemIcon>
+              <ObjectTeamsIcon />
+            </ListItemIcon>
+            <ListItemText primary="Teams" />
+          </MenuItem>
+        )}
+        {permissions.includes(pond.Permission.PERMISSION_WRITE) && (
+          <MenuItem
+            onClick={() => {
+              props.removeTask(props.task);
+              setAnchorEl(null);
+            }}>
+            <ListItemIcon>
+              <DeleteIcon className={classes.red} />
+            </ListItemIcon>
+            <ListItemText primary="Delete" />
+          </MenuItem>
+        )}
+        {/* <MenuItem
+          dense
+          onClick={() => {
+            setOpenState({ ...openState, removeSelf: true });
+            setAnchorEl(null);
+          }}>
+          <ListItemIcon>
+            <RemoveSelfIcon className={classes.red} />
+          </ListItemIcon>
+          <ListItemText primary="Leave" />
+        </MenuItem> */}
+      </Menu>
+    );
+  };
+
+  const dialogs = () => {
+    const key = task.key;
+    // const label = task.title();
+    return (
+      <React.Fragment>
+        {/* <ShareObject
+          scope={fieldScope(key)}
+          label={label}
+          permissions={permissions}
+          isDialogOpen={openState.share}
+          closeDialogCallback={() => setOpenState({ ...openState, share: false })}
+        /> */}
+        {/* <ObjectUsers
+          scope={fieldScope(key)}
+          label={label}
+          permissions={permissions}
+          isDialogOpen={openState.users}
+          closeDialogCallback={() => setOpenState({ ...openState, users: false })}
+          refreshCallback={refreshCallback}
+        /> */}
+        {/* <RemoveSelfFromObject
+          scope={fieldScope(key)}
+          label={label}
+          isDialogOpen={openState.removeSelf}
+          closeDialogCallback={() => setOpenState({ ...openState, removeSelf: false })}
+        /> */}
+        <ObjectTeams
+          scope={taskScope(key)}
+          label="Teams"
+          permissions={permissions}
+          isDialogOpen={openState.teams}
+          refreshCallback={refreshCallback}
+          closeDialogCallback={() => setOpenState({ ...openState, teams: false })}
+          keys={keys}
+          types={types}
+        />
+        <TaskSettings
+          open={openState.settings}
+          task={task}
+          //objectKey={objectKey}
+          //startDate={startDate}
+          onClose={r => {
+            setOpenState({ ...openState, settings: false})
+            if(r){
+              refreshCallback()
+            }
+          }}
+        />
+      </React.Fragment>
+    );
+  };
+
+  return (
+    <React.Fragment>
+      <IconButton
+        aria-owns={anchorEl ? "groupMenu" : undefined}
+        aria-haspopup="true"
+        onClick={(event: React.MouseEvent<HTMLButtonElement>) => setAnchorEl(event.currentTarget)}>
+        <MoreIcon />
+      </IconButton>
+      {groupMenu()}
+      {dialogs()}
+    </React.Fragment>
+  );
+}