Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add recommendation panel

Browse Source 
- added a waffle flag to control recommendation panel
- add react code for the panel

VAN-984
This commit is contained in:
Zainab Amir
2022-06-24 16:02:09 +05:00
committed by Zainab Amir
parent 6f71e4cc0d
commit ef9361ccfe
3 changed files with 110 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
common/djangoapps/student/toggles.py Normal file
View File

@@ -0,0 +1,24 @@
"""
Toggles for Dashboard page.
"""
from edx_toggles.toggles import WaffleFlag
# Namespace for student waffle flags.
WAFFLE_FLAG_NAMESPACE = 'student'
# Waffle flag to enable amplitude recommendations
# .. toggle_name: student.enable_amplitude_recommendations
# .. toggle_implementation: WaffleFlag
# .. toggle_default: False
# .. toggle_description: Supports rollout of a POC for amplitude recommendations.
# .. toggle_use_cases: temporary
# .. toggle_creation_date: 2022-06-24
# .. toggle_target_removal_date: None
# .. toggle_warning: None
# .. toggle_tickets: VAN-984
ENABLE_AMPLITUDE_RECOMMENDATIONS = WaffleFlag(f'{WAFFLE_FLAG_NAMESPACE}.enable_amplitude_recommendations', __name__)
def should_show_amplitude_recommendations():
return ENABLE_AMPLITUDE_RECOMMENDATIONS.is_enabled()

85
lms/static/js/learner_dashboard/RecommendationsPanel.jsx Normal file
View File

@@ -0,0 +1,85 @@
/* global gettext */
import React from 'react';
class RecommendationsPanel extends React.Component {
render() {
return (
<div className="p-4 panel-background">
<div className="recommend-heading mb-4">{gettext('Recommendations for you')}</div>
<div className="course-card box-shadow-down-1 bg-white mb-3">
<div className="box-shadow-down-1 image-box">
<img
className="panel-course-img"
src="https://source.unsplash.com/lQGJCMY5qcM"
alt="course image"
/>
</div>
<div className="course-title pl-3">
<a href="#" className="course-link">The Chemistry of Life</a>
</div>
</div>
<div className="course-card box-shadow-down-1 bg-white mb-3">
<div className="box-shadow-down-1 image-box">
<img
className="panel-course-img"
src="https://source.unsplash.com/KltoLK6Mk-g"
alt="course image"
/>
</div>
<div className="course-title pl-3">
<a href="#" className="course-link">Drug Discovery & Medicinal Chemistry</a>
</div>
</div>
<div className="course-card box-shadow-down-1 bg-white mb-3">
<div className="box-shadow-down-1 image-box">
<img
className="panel-course-img"
src="https://source.unsplash.com/_BJVJ4WcV1M"
alt="course image"
/>
</div>
<div className="course-title pl-3">
<a href="#" className="course-link">From Fossil Resources to Biomass: A Chemistry Perspective</a>
</div>
</div>
<div className="course-card box-shadow-down-1 bg-white mb-3">
<div className="box-shadow-down-1 image-box">
<img
className="panel-course-img"
src="https://source.unsplash.com/NKhckz9B78c"
alt="course image"
/>
</div>
<div className="course-title pl-3">
<a href="#" className="course-link">Digital Biomaterials</a>
</div>
</div>
<div className="course-card box-shadow-down-1 bg-white mb-3">
<div className="box-shadow-down-1 image-box">
<img
className="panel-course-img"
src="https://source.unsplash.com/x649mR6yBIs"
alt="course image"
/>
</div>
<div className="course-title pl-3">
<a href="#" className="course-link">Basic Steps in Magnetic Resonance</a>
</div>
</div>
{this.props.exploreCoursesUrl ? (
<div className="d-flex justify-content-center">
<a
href={this.props.exploreCoursesUrl}
className="panel-explore-courses justify-content-center align-items-center"
>
{gettext('Explore courses')}
<span className="icon fa fa-search search-icon" aria-hidden="true" />
</a>
</div>
) : null}
</div>
);
}
}
export {RecommendationsPanel};

1
webpack.common.config.js
View File

@@ -97,6 +97,7 @@ module.exports = Merge.smart({
DemographicsCollectionModal: './lms/static/js/demographics_collection/DemographicsCollectionModal.jsx',
AxiosJwtTokenService: './lms/static/js/jwt_auth/AxiosJwtTokenService.js',
EnterpriseLearnerPortalModal: './lms/static/js/learner_dashboard/EnterpriseLearnerPortalModal.jsx',
RecommendationsPanel: './lms/static/js/learner_dashboard/RecommendationsPanel.jsx',
// Learner Dashboard
EntitlementFactory: './lms/static/js/learner_dashboard/course_entitlement_factory.js',