Staff Avatar Hover Cards

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

@@ -1,22 +1,50 @@
-import { Avatar, AvatarGroup, Button, Grid } from "@mui/material";
+import {
+  Avatar,
+  AvatarGroup,
+  Box,
+  Button,
+  Grid,
+  ListItem,
+  avatarGroupClasses,
+} 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";
+import { Staff } from "../../../models/staff";
 
 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 +55,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,23 +96,61 @@ const CardFooter = ({ workplan }: CardProps) => {
                 <ETCaption1 color={Palette.neutral.main}>STAFF</ETCaption1>
               </Grid>
               <Grid item>
-                <AvatarGroup max={4}>
+                <AvatarGroup
+                  spacing={1}
+                  max={4}
+                  renderSurplus={(surplus: number) => (
+                    <RenderSurplus
+                      renderSurplus={surplus}
+                      staff={workplan.staff_info as unknown as Staff[]}
+                    />
+                  )}
+                  sx={{
+                    [`& .${avatarGroupClasses.avatar}`]: {
+                      width: "24px",
+                      height: "24px",
+                    },
+                  }}
+                >
                   {workplan.staff_info.map((staff: any) => {
                     return (
-                      <Avatar
-                        key={staff.staff.id}
-                        sx={{
-                          bgcolor: Palette.neutral.bg.main,
-                          color: Palette.neutral.dark,
-                          lineHeight: "12px",
-                          width: "24px",
-                          height: "24px",
-                        }}
-                      >
-                        <ETCaption2
-                          bold
-                        >{`${staff.staff.first_name[0]}${staff.staff.last_name[0]}`}</ETCaption2>
-                      </Avatar>
+                      <>
+                        <Avatar
+                          key={staff.staff.id}
+                          sx={{
+                            bgcolor: Palette.neutral.bg.main,
+                            color: Palette.neutral.dark,
+                            lineHeight: "12px",
+                            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>
+                        </Avatar>
+                        <UserMenu
+                          onMouseLeave={handleCloseUserMenu}
+                          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}
+                        />
+                      </>
                     );
                   })}
                 </AvatarGroup>

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

@@ -0,0 +1,99 @@
+import {
+  Avatar,
+  Grid,
+  Menu,
+  MenuItem,
+  PopoverOrigin,
+  Typography,
+} from "@mui/material";
+import { Staff } from "../../../models/staff";
+import React from "react";
+import { ETCaption2 } from "../../shared";
+import { Palette } from "../../../styles/theme";
+
+interface RenderSurplusProps {
+  renderSurplus: number;
+  staff: any[];
+}
+
+const RenderSurplus = ({ renderSurplus, staff }: RenderSurplusProps) => {
+  const [userListAnchor, setUserListAnchor] =
+    React.useState<null | HTMLElement>(null);
+
+  const remainingStaff = staff.slice(renderSurplus - 1);
+
+  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setUserListAnchor(event.currentTarget);
+  };
+
+  const handleCloseUserMenu = () => {
+    setUserListAnchor(null);
+  };
+
+  return (
+    <>
+      <Avatar
+        onMouseEnter={(event) => {
+          event.stopPropagation();
+          event.preventDefault();
+          handleOpenUserMenu(event);
+        }}
+      >
+        <Typography sx={{ textAlign: "center" }}>...</Typography>
+      </Avatar>
+      <Menu
+        open={Boolean(userListAnchor)}
+        onMouseLeave={handleCloseUserMenu}
+        anchorEl={userListAnchor}
+        anchorOrigin={{ vertical: "top", horizontal: "left" }}
+        onClose={handleCloseUserMenu}
+        sx={{
+          mt: "2.5rem",
+        }}
+        PaperProps={{
+          style: {
+            pointerEvents: "none",
+            width: 320,
+            boxShadow: "0px 12px 24px 0px rgba(0, 0, 0, 0.10)",
+          },
+        }}
+        MenuListProps={{
+          style: {
+            paddingTop: 0,
+            paddingBottom: 0,
+            pointerEvents: "auto",
+          },
+        }}
+      >
+        {remainingStaff.map((staffObject: any) => {
+          return (
+            <MenuItem>
+              <Avatar
+                sx={{
+                  bgcolor: Palette.neutral.bg.main,
+                  color: Palette.neutral.dark,
+                  width: "32px",
+                  height: "32px",
+                  padding: "4px 8px",
+                  marginRight: "8px",
+                }}
+              >
+                <ETCaption2>{`${staffObject?.staff?.first_name[0]}${staffObject?.staff?.last_name[0]}`}</ETCaption2>
+              </Avatar>
+              <Grid container direction={"column"}>
+                <Grid item>
+                  <ETCaption2 bold>{staffObject?.staff?.full_name}</ETCaption2>
+                </Grid>
+                <Grid item>
+                  <ETCaption2>{staffObject?.staff?.position?.name}</ETCaption2>
+                </Grid>
+              </Grid>
+            </MenuItem>
+          );
+        })}
+      </Menu>
+    </>
+  );
+};
+
+export default RenderSurplus;

epictrack-web/src/components/shared/userMenu/UserMenu.tsx

@@ -38,6 +38,7 @@ const UserMenu = (props: UserMenuProps) => {
     phone,
     origin,
     id,
+    onMouseLeave,
   } = props;
   const menuOrigin = React.useMemo(() => {
     if (origin === undefined)
@@ -60,6 +61,7 @@ const UserMenu = (props: UserMenuProps) => {
       transformOrigin={menuOrigin}
       open={Boolean(anchorEl)}
       onClose={onClose}
+      onMouseLeave={onMouseLeave}
       PaperProps={{
         style: {
           pointerEvents: "none",

epictrack-web/src/components/shared/userMenu/type.ts

@@ -12,4 +12,5 @@ export interface UserMenuProps {
   origin?: PopoverOrigin;
   sx?: SxProps;
   id?: string;
+  onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => any;
 }