[LanguageCenter] Add a course name/code filter

Author: iritmaximus

services/frontend/src/components/ColorizedCoursesTable/FacultiesTab/index.jsx

@@ -1,9 +1,11 @@
+import { getFilteredRowModel } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
 import {
   calculateTotals,
   emptyFields,
   useColorizedCoursesTableContext,
+  CourseFilter,
 } from '@/components/ColorizedCoursesTable/common'
 import '@/components/ColorizedCoursesTable/index.css'
 import {
@@ -14,6 +16,7 @@ import {
 import { useLanguage } from '@/components/LanguagePicker/useLanguage'
 import { OodiTable } from '@/components/OodiTable'
 import { OodiTableExcelExport } from '@/components/OodiTable/excelExport'
+import { useDebouncedState } from '@/hooks/debouncedState'
 import { useGetFacultiesQuery } from '@/redux/facultyStats'
 import { useColumns } from './logic'
 
@@ -24,6 +27,8 @@ export const FacultiesTab = () => {
   const { getTextIn } = useLanguage()
   const facultyQuery = useGetFacultiesQuery()
 
+  const [courseFilter, setCourseFilter] = useDebouncedState('', 250)
+
   const facultyMap = useMemo(
     () =>
       facultyQuery.data?.reduce((obj, cur) => {
@@ -91,7 +96,10 @@ export const FacultiesTab = () => {
     initialState: { columnPinning: { left: ['Course'] } },
     state: {
       useZebrastripes: colorMode === 'none',
+      columnFilters: [{ id: 'Course', value: courseFilter }],
     },
+    onColumnFiltersChange: setCourseFilter,
+    getFilteredRowModel: getFilteredRowModel(),
   }
 
   return (
@@ -106,7 +114,12 @@ export const FacultiesTab = () => {
         cy="ooditable-faculties"
         data={tableData}
         options={tableOptions}
-        toolbarContent={<OodiTableExcelExport data={excelData} exportColumnKeys={cols.map(({ id }) => id)} />}
+        toolbarContent={
+          <>
+            <OodiTableExcelExport data={excelData} exportColumnKeys={cols.map(({ id }) => id)} />
+            <CourseFilter setCourseFilter={setCourseFilter} />
+          </>
+        }
       />
     </div>
   )

services/frontend/src/components/ColorizedCoursesTable/FacultiesTab/logic.jsx

@@ -37,6 +37,12 @@ export const useColumns = (getTextIn, faculties, numberMode, colorMode, facultyM
         },
         aggregationRows: () => [{ id: 'total', value: undefined }],
         aggregatedCell: () => <CourseContainer code="Total" getTextIn={getTextIn} name={{ en: 'All courses total' }} />,
+        // TODO: pls DRY. This is same as in SemesterTab
+        filterFn: (row, columnId, filterValue) => {
+          const { code, name } = row.original
+          // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+          return code.toLowerCase().includes(filterValue) || getTextIn(name).toLowerCase().includes(filterValue)
+        },
       }),
       columnHelper.accessor('total-column', {
         id: 'Total',

services/frontend/src/components/ColorizedCoursesTable/SemestersTab/index.jsx

@@ -1,9 +1,11 @@
+import { getFilteredRowModel } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
 import {
   calculateNewTotalColumnValues,
   calculateTotals,
   useColorizedCoursesTableContext,
+  CourseFilter,
 } from '@/components/ColorizedCoursesTable/common'
 import {
   ColorModeSelector,
@@ -14,11 +16,13 @@ import '@/components/ColorizedCoursesTable/index.css'
 import { useLanguage } from '@/components/LanguagePicker/useLanguage'
 import { OodiTable } from '@/components/OodiTable'
 import { OodiTableExcelExport } from '@/components/OodiTable/excelExport'
+import { useDebouncedState } from '@/hooks/debouncedState'
 import { useColumns } from './logic'
 
 export const SemestersTab = () => {
   const { getTextIn } = useLanguage()
   const { semesters, numberMode, colorMode, selectedSemesters, data } = useColorizedCoursesTableContext()
+  const [courseFilter, setCourseFilter] = useDebouncedState('', 250)
 
   const totalRow = useMemo(() => {
     if (!data) return {}
@@ -50,10 +54,13 @@ export const SemestersTab = () => {
   )
 
   const tableOptions = {
-    initialState: { columnPinning: { left: ['code'] } },
+    initialState: { columnPinning: { left: ['Course'] } },
     state: {
       useZebrastripes: colorMode === 'none',
+      columnFilters: [{ id: 'Course', value: courseFilter }],
     },
+    onColumnFiltersChange: setCourseFilter,
+    getFilteredRowModel: getFilteredRowModel(),
   }
 
   return (
@@ -68,7 +75,12 @@ export const SemestersTab = () => {
         cy="ooditable-semesters"
         data={tableData}
         options={tableOptions}
-        toolbarContent={<OodiTableExcelExport data={excelData} exportColumnKeys={cols.map(({ header }) => header)} />}
+        toolbarContent={
+          <>
+            <OodiTableExcelExport data={excelData} exportColumnKeys={cols.map(({ header }) => header)} />
+            <CourseFilter setCourseFilter={setCourseFilter} />
+          </>
+        }
       />
     </div>
   )

services/frontend/src/components/ColorizedCoursesTable/SemestersTab/logic.jsx

@@ -20,13 +20,20 @@ export const useColumns = (getTextIn, semesters, numberMode, colorMode, allTotal
   return useMemo(
     () => [
       columnHelper.accessor('code', {
+        id: 'Course',
         header: 'Course',
         cell: ({ row }) => {
           const { code, name } = row.original
           return <CourseContainer code={code} getTextIn={getTextIn} name={name} />
         },
         aggregationRows: () => [{ id: 'total', value: undefined }],
         aggregatedCell: () => <CourseContainer code="Total" getTextIn={getTextIn} name={{ en: 'All courses total' }} />,
+        // TODO: pls DRY. This is same as in FacultiesTab
+        filterFn: (row, columnId, filterValue) => {
+          const { code, name } = row.original
+          // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+          return code.toLowerCase().includes(filterValue) || getTextIn(name).toLowerCase().includes(filterValue)
+        },
       }),
       columnHelper.accessor('all', {
         header: 'Total',

…mponents/ColorizedCoursesTable/common.js …ponents/ColorizedCoursesTable/common.jsxservices/frontend/src/components/ColorizedCoursesTable/common.js renamed to services/frontend/src/components/ColorizedCoursesTable/common.jsx services/frontend/src/components/ColorizedCoursesTable/common.js renamed to services/frontend/src/components/ColorizedCoursesTable/common.jsx

@@ -1,4 +1,5 @@
-import { createContext, useContext } from 'react'
+import TextField from '@mui/material/TextField'
+import { createContext, useContext, useState, useEffect } from 'react'
 
 export const ColorizedCoursesTableContext = createContext(null)
 
@@ -82,3 +83,15 @@ export const getColor = (stats, columnAmount, colorMode, numberMode, courseTotal
     backgroundColor: `rgba(${color},${Math.min(1.0, relativeAlphaValue)}) !important`,
   }
 }
+
+// NOTE: Give setCourseFilter as a useDebouncedState to make the text box work nicely
+export const CourseFilter = ({ setCourseFilter }) => {
+  const [textField, setTextField] = useState('')
+  useEffect(() => {
+    setCourseFilter(textField)
+  }, [textField])
+
+  return (
+    <TextField label="Course name/code filter" onChange={event => setTextField(event.target.value)} value={textField} />
+  )
+}