Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Auto-fill course selection on enrollment and grade URL navigation #590

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Auto-fill course selection on enrollment and grade URL navigation #590

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0ddc935
auto-fill-course
Jdyn Sep 3, 2023
39c8bbd
auto-fill course for enrollment
Jdyn Sep 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 24 additions & 12 deletions frontend/src/components/ClassSearchBar/EnrollmentSearchBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ class EnrollmentSearchBar extends Component {
this.state = {
selectedClass: 0,
selectPrimary: this.props.selectPrimary,
selectSecondary: this.props.selectSecondary
selectSecondary: this.props.selectSecondary,
selectedClassValue: undefined
};

this.queryCache = {};
Expand All @@ -29,13 +30,6 @@ class EnrollmentSearchBar extends Component {
this.reset = this.reset.bind(this);
}

componentDidMount() {
let { fromCatalog } = this.props;
if (fromCatalog) {
this.handleClassSelect({ value: fromCatalog.id, addSelected: true });
}
}

UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.selectPrimary !== this.state.selectPrimary) {
this.setState({
Expand All @@ -49,6 +43,23 @@ class EnrollmentSearchBar extends Component {
}
}

componentDidUpdate(prevProps) {
const { selectedCourses, fetchEnrollSelected } = this.props;

if (
prevProps.selectedCourses != selectedCourses &&
Array.isArray(selectedCourses) &&
selectedCourses.length > 0
) {
const course = selectedCourses[selectedCourses.length - 1];
const payload = { value: course.courseID, label: course.course, course };

fetchEnrollSelected(payload);

this.setState({ selectedClassValue: payload, selectedClass: payload.value });
}
}

handleClassSelect(updatedClass) {
const { fetchEnrollSelected } = this.props;
if (updatedClass === null) {
Expand Down Expand Up @@ -210,7 +221,7 @@ class EnrollmentSearchBar extends Component {

render() {
const { classes, isFull, sections, isMobile } = this.props;
const { selectPrimary, selectSecondary, selectedClass } = this.state;
const { selectPrimary, selectSecondary, selectedClass, selectedClassValue } = this.state;
let primaryOptions = this.buildPrimaryOptions(sections);
let secondaryOptions = this.buildSecondaryOptions(sections, selectPrimary);
let onePrimaryOption = primaryOptions && primaryOptions.length === 1 && selectPrimary;
Expand Down Expand Up @@ -247,7 +258,7 @@ class EnrollmentSearchBar extends Component {
courseSearch
name="selectClass"
placeholder="Choose a class..."
// value={selectedClass}
value={selectedClassValue}
options={this.buildCoursesOptions(classes)}
onChange={this.handleClassSelect}
components={{
Expand Down Expand Up @@ -309,11 +320,12 @@ const mapDispatchToProps = (dispatch) => {
};

const mapStateToProps = (state) => {
const { sections, selectPrimary, selectSecondary } = state.enrollment;
const { sections, selectPrimary, selectSecondary, selectedCourses } = state.enrollment;
return {
sections,
selectPrimary,
selectSecondary
selectSecondary,
selectedCourses
};
};

Expand Down
39 changes: 30 additions & 9 deletions frontend/src/components/ClassSearchBar/GradesSearchBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ class GradesSearchBar extends Component {
selectedClass: 0,
selectType: 'instructor',
selectPrimary: props.selectPrimary,
selectSecondary: props.selectSecondary
selectSecondary: props.selectSecondary,
selectedClassValue: undefined
};
this.queryCache = {};

Expand All @@ -36,13 +37,9 @@ class GradesSearchBar extends Component {
}

componentDidMount() {
const { fromCatalog } = this.props;
this.setState({
selectType: 'instructor'
});
if (fromCatalog) {
this.handleClassSelect({ value: fromCatalog.id, addSelected: true });
}
}

UNSAFE_componentWillReceiveProps(nextProps) {
Expand All @@ -58,6 +55,23 @@ class GradesSearchBar extends Component {
}
}

componentDidUpdate(prevProps) {
const { selectedCourses, fetchGradeSelected } = this.props;

if (
prevProps.selectedCourses != selectedCourses &&
Array.isArray(selectedCourses) &&
selectedCourses.length > 0
) {
const course = selectedCourses[selectedCourses.length - 1];
const payload = { value: course.courseID, label: course.course, course };

fetchGradeSelected(payload);

this.setState({ selectedClassValue: payload, selectedClass: payload.value });
}
}

handleClassSelect(updatedClass) {
const { fetchGradeSelected } = this.props;
if (updatedClass === null) {
Expand All @@ -71,7 +85,12 @@ class GradesSearchBar extends Component {
}

this.setState({
selectedClass: updatedClass.value
selectedClass: updatedClass.value,
selectedClassValue: {
value: updatedClass.value,
label: updatedClass.label,
updatedClass
}
});

fetchGradeSelected(updatedClass);
Expand Down Expand Up @@ -285,7 +304,7 @@ class GradesSearchBar extends Component {

render() {
const { classes, isFull, isMobile } = this.props;
const { selectType, selectPrimary, selectSecondary, selectedClass } = this.state;
const { selectType, selectPrimary, selectSecondary, selectedClass, selectedClassValue } = this.state;
const { sections } = this.props;
const primaryOptions = this.buildPrimaryOptions(sections, selectType);
const secondaryOptions = this.buildSecondaryOptions(sections, selectType, selectPrimary);
Expand Down Expand Up @@ -332,6 +351,7 @@ class GradesSearchBar extends Component {
<Col lg={3}>
<BTSelect
courseSearch
value={selectedClassValue}
name="selectClass"
placeholder="Choose a class..."
options={this.buildCoursesOptions(classes)}
Expand Down Expand Up @@ -409,11 +429,12 @@ const mapDispatchToProps = (dispatch) => ({
});

const mapStateToProps = (state) => {
const { sections, selectPrimary, selectSecondary } = state.grade;
const { sections, selectPrimary, selectSecondary, selectedCourses } = state.grade;
return {
sections,
selectPrimary,
selectSecondary
selectSecondary,
selectedCourses
};
};

Expand Down
2 changes: 0 additions & 2 deletions frontend/src/views/Enrollment/Enrollment.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,6 @@ class Enrollment extends Component {
render() {
const { additionalInfo } = this.state;
const { context, selectedCourses, isMobile } = this.props;
let { location } = this.props;
let courses = context.courses;

return (
Expand All @@ -133,7 +132,6 @@ class Enrollment extends Component {
<EnrollmentSearchBar
classes={courses}
addCourse={this.addCourse}
fromCatalog={location.state ? location.state.course : false}
isFull={selectedCourses.length === 4}
isMobile={isMobile}
/>
Expand Down
2 changes: 0 additions & 2 deletions frontend/src/views/Grades/Grades.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,6 @@ class Grades extends Component {

render() {
const { context, selectedCourses, isMobile } = this.props;
let { location } = this.props;
const { additionalInfo } = this.state;
let courses = context.courses;

Expand All @@ -139,7 +138,6 @@ class Grades extends Component {
<GradesSearchBar
classes={courses}
addCourse={this.addCourse}
fromCatalog={location.state ? location.state.course : false}
isFull={selectedCourses.length === 4}
isMobile={isMobile}
/>
Expand Down