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