feat: Filters

asuc-octo · Apr 25, 2024 · 3f63ced · 3f63ced
1 parent 0d5ccf4
commit 3f63ced
Show file tree

Hide file tree

Showing 20 changed files with 750 additions and 299 deletions.
diff --git a/backend/src/modules/catalog/controller.ts b/backend/src/modules/catalog/controller.ts
@@ -7,7 +7,7 @@ import { CourseModel, CourseType } from "../../models/course";
 import { SectionModel } from "../../models/section";
 import { formatClass, formatCourse, formatSection } from "./formatter";
 import { getCourseKey, getCsCourseId } from "../../utils/course";
-import { isNil } from "lodash";
+import { isNil, some } from "lodash";
 import { GraphQLResolveInfo } from "graphql";
 import { getChildren } from "../../utils/graphql";
 
@@ -24,8 +24,8 @@ export async function getCatalog(term: TermInput, info: GraphQLResolveInfo): Pro
     const classes = await ClassModel
         .find({
             "session.term.name": termToString(term),
-            "aggregateEnrollmentStatus.maxEnroll": { $gt: 0 },
-            "anyPrintInScheduleOfClasses": true
+            // "aggregateEnrollmentStatus.maxEnroll": { $gt: 0 },
+            anyPrintInScheduleOfClasses: true
         })
         .lean()
 
@@ -44,7 +44,7 @@ export async function getCatalog(term: TermInput, info: GraphQLResolveInfo): Pro
                     filter by fromDate and then sort to find the
                     most recent course.
                 */
-                fromDate: { $lte: getTermStartMonth(term) },
+                // fromDate: { $lte: getTermStartMonth(term) },
             },
             {
                 _updatedAt: 1,
@@ -162,8 +162,6 @@ export async function getCatalog(term: TermInput, info: GraphQLResolveInfo): Pro
         catalog[id].classes = catalog[id].classes.filter((c: any) => c.primarySection?.ccn)
 
         if (catalog[id].classes.length === 0) {
-            console.log("delete")
-
             delete catalog[id]
         }
     }

diff --git a/backend/src/modules/catalog/typedefs/catalog.ts b/backend/src/modules/catalog/typedefs/catalog.ts
@@ -101,8 +101,8 @@ type Section {
 }
 
 type Instructor {
-    familyName: String!
-    givenName: String!
+    familyName: String
+    givenName: String
 }
 
 type EnrollmentDay {

diff --git a/frontend/package.json b/frontend/package.json
@@ -16,6 +16,7 @@
 		"@radix-ui/react-checkbox": "^1.0.4",
 		"@radix-ui/react-dialog": "^1.0.5",
 		"@radix-ui/react-hover-card": "^1.0.7",
+		"@radix-ui/react-scroll-area": "^1.0.5",
 		"@radix-ui/react-select": "^2.0.0",
 		"@radix-ui/react-tooltip": "^1.0.7",
 		"@shopify/draggable": "^1.1.3",

diff --git a/frontend/src/app/Catalog/Class/Sections/index.tsx b/frontend/src/app/Catalog/Class/Sections/index.tsx
@@ -45,9 +45,7 @@ export default function Sections({
       <div className={styles.root}>
         <div className={styles.menu}>
           {types.map((type) => (
-            <div className={styles.item}>
-              {type === "Laboratory" ? "Lab" : "Discussion"}s
-            </div>
+            <div className={styles.item}>{type}</div>
           ))}
         </div>
         <div className={styles.view}>
@@ -56,8 +54,7 @@ export default function Sections({
               <div className={styles.header}>
                 <div className={styles.text}>
                   <p className={styles.title}>
-                    {section.kind === "Laboratory" ? "Lab" : section.kind}{" "}
-                    {section.number}
+                    {section.kind} {section.number}
                   </p>
                   <CCN ccn={section.ccn} />
                 </div>

diff --git a/frontend/src/app/Schedules/Calendar/Event/index.tsx b/frontend/src/app/Schedules/Calendar/Event/index.tsx
@@ -5,7 +5,6 @@ import classNames from "classnames";
 
 import { ISection } from "@/lib/api";
 import { getY } from "@/lib/schedule";
-import { kinds } from "@/lib/section";
 
 import styles from "./Event.module.scss";
 
@@ -47,7 +46,7 @@ export default function Event({
             {course.subject} {course.number}
           </div>
           <div className={styles.description}>
-            {kinds[kind]?.name ?? kind} {number}
+            {kind} {number}
           </div>
         </div>
       </HoverCard.Trigger>

diff --git a/frontend/src/app/Schedules/SideBar/Class/index.tsx b/frontend/src/app/Schedules/SideBar/Class/index.tsx
@@ -6,7 +6,6 @@ import AverageGrade from "@/components/AverageGrade";
 import Capacity from "@/components/Capacity";
 import Units from "@/components/Units";
 import { IClass, ISection } from "@/lib/api";
-import { kinds } from "@/lib/section";
 
 import styles from "./Class.module.scss";
 import Section from "./Section";
@@ -35,7 +34,7 @@ export default function Class({
   onSectionMouseOver,
   onSectionMouseOut,
 }: ClassProps & IClass) {
-  const groups = useMemo(
+  const kinds = useMemo(
     () => Array.from(new Set(sections.map((section) => section.kind))),
     [sections]
   );
@@ -83,9 +82,7 @@ export default function Class({
         </div>
         {expanded && (
           <div className={styles.group}>
-            <p className={styles.label}>
-              {kinds[primarySection.kind]?.name ?? primarySection.kind}
-            </p>
+            <p className={styles.label}>{primarySection.kind}</p>
             <Section
               active={selectedSections.some(
                 (selectedSection) => selectedSection.ccn === primarySection.ccn
@@ -97,14 +94,14 @@ export default function Class({
           </div>
         )}
         {expanded &&
-          groups.map((group) => {
+          kinds.map((kind) => {
             const sortedSections = sections
-              .filter((section) => section.kind === group)
+              .filter((section) => section.kind === kind)
               .sort((a, b) => a.number.localeCompare(b.number));
 
             return (
-              <div className={styles.group} key={group}>
-                <p className={styles.label}>{kinds[group]?.name ?? group}</p>
+              <div className={styles.group} key={kind}>
+                <p className={styles.label}>{kind}</p>
                 {sortedSections.map((section) => {
                   const active = selectedSections.some(
                     (selectedSection) => selectedSection.ccn === section.ccn

diff --git a/frontend/src/components/Browser/Filters/Filters.module.scss b/frontend/src/components/Browser/Filters/Filters.module.scss
@@ -2,9 +2,6 @@
   width: 384px;
   flex-shrink: 0;
   overflow: auto;
-  padding: 24px;
-  display: flex;
-  flex-direction: column;
   background-color: var(--foreground-color);
 
   &:not(.block) {
@@ -16,53 +13,100 @@
   }
 
   &.overlay {
-    padding-top: 72px;
     position: absolute;
     height: 100%;
-    z-index: 1;
-  }
+    z-index: 2;
 
-  .label {
-    font-size: 14px;
-    color: var(--label-color);
-    line-height: 1;
-    margin-bottom: 12px;
+    .header {
+      padding: 12px 12px 24px;
+    }
 
-    &:not(:first-child) {
-      margin-top: 24px;
+    .body {
+      padding-top: 0;
     }
   }
 
-  .row {
+  .body {
     display: flex;
-    align-items: center;
-    gap: 12px;
+    flex-direction: column;
+    padding: 24px;
 
-    & + .row {
+    .button {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 14px;
+      color: var(--blue-500);
+      line-height: 1;
+      cursor: pointer;
+      font-weight: 500;
       margin-top: 12px;
+      transition: all 100ms ease-in-out;
+
+      &:hover {
+        color: var(--blue-600);
+      }
     }
 
-    .description {
+    .label {
       font-size: 14px;
-      color: var(--paragraph-color);
-      font-weight: 500;
+      color: var(--label-color);
       line-height: 1;
+      margin-bottom: 12px;
+
+      &:not(:first-child) {
+        margin-top: 24px;
+      }
     }
 
-    .checkbox {
-      width: 16px;
-      height: 16px;
-      display: grid;
-      place-items: center;
-      border-radius: 4px;
+    .filter {
+      display: flex;
+      align-items: center;
+      gap: 12px;
 
-      &[data-state="checked"] {
-        background-color: var(--blue-500);
-        color: white;
+      & + .filter {
+        margin-top: 12px;
       }
 
-      &[data-state="unchecked"] {
-        border: 2px solid var(--border-color);
+      &:hover .text .value {
+        color: var(--heading-color);
+      }
+
+      &:hover .checkbox:not([data-state="checked"]) {
+        border-color: var(--heading-color);
+      }
+
+      .text {
+        font-size: 14px;
+        color: var(--label-color);
+        line-height: 1;
+        flex-grow: 1;
+
+        .value {
+          font-weight: 500;
+          color: var(--paragraph-color);
+        }
+      }
+
+      .checkbox {
+        width: 16px;
+        height: 16px;
+        display: grid;
+        place-items: center;
+        border-radius: 4px;
+
+        &[data-state="checked"] {
+          background-color: var(--blue-500);
+          color: white;
+
+          & + .text .value {
+            color: var(--heading-color);
+          }
+        }
+
+        &[data-state="unchecked"] {
+          border: 2px solid var(--paragraph-color);
+        }
       }
     }
   }