Merge pull request #16462 from edx/waheed/LEARNER-2980-my-programs-fragment

Create programs listing fragment for mobile app.

lms/djangoapps/learner_dashboard/programs.py

+"""
+Fragments for rendering programs.
+"""
+from django.http import Http404
+from django.template.loader import render_to_string
+from django.utils.translation import get_language_bidi
+from web_fragments.fragment import Fragment
+
+from openedx.core.djangoapps.plugin_api.views import EdxFragmentView
+from openedx.core.djangoapps.programs.models import ProgramsApiConfig
+from openedx.core.djangoapps.programs.utils import (
+    ProgramProgressMeter,
+    get_program_marketing_url
+)
+
+
+class ProgramsFragmentView(EdxFragmentView):
+    """
+    A fragment to program listing.
+    """
+    def render_to_fragment(self, request, **kwargs):
+        """
+        Render the program listing fragment.
+        """
+        user = request.user
+        programs_config = kwargs.get('programs_config') or ProgramsApiConfig.current()
+        if not programs_config.enabled or not user.is_authenticated():
+            raise Http404
+
+        meter = ProgramProgressMeter(request.site, user)
+
+        context = {
+            'marketing_url': get_program_marketing_url(programs_config),
+            'programs': meter.engaged_programs,
+            'progress': meter.progress()
+        }
+        html = render_to_string('learner_dashboard/programs_fragment.html', context)
+        programs_fragment = Fragment(html)
+        self.add_fragment_resource_urls(programs_fragment)
+
+        return programs_fragment
+
+    def css_dependencies(self):
+        """
+        Returns list of CSS files that this view depends on.
+
+        The helper function that it uses to obtain the list of CSS files
+        works in conjunction with the Django pipeline to ensure that in development mode
+        the files are loaded individually, but in production just the single bundle is loaded.
+        """
+        if get_language_bidi():
+            return self.get_css_dependencies('style-learner-dashboard-rtl')
+        else:
+            return self.get_css_dependencies('style-learner-dashboard')

lms/djangoapps/learner_dashboard/urls.py

 """Learner dashboard URL routing configuration"""
 from django.conf.urls import url
 
-from . import views
+from lms.djangoapps.learner_dashboard import programs, views
 
 urlpatterns = [
     url(r'^programs/$', views.program_listing, name='program_listing_view'),
     url(r'^programs/(?P<program_uuid>[0-9a-f-]+)/$', views.program_details, name='program_details_view'),
+    url(r'^programs_fragment/$', programs.ProgramsFragmentView.as_view(), name='program_listing_fragment_view'),
 ]

lms/djangoapps/learner_dashboard/views.py

@@ -7,6 +7,7 @@ from django.views.decorators.http import require_GET
 from edxmako.shortcuts import render_to_response
 from commerce.utils import EcommerceService
 
+from lms.djangoapps.learner_dashboard.programs import ProgramsFragmentView
 from lms.djangoapps.learner_dashboard.utils import FAKE_COURSE_KEY, strip_course_id
 from openedx.core.djangoapps.programs.models import ProgramsApiConfig
 from openedx.core.djangoapps.programs.utils import (
@@ -23,19 +24,14 @@ from openedx.core.djangoapps.user_api.preferences.api import get_user_preference
 def program_listing(request):
     """View a list of programs in which the user is engaged."""
     programs_config = ProgramsApiConfig.current()
-    if not programs_config.enabled:
-        raise Http404
-
-    meter = ProgramProgressMeter(request.site, request.user)
+    programs_fragment = ProgramsFragmentView().render_to_fragment(request, programs_config=programs_config)
 
     context = {
         'disable_courseware_js': True,
-        'marketing_url': get_program_marketing_url(programs_config),
+        'programs_fragment': programs_fragment,
         'nav_hidden': True,
-        'programs': meter.engaged_programs,
-        'progress': meter.progress(),
-        'show_program_listing': programs_config.enabled,
         'show_dashboard_tabs': True,
+        'show_program_listing': programs_config.enabled,
         'uses_pattern_library': True,
     }
 

lms/templates/learner_dashboard/programs.html

@@ -3,32 +3,16 @@
 
 <%page expression_filter="h"/>
 <%inherit file="../main.html" />
-<%namespace name='static' file='../static_content.html'/>
 <%def name="online_help_token()"><% return "programs" %></%def>
 <%!
 from django.utils.translation import ugettext as _
-from openedx.core.djangolib.js_utils import (
-    dump_js_escaped_json, js_escaped_string
-)
+from openedx.core.djangolib.markup import HTML
 %>
 
-<%block name="js_extra">
-<%static:require_module module_name="js/learner_dashboard/program_list_factory" class_name="ProgramListFactory">
-ProgramListFactory({
-    marketingUrl: '${marketing_url | n, js_escaped_string}',
-    programsData: ${programs | n, dump_js_escaped_json},
-    userProgress: ${progress | n, dump_js_escaped_json}
-});
-</%static:require_module>
-</%block>
-
 <%block name="pagetitle">${_("Programs")}</%block>
 
 <%include file="_dashboard_navigation_programs.html"/>
 
 <main id="main" aria-label="Content" tabindex="-1">
-    <div class="program-list-wrapper grid-container">
-        <div class="program-cards-container col"></div>
-        <div class="sidebar col col-last"></div>
-    </div>
+    ${HTML(programs_fragment.body_html())}
 </main>

lms/templates/learner_dashboard/programs_fragment.html

+## mako
+
+<%page expression_filter="h"/>
+
+<%namespace name='static' file='../static_content.html'/>
+<%!
+from openedx.core.djangolib.js_utils import (
+    dump_js_escaped_json, js_escaped_string
+)
+%>
+
+<%block name="js_extra">
+<%static:require_module module_name="js/learner_dashboard/program_list_factory" class_name="ProgramListFactory">
+ProgramListFactory({
+    marketingUrl: '${marketing_url | n, js_escaped_string}',
+    programsData: ${programs | n, dump_js_escaped_json},
+    userProgress: ${progress | n, dump_js_escaped_json}
+});
+</%static:require_module>
+</%block>
+
+<div class="program-list-wrapper grid-container">
+    <div class="program-cards-container col"></div>
+    <div class="sidebar col col-last"></div>
+</div>