64 lines
3.1 KiB
TypeScript
64 lines
3.1 KiB
TypeScript
|
import {Descending, Section, SortSettings, Term} from "../../interfaces";
|
||
|
|
import Card from "react-bootstrap/Card";
|
||
|
|
import DashboardCard from "./DashboardCard";
|
||
|
|
import AssignmentsTable, {AssignmentsTableColumn} from "../tables/AssignmentsTable";
|
||
|
|
import {useMemo, useState} from "react";
|
||
|
|
import SortSelect from "../input/SortSelect";
|
||
|
|
import OffcanvasDashboardCard from "./OffcanvasDashboardCard";
|
||
|
|
|
||
|
|
type MissingAssignmentCardsProps = { sections: Section[], term: Term | null }
|
||
|
|
|
||
|
|
const assignmentsTableColumns = [AssignmentsTableColumn.CLASSNAME, AssignmentsTableColumn.NAME, AssignmentsTableColumn.DUEDATE];
|
||
|
|
|
||
|
|
export default function MissingAssignmentCard({sections, term}: MissingAssignmentCardsProps) {
|
||
|
|
const [offcanvasSort, setOffcanvasSort] = useState<SortSettings<AssignmentsTableColumn>>({
|
||
|
|
order: Descending,
|
||
|
|
by: AssignmentsTableColumn.DUEDATE
|
||
|
|
});
|
||
|
|
|
||
|
|
const missingAssignments = useMemo(() => sections
|
||
|
|
.map(s => s.assignments) // Get assignments from sections
|
||
|
|
.flat(1) // Turn array of arrays of assignments into an array of assignments
|
||
|
|
.filter(a => a.score?.missing) // Filter for only missing assignments
|
||
|
|
.sort((a, b) => a.dueDate.getTime() - b.dueDate.getTime()) // Sort by due date
|
||
|
|
, [sections]);
|
||
|
|
|
||
|
|
// Get 5 assignments with the most recent due date
|
||
|
|
const assignmentsToDisplay = useMemo(() => missingAssignments
|
||
|
|
.sort((a, b) => b.dueDate.getTime() - a.dueDate.getTime())
|
||
|
|
.slice(0, 5)
|
||
|
|
, [missingAssignments]);
|
||
|
|
|
||
|
|
// Show button that displays list of all missing assignments (in offcanvas element)
|
||
|
|
const includeOffcanvas = missingAssignments.length > 5;
|
||
|
|
|
||
|
|
const cardBody = useMemo(() =>
|
||
|
|
term === null
|
||
|
|
?
|
||
|
|
<>
|
||
|
|
<Card.Title>No missing assignments</Card.Title>
|
||
|
|
<p>And I bet you're not <i>Missing</i> school either.</p>
|
||
|
|
</>
|
||
|
|
:
|
||
|
|
<>
|
||
|
|
<Card.Title>
|
||
|
|
{`${missingAssignments.length} missing assignment${missingAssignments.length === 1 ? '' : 's'} in ${term.title}`}
|
||
|
|
</Card.Title>
|
||
|
|
{missingAssignments.length === 0
|
||
|
|
? <p>No missing assignments! Nice job try-hard!</p>
|
||
|
|
: <AssignmentsTable assignments={assignmentsToDisplay} columns={assignmentsTableColumns}
|
||
|
|
sort={{order: Descending, by: AssignmentsTableColumn.DUEDATE}}/>
|
||
|
|
}
|
||
|
|
</>, [assignmentsToDisplay, term, missingAssignments]);
|
||
|
|
|
||
|
|
return includeOffcanvas
|
||
|
|
? <OffcanvasDashboardCard offcanvasTitle="Missing Assignments" offcanvasBody={
|
||
|
|
<>
|
||
|
|
<SortSelect settings={offcanvasSort} setSettings={setOffcanvasSort}
|
||
|
|
sortByOptions={assignmentsTableColumns}/>
|
||
|
|
<AssignmentsTable assignments={missingAssignments} columns={assignmentsTableColumns}
|
||
|
|
sort={offcanvasSort}/>
|
||
|
|
</>
|
||
|
|
}>{cardBody}</OffcanvasDashboardCard>
|
||
|
|
: <DashboardCard>{cardBody}</DashboardCard>
|
||
|
|
};
|