staff avatars

epictrack-web/src/components/myWorkplans/Card/CardFooter.tsx

@@ -1,22 +1,41 @@
-import { Avatar, AvatarGroup, Button, Grid } from "@mui/material";
+import { Avatar, AvatarGroup, Box, Button, Grid } from "@mui/material";
 import { Palette } from "../../../styles/theme";
 import { ETCaption1, ETCaption2, ETParagraph } from "../../shared";
 import Icons from "../../icons";
 import { IconProps } from "../../icons/type";
 import { CardProps } from "./type";
 import { useNavigate } from "react-router-dom";
+import React from "react";
+import UserMenu from "../../shared/userMenu/UserMenu";
+import RenderSurplus from "./RenderSurplus";
 
 const EyeIcon: React.FC<IconProps> = Icons["EyeIcon"];
 
 const CardFooter = ({ workplan }: CardProps) => {
   const navigate = useNavigate();
+  const [staffHover, setStaffHover] = React.useState<any>(null);
+  const [userMenuAnchorEl, setUserMenuAnchorEl] =
+    React.useState<null | HTMLElement>(null);
   const team_lead = workplan.staff_info.find((staff: any) => {
     if (staff.role.name === "Team Lead") {
       return staff.staff.full_name;
     }
     return false;
   });
 
+  const handleCloseUserMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setUserMenuAnchorEl(null);
+    setStaffHover(null);
+  };
+
+  const handleOpenUserMenu = (
+    event: React.MouseEvent<HTMLElement>,
+    staff: any
+  ) => {
+    setStaffHover(staff);
+    setUserMenuAnchorEl(event.currentTarget);
+  };
+
   return (
     <Grid
       container
@@ -27,7 +46,7 @@ const CardFooter = ({ workplan }: CardProps) => {
         borderTop: `1px solid var(--neutral-background-dark, #DBDCDC)`,
         padding: "16px 32px",
         alignItems: "center",
-        height: "80px",
+        // height: "80px",
       }}
     >
       <Grid item>
@@ -68,7 +87,13 @@ const CardFooter = ({ workplan }: CardProps) => {
                 <ETCaption1 color={Palette.neutral.main}>STAFF</ETCaption1>
               </Grid>
               <Grid item>
-                <AvatarGroup max={4}>
+                <AvatarGroup
+                  spacing={2}
+                  max={4}
+                  renderSurplus={(surplus: number) => (
+                    <RenderSurplus renderSurplus={surplus} />
+                  )}
+                >
                   {workplan.staff_info.map((staff: any) => {
                     return (
                       <Avatar
@@ -80,10 +105,30 @@ const CardFooter = ({ workplan }: CardProps) => {
                           width: "24px",
                           height: "24px",
                         }}
+                        onMouseEnter={(event) => {
+                          event.stopPropagation();
+                          event.preventDefault();
+                          handleOpenUserMenu(event, staff.staff);
+                        }}
+                        onMouseLeave={handleCloseUserMenu}
                       >
                         <ETCaption2
                           bold
                         >{`${staff.staff.first_name[0]}${staff.staff.last_name[0]}`}</ETCaption2>
+                        <UserMenu
+                          anchorEl={userMenuAnchorEl}
+                          email={staffHover?.email || ""}
+                          phone={staffHover?.phone || ""}
+                          position={staffHover?.position?.name || ""}
+                          firstName={staffHover?.first_name || ""}
+                          lastName={staffHover?.last_name || ""}
+                          onClose={handleCloseUserMenu}
+                          origin={{ vertical: "top", horizontal: "left" }}
+                          sx={{
+                            pointerEvents: "none",
+                          }}
+                          id={staff.staff.id}
+                        />
                       </Avatar>
                     );
                   })}

epictrack-web/src/components/myWorkplans/Card/RenderSurplus.tsx

@@ -0,0 +1,11 @@
+import { Box } from "@mui/material";
+
+interface RenderSurplusProps {
+  renderSurplus: number;
+}
+
+const RenderSurplus = ({ renderSurplus }: RenderSurplusProps) => {
+  return <Box>...</Box>;
+};
+
+export default RenderSurplus;