Distinguish Practice Tests

src/IsaacAppTypes.tsx

@@ -322,7 +322,22 @@ export interface ActiveModal {
     overflowVisible?: boolean;
 }
 
-export enum BoardOrder {
+export type ProgressSortOrder = number | "name" | "totalQuestionPartPercentage" | "totalQuestionPercentage";
+
+export enum QuizzesBoardOrder {
+    "title" = "title",
+    "-title" = "-title",
+    "setBy" = "setBy",
+    "-setBy" = "-setBy",
+    "dueDate" = "dueDate",
+    "-dueDate" = "-dueDate",
+    "setDate" = "setDate",
+    "-setDate" = "-setDate",
+    "startDate" = "startDate",
+    "-startDate" = "-startDate",
+}
+
+export enum AssignmentBoardOrder {
     "created" = "created",
     "-created" = "-created",
     "visited" = "visited",

src/app/components/elements/CardGrid.tsx

@@ -4,17 +4,17 @@ import { below, useDeviceSize } from '../../services';
 
 export const CardGrid = (props: ContainerProps) => {
     const deviceSize = useDeviceSize();
-    const width = deviceSize === 'xs' ? 1 : below['lg'](deviceSize) ? 2 : 3;
+    const width = deviceSize === 'xs' ? 1 : below['md'](deviceSize) ? 2 : 3;
     if (!props.children || !Array.isArray(props.children)) return null;
     const rows = [];
 
     for (let i = 0; i < Math.ceil(props.children.length / width); i++) {
-        rows.push(<Row className={`w-100 card-grid-${deviceSize}`}>
+        rows.push(<Row className={`card-grid-${deviceSize}`}>
             {props.children.slice(i * width, (i + 1) * width)}
         </Row>);
     }
 
     return <Container {...props}>
         {rows}
     </Container>;
-};
+};

src/app/components/elements/CollapsibleContainer.tsx

@@ -0,0 +1,28 @@
+import classNames from "classnames";
+import React, { useLayoutEffect, useRef, useState } from "react";
+
+export interface CollapsibleContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    expanded: boolean;
+}
+
+export const CollapsibleContainer = (props: CollapsibleContainerProps) => {
+    const {expanded, ...rest} = props;
+    const [expandedHeight, setExpandedHeight] = useState(0);
+
+    const divRef = useRef<HTMLDivElement>(null);
+
+    useLayoutEffect(() => {
+        if (expanded) {
+            setExpandedHeight(divRef?.current ? [...divRef.current.children].map(c => 
+                c.getAttribute("data-targetHeight") ? parseInt(c.getAttribute("data-targetHeight") as string) : c.clientHeight
+            ).reduce((a, b) => a + b, 0) : 0);
+        }
+    }, [expanded, props.children]);
+
+    return <div {...rest} 
+        className={classNames("collapsible-body", rest.className)} 
+        style={{height: expanded ? expandedHeight : 0, maxHeight: expanded ? expandedHeight : 0, ...rest.style}}
+        data-targetHeight={expandedHeight}
+        ref={divRef} 
+    />;
+};

src/app/components/elements/CollapsibleList.tsx

@@ -41,7 +41,7 @@ export const CollapsibleList = (props: CollapsibleListProps) => {
                 {title && <span>{title}</span>}
                 <Spacer/>
                 {(props.numberSelected ?? 0) > 0
-                    && <FilterCount count={props.numberSelected ?? 0} />}
+                    && <FilterCount count={props.numberSelected ?? 0} className="me-2" />}
                 <img className={classNames("icon-dropdown-90", {"active": expanded})} src={"/assets/common/icons/chevron_right.svg"} alt="" />
             </button>
         </div>

src/app/components/elements/Gameboards.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Card, CardBody, Button, Row, Col, Table, UncontrolledTooltip, Spinner } from "reactstrap";
-import { BoardOrder, Boards } from "../../../IsaacAppTypes";
+import { AssignmentBoardOrder, Boards } from "../../../IsaacAppTypes";
 import { isPhy, siteSpecific, difficultiesOrdered, difficultyShortLabelMap, isAda, BoardViews, BoardCreators, BoardCompletions, matchesAllWordsInAnyOrder, formatBoardOwner, boardCompletionSelection } from "../../services";
 import { SortItemHeader } from "./SortableItemHeader";
 import { BoardCard } from "./cards/BoardCard";
@@ -21,8 +21,8 @@ export interface GameboardsTableProps {
     setBoardCreator: (creator: BoardCreators) => void;
     boardCompletion: BoardCompletions;
     setBoardCompletion: (boardCompletion: BoardCompletions) => void;
-    boardOrder: BoardOrder;
-    setBoardOrder: (boardOrder: BoardOrder) => void;
+    boardOrder: AssignmentBoardOrder;
+    setBoardOrder: (boardOrder: AssignmentBoardOrder) => void;
 }
 
 export interface GameboardsCardsProps {
@@ -55,7 +55,7 @@ const CSTable = (props: GameboardsTableProps) => {
     } = props;
 
     const tableHeader = <tr className="my-gameboard-table-header">
-        <SortItemHeader colSpan={isPhy ? 1 : 4} className={siteSpecific("", "w-100")} defaultOrder={BoardOrder.title} reverseOrder={BoardOrder["-title"]} currentOrder={boardOrder} setOrder={setBoardOrder} alignment="start">
+        <SortItemHeader<AssignmentBoardOrder> colSpan={isPhy ? 1 : 4} className={siteSpecific("", "w-100")} defaultOrder={AssignmentBoardOrder.title} reverseOrder={AssignmentBoardOrder["-title"]} currentOrder={boardOrder} setOrder={setBoardOrder} alignment="start">
             {siteSpecific("Board name", "Quiz name")}
         </SortItemHeader>
         <th colSpan={2} className={classNames("long-titled-col", {"align-middle" : isPhy})}>
@@ -66,13 +66,13 @@ const CSTable = (props: GameboardsTableProps) => {
             </UncontrolledTooltip>
         </th>
         {isAda && <th>Creator</th>}
-        <SortItemHeader defaultOrder={BoardOrder.created} reverseOrder={BoardOrder["-created"]} currentOrder={boardOrder} setOrder={setBoardOrder}>
+        <SortItemHeader<AssignmentBoardOrder> defaultOrder={AssignmentBoardOrder.created} reverseOrder={AssignmentBoardOrder["-created"]} currentOrder={boardOrder} setOrder={setBoardOrder}>
             Created
         </SortItemHeader>
-        <SortItemHeader defaultOrder={BoardOrder.attempted} reverseOrder={BoardOrder["-attempted"]} currentOrder={boardOrder} setOrder={setBoardOrder}>
+        <SortItemHeader<AssignmentBoardOrder> defaultOrder={AssignmentBoardOrder.attempted} reverseOrder={AssignmentBoardOrder["-attempted"]} currentOrder={boardOrder} setOrder={setBoardOrder}>
             Attempted
         </SortItemHeader>
-        <SortItemHeader defaultOrder={BoardOrder.correct} reverseOrder={BoardOrder["-correct"]} currentOrder={boardOrder} setOrder={setBoardOrder}>
+        <SortItemHeader<AssignmentBoardOrder> defaultOrder={AssignmentBoardOrder.correct} reverseOrder={AssignmentBoardOrder["-correct"]} currentOrder={boardOrder} setOrder={setBoardOrder}>
             Correct
         </SortItemHeader>
         {siteSpecific(

src/app/components/elements/SortableItemHeader.tsx

@@ -1,12 +1,10 @@
 import React, { ComponentProps } from "react";
-import { BoardOrder } from "../../../IsaacAppTypes";
-import { isDefined, siteSpecific, SortOrder } from "../../services";
+import { isDefined, siteSpecific } from "../../services";
 import { Spacer } from "./Spacer";
+import { NonUndefined } from "@reduxjs/toolkit/dist/query/tsHelpers";
+import classNames from "classnames";
 
-export type ProgressSortOrder = number | "name" | "totalQuestionPartPercentage" | "totalQuestionPercentage";
-type Order = BoardOrder | SortOrder | ProgressSortOrder;
-
-function toggleSort<T extends Order>(
+function toggleSort<T>(
         defaultOrder: T,
         reverseOrder: T,
         currentOrder: T,
@@ -18,7 +16,7 @@ function toggleSort<T extends Order>(
     }
 }
 
-function sortClass<T extends Order>(
+function sortClass<T>(
     defaultOrder: T,
     reverseOrder: T,
     currentOrder: T,
@@ -35,7 +33,7 @@ function sortClass<T extends Order>(
     }
 }
 
-export interface SortItemHeaderProps<T extends Order> extends ComponentProps<"th"> {
+export interface SortItemHeaderProps<T> extends ComponentProps<"th"> {
     defaultOrder: T,
     reverseOrder: T,
     currentOrder: T,
@@ -46,7 +44,7 @@ export interface SortItemHeaderProps<T extends Order> extends ComponentProps<"th
     alignment?: "start" | "center" | "end",
 }
 
-export const SortItemHeader = <T extends Order>(props: SortItemHeaderProps<T>) => {
+export const SortItemHeader = <T,>(props: SortItemHeaderProps<NonUndefined<T>>) => {
     const {
         defaultOrder,
         reverseOrder,
@@ -68,7 +66,10 @@ export const SortItemHeader = <T extends Order>(props: SortItemHeaderProps<T>) =
         <span className="down">▼</span>
     </button>;
 
-    return <th {...rest} className={props.className + sortClass(defaultOrder, reverseOrder, currentOrder, reversed)} onClick={clickToSelect}>
+    return <th {...rest}
+        className={classNames(props.className, "user-select-none", sortClass(defaultOrder, reverseOrder, currentOrder, reversed))}
+        onClick={clickToSelect ?? (() => toggleSort(defaultOrder, reverseOrder, currentOrder, setOrder))}
+    >
         <div className={`d-flex ${justify} align-items-center`}>
             {props.children}
             {justify === "justify-content-start" && <Spacer/>}

src/app/components/elements/modals/QuestionSearchModal.tsx

@@ -255,10 +255,10 @@ export const QuestionSearchModal = (
                 <thead>
                     <tr className="search-modal-table-header">
                         <th className="w-5"> </th>
-                        <SortItemHeader
+                        <SortItemHeader<SortOrder>
                             className={siteSpecific("w-40", "w-30")}
                             setOrder={sortableTableHeaderUpdateState(questionsSort, setQuestionsSort, "title")}
-                            defaultOrder={SortOrder.ASC as SortOrder}
+                            defaultOrder={SortOrder.ASC}
                             reverseOrder={SortOrder.DESC}
                             currentOrder={questionsSort['title']}
                             alignment="start"

src/app/components/elements/quiz/QuizProgressCommon.tsx

@@ -1,12 +1,12 @@
 import React, {useContext, useLayoutEffect, useMemo, useRef, useState} from "react";
 import {Button} from "reactstrap";
-import {AssignmentProgressPageSettingsContext} from "../../../../IsaacAppTypes";
+import {AssignmentProgressPageSettingsContext, ProgressSortOrder} from "../../../../IsaacAppTypes";
 import {isAuthorisedFullAccess, siteSpecific, TODAY} from "../../../services";
 import {Link} from "react-router-dom";
 import orderBy from "lodash/orderBy";
 import { IsaacSpinner } from "../../handlers/IsaacSpinner";
 import { closeActiveModal, openActiveModal, useAppDispatch, useReturnQuizToStudentMutation } from "../../../state";
-import { ProgressSortOrder, SortItemHeader } from "../SortableItemHeader";
+import { SortItemHeader } from "../SortableItemHeader";
 import { AssignmentProgressDTO } from "../../../../IsaacApiTypes";
 
 export const ICON = siteSpecific(
@@ -133,9 +133,9 @@ export function ResultsTable<Q extends QuestionType>({assignmentId,
     , [semiSortedProgress, reverseOrder, sortOrder]);
 
     const tableHeaderFooter = <tr className="progress-table-header-footer">
-        <SortItemHeader className="student-name" defaultOrder={"name"} reverseOrder={"name"} currentOrder={sortOrder} setOrder={toggleSort} reversed={reverseOrder}/>
+        <SortItemHeader<ProgressSortOrder> className="student-name" defaultOrder={"name"} reverseOrder={"name"} currentOrder={sortOrder} setOrder={toggleSort} reversed={reverseOrder}/>
         {questions.map((q, index) =>
-            <SortItemHeader
+            <SortItemHeader<ProgressSortOrder>
                 key={q.id} className={`${isSelected(q)}`}
                 defaultOrder={index} reverseOrder={index} currentOrder={sortOrder}
                 setOrder={toggleSort}
@@ -147,22 +147,22 @@ export function ResultsTable<Q extends QuestionType>({assignmentId,
             </SortItemHeader>
         )}
         {isAssignment ? <>
-            <SortItemHeader
+            <SortItemHeader<ProgressSortOrder>
                 className="total-column left"
                 defaultOrder={"totalQuestionPartPercentage"}
                 reverseOrder={"totalQuestionPartPercentage"}
                 currentOrder={sortOrder} setOrder={toggleSort} reversed={reverseOrder}>
                 Total Parts
             </SortItemHeader>
-            <SortItemHeader
+            <SortItemHeader<ProgressSortOrder>
                 className="total-column right"
                 defaultOrder={"totalQuestionPercentage"}
                 reverseOrder={"totalQuestionPercentage"}
                 currentOrder={sortOrder} setOrder={toggleSort} reversed={reverseOrder}>
                 Total Qs
             </SortItemHeader>
         </> :
-        <SortItemHeader
+        <SortItemHeader<ProgressSortOrder>
             defaultOrder={"totalQuestionPartPercentage"}
             reverseOrder={"totalQuestionPartPercentage"}
             currentOrder={sortOrder} setOrder={toggleSort} reversed={reverseOrder}

src/app/components/elements/svg/FilterCount.tsx

@@ -3,13 +3,19 @@ import {Circle} from "./Circle";
 import { siteSpecific } from "../../../services";
 import { Hexagon } from "./Hexagon";
 
-const filterIconWidth = 25;
+export interface FilterCountProps extends React.SVGProps<SVGSVGElement> {
+    count: number;
+    widthPx?: number;
+}
+
+export const FilterCount = (props: FilterCountProps) => {
+    const {count, widthPx, ...rest} = props;
+    const filterIconWidth = widthPx || 25;
 
-export const FilterCount = ({count}: {count: number}) => {
     return <svg
+        {...rest}
         width={`${filterIconWidth}px`}
         height={`${filterIconWidth}px`}
-        className="me-2"
     >
         <title>{`${count} filters selected`}</title>
         <g>

src/app/components/elements/tables/TableLinks.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import classNames from "classnames";
+
+interface TdLinkProps extends React.HTMLAttributes<HTMLTableCellElement> {
+    to: string | undefined;
+}
+
+interface TrLinkProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    to: string | undefined;
+}
+
+// an <a/> anywhere between a <table/> and a <td/> is illegal, so a row can't be wrapped in a <Link/>. instead, each <td/> contains a link.
+export const TdLink = ({to, children, ...rest}: TdLinkProps) => {
+    return <td {...rest} className={classNames(rest.className, "td-link")}>{to ? <Link to={to}>{children}</Link> : <>{children}</>}</td>;
+};
+
+// this wrapper exists such that you only need specify the link prop once per row.
+// just drop <TrLink to={...}> in place of a <tr/>.
+export const TrLink = ({to, children, ...rest}: TrLinkProps) => {
+    return <tr {...rest}>
+        {React.Children.map(children, child => React.isValidElement(child) && child.type === "td" ? <TdLink to={to} {...child.props}/> : child)}
+    </tr>;
+};

src/app/components/pages/AssignmentSchedule.tsx

@@ -46,7 +46,7 @@ import {
     TODAY,
     useDeviceSize
 } from "../../services";
-import {AppGroup, AssignmentScheduleContext, BoardOrder, ValidAssignmentWithListingDate} from "../../../IsaacAppTypes";
+import {AppGroup, AssignmentScheduleContext, AssignmentBoardOrder, ValidAssignmentWithListingDate} from "../../../IsaacAppTypes";
 import {calculateHexagonProportions, Hexagon} from "../elements/svg/Hexagon";
 import classNames from "classnames";
 import {currentYear, DateInput} from "../elements/inputs/DateInput";
@@ -522,7 +522,7 @@ type AssignmentsGroupedByDate = [number, [number, [number, ValidAssignmentWithLi
 export const AssignmentSchedule = ({user}: {user: RegisteredUserDTO}) => {
     const assignmentsSetByMeQuery = useGetMySetAssignmentsQuery(undefined);
     const { data: assignmentsSetByMe } = assignmentsSetByMeQuery;
-    const { data: gameboards } = useGetGameboardsQuery({startIndex: 0, limit: BoardLimit.All, sort: BoardOrder.created});
+    const { data: gameboards } = useGetGameboardsQuery({startIndex: 0, limit: BoardLimit.All, sort: AssignmentBoardOrder.created});
     const { data: groups } = useGetGroupsQuery(false);
 
     const [viewBy, setViewBy] = useState<"startDate" | "dueDate">("startDate");

src/app/components/pages/MyGameboards.tsx

@@ -8,7 +8,7 @@ import {
     Input,
     Label,
     Row} from 'reactstrap';
-import {BoardOrder} from "../../../IsaacAppTypes";
+import {AssignmentBoardOrder} from "../../../IsaacAppTypes";
 import {GameboardDTO, RegisteredUserDTO} from "../../../IsaacApiTypes";
 import {TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
 import {
@@ -33,8 +33,8 @@ export interface GameboardsDisplaySettingsProps {
     switchViewAndClearSelected: (e: React.ChangeEvent<HTMLInputElement>) => void,
     boardLimit: BoardLimit,
     setBoardLimit: (limit: BoardLimit) => void,
-    boardOrder: BoardOrder,
-    setBoardOrder: (order: BoardOrder) => void,
+    boardOrder: AssignmentBoardOrder,
+    setBoardOrder: (order: AssignmentBoardOrder) => void,
     showFilters: boolean,
     setShowFilters: React.Dispatch<React.SetStateAction<boolean>>,
 }
@@ -57,8 +57,8 @@ const GameboardsDisplaySettings = ({boardView, switchViewAndClearSelected, board
         </Col>
         <Col xs={9} md={5} lg={{size: 4, offset: 2}}>
             <Label className="w-100">
-                Sort by <Input type="select" value={boardOrder} onChange={e => setBoardOrder(e.target.value as BoardOrder)}>
-                    {Object.values(BoardOrder).map(order => <option key={order} value={order}>{BOARD_ORDER_NAMES[order]}</option>)}
+                Sort by <Input type="select" value={boardOrder} onChange={e => setBoardOrder(e.target.value as AssignmentBoardOrder)}>
+                    {Object.values(AssignmentBoardOrder).map(order => <option key={order} value={order}>{BOARD_ORDER_NAMES[order]}</option>)}
                 </Input>
             </Label>
         </Col>