From 802e3c8222c376a263f92647695bded0b294026d Mon Sep 17 00:00:00 2001 From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Mon, 19 Aug 2024 18:00:01 +0800 Subject: [PATCH 1/5] Make columns resizable --- .../academy/grading/subcomponents/GradingSubmissionsTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx index f1f1e87bde..a7dbe2c3c7 100644 --- a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx +++ b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx @@ -103,7 +103,7 @@ const GradingSubmissionTable: React.FC = ({ const defaultColumnDefs: ColDef = { filter: false, - resizable: false, + resizable: true, sortable: true, headerComponentParams: { hideColumn: (id: ColumnNameKeys) => handleColumnFilterAdd(id), From 7348c8e9df7aa49ee3dd0332d2c97a2294226a7c Mon Sep 17 00:00:00 2001 From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Mon, 19 Aug 2024 18:15:50 +0800 Subject: [PATCH 2/5] Add floating filter row --- .../academy/grading/subcomponents/GradingSubmissionsTable.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx index a7dbe2c3c7..61bad1ab28 100644 --- a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx +++ b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx @@ -103,6 +103,7 @@ const GradingSubmissionTable: React.FC = ({ const defaultColumnDefs: ColDef = { filter: false, + floatingFilter: true, resizable: true, sortable: true, headerComponentParams: { From 3095a5faab00304406be27f5163757cf640215e3 Mon Sep 17 00:00:00 2001 From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Mon, 19 Aug 2024 18:16:52 +0800 Subject: [PATCH 3/5] Simplify height logic --- src/features/grading/GradingTypes.ts | 1 - src/pages/academy/grading/Grading.tsx | 4 ++-- .../grading/subcomponents/GradingSubmissionsTable.tsx | 11 ++--------- 3 files changed, 4 insertions(+), 12 deletions(-) diff --git a/src/features/grading/GradingTypes.ts b/src/features/grading/GradingTypes.ts index bb9f4c667c..4a588fa388 100644 --- a/src/features/grading/GradingTypes.ts +++ b/src/features/grading/GradingTypes.ts @@ -163,7 +163,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 61bad1ab28..5400bfc626 100644 --- a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx +++ b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx @@ -143,8 +143,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' }; @@ -393,13 +391,7 @@ const GradingSubmissionTable: React.FC = ({ > -
+
= ({ suppressMenuHide={tableProperties.suppressMenuHide} suppressPaginationPanel={tableProperties.suppressPaginationPanel} suppressRowClickSelection={tableProperties.suppressRowClickSelection} + domLayout="autoHeight" />
From a412dd01757eb9bc7fdee7757d1785daaaa2668c Mon Sep 17 00:00:00 2001 From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Mon, 19 Aug 2024 18:42:01 +0800 Subject: [PATCH 4/5] Add filtering by name, username, and group --- src/features/grading/GradingTypes.ts | 5 +--- .../subcomponents/GradingSubmissionsTable.tsx | 27 +++++++++++++++++-- .../gradingSubmissionsTableUtils.tsx | 3 +++ 3 files changed, 29 insertions(+), 6 deletions(-) diff --git a/src/features/grading/GradingTypes.ts b/src/features/grading/GradingTypes.ts index 4a588fa388..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[]; diff --git a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx index 5400bfc626..d4751096f8 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 : [] ); @@ -161,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 = {}; @@ -175,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 : ''; @@ -410,6 +414,25 @@ const GradingSubmissionTable: React.FC = ({ 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: + console.log(query); + 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 From 59421b029fe484b126e584196b3e4b39322a0e7a Mon Sep 17 00:00:00 2001 From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Mon, 19 Aug 2024 19:05:04 +0800 Subject: [PATCH 5/5] Remove log statement --- .../academy/grading/subcomponents/GradingSubmissionsTable.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx index d4751096f8..0be42cefed 100644 --- a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx +++ b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx @@ -426,7 +426,6 @@ const GradingSubmissionTable: React.FC = ({ case ColumnFields.studentName: case ColumnFields.studentUsername: case ColumnFields.groupName: - console.log(query); cellFilters.push({ id: key, value: query }); break; }