diff --git a/src/features/grading/GradingTypes.ts b/src/features/grading/GradingTypes.ts index bb9f4c667c..04c1364c19 100644 --- a/src/features/grading/GradingTypes.ts +++ b/src/features/grading/GradingTypes.ts @@ -81,10 +81,7 @@ export type AllColsSortStates = { export type ColumnFiltersState = ColumnFilter[]; -export type ColumnFilter = { - id: string; - value: unknown; -}; +export type ColumnFilter = { id: string; value: unknown }; export type GradingColumnVisibility = ColumnFieldsKeys[]; @@ -163,7 +160,6 @@ export type IGradingTableProperties = { suppressMenuHide: boolean; suppressPaginationPanel: boolean; suppressRowClickSelection: boolean; - tableHeight: string; tableMargins: string; }; diff --git a/src/pages/academy/grading/Grading.tsx b/src/pages/academy/grading/Grading.tsx index c8924c14bc..4685546f1e 100644 --- a/src/pages/academy/grading/Grading.tsx +++ b/src/pages/academy/grading/Grading.tsx @@ -153,7 +153,7 @@ const Grading: React.FC = () => { gradingOverviews?.data === undefined ? ( loadingDisplay ) : ( - +
@@ -218,7 +218,7 @@ const Grading: React.FC = () => { submissions={submissions} updateEntries={updateGradingOverviewsCallback} /> - +
) } fullWidth diff --git a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx index f1f1e87bde..0be42cefed 100644 --- a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx +++ b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx @@ -90,6 +90,7 @@ const GradingSubmissionTable: React.FC = ({ const [columnFilters, setColumnFilters] = useState([ ...tableFilters.columnFilters ]); + const [cellFilters, setCellFilters] = useState<{ id: ColumnFields; value: string }[]>([]); const [hiddenColumns, setHiddenColumns] = useState( columnVisibility ? columnVisibility : [] ); @@ -103,7 +104,8 @@ const GradingSubmissionTable: React.FC = ({ const defaultColumnDefs: ColDef = { filter: false, - resizable: false, + floatingFilter: true, + resizable: true, sortable: true, headerComponentParams: { hideColumn: (id: ColumnNameKeys) => handleColumnFilterAdd(id), @@ -142,8 +144,6 @@ const GradingSubmissionTable: React.FC = ({ suppressMenuHide: true, suppressPaginationPanel: true, suppressRowClickSelection: true, - tableHeight: - String(ROW_HEIGHT * (rowData.length > 0 ? rowData.length : 2) + HEADER_HEIGHT + 4) + 'px', tableMargins: '1rem 0 0 0' }; @@ -162,11 +162,14 @@ const GradingSubmissionTable: React.FC = ({ debouncedUpdateSearchValue(e.target.value); }; + const debouncedUpdateCellFilters = useMemo(() => debounce(setCellFilters, 300), []); + // Converts the columnFilters array into backend query parameters. const backendFilterParams = useMemo(() => { const filters: Array<{ [key: string]: any }> = [ { id: ColumnFields.assessmentName, value: searchValue }, - ...columnFilters + ...columnFilters, + ...cellFilters ].map(convertFilterToBackendParams); const params: Record = {}; @@ -176,7 +179,7 @@ const GradingSubmissionTable: React.FC = ({ }); }); return params; - }, [columnFilters, searchValue]); + }, [cellFilters, columnFilters, searchValue]); const cellClickedEvent = (event: CellClickedEvent) => { const colClicked: string = event.colDef.field ? event.colDef.field : ''; @@ -392,13 +395,7 @@ const GradingSubmissionTable: React.FC = ({ >
-
+
= ({ suppressMenuHide={tableProperties.suppressMenuHide} suppressPaginationPanel={tableProperties.suppressPaginationPanel} suppressRowClickSelection={tableProperties.suppressRowClickSelection} + domLayout="autoHeight" + onFilterChanged={e => { + if (!e.afterFloatingFilter) { + return; + } + const filters = e.api.getFilterModel(); + const cellFilters = []; + for (const [key, { filter: query }] of Object.entries(filters)) { + switch (key) { + // Fields that BE supports filtering on + case ColumnFields.studentName: + case ColumnFields.studentUsername: + case ColumnFields.groupName: + cellFilters.push({ id: key, value: query }); + break; + } + } + debouncedUpdateCellFilters(cellFilters); + }} />
diff --git a/src/pages/academy/grading/subcomponents/gradingSubmissionsTableUtils.tsx b/src/pages/academy/grading/subcomponents/gradingSubmissionsTableUtils.tsx index c38307cc3f..57a57b20f5 100644 --- a/src/pages/academy/grading/subcomponents/gradingSubmissionsTableUtils.tsx +++ b/src/pages/academy/grading/subcomponents/gradingSubmissionsTableUtils.tsx @@ -62,6 +62,7 @@ export const generateCols = (filterMode: boolean) => { ...generalColProperties, headerName: ColumnName.studentName, field: ColumnFields.studentName, + filter: true, flex: 1.5, cellClass: classNames(generalColProperties.cellClass, classes['grading-cell-align-left']), headerClass: classNames(generalColProperties.headerClass, classes['grading-left-align']), @@ -82,6 +83,7 @@ export const generateCols = (filterMode: boolean) => { ...generalColProperties, headerName: ColumnName.studentUsername, field: ColumnFields.studentUsername, + filter: true, cellRendererSelector: (params: ICellRendererParams) => { return params.data !== undefined ? { @@ -99,6 +101,7 @@ export const generateCols = (filterMode: boolean) => { ...generalColProperties, headerName: ColumnName.groupName, field: ColumnFields.groupName, + filter: true, flex: 0.75, cellRendererSelector: (params: ICellRendererParams) => { return params.data !== undefined