Move filter panel into sidebar for Isaac

Author: sjd210

src/app/components/elements/CollapsibleList.tsx

@@ -3,6 +3,7 @@ import { Col, Row } from "reactstrap";
 import { Spacer } from "./Spacer";
 import { FilterCount } from "./svg/FilterCount";
 import classNames from "classnames";
+import { isAda, isPhy } from "../../services";
 
 export interface CollapsibleListProps {
     title?: string;
@@ -37,7 +38,7 @@ export const CollapsibleList = (props: CollapsibleListProps) => {
 
     return <Col className={props.className} data-targetHeight={(headRef.current?.offsetHeight ?? 0) + (expanded ? expandedHeight : 0)}>
         <div className="row collapsible-head" ref={headRef}>
-            <button className={classNames("w-100 d-flex align-items-center p-3 bg-white text-start", {"ps-4": props.asSubList})} onClick={toggle}>
+            <button className={classNames("w-100 d-flex align-items-center p-3 text-start", {"bg-white": isAda, "bg-transparent": isPhy, "ps-4": props.asSubList})} onClick={toggle}>
                 {title && <span>{title}</span>}
                 <Spacer/>
                 {(props.numberSelected ?? 0) > 0

src/app/components/elements/layout/SidebarLayout.tsx

@@ -10,6 +10,7 @@ import { Link } from "react-router-dom";
 import { Tag } from "../../../../IsaacAppTypes";
 import { AffixButton } from "../AffixButton";
 import { getHumanContext } from "../../../services/pageContext";
+import { QuestionFinderFilterPanel, QuestionFinderFilterPanelProps } from "../panels/QuestionFinderFilterPanel";
 
 export const SidebarLayout = (props: RowProps) => {
     const { className, ...rest } = props;
@@ -285,17 +286,48 @@ export const GenericConceptsSidebar = (props: SidebarProps) => {
     return <ContentSidebar {...props}/>;
 };
 
+interface FilterDropdownProps extends React.HTMLAttributes<HTMLLabelElement> {
+    tag: Tag;
+    questionFilters: Tag[];
+    setQuestionFilters: React.Dispatch<React.SetStateAction<Tag[]>>;
+    tagCounts?: Record<string, number>;
+}
+
+const FilterDropdownBase = (props: FilterCheckboxBaseProps) => {
+    const { id, checked, onInputChange, filterTitle, count, ...rest } = props;
+    return <Label {...rest} className="d-flex align-items-center filters-checkbox py-2 mb-1">
+        <Input id={`problem-search-${id}`} type="checkbox" checked={checked ?? false} onChange={onInputChange} />
+        <span className="ms-3">{filterTitle}</span>
+        {isDefined(count) && <span className="badge rounded-pill ms-2">{count}</span>}
+    </Label>;
+};
+
+const FilterDropdown = (props : FilterDropdownProps) => {
+    const {tag, questionFilters, setQuestionFilters, tagCounts, ...rest} = props;
+    const [checked, setChecked] = useState(questionFilters.includes(tag));
+
+    useEffect(() => {
+        setChecked(questionFilters.includes(tag));
+    }, [questionFilters, tag]);
+
+    return <FilterDropdownBase {...rest} id={tag.id} checked={checked} 
+        onInputChange={(e: ChangeEvent<HTMLInputElement>) => setQuestionFilters(f => e.target.checked ? [...f, tag] : f.filter(c => c !== tag))}
+        filterTitle={tag.title} count={tagCounts && isDefined(tagCounts[tag.id]) ? tagCounts[tag.id] : undefined}
+    />;
+};
+
 interface QuestionFinderSidebarProps extends SidebarProps {
     searchText: string;
     setSearchText: React.Dispatch<React.SetStateAction<string>>;
     questionFilters: Tag[];
     setQuestionFilters: React.Dispatch<React.SetStateAction<Tag[]>>;
-    applicableTags: Tag[];
+    topLevelFilters: string[];
     tagCounts?: Record<string, number>;
+    questionFinderFilterPanelProps: QuestionFinderFilterPanelProps
 }
 
 export const QuestionFinderSidebar = (props: QuestionFinderSidebarProps) => {
-    const { searchText, setSearchText, questionFilters, setQuestionFilters, applicableTags, tagCounts, ...rest } = props;
+    const { searchText, setSearchText, questionFilters, setQuestionFilters, topLevelFilters, tagCounts, questionFinderFilterPanelProps, ...rest } = props;
 
     const pageContext = useAppSelector(selectors.pageContext.context);
 
@@ -309,14 +341,11 @@ export const QuestionFinderSidebar = (props: QuestionFinderSidebarProps) => {
             onChange={(e: ChangeEvent<HTMLInputElement>) => setSearchText(e.target.value)}
         />
 
-        <div className="section-divider"/>
-
-        <div className="d-flex flex-column">
-            <h5>Filter questions by</h5>
-            <AllFiltersCheckbox conceptFilters={questionFilters} setConceptFilters={setQuestionFilters} tagCounts={tagCounts} />
-            <div className="section-divider-small"/>
-            {applicableTags.map(tag => <FilterCheckbox key={tag.id} tag={tag} conceptFilters={questionFilters} setConceptFilters={setQuestionFilters} tagCounts={tagCounts}/>)}
-        </div>
+        
+        <QuestionFinderFilterPanel {...questionFinderFilterPanelProps} />
+        {/*<AllFiltersCheckbox conceptFilters={questionFilters} setConceptFilters={setQuestionFilters} tagCounts={tagCounts} /> */}
+        {/*{topLevelFilters.map(filter => <FilterDropdown key={filter.id} tag={tag} conceptFilters={questionFilters} setConceptFilters={setQuestionFilters} tagCounts={tagCounts}/>)}*/}
+        
 
         <div className="section-divider"/>
 

src/app/components/elements/list-groups/ContentSummaryListGroupItem.tsx

@@ -73,22 +73,22 @@ export const ContentSummaryListGroupItem = ({item, search, showBreadcrumb, noCar
         case CompletionState.IN_PROGRESS:
             questionIconLabel = "In progress question icon";
             questionIcon = siteSpecific(
-                <svg className={iconClasses} aria-label={questionIconLabel}><use href={`/assets/phy/icons/incomplete-hex.svg#icon`} xlinkHref={`/assets/phy/icons/incomplete-hex.svg#icon`}/></svg>,
+                <svg style={{width: "60px", height: "60px"}} className={iconClasses} aria-label={questionIconLabel}><use href={`/assets/phy/icons/incomplete-hex.svg#icon`} xlinkHref={`/assets/phy/icons/incomplete-hex.svg#icon`}/></svg>,
                 <img src="/assets/common/icons/incorrect.svg" alt={questionIconLabel}/>
             );
             break;
         case CompletionState.ALL_CORRECT:
             questionIconLabel = "Complete question icon";
             questionIcon = siteSpecific(
-                <svg className={iconClasses} aria-label={questionIconLabel}><use href={`/assets/phy/icons/tick-rp-hex.svg#icon`} xlinkHref={`/assets/phy/icons/tick-rp-hex.svg#icon`}/></svg>,
+                <svg style={{width: "60px", height: "60px"}}  className={iconClasses} aria-label={questionIconLabel}><use href={`/assets/phy/icons/tick-rp-hex.svg#icon`} xlinkHref={`/assets/phy/icons/tick-rp-hex.svg#icon`}/></svg>,
                 <img src="/assets/common/icons/completed.svg" alt={questionIconLabel}/>
             );
             break;
         case CompletionState.NOT_ATTEMPTED:
         default:
             questionIconLabel = "Not attempted question icon";
             questionIcon = siteSpecific(
-                <svg className={iconClasses} aria-label={questionIconLabel}><use href={`/assets/phy/icons/question-hex.svg#icon`} xlinkHref={`/assets/phy/icons/question-hex.svg#icon`}/></svg>,
+                <svg style={{width: "60px", height: "60px"}}  className={iconClasses} aria-label={questionIconLabel}><use href={`/assets/phy/icons/question-hex.svg#icon`} xlinkHref={`/assets/phy/icons/question-hex.svg#icon`}/></svg>,
                 <img src="/assets/common/icons/not-started.svg" alt={questionIconLabel}/>
             );
             break;

src/app/components/elements/panels/QuestionFinderFilterPanel.tsx

@@ -117,7 +117,7 @@ const listTitles: { [field in keyof TopLevelListsState]: string } = {
     questionStatus: siteSpecific("Status", "Question status")
 };
 
-interface QuestionFinderFilterPanelProps {
+export interface QuestionFinderFilterPanelProps {
     searchDifficulties: Difficulty[]; setSearchDifficulties: Dispatch<SetStateAction<Difficulty[]>>;
     searchTopics: string[], setSearchTopics: Dispatch<SetStateAction<string[]>>;
     searchStages: STAGE[], setSearchStages: Dispatch<SetStateAction<STAGE[]>>;
@@ -165,36 +165,40 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
         }
     };
 
-    return <Card>
+    return <div className={classNames({"card": isAda})}>
         <CardHeader className="finder-header pl-3" onClick={(e) => {
             // the filters panel can only be collapsed when it is not a sidebar
             // (changing screen size after collapsing does not re-expand it but the options become visible)
             if (below["md"](deviceSize)) handleFilterPanelExpansion(e);
         }}>
-            <div>
-                <img
-                    src="/assets/common/icons/filter-icon.svg"
-                    alt="Filter"
-                    style={{width: 18}}
-                    className="ms-1 me-2"
-                />
-                <b>Filter by</b>
-            </div>
-            <Spacer/>
-            {validFiltersSelected && <div className="pe-1 pe-lg-0">
-                <button
-                    className={"text-black pe-lg-0 py-0 me-2 me-lg-0 bg-white bg-opacity-10 btn-link"}
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        clearFilters();
-                    }}
-                >
-                    Clear all
-                </button>
-            </div>}
-            {below["md"](deviceSize) && <div>
+            {siteSpecific(
+                <h6>Filter questions by</h6>,
+                <>
+                    <div>
+                        <img
+                            src="/assets/common/icons/filter-icon.svg"
+                            alt="Filter"
+                            style={{width: 18}}
+                            className="ms-1 me-2"
+                        />
+                        <b>Filter by</b>
+                    </div>
+                    <Spacer/>
+                    {validFiltersSelected && <div className="pe-1 pe-lg-0">
+                        <button
+                            className={classNames("text-black pe-lg-0 py-0 me-2 me-lg-0 bg-opacity-10 btn-link", {"bg-white": isAda})}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                clearFilters();
+                            }}
+                        >
+                            Clear all
+                        </button>
+                    </div>}
+                </>)}
+            {below["md"](deviceSize) && isAda && <div>
                 <button
-                    className="bg-white bg-opacity-10 p-0"
+                    className="bg-opacity-10 p-0 bg-white"
                     onClick={handleFilterPanelExpansion}
                 >
                     <img
@@ -207,14 +211,14 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                 </button>
             </div>}
         </CardHeader>
-        <CardBody className={classNames("p-0 m-0", {"d-none": below["md"](deviceSize) && !filtersVisible})}>
+        <CardBody className={classNames("p-0 m-0", {"d-none": isAda && below["md"](deviceSize) && !filtersVisible})}>
             <CollapsibleList
                 title={listTitles.stage} expanded={listState.stage.state}
                 toggle={() => listStateDispatch({type: "toggle", id: "stage", focus: below["md"](deviceSize)})}
                 numberSelected={(isAda && searchStages.includes(STAGE.ALL)) ? searchStages.length - 1 : searchStages.length}
             >
                 {getFilteredStageOptions().map((stage, index) => (
-                    <div className="w-100 ps-3 py-1 bg-white" key={index}>
+                    <div className={classNames("w-100 ps-3 py-1", {"bg-white": isAda})} key={index}>
                         <StyledCheckbox
                             color="primary"
                             checked={searchStages.includes(stage.value)}
@@ -230,7 +234,7 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                 numberSelected={searchExamBoards.length}
             >
                 {getFilteredExamBoardOptions({byStages: searchStages}).map((board, index) => (
-                    <div className="w-100 ps-3 py-1 bg-white" key={index}>
+                    <div className={classNames("w-100 ps-3 py-1", {"bg-white": isAda})} key={index}>
                         <StyledCheckbox
                             color="primary"
                             checked={searchExamBoards.includes(board.value)}
@@ -263,7 +267,7 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                             toggle={() => listStateDispatch({type: "toggle", id: `topics ${sublistDelimiter} ${tag.label}`, focus: true})}
                         >
                             {tag.options.map((topic, index) => (
-                                <div className="w-100 ps-3 py-1 bg-white" key={index}>
+                                <div className={classNames("w-100 ps-3 py-1", {"bg-white": isAda})} key={index}>
                                     <StyledCheckbox
                                         color="primary"
                                         checked={searchTopics.includes(topic.value)}
@@ -288,15 +292,15 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                 numberSelected={searchDifficulties.length}
             >
                 <button
-                    className="p-0 bg-white h-min-content btn-link d-flex ps-3 py-2"
+                    className={classNames("p-0 h-min-content btn-link d-flex ps-3 py-2", {"bg-white": isAda, "bg-transparent": isPhy})}
                     onClick={(e) => {
                         e.preventDefault();
                         dispatch(openActiveModal(questionFinderDifficultyModal()));
                     }}>
                     <b className="small text-start">{siteSpecific("Learn more about difficulty levels", "What do the difficulty levels mean?")}</b>
                 </button>
                 {SIMPLE_DIFFICULTY_ITEM_OPTIONS.map((difficulty, index) => (
-                    <div className="w-100 ps-3 py-1 bg-white" key={index}>
+                    <div className={classNames("w-100 ps-3 py-1", {"bg-white": isAda})} key={index}>
                         <StyledCheckbox
                             color="primary"
                             checked={searchDifficulties.includes(difficulty.value)}
@@ -307,7 +311,7 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                             )}
                             label={<div className="d-flex align-items-center">
                                 <span className="me-2">{difficulty.label}</span>
-                                <DifficultyIcons difficulty={difficulty.value} blank className="mt-n2"/>
+                                <DifficultyIcons difficulty={difficulty.value} blank className={classNames({"mt-n2": isAda, "mt-2": isPhy})}/>
                             </div>}
                         />
                     </div>
@@ -319,7 +323,7 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                 numberSelected={excludeBooks ? 1 : searchBooks.length}
             >
                 <>
-                    <div className="w-100 ps-3 py-1 bg-white">
+                    <div className={classNames("w-100 ps-3 py-1", {"bg-white": isAda})}>
                         <StyledCheckbox
                             color="primary"
                             checked={excludeBooks}
@@ -328,7 +332,7 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                         />
                     </div>
                     {bookOptions.map((book, index) => (
-                        <div className="w-100 ps-3 py-1 bg-white" key={index}>
+                        <div className={classNames("w-100 ps-3 py-1", {"bg-white": isAda})} key={index}>
                             <StyledCheckbox
                                 color="primary" disabled={excludeBooks}
                                 checked={searchBooks.includes(book.value) && !excludeBooks}
@@ -348,7 +352,7 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                 toggle={() => listStateDispatch({type: "toggle", id: "questionStatus", focus: below["md"](deviceSize)})}
                 numberSelected={Object.values(searchStatuses).reduce((acc, item) => acc + item, 0)}
             >
-                <div className="w-100 ps-3 py-1 bg-white d-flex align-items-center">
+                <div className={classNames("w-100 ps-3 py-1 d-flex align-items-center", {"bg-white": isAda})}>
                     <StyledCheckbox
                         color="primary"
                         checked={searchStatuses.notAttempted}
@@ -371,7 +375,7 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                         </div>}
                     />
                 </div>
-                <div className="w-100 ps-3 py-1 bg-white d-flex align-items-center">
+                <div className={classNames("w-100 ps-3 py-1 d-flex align-items-center", {"bg-white": isAda})}>
                     <StyledCheckbox
                         color="primary"
                         checked={searchStatuses.complete}
@@ -394,7 +398,7 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                         </div>}
                     />
                 </div>
-                <div className="w-100 ps-3 py-1 bg-white d-flex align-items-center">
+                <div className={classNames("w-100 ps-3 py-1 d-flex align-items-center", {"bg-white": isAda})}>
                     <StyledCheckbox
                         color="primary"
                         checked={searchStatuses.tryAgain}
@@ -442,14 +446,14 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                     </span>}
                 />
             </div>}*/}
-            <Col className="text-center py-3 filter-btn bg-white border-radius-2">
+            {isAda && <Col className="text-center py-3 filter-btn bg-white border-radius-2">
                 <Button onClick={() => {
                     applyFilters();
                     setSearchDisabled(true);
                 }} disabled={searchDisabled}>
                     Apply filters
                 </Button>
-            </Col>
+            </Col>}
         </CardBody>
-    </Card>;
+    </div>;
 }