Skip to content

Commit

Permalink
Tables responsiveness improved
Browse files Browse the repository at this point in the history
  • Loading branch information
@valerianoCarlos
valerianoCarlos committed Jan 22, 2024
1 parent a6830dd commit 9d00c76
Show file tree
Hide file tree
Showing 13 changed files with 215 additions and 202 deletions.
10 changes: 6 additions & 4 deletions client/src/components/ApplicationRow.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,16 @@ function ApplicationRow(props) {
const user = useContext(UserContext);

return (
<TableRow>
{user.role === "teacher" && <TableCell>{application.student_id}</TableCell>}
<TableRow sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
{user.role === "teacher" && <TableCell sx={{ minWidth: 150 }}>{application.student_id}</TableCell>}
{user.role === "student" && (
<TableCell>{`${application.teacher_name.charAt(0)}. ${application.teacher_surname}`}</TableCell>
<TableCell sx={{ minWidth: 150 }}>{`${application.teacher_name.charAt(0)}. ${
application.teacher_surname
}`}</TableCell>
)}
<TableCell
sx={{
maxWidth: "30vw",
maxWidth: 350,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
Expand Down
26 changes: 12 additions & 14 deletions client/src/components/ApplicationTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,20 +41,18 @@ function ApplicationTable(props) {
};

return (
<Paper sx={{ mt: { md: 3, xs: 1 }, mx: { md: 4, xs: 0 }, overflow: "hidden", borderRadius: 4 }}>
<TableContainer sx={{ maxHeight: "60vh" }}>
<Table stickyHeader>
<TableHead>
<TableRow>{generateTableHeaders(headers, "inherit")}</TableRow>
</TableHead>
<TableBody>
{applications.sort(customSort).map((application) => (
<ApplicationRow key={application.id} application={application} />
))}
</TableBody>
</Table>
</TableContainer>
</Paper>
<TableContainer component={Paper} sx={{ maxHeight: "60vh", overflow: "auto", borderRadius: 4 }}>
<Table sx={{ minWidth: 650 }} stickyHeader>
<TableHead>
<TableRow>{generateTableHeaders(headers, "inherit")}</TableRow>
</TableHead>
<TableBody>
{applications.sort(customSort).map((application) => (
<ApplicationRow key={application.id} application={application} />
))}
</TableBody>
</Table>
</TableContainer>
);
}

Expand Down
2 changes: 1 addition & 1 deletion client/src/components/EmptyTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Paper, Typography } from "@mui/material";
function EmptyTable(props) {
const { data } = props;
return (
<Paper elevation={1} sx={{ mb: 5, pt: 1, mt: 3, borderRadius: 4, mx: { md: 4, xs: 0 } }}>
<Paper elevation={1} sx={{ borderRadius: 4, width: "100%" }}>
<Typography padding={4} textAlign="center">
There are no {data} here at the moment.
</Typography>
Expand Down
15 changes: 12 additions & 3 deletions client/src/components/NotificationRow.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,18 @@ function NotificationRow(props) {
};

return (
<TableRow key={notification.id}>
<TableCell>[email protected]</TableCell>
<TableCell>{notification.object}</TableCell>
<TableRow key={notification.id} sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
<TableCell sx={{ minWidth: 150 }}>[email protected]</TableCell>
<TableCell
sx={{
maxWidth: 350,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
}}
>
{notification.object}
</TableCell>
<TableCell align="center">{dayjs(notification.date).format("DD/MM/YYYY")}</TableCell>
<TableCell align="center">
<Tooltip title="View notification">
Expand Down
52 changes: 25 additions & 27 deletions client/src/components/NotificationTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,34 +14,32 @@ const HEADERS = ["From", "Object", "Date", "Open"];
function NotificationTable(props) {
const { data, fetchNotifications } = props;
return (
<Paper sx={{ mt: { md: 3, xs: 1 }, mx: { md: 4, xs: 0 }, overflow: "hidden", borderRadius: 4 }}>
<TableContainer sx={{ maxHeight: "60vh" }}>
<Table stickyHeader>
<TableHead>
<TableRow>
{HEADERS.map((headCell) => (
<TableCell
key={headCell}
align={headCell === "Open" || headCell === "Date" ? "center" : "left"}
variant="head"
>
<Typography fontWeight={700}>{headCell}</Typography>
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{data.map((notification) => (
<NotificationRow
key={notification.id}
notification={notification}
fetchNotifications={fetchNotifications}
/>
<TableContainer component={Paper} sx={{ maxHeight: "60vh", overflow: "auto", borderRadius: 4 }}>
<Table sx={{ minWidth: 650 }} stickyHeader>
<TableHead>
<TableRow>
{HEADERS.map((headCell) => (
<TableCell
key={headCell}
align={headCell === "Open" || headCell === "Date" ? "center" : "left"}
variant="head"
>
<Typography fontWeight={700}>{headCell}</Typography>
</TableCell>
))}
</TableBody>
</Table>
</TableContainer>
</Paper>
</TableRow>
</TableHead>
<TableBody>
{data.map((notification) => (
<NotificationRow
key={notification.id}
notification={notification}
fetchNotifications={fetchNotifications}
/>
))}
</TableBody>
</Table>
</TableContainer>
);
}

Expand Down
8 changes: 5 additions & 3 deletions client/src/components/ProposalRow.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,11 +118,13 @@ function ProposalRow(props) {
handleClose={handleCloseDialog}
handleSubmit={handleSubmit}
/>
<TableRow key={proposal.id}>
{user.role === "student" && teacher && <TableCell>{`${teacher.name.charAt(0)}. ${teacher.surname}`}</TableCell>}
<TableRow key={proposal.id} sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
{user.role === "student" && teacher && (
<TableCell sx={{ minWidth: 150 }}>{`${teacher.name.charAt(0)}. ${teacher.surname}`}</TableCell>
)}
<TableCell
sx={{
maxWidth: "30vw",
maxWidth: 350,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
Expand Down
92 changes: 43 additions & 49 deletions client/src/components/ProposalTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,55 +36,49 @@ function ProposalTable(props) {
};

return (
<Paper sx={{ mt: { xs: 1 }, mx: { md: 4, xs: 0 }, overflow: "hidden", borderRadius: 4 }}>
<TableContainer sx={{ maxHeight: "60vh" }}>
<Table stickyHeader>
<TableHead>
<TableRow>
{user?.role === "student" &&
STUDENT_HEADERS.map((headCell) => (
<TableCell
key={headCell}
align={headCell === "Expiration Date" ? "center" : "inherit"}
variant="head"
>
<Typography fontWeight={700} fontSize={18}>
{headCell}
</Typography>
</TableCell>
))}
{user?.role === "teacher" &&
renderTeacherHeaders().map((headCell) => (
<TableCell
key={headCell}
align={headCell === "Expiration" || headCell === "Reason" ? "center" : "inherit"}
variant="head"
>
<Typography fontWeight={700} fontSize={18}>
{headCell}
</Typography>
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{data.map((proposal) => (
<ProposalRow
key={proposal.id}
proposal={proposal}
deleteProposal={deleteProposal}
archiveProposal={archiveProposal}
getTeacherById={getTeacherById}
teacherFilter={teacherFilter}
applications={applications}
currentDate={currentDate}
viewAsCosupervisorOn={viewAsCosupervisorOn}
/>
))}
</TableBody>
</Table>
</TableContainer>
</Paper>
<TableContainer component={Paper} sx={{ maxHeight: "60vh", overflow: "auto", borderRadius: 4 }}>
<Table sx={{ minWidth: 650 }} stickyHeader>
<TableHead>
<TableRow>
{user?.role === "student" &&
STUDENT_HEADERS.map((headCell) => (
<TableCell key={headCell} align={headCell === "Expiration Date" ? "center" : "inherit"} variant="head">
<Typography fontWeight={700} fontSize={18}>
{headCell}
</Typography>
</TableCell>
))}
{user?.role === "teacher" &&
renderTeacherHeaders().map((headCell) => (
<TableCell
key={headCell}
align={headCell === "Expiration" || headCell === "Reason" ? "center" : "inherit"}
variant="head"
>
<Typography fontWeight={700} fontSize={18}>
{headCell}
</Typography>
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{data.map((proposal) => (
<ProposalRow
key={proposal.id}
proposal={proposal}
deleteProposal={deleteProposal}
archiveProposal={archiveProposal}
getTeacherById={getTeacherById}
teacherFilter={teacherFilter}
applications={applications}
currentDate={currentDate}
viewAsCosupervisorOn={viewAsCosupervisorOn}
/>
))}
</TableBody>
</Table>
</TableContainer>
);
}

Expand Down
6 changes: 3 additions & 3 deletions client/src/components/RequestRow.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,12 @@ function RequestRow(props) {
};

return (
<TableRow>
<TableRow sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
{user.role !== "student" && <TableCell>{request.student_id}</TableCell>}
{user.role !== "teacher" && <TableCell>{renderSupervisor()}</TableCell>}
{user.role !== "teacher" && <TableCell sx={{ minWidth: 150 }}>{renderSupervisor()}</TableCell>}
<TableCell
sx={{
maxWidth: "30vw",
maxWidth: 350,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
Expand Down
86 changes: 42 additions & 44 deletions client/src/components/RequestTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,54 +42,52 @@ function RequestTable(props) {
};

return (
<Paper sx={{ mt: 1, mx: { md: 4, xs: 0 }, overflow: "hidden", borderRadius: 4 }}>
<TableContainer sx={{ maxHeight: "60vh" }}>
<Table stickyHeader>
<TableHead>
<TableRow>
{renderHeaders().map((headCell) => (
<TableCell
key={headCell}
align={headCell === "Status" || headCell === "Open" ? "center" : "inherit"}
variant="head"
>
{headCell === "Status" ? (
<Stack direction="row" sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
<Typography fontWeight={700} fontSize={18}>
{headCell}
</Typography>
<Tooltip
title={user.role === "teacher" ? LEGEND_TEACHER : LEGEND_SECRETARY}
arrow
slotProps={{ tooltip: { sx: { whiteSpace: "pre-line", maxWidth: "none" } } }}
>
<IconButton size="small">
<HelpOutlineIcon />
</IconButton>
</Tooltip>
</Stack>
) : (
<TableContainer component={Paper} sx={{ maxHeight: "60vh", overflow: "auto", borderRadius: 4 }}>
<Table sx={{ minWidth: 650 }} stickyHeader>
<TableHead>
<TableRow>
{renderHeaders().map((headCell) => (
<TableCell
key={headCell}
align={headCell === "Status" || headCell === "Open" ? "center" : "inherit"}
variant="head"
>
{headCell === "Status" ? (
<Stack direction="row" sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
<Typography fontWeight={700} fontSize={18}>
{headCell}
</Typography>
)}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{requests.map((request) => (
<RequestRow
key={request.id}
request={request}
teachers={teachers}
viewAsCosupervisorOn={viewAsCosupervisorOn}
/>
<Tooltip
title={user.role === "teacher" ? LEGEND_TEACHER : LEGEND_SECRETARY}
arrow
slotProps={{ tooltip: { sx: { whiteSpace: "pre-line", maxWidth: "none" } } }}
>
<IconButton size="small">
<HelpOutlineIcon />
</IconButton>
</Tooltip>
</Stack>
) : (
<Typography fontWeight={700} fontSize={18}>
{headCell}
</Typography>
)}
</TableCell>
))}
</TableBody>
</Table>
</TableContainer>
</Paper>
</TableRow>
</TableHead>
<TableBody>
{requests.map((request) => (
<RequestRow
key={request.id}
request={request}
teachers={teachers}
viewAsCosupervisorOn={viewAsCosupervisorOn}
/>
))}
</TableBody>
</Table>
</TableContainer>
);
}

Expand Down
Loading

0 comments on commit 9d00c76

Please sign in to comment.