From 89f1823ba87d959df2433999045f070f8bc410e6 Mon Sep 17 00:00:00 2001 From: Eric Ryu Date: Mon, 12 Jun 2023 12:07:16 -0400 Subject: [PATCH 01/13] add task weight as percentage next to task name in columns --- .../components/Page/Instructor/AggregatedGrades.jsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/Page/Instructor/AggregatedGrades.jsx b/frontend/src/components/Page/Instructor/AggregatedGrades.jsx index e3880894..14255c64 100644 --- a/frontend/src/components/Page/Instructor/AggregatedGrades.jsx +++ b/frontend/src/components/Page/Instructor/AggregatedGrades.jsx @@ -84,7 +84,8 @@ const AggregatedGrades = (props) => { // "student1": { // "task1": { // "mark": 12, - // "out_of": 57 + // "out_of": 57, + // "weight": 81 // } // } // } @@ -94,11 +95,12 @@ const AggregatedGrades = (props) => { for (const student in studentsArr) { for (const taskName in data.marks[student]) { setHeadCells((prevState) => { + const weight = data.marks[student][taskName]['weight']; const newState = { id: taskName, numeric: false, disablePadding: false, - label: taskName + label: `${taskName} (${weight}%)` }; for (const col of prevState) { if (col.id === taskName) { @@ -126,8 +128,9 @@ const AggregatedGrades = (props) => { idCounter++; return [...prevState, newRow]; }); - } - } + } // taskName iteration end + // TODO: Add a final column called Final Grades which calculates all students' final grades + } // student iteration end }, [courseId, navigate, data, isLoading, error]); const viewersRole = findRoleInCourse(courseId); From 151485652cd7476a6659396eb3e0fb5da406301f Mon Sep 17 00:00:00 2001 From: Eric Ryu Date: Mon, 12 Jun 2023 12:43:36 -0400 Subject: [PATCH 02/13] fix prop types for tableWidth --- .../General/AggregatedGradesTable/AggregatedGradesTable.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/General/AggregatedGradesTable/AggregatedGradesTable.jsx b/frontend/src/components/General/AggregatedGradesTable/AggregatedGradesTable.jsx index 1baa3dbc..531df398 100644 --- a/frontend/src/components/General/AggregatedGradesTable/AggregatedGradesTable.jsx +++ b/frontend/src/components/General/AggregatedGradesTable/AggregatedGradesTable.jsx @@ -352,7 +352,7 @@ AggregatedGradesTable.propTypes = { // Must be in form of { id: string, student: string, : string } rows: PropTypes.array.isRequired, // Adjust width of table - tableWidth: PropTypes.number.isRequired + tableWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired }; export default AggregatedGradesTable; From 168393b2572a114bbb0168461dd823e4d1ff66a4 Mon Sep 17 00:00:00 2001 From: Eric Ryu Date: Mon, 12 Jun 2023 12:50:39 -0400 Subject: [PATCH 03/13] compute final grade per student on frontend and add column for it on table --- .../Page/Instructor/AggregatedGrades.jsx | 36 +++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Page/Instructor/AggregatedGrades.jsx b/frontend/src/components/Page/Instructor/AggregatedGrades.jsx index 14255c64..40a538f0 100644 --- a/frontend/src/components/Page/Instructor/AggregatedGrades.jsx +++ b/frontend/src/components/Page/Instructor/AggregatedGrades.jsx @@ -73,6 +73,17 @@ const AggregatedGrades = (props) => { StaffApi.getAllMarks(courseId).then((res) => res.data) ); + const calculateFinalGrade = (tasks) => { + let finalGrade = 0; + for (const taskName in tasks) { + const taskData = tasks[taskName]; + const weight = taskData['weight']; + const taskScore = (taskData.mark / taskData.out_of) * weight; + finalGrade += taskScore; + } + return finalGrade; + }; + useEffect(() => { if (isLoading || error) return; // StaffApi.getAllMarks(courseId).then((res) => { @@ -93,9 +104,12 @@ const AggregatedGrades = (props) => { const studentsArr = data.marks; // console.log(studentsArr); for (const student in studentsArr) { + let finalGrade = calculateFinalGrade(data.marks[student]); + for (const taskName in data.marks[student]) { setHeadCells((prevState) => { - const weight = data.marks[student][taskName]['weight']; + const taskDataObj = data.marks[student][taskName]; + const weight = taskDataObj['weight']; const newState = { id: taskName, numeric: false, @@ -129,7 +143,25 @@ const AggregatedGrades = (props) => { return [...prevState, newRow]; }); } // taskName iteration end - // TODO: Add a final column called Final Grades which calculates all students' final grades + + // Add final grades column and add the final grade for current student to rows state. + setHeadCells((prevState) => [ + ...prevState, + { + id: 'finalGrade', + numeric: false, + disablePadding: false, + label: 'Final Grade' + } + ]); + setRows((prevState) => { + return prevState.map((row) => { + if (row.student === student) { + return { ...row, finalGrade: finalGrade.toFixed(2) + '%' }; + } + return row; + }); + }); } // student iteration end }, [courseId, navigate, data, isLoading, error]); From 6c8504959670f86940cfe90d9a81e1d7e4ab57a1 Mon Sep 17 00:00:00 2001 From: Eric Ryu Date: Mon, 12 Jun 2023 13:01:35 -0400 Subject: [PATCH 04/13] change final grade column name to current grade --- frontend/src/components/Page/Instructor/AggregatedGrades.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Page/Instructor/AggregatedGrades.jsx b/frontend/src/components/Page/Instructor/AggregatedGrades.jsx index 40a538f0..a92d2c57 100644 --- a/frontend/src/components/Page/Instructor/AggregatedGrades.jsx +++ b/frontend/src/components/Page/Instructor/AggregatedGrades.jsx @@ -151,7 +151,7 @@ const AggregatedGrades = (props) => { id: 'finalGrade', numeric: false, disablePadding: false, - label: 'Final Grade' + label: 'Current Grade' } ]); setRows((prevState) => { From 3734f36f3480effcbd031da9b73b4e3b210db67e Mon Sep 17 00:00:00 2001 From: Eric Ryu Date: Tue, 13 Jun 2023 14:36:16 -0400 Subject: [PATCH 05/13] implement endpoint to return course content --- backend/module/course/instructor/get.js | 28 +++++++++++++++++++++++++ backend/route/instructor.js | 4 ++++ 2 files changed, 32 insertions(+) create mode 100644 backend/module/course/instructor/get.js diff --git a/backend/module/course/instructor/get.js b/backend/module/course/instructor/get.js new file mode 100644 index 00000000..3739d1ba --- /dev/null +++ b/backend/module/course/instructor/get.js @@ -0,0 +1,28 @@ +const express = require("express"); +const router = express.Router(); +const client = require("../../../setup/db"); +const helpers = require("../../../utilities/helpers"); + +router.get("/", (req, res) => { + console.log(`[+] RESPONSE Locals: ${res.locals["course_id"]}`); + if (res.locals["course_id"] === "") { + res.status(400).json({ message: "The course id is missing or invalid." }); + } + let sqlCourse = "SELECT * FROM course WHERE course_id = ($1)"; + client.query(sqlCourse, [res.locals["course_id"]], (err, pgRes) => { + if (err) { + res.status(404).json({ message: "Unknown error." }); + } else if (pgRes.rowCount === 1) { + res + .status(200) + .json({ + message: "Course details are returned.", + course: pgRes.rows[0], + }); + } else { + res.status(400).json({ message: "The course id is invalid." }); + } + }); +}); + +module.exports = router; diff --git a/backend/route/instructor.js b/backend/route/instructor.js index 0117733e..1763c01e 100644 --- a/backend/route/instructor.js +++ b/backend/route/instructor.js @@ -45,6 +45,7 @@ const manual_collect_submission = require("../module/submission/staff/collect_ma const download_submissions = require("../module/submission/staff/download"); const check_submission = require("../module/submission/staff/check"); const impersonate = require("../module/impersonate/instructor/impersonate"); +const get_course = require("../module/course/instructor/get"); router.use("/", function (req, res, next) { next(); @@ -53,6 +54,9 @@ router.use("/", function (req, res, next) { // Middleware router.use("/course/", middleware); +// Course Content +router.use("/course/:course_id/get", get_course); + // Role router.use("/course/:course_id/role/get", get_role); From 10a2d71a04e3e11b340c548e8a3358a45e67ed9b Mon Sep 17 00:00:00 2001 From: Eric Ryu Date: Tue, 13 Jun 2023 16:19:21 -0400 Subject: [PATCH 06/13] add new endpoint to api and change view grades' page heading --- frontend/src/api/staff_api.js | 34 ++++++++++++++++++- .../Page/Instructor/AggregatedGrades.jsx | 32 +++++++++++------ 2 files changed, 54 insertions(+), 12 deletions(-) diff --git a/frontend/src/api/staff_api.js b/frontend/src/api/staff_api.js index e0c54c50..5952bc10 100644 --- a/frontend/src/api/staff_api.js +++ b/frontend/src/api/staff_api.js @@ -143,11 +143,43 @@ let getAllMarks = async (courseId) => { } }; +/** + * Get current course's details for Admins and Instructors' use only. + * @param courseId string + * @returns {Promise|*|null>} + */ +const getCourseContent = async (courseId) => { + let token = sessionStorage.getItem('token'); + + const role = findRoleInCourse(courseId); + + let config = { + headers: { Authorization: `Bearer ${token}` } + }; + + let url = ''; + if (role === 'admin') { + url = `${process.env.REACT_APP_API_URL}/admin/course/${courseId}/get`; + } else if (role === 'instructor') { + url = `${process.env.REACT_APP_API_URL}/instructor/course/${courseId}/get`; + } else { + // insufficient access + return null; + } + + try { + return await axios.get(url, config); + } catch (err) { + return err.response; + } +}; + const StaffApi = { get_students_in_course, getAllMarks, getCriteriaForTask, - all_tasks + all_tasks, + getCourseContent }; export default StaffApi; diff --git a/frontend/src/components/Page/Instructor/AggregatedGrades.jsx b/frontend/src/components/Page/Instructor/AggregatedGrades.jsx index a92d2c57..25b472b0 100644 --- a/frontend/src/components/Page/Instructor/AggregatedGrades.jsx +++ b/frontend/src/components/Page/Instructor/AggregatedGrades.jsx @@ -68,6 +68,7 @@ const AggregatedGrades = (props) => { ]); const { courseId } = useParams(); + const [courseName, setCourseName] = useState(''); const { data, isLoading, error } = useSWR('/mark/all', () => StaffApi.getAllMarks(courseId).then((res) => res.data) @@ -84,6 +85,13 @@ const AggregatedGrades = (props) => { return finalGrade; }; + useEffect(() => { + StaffApi.getCourseContent(courseId).then((res) => { + console.log(res); + setCourseName(res.data.course['course_code']); + }); + }, [courseId]); + useEffect(() => { if (isLoading || error) return; // StaffApi.getAllMarks(courseId).then((res) => { @@ -144,16 +152,7 @@ const AggregatedGrades = (props) => { }); } // taskName iteration end - // Add final grades column and add the final grade for current student to rows state. - setHeadCells((prevState) => [ - ...prevState, - { - id: 'finalGrade', - numeric: false, - disablePadding: false, - label: 'Current Grade' - } - ]); + // Add final grade for current student to rows state. setRows((prevState) => { return prevState.map((row) => { if (row.student === student) { @@ -163,6 +162,17 @@ const AggregatedGrades = (props) => { }); }); } // student iteration end + + // Add final grades column only once + setHeadCells((prevState) => [ + ...prevState, + { + id: 'finalGrade', + numeric: false, + disablePadding: false, + label: 'Current Grade' + } + ]); }, [courseId, navigate, data, isLoading, error]); const viewersRole = findRoleInCourse(courseId); @@ -185,7 +195,7 @@ const AggregatedGrades = (props) => { fontWeight="600" sx={{ ml: 3 }} > - All Grades for Course ID: {courseId} + All Grades of {courseName} From aa49842529909a1478ad264bd83c062504dfbf67 Mon Sep 17 00:00:00 2001 From: Eric Ryu Date: Tue, 13 Jun 2023 16:23:01 -0400 Subject: [PATCH 07/13] backend handling is diff for admin/instructor --- frontend/src/api/staff_api.js | 2 +- frontend/src/components/Page/Instructor/AggregatedGrades.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/api/staff_api.js b/frontend/src/api/staff_api.js index 5952bc10..6d68f20b 100644 --- a/frontend/src/api/staff_api.js +++ b/frontend/src/api/staff_api.js @@ -159,7 +159,7 @@ const getCourseContent = async (courseId) => { let url = ''; if (role === 'admin') { - url = `${process.env.REACT_APP_API_URL}/admin/course/${courseId}/get`; + url = `${process.env.REACT_APP_API_URL}/admin/course/get?course_id=${courseId}`; } else if (role === 'instructor') { url = `${process.env.REACT_APP_API_URL}/instructor/course/${courseId}/get`; } else { diff --git a/frontend/src/components/Page/Instructor/AggregatedGrades.jsx b/frontend/src/components/Page/Instructor/AggregatedGrades.jsx index 25b472b0..3b2951bc 100644 --- a/frontend/src/components/Page/Instructor/AggregatedGrades.jsx +++ b/frontend/src/components/Page/Instructor/AggregatedGrades.jsx @@ -87,8 +87,8 @@ const AggregatedGrades = (props) => { useEffect(() => { StaffApi.getCourseContent(courseId).then((res) => { - console.log(res); - setCourseName(res.data.course['course_code']); + if (role === 'admin') setCourseName(res.data.course[0]['course_code']); + else setCourseName(res.data.course['course_code']); }); }, [courseId]); From 6820cbb0bd9165aa9c193610b986425afeb8eba7 Mon Sep 17 00:00:00 2001 From: Eric Ryu Date: Wed, 14 Jun 2023 12:21:34 -0400 Subject: [PATCH 08/13] shift margins to compensate for searchbar --- .../General/AggregatedGradesTable/GetMarksCsvButton.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/General/AggregatedGradesTable/GetMarksCsvButton.jsx b/frontend/src/components/General/AggregatedGradesTable/GetMarksCsvButton.jsx index 31370516..58dd91d6 100644 --- a/frontend/src/components/General/AggregatedGradesTable/GetMarksCsvButton.jsx +++ b/frontend/src/components/General/AggregatedGradesTable/GetMarksCsvButton.jsx @@ -60,7 +60,7 @@ const getMarksCsvButton = ({ courseId }) => { }; return ( - ); From cedeed03cd21d8828c21bcf33df2cd6d602586ab Mon Sep 17 00:00:00 2001 From: Eric Ryu Date: Wed, 14 Jun 2023 12:22:16 -0400 Subject: [PATCH 09/13] add searchbar component --- .../AggregatedGradesTable/TableSearchbar.jsx | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 frontend/src/components/General/AggregatedGradesTable/TableSearchbar.jsx diff --git a/frontend/src/components/General/AggregatedGradesTable/TableSearchbar.jsx b/frontend/src/components/General/AggregatedGradesTable/TableSearchbar.jsx new file mode 100644 index 00000000..13506c4d --- /dev/null +++ b/frontend/src/components/General/AggregatedGradesTable/TableSearchbar.jsx @@ -0,0 +1,36 @@ +import PropTypes from 'prop-types'; +import { Autocomplete, Stack, TextField } from '@mui/material'; +const TableSearchbar = (props) => { + const { rows, placeholder, width } = props; + return ( + option.student)} + renderInput={(params) => ( + + )} + sx={{ + width: width + }} + /> + ); +}; + +TableSearchbar.propTypes = { + // Rows for autocomplete (from table rows). Must be array of { ..., student: string } + rows: PropTypes.arrayOf(PropTypes.object).isRequired, + // Placeholder text for the searchbar + placeholder: PropTypes.string.isRequired, + // Width of searchbar. Either string like '100%' or a numeric integer value. + width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired +}; + +export default TableSearchbar; From 40894383e2dbdc243950fb4d30cf450e4b85c8b7 Mon Sep 17 00:00:00 2001 From: Eric Ryu Date: Wed, 14 Jun 2023 12:22:27 -0400 Subject: [PATCH 10/13] include searchbar in toolbar --- .../AggregatedGradesTable.jsx | 42 +++---------------- 1 file changed, 6 insertions(+), 36 deletions(-) diff --git a/frontend/src/components/General/AggregatedGradesTable/AggregatedGradesTable.jsx b/frontend/src/components/General/AggregatedGradesTable/AggregatedGradesTable.jsx index 531df398..0e718980 100644 --- a/frontend/src/components/General/AggregatedGradesTable/AggregatedGradesTable.jsx +++ b/frontend/src/components/General/AggregatedGradesTable/AggregatedGradesTable.jsx @@ -27,6 +27,7 @@ import FeatherIcon from 'feather-icons-react'; import CustomCheckbox from '../../FlexyMainComponents/forms/custom-elements/CustomCheckbox'; import CustomSwitch from '../../FlexyMainComponents/forms/custom-elements/CustomSwitch'; import GetMarksCsvButton from './GetMarksCsvButton'; +import TableSearchbar from './TableSearchbar'; function descendingComparator(a, b, orderBy) { if (b[orderBy] < a[orderBy]) { @@ -110,53 +111,22 @@ AggregatedGradesTableHead.propTypes = { }; const AggregatedGradesTableToolbar = (props) => { - const { numSelected } = props; + const { rows } = props; return ( 0 && { - bgcolor: (theme) => - alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity) - }) + pr: { xs: 1, sm: 1 } }} > - {numSelected > 0 ? ( - - {numSelected} selected - - ) : ( - - Filter - - )} - - {numSelected > 0 ? ( - - - - - - ) : ( - - - - - - )} + {rows.length > 0 && } ); }; AggregatedGradesTableToolbar.propTypes = { - numSelected: PropTypes.number.isRequired + rows: PropTypes.arrayOf(PropTypes.object).isRequired }; const AggregatedGradesTable = ({ headCells, rows, tableWidth, courseId }) => { @@ -225,8 +195,8 @@ const AggregatedGradesTable = ({ headCells, rows, tableWidth, courseId }) => { - {/**/} + Date: Wed, 14 Jun 2023 13:29:59 -0400 Subject: [PATCH 11/13] implement autocomplete functionality --- .../AggregatedGradesTable.jsx | 67 +++++++++++++------ .../AggregatedGradesTable/TableSearchbar.jsx | 34 ++++++++-- 2 files changed, 76 insertions(+), 25 deletions(-) diff --git a/frontend/src/components/General/AggregatedGradesTable/AggregatedGradesTable.jsx b/frontend/src/components/General/AggregatedGradesTable/AggregatedGradesTable.jsx index 0e718980..046ed016 100644 --- a/frontend/src/components/General/AggregatedGradesTable/AggregatedGradesTable.jsx +++ b/frontend/src/components/General/AggregatedGradesTable/AggregatedGradesTable.jsx @@ -79,20 +79,28 @@ function AggregatedGradesTableHead(props) { padding={headCell.disablePadding ? 'none' : 'normal'} sortDirection={orderBy === headCell.id ? order : false} > - + {headCell.id !== 'finalGrade' ? ( + + + {headCell.label} + + {orderBy === headCell.id ? ( + + {order === 'desc' + ? 'sorted descending' + : 'sorted ascending'} + + ) : null} + + ) : ( {headCell.label} - {orderBy === headCell.id ? ( - - {order === 'desc' ? 'sorted descending' : 'sorted ascending'} - - ) : null} - + )} ))} @@ -111,7 +119,7 @@ AggregatedGradesTableHead.propTypes = { }; const AggregatedGradesTableToolbar = (props) => { - const { rows } = props; + const { originalRows, setCurrRows } = props; return ( { pr: { xs: 1, sm: 1 } }} > - {rows.length > 0 && } + {originalRows.length > 0 && ( + + )} ); }; AggregatedGradesTableToolbar.propTypes = { - rows: PropTypes.arrayOf(PropTypes.object).isRequired + // Original rows that are fetched from backend API call + originalRows: PropTypes.arrayOf(PropTypes.object).isRequired, + // To set the current state of rows + setCurrRows: PropTypes.func.isRequired }; const AggregatedGradesTable = ({ headCells, rows, tableWidth, courseId }) => { @@ -136,6 +154,12 @@ const AggregatedGradesTable = ({ headCells, rows, tableWidth, courseId }) => { const [page, setPage] = React.useState(0); const [dense, setDense] = React.useState(false); const [rowsPerPage, setRowsPerPage] = React.useState(5); + const [currRows, setCurrRows] = React.useState(rows === undefined ? [] : rows); + + React.useEffect(() => { + setCurrRows(rows); + console.log(rows); + }, [rows]); const handleRequestSort = (event, property) => { const isAsc = orderBy === property && order === 'asc'; @@ -145,7 +169,7 @@ const AggregatedGradesTable = ({ headCells, rows, tableWidth, courseId }) => { const handleSelectAllClick = (event) => { if (event.target.checked) { - const newSelecteds = rows.map((n) => n.student); + const newSelecteds = currRows.map((n) => n.student); setSelected(newSelecteds); return; } @@ -188,7 +212,7 @@ const AggregatedGradesTable = ({ headCells, rows, tableWidth, courseId }) => { const isSelected = (name) => selected.indexOf(name) !== -1; // Avoid a layout jump when reaching the last page with empty rows. - const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0; + const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - currRows.length) : 0; return ( @@ -196,7 +220,10 @@ const AggregatedGradesTable = ({ headCells, rows, tableWidth, courseId }) => { - +
{ orderBy={orderBy} onSelectAllClick={handleSelectAllClick} onRequestSort={handleRequestSort} - rowCount={rows.length} + rowCount={currRows.length} headCells={headCells} /> - {stableSort(rows, getComparator(order, orderBy)) + {stableSort(currRows, getComparator(order, orderBy)) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .map((row, index) => { const isItemSelected = isSelected(row.student); @@ -287,7 +314,7 @@ const AggregatedGradesTable = ({ headCells, rows, tableWidth, courseId }) => { { - const { rows, placeholder, width } = props; + const { originalRows, setCurrRows, placeholder, width } = props; + const [value, setValue] = React.useState(''); + + // React.useEffect(() => {}, [value]); + return ( option.student)} + options={originalRows.map((option) => option.student)} + onChange={(event, newValue) => { + setCurrRows((prevState) => { + // We use original rows because prevState could've been changed from previous + // autocomplete + const newState = []; + if (Array.isArray(originalRows)) { + for (const studentObj of originalRows) { + if (studentObj.student === newValue) { + newState.push(studentObj); + } + } + } + console.log(newState); + return newState; + }); + }} renderInput={(params) => ( { }; TableSearchbar.propTypes = { - // Rows for autocomplete (from table rows). Must be array of { ..., student: string } - rows: PropTypes.arrayOf(PropTypes.object).isRequired, + // Original rows which is fetched from backend (displays all possible rows) + originalRows: PropTypes.arrayOf(PropTypes.object).isRequired, + // setCurrRows useState callback function to set rows to be displayed on table + setCurrRows: PropTypes.func.isRequired, // Placeholder text for the searchbar placeholder: PropTypes.string.isRequired, // Width of searchbar. Either string like '100%' or a numeric integer value. From 05f64126276649999a2cf992171bb4d6acc31a5f Mon Sep 17 00:00:00 2001 From: Eric Ryu Date: Wed, 14 Jun 2023 13:56:30 -0400 Subject: [PATCH 12/13] when input is cleared, fill data with original rows --- .../AggregatedGradesTable/TableSearchbar.jsx | 70 +++++++++---------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/frontend/src/components/General/AggregatedGradesTable/TableSearchbar.jsx b/frontend/src/components/General/AggregatedGradesTable/TableSearchbar.jsx index 873f8889..d09d3f75 100644 --- a/frontend/src/components/General/AggregatedGradesTable/TableSearchbar.jsx +++ b/frontend/src/components/General/AggregatedGradesTable/TableSearchbar.jsx @@ -1,48 +1,48 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Autocomplete, IconButton, InputAdornment, Stack, TextField } from '@mui/material'; -import FeatherIcon from 'feather-icons-react'; + const TableSearchbar = (props) => { const { originalRows, setCurrRows, placeholder, width } = props; - const [value, setValue] = React.useState(''); - - // React.useEffect(() => {}, [value]); return ( - option.student)} - onChange={(event, newValue) => { - setCurrRows((prevState) => { - // We use original rows because prevState could've been changed from previous - // autocomplete - const newState = []; - if (Array.isArray(originalRows)) { - for (const studentObj of originalRows) { - if (studentObj.student === newValue) { - newState.push(studentObj); + <> + option.student)} + onChange={(event, newValue, reason) => { + setCurrRows((prevState) => { + // We use original rows because prevState could've been changed from previous + // autocomplete + const newState = []; + if (Array.isArray(originalRows)) { + for (const studentObj of originalRows) { + if (studentObj.student === newValue) { + newState.push(studentObj); + } } } + console.log(newState); + return newState; + }); + if (reason === 'clear') { + setCurrRows(originalRows); } - console.log(newState); - return newState; - }); - }} - renderInput={(params) => ( - - )} - sx={{ - width: width - }} - /> + }} + renderInput={(params) => ( + + )} + sx={{ + width: width + }} + /> + ); }; From 2d569a81d422f66f997b78a5bcef0862cef9e53c Mon Sep 17 00:00:00 2001 From: Eric Ryu Date: Wed, 14 Jun 2023 14:01:47 -0400 Subject: [PATCH 13/13] change placeholder name --- .../General/AggregatedGradesTable/AggregatedGradesTable.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/General/AggregatedGradesTable/AggregatedGradesTable.jsx b/frontend/src/components/General/AggregatedGradesTable/AggregatedGradesTable.jsx index 046ed016..2a7dca3e 100644 --- a/frontend/src/components/General/AggregatedGradesTable/AggregatedGradesTable.jsx +++ b/frontend/src/components/General/AggregatedGradesTable/AggregatedGradesTable.jsx @@ -132,7 +132,7 @@ const AggregatedGradesTableToolbar = (props) => { )}