Skip to content

Commit

Permalink
Empty State for No students and No Benchmarks (#231)
Browse files Browse the repository at this point in the history 
* Add empty state for Students list
* Add empty state for no benchmarks
  • Loading branch information
@hieungo89
hieungo89 authored Nov 3, 2023
1 parent de4409e commit eda7701
Show file tree
Hide file tree
Showing 5 changed files with 171 additions and 110 deletions.
236 changes: 136 additions & 100 deletions src/components/table/table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ import $table from "./Table.module.css";
import $button from "@/styles/Button.module.css";
import { useRouter } from "next/router";
import { SelectableForTable } from "zapatos/schema";
import emptyState from "../../public/img/empty-state.png";
import Container from "@mui/material/Container";
import Image from "next/image";

export type StudentWithIep = SelectableForTable<"student"> &
SelectableForTable<"iep">;
Expand Down Expand Up @@ -117,7 +120,7 @@ function EnhancedTableHead<Column extends HeadCell>({

interface EnhancedTableToolbarProps {
totalRows: number;
type: "Student" | "Staff";
type: "Students" | "Staff";
onOpenInput: () => void;
searchParam: string;
onSearch: (event: React.ChangeEvent<HTMLInputElement>) => void;
Expand All @@ -131,57 +134,63 @@ function EnhancedTableToolbar({
onSearch,
}: EnhancedTableToolbarProps) {
return (
<Toolbar
sx={{
pl: { xs: 0 },
pr: { xs: 0 },
flexDirection: "column",
}}
>
<div
style={{
display: "flex",
justifyContent: "space-between",
width: "100%",
}}
>
<>
{totalRows === 0 ? (
<h2 className={$table.tableTitle}>{type}</h2>
<button onClick={onOpenInput} className={$button.default}>
Add {type}
</button>
</div>
<div
style={{
display: "flex",
justifyContent: "space-between",
width: "100%",
}}
>
<Typography color="inherit" variant="subtitle1" component="div">
{`Total: ${totalRows}`}
</Typography>
<TextField
id="search-input"
placeholder="Search"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
) : (
<Toolbar
sx={{
pl: { xs: 0 },
pr: { xs: 0 },
flexDirection: "column",
}}
variant="standard"
value={searchParam}
onChange={onSearch}
/>
</div>
</Toolbar>
>
<div
style={{
display: "flex",
justifyContent: "space-between",
width: "100%",
}}
>
<h2 className={$table.tableTitle}>{type}</h2>
<button onClick={onOpenInput} className={$button.default}>
Add {type}
</button>
</div>
<div
style={{
display: "flex",
justifyContent: "space-between",
width: "100%",
}}
>
<Typography color="inherit" variant="subtitle1" component="div">
{`Total: ${totalRows}`}
</Typography>
<TextField
id="search-input"
placeholder="Search"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
}}
variant="standard"
value={searchParam}
onChange={onSearch}
/>
</div>
</Toolbar>
)}
</>
);
}

interface EnhancedTableInputProps<Column> {
inputCells: Column[];
type: "Student" | "Staff";
type: "Students" | "Staff";
onCloseInput: () => void;
}

Expand Down Expand Up @@ -243,7 +252,7 @@ interface EnhancedTableProps<Person, Column> {
people: Person[];
onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
headCells: Column[];
type: "Student" | "Staff";
type: "Students" | "Staff";
}

/**
Expand Down Expand Up @@ -325,60 +334,87 @@ export default function EnhancedTable<
searchParam={searchParam}
onSearch={handleSearch}
/>
<TableContainer>
<Table sx={{ minWidth: 750 }} aria-labelledby={`Table of ${type}s`}>
<EnhancedTableHead
headCells={headCells}
order={order}
orderBy={orderBy as string}
onRequestSort={handleRequestSort}
/>
<TableBody>
{showInput && (
<EnhancedTableInput
inputCells={headCells}
type={type}
onCloseInput={handleCloseInput}
/>
)}
{visibleRows.map((row) => {
const labelId = row.email;

return (
<StyledTableRow
hover
role="link"
tabIndex={-1}
key={row.email}
sx={{ cursor: "pointer" }}
onClick={() =>
handleLinkToPage(
isStudentWithIep(row)
? `../students/${row.student_id || ""}`
: `../staff/${row.user_id || ""}`
)
}
>
<TableCell component="th" id={labelId} scope="row">
{row.first_name}
</TableCell>
<TableCell align={"left"}>{row.last_name}</TableCell>
<TableCell align={"left"}>{row.email}</TableCell>

{isStudentWithIep(row) && (
<>
<TableCell align={"left"}>{row.grade}</TableCell>
<TableCell align={"left"}>
{row.end_date?.toDateString().slice(4) || "None"}
</TableCell>
</>
)}
</StyledTableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
{people.length === 0 && !showInput && (
<Container sx={{ marginTop: "4rem" }}>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
gap={1.5}
>
<Image src={emptyState} alt="empty roster" width={250} />
<p>You have no students yet</p>
<p style={{ color: "var(--grey-20)", textAlign: "center" }}>
Start building your class roster by adding a student.
</p>
<button
onClick={() => setShowInput(true)}
className={`${$button.default}`}
>
Add Student
</button>
</Box>
</Container>
)}

{(people.length || showInput) && (
<TableContainer>
<Table sx={{ minWidth: 750 }} aria-labelledby={`Table of ${type}s`}>
<EnhancedTableHead
headCells={headCells}
order={order}
orderBy={orderBy as string}
onRequestSort={handleRequestSort}
/>
<TableBody>
{showInput && (
<EnhancedTableInput
inputCells={headCells}
type={type}
onCloseInput={handleCloseInput}
/>
)}
{visibleRows.map((row) => {
const labelId = row.email;

return (
<StyledTableRow
hover
role="link"
tabIndex={-1}
key={row.email}
sx={{ cursor: "pointer" }}
onClick={() =>
handleLinkToPage(
isStudentWithIep(row)
? `../students/${row.student_id || ""}`
: `../staff/${row.user_id || ""}`
)
}
>
<TableCell component="th" id={labelId} scope="row">
{row.first_name}
</TableCell>
<TableCell align={"left"}>{row.last_name}</TableCell>
<TableCell align={"left"}>{row.email}</TableCell>

{isStudentWithIep(row) && (
<>
<TableCell align={"left"}>{row.grade}</TableCell>
<TableCell align={"left"}>
{row.end_date?.toDateString().slice(4) || "None"}
</TableCell>
</>
)}
</StyledTableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
)}
</Box>
);
}
43 changes: 34 additions & 9 deletions src/pages/benchmarks/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,49 @@ import React from "react";
import TaskCard from "@/components/taskCard/taskCard";
import { trpc } from "@/client/lib/trpc";
import $typo from "@/styles/Typography.module.css";
import { Container, Box } from "@mui/material";
import Image from "next/image";
import noBenchmarks from "../../public/img/no-benchmarks.png";

function Benchmarks() {
const { data: tasks, isLoading } = trpc.para.getMyTasks.useQuery();
console.log("tasks ", tasks);

if (isLoading) {
return <div>Loading...</div>;
}

return (
<ul>
{tasks?.map((task) => {
return (
<li key={task.task_id} className={$typo.noDecoration}>
<TaskCard task={task} />
</li>
);
})}
</ul>
<>
{tasks?.length === 0 ? (
<Container sx={{ marginTop: "4rem" }}>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
gap={1.5}
>
<Image src={noBenchmarks} alt="empty benchmark" width={250} />
<p>No assigned benchmarks yet!</p>
<p style={{ color: "var(--grey-20)", textAlign: "center" }}>
Contact your case manager for your assignment.
</p>
</Box>
</Container>
) : (
<ul>
{tasks?.map((task) => {
return (
<li key={task.task_id} className={$typo.noDecoration}>
<TaskCard task={task} />
</li>
);
})}
</ul>
)}
</>
);
}

Expand Down
2 changes: 1 addition & 1 deletion src/pages/students/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ const Students = () => {
people={students as StudentWithIep[]}
onSubmit={handleSubmit}
headCells={headCells}
type="Student"
type="Students"
/>
);
};
Expand Down
Binary file added src/public/img/empty-state.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/public/img/no-benchmarks.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit eda7701

Please sign in to comment.