Skip to content

Commit

Permalink
feat: restyle the list header and add infos contents
Browse files Browse the repository at this point in the history
  • Loading branch information
@NyAndoMayah
NyAndoMayah committed Jun 21, 2024
1 parent 893ccf8 commit 7c31328
Show file tree
Hide file tree
Showing 4 changed files with 218 additions and 172 deletions.
160 changes: 109 additions & 51 deletions src/operations/common/components/ListHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,31 @@
import {FC, ReactNode} from "react";
import {Box, Typography, Avatar, useMediaQuery} from "@mui/material";
import {FC, ReactElement, ReactNode, useState} from "react";
import {
Box,
Typography,
Avatar,
useMediaQuery,
Tooltip,
IconButton,
Popover,
List,
ListItem,
ListItemText,
ListItemIcon,
} from "@mui/material";
import {Info as InfoIcon} from "@mui/icons-material";
import {PALETTE_COLORS} from "@/haTheme";

export interface StatDetail {
icon: ReactElement;
total: number;
title: string;
}

export interface CardContent {
title: string;
total: number;
icon: string;
statDetails: Array<{
icon: string;
total: number;
}>;
icon: ReactElement;
statDetails?: Array<StatDetail>;
}

interface ListHeaderProps {
Expand All @@ -18,6 +34,73 @@ interface ListHeaderProps {
cardContents: Array<CardContent>;
}

interface CardInfosProps {
cardDetails: StatDetail[];
}

const CardInfos: FC<CardInfosProps> = ({cardDetails = []}) => {
const [anchorEl, setAnchorEl] = useState(null);

const handleClick = (event: any) => {
setAnchorEl(event.currentTarget);
};

const handleClose = () => {
setAnchorEl(null);
};

const open = Boolean(anchorEl);
const id = open ? "simple-popover" : undefined;

return (
<div>
<Tooltip title="Infos">
<Avatar
sx={{
height: "30px",
width: "30px",
bgcolor: "#263B63",
borderRadius: "7px",
}}
variant="square"
>
<IconButton aria-describedby={id} onClick={handleClick}>
<InfoIcon
width="5px"
height="5px"
sx={{color: PALETTE_COLORS.yellow}}
/>
</IconButton>
</Avatar>
</Tooltip>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
>
<List dense>
{cardDetails.map(({icon, total, title}) => (
<ListItem>
<ListItemIcon sx={{minWidth: "30px"}}>{icon}</ListItemIcon>
<ListItemText
primary={
<Typography fontSize="0.75rem" fontWeight="bold">
{title} : {total}
</Typography>
}
/>
</ListItem>
))}
</List>
</Popover>
</div>
);
};
export const ListHeader: FC<ListHeaderProps> = ({
title,
action,
Expand Down Expand Up @@ -61,71 +144,46 @@ export const ListHeader: FC<ListHeaderProps> = ({
<Box
key={card.title}
sx={{
backgroundColor: PALETTE_COLORS.white,
color: PALETTE_COLORS.primary,
maxWidth: "210px",
backgroundColor: PALETTE_COLORS.primary,
color: PALETTE_COLORS.white,
maxWidth: "200px",
height: "150px",
m: "-80px 5px 5px 5px",
borderRadius: "10px",
display: "flex",
flexDirection: "column",
justifyContent: "space-evenly",
padding: "10px",
border: "3px solid",
borderColor: PALETTE_COLORS.primary,
}}
>
<Box
display="flex"
alignItems="center"
justifyContent="space-around"
gap={2}
paddingTop={2}
px={3}
justifyContent="space-between"
>
<Typography variant="h6" fontWeight="bolder">
{card.title ?? ""}
</Typography>
<Avatar
sx={{
height: "40px",
width: "40px",
color: PALETTE_COLORS,
color: PALETTE_COLORS.yellow,
bgcolor: "#263B63",
borderRadius: "7px",
}}
variant="square"
>
{card.icon}
</Avatar>
<Box
display="flex"
flexDirection="column"
alignItems="flex-start"
>
<Typography sx={{fontSize: "1.3rem"}}>{card.title}</Typography>
<Typography sx={{fontSize: "1rem"}}>{card.total}</Typography>
</Box>
</Box>
<Box
display="flex"
justifyContent="space-evenly"
alignItems="center"
textAlign="center"
>
{/* <Box>
<CheckCircle color="success" />
<Typography>{card.total}</Typography>
</Box>
<Box>
<PersonRemove color="warning" />
<Typography>{card.total}</Typography>
<Box display="flex" flexDirection="column" px={3}>
<Typography variant="h4" fontWeight="bolder">
{card.total}
</Typography>
<Box display="flex" justifyContent="space-between">
<Typography variant="h6">Au total</Typography>
{card.statDetails && (
<CardInfos cardDetails={card?.statDetails!} />
)}
</Box>
<Box>
<PersonOff color="error" />
<Typography>{card.total}</Typography>
</Box> */}
{card?.statDetails?.map(({icon, total}) => (
<Box>
{icon}
<Typography>{total}</Typography>
</Box>
))}
</Box>
</Box>
))}
Expand Down
84 changes: 84 additions & 0 deletions src/operations/common/utils/commonListHeaderContent.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import {
Group as GroupIcon,
Diversity2 as StudentIcon,
Female as FemaleIcon,
Male as MaleIcon,
School as SchoolIcon,
UploadFile as UploadFileIcon,
Work as WorkIcon,
CheckCircle as EnabledIcon,
PersonOff as DisabledIcon,
PersonRemove as SuspendedIcon,
} from "@mui/icons-material";

export const getCommonListHeaderContent = (stats) => {
const totalStudents = stats.men.total + stats.women.total;
return [
{
title: "Étudiants",
icon: <StudentIcon fontSize="medium" />,
total: isNaN(totalStudents) ? "" : totalStudents,
statDetails: [
{
icon: <EnabledIcon fontSize="small" color="success" />,
total: stats.women.enabled + stats.men.enabled,
title: "Actif.ve.s",
},
{
icon: <SuspendedIcon fontSize="small" color="warning" />,
total: stats.women.suspended + stats.men.suspended,
title: "Suspendu.e.s",
},
{
icon: <DisabledIcon fontSize="small" color="error" />,
total: stats.women.disabled + stats.men.disabled,
title: "Quitté.e.s",
},
],
},
{
title: "Femmes",
icon: <FemaleIcon fontSize="medium" />,
total: stats.women.total,
statDetails: [
{
icon: <EnabledIcon fontSize="small" color="success" />,
total: stats.women.enabled,
title: "Actif.ve.s",
},
{
icon: <SuspendedIcon fontSize="small" color="warning" />,
total: stats.women.suspended,
title: "Suspendu.e.s",
},
{
icon: <DisabledIcon fontSize="small" color="error" />,
total: stats.women.disabled,
title: "Quitté.e.s",
},
],
},
{
title: "Hommes",
icon: <MaleIcon fontSize="medium" />,
total: stats.men.total,
statDetails: [
{
icon: <EnabledIcon fontSize="small" color="success" />,
total: stats.men.enabled,
title: "Actif.ve.s",
},
{
icon: <SuspendedIcon fontSize="small" color="warning" />,
total: stats.men.suspended,
title: "Suspendu.e.s",
},
{
icon: <DisabledIcon fontSize="small" color="error" />,
total: stats.men.disabled,
title: "Quitté.e.s",
},
],
},
];
};
34 changes: 8 additions & 26 deletions src/operations/groups/GroupList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,7 @@ import {
Avatar as MuiAvatar,
AvatarGroup as MuiAvatarGroup,
} from "@mui/material";
import {
Group as GroupIcon,
Diversity2 as StudentIcon,
Female as FemaleIcon,
Male as MaleIcon,
} from "@mui/icons-material";
import {Group as GroupIcon} from "@mui/icons-material";
import {Sex} from "@haapi/typescript-client";
import {HaList} from "@/ui/haList";
import {COMMON_BUTTON_PROPS} from "@/ui/constants/common_styles";
Expand All @@ -31,6 +26,7 @@ import {GroupFilters} from "./components/GroupFilters";
import {ListHeader} from "../common/components";
import defaultProfilePicture from "@/assets/blank-profile-photo.png";
import {NOOP_ID} from "@/utils/constants";
import {getCommonListHeaderContent} from "../common/utils/commonListHeaderContent";

const Avatar = ({student = {ref: "", profile_picture: ""}}) => {
const [isLoaded, setLoaded] = useState(false);
Expand Down Expand Up @@ -59,11 +55,11 @@ const AvatarGroup = ({groupId = ""}) => {
const GroupList = () => {
const {
data: stats = {
total_groups: 0,
total_students: 0,
women: 0,
men: 0,
students_alternating: 0,
total_groups: "",
total_students: "",
women: "",
men: "",
students_alternating: "",
},
} = useGetOne("stats", {id: NOOP_ID});

Expand All @@ -73,21 +69,7 @@ const GroupList = () => {
icon: <GroupIcon fontSize="medium" />,
total: stats.total_groups,
},
{
title: "Étudiants",
icon: <StudentIcon fontSize="medium" />,
total: stats.total_students,
},
{
title: "Femmes",
icon: <FemaleIcon fontSize="medium" />,
total: stats.women,
},
{
title: "Hommes",
icon: <MaleIcon fontSize="medium" />,
total: stats.men,
},
...getCommonListHeaderContent(stats),
];

return (
Expand Down
Loading

0 comments on commit 7c31328

Please sign in to comment.