brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pushing this stuff up so carter can take a look

Browse source
This commit is contained in:
csawatzky 2026-03-23 14:57:23 -06:00
parent 7e79d0859b
commit a2bc841510
13 changed files with 660 additions and 184 deletions
Download patch file Download diff file Expand all files Collapse all files

140
src/tasks/TaskCard.tsx
View file

@ -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>
);
}