Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Empty State for No students and No Benchmarks #231

Merged
merged 3 commits into from
Nov 3, 2023
Merged

Empty State for No students and No Benchmarks #231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dd7d070
Add empty state for Students list
hieungo89 Nov 2, 2023
ddcd7c2
Add empty state for no benchmarks
hieungo89 Nov 3, 2023
c384913
Merge branch 'main' into emptyState
hieungo89 Nov 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
236 changes: 136 additions & 100 deletions src/components/table/table.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading