feat: Moved Programs details data in respective tabs (#28700)
* feat: Moved Programs details data in respective tabs
This commit is contained in:
Ahtisham Shahid
@@ -57,6 +57,8 @@ describe('Program Progress View', () => {
|
||||
programRecordUrl: '/foo/bar',
|
||||
industryPathways: data.industryPathways,
|
||||
creditPathways: data.creditPathways,
|
||||
programDiscussionEnabled: false
|
||||
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
@@ -153,6 +155,7 @@ describe('Program Progress View', () => {
|
||||
programRecordUrl: '/foo/bar',
|
||||
industryPathways: [],
|
||||
creditPathways: [],
|
||||
programDiscussionEnabled: false
|
||||
});
|
||||
|
||||
expect(emptyView.$('.program-credit-pathways .divider-heading')).toHaveLength(0);
|
||||
|
||||
@@ -493,6 +493,7 @@ describe('Program Details Header View', () => {
|
||||
destination_url: 'industry.com',
|
||||
},
|
||||
],
|
||||
programDiscussionEnabled: false
|
||||
};
|
||||
const data = options.programData;
|
||||
|
||||
|
||||
@@ -29,6 +29,7 @@ class ProgramDetailsSidebarView extends Backbone.View {
|
||||
this.industryPathways = options.industryPathways;
|
||||
this.creditPathways = options.creditPathways;
|
||||
this.programModel = options.model;
|
||||
this.programDiscussionEnabled = options.programDiscussionEnabled;
|
||||
this.render();
|
||||
}
|
||||
|
||||
@@ -39,6 +40,7 @@ class ProgramDetailsSidebarView extends Backbone.View {
|
||||
programRecordUrl: this.programRecordUrl,
|
||||
industryPathways: this.industryPathways,
|
||||
creditPathways: this.creditPathways,
|
||||
programDiscussionEnabled: this.programDiscussionEnabled
|
||||
});
|
||||
|
||||
HtmlUtils.setHtml(this.$el, this.tpl(data));
|
||||
|
||||
@@ -11,6 +11,7 @@ import HeaderView from './program_header_view';
|
||||
import SidebarView from './program_details_sidebar_view';
|
||||
|
||||
import pageTpl from '../../../templates/learner_dashboard/program_details_view.underscore';
|
||||
import tabPageTpl from '../../../templates/learner_dashboard/program_details_tab_view.underscore';
|
||||
import trackECommerceEvents from '../../commerce/track_ecommerce_events';
|
||||
|
||||
class ProgramDetailsView extends Backbone.View {
|
||||
@@ -26,7 +27,11 @@ class ProgramDetailsView extends Backbone.View {
|
||||
|
||||
initialize(options) {
|
||||
this.options = options;
|
||||
this.tpl = HtmlUtils.template(pageTpl);
|
||||
if (this.options.programDiscussionEnabled) {
|
||||
this.tpl = HtmlUtils.template(tabPageTpl);
|
||||
} else {
|
||||
this.tpl = HtmlUtils.template(pageTpl);
|
||||
}
|
||||
this.programModel = new Backbone.Model(this.options.programData);
|
||||
this.courseData = new Backbone.Model(this.options.courseData);
|
||||
this.certificateCollection = new Backbone.Collection(this.options.certificateData);
|
||||
@@ -75,6 +80,8 @@ class ProgramDetailsView extends Backbone.View {
|
||||
completedCount,
|
||||
completeProgramURL: buyButtonUrl,
|
||||
programDiscussionEnabled: this.options.programDiscussionEnabled,
|
||||
industryPathways : this.options.industryPathways,
|
||||
creditPathways : this.options.creditPathways,
|
||||
};
|
||||
data = $.extend(data, this.programModel.toJSON());
|
||||
HtmlUtils.setHtml(this.$el, this.tpl(data));
|
||||
@@ -124,6 +131,7 @@ class ProgramDetailsView extends Backbone.View {
|
||||
programRecordUrl: this.options.urls.program_record_url,
|
||||
industryPathways: this.options.industryPathways,
|
||||
creditPathways: this.options.creditPathways,
|
||||
programDiscussionEnabled: this.options.programDiscussionEnabled,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
</div>
|
||||
<% } %>
|
||||
</aside>
|
||||
<% if (!programDiscussionEnabled) { %>
|
||||
<% if (creditPathways.length > 0) { %>
|
||||
<aside class="aside js-program-pathways program-credit-pathways">
|
||||
<h2 class = "divider-heading"><%- gettext('Additional Credit Opportunities') %></h2>
|
||||
@@ -72,3 +73,4 @@
|
||||
<% } %>
|
||||
</aside>
|
||||
<% } %>
|
||||
<% } %>
|
||||
|
||||
@@ -0,0 +1,165 @@
|
||||
<header class="js-program-header program-header full-width-banner"></header>
|
||||
<!-- TODO: consider if article is the most appropriate element here -->
|
||||
|
||||
<% if (programDiscussionEnabled) { %>
|
||||
<div class="program-detail-nav">
|
||||
<ul class="nav nav-tabs program-detail-nav-list" id="programTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn-link active" id="home-tab" data-toggle="tab" data-target="#journey" type="button" role="tab" aria-controls="journey" aria-selected="true">Journey</button>
|
||||
</li>
|
||||
<% if (programDiscussionEnabled) { %>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn-link" id="profile-tab" data-toggle="tab" data-target="#community" type="button" role="tab" aria-controls="community" aria-selected="false">Community</button>
|
||||
</li>
|
||||
<% } %>
|
||||
<li class="d-none nav-item" role="presentation">
|
||||
<button class="nav-link btn-link" id="contact-tab" data-toggle="tab" data-target="#live" type="button" role="tab" aria-controls="live" aria-selected="false">Live</button>
|
||||
</li>
|
||||
<% if (industryPathways.length > 0 || creditPathways.length > 0) { %>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn-link" id="contact-tab" data-toggle="tab" data-target="#pathways" type="button" role="tab" aria-controls="pathways" aria-selected="false">Pathways</button>
|
||||
</li>
|
||||
<% } %>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tab-content" id="ProgramTabContent">
|
||||
<div class="tab-pane fade show active" id="journey" role="tabpanel" aria-labelledby="journey-tab">
|
||||
<article class="program-details-content">
|
||||
<div class="program-heading">
|
||||
<% if (completedCount === totalCount) { %>
|
||||
<h3 class="program-heading-title"><%- gettext('Congratulations!') %></h3>
|
||||
<div class="program-heading-message">
|
||||
<div><%- interpolate(gettext(
|
||||
'You have successfully completed all the requirements for the %(title)s %(type)s.'),
|
||||
{ title: title, type: type }, true) %>
|
||||
</div>
|
||||
</div>
|
||||
<% } else { %>
|
||||
<h3 class="program-heading-title"><%- gettext('Your Program Journey') %></h3>
|
||||
<div class="program-heading-message">
|
||||
<div>
|
||||
<%- interpolate(gettext(
|
||||
'Track and plan your progress through the %(count)s courses in this program.'),
|
||||
{ count: totalCount }, true) %>
|
||||
</div>
|
||||
<div><%- gettext('To complete the program, you must earn a verified certificate for each course.') %></div>
|
||||
</div>
|
||||
<% } %>
|
||||
<% if (is_learner_eligible_for_one_click_purchase && (typeof is_mobile_only === 'undefined' || is_mobile_only === false)) { %>
|
||||
<a href="<%- completeProgramURL %>" class="btn-brand btn cta-primary upgrade-button complete-program" id="program_dashboard_course_upsell_all_button">
|
||||
<%- gettext('Upgrade All Remaining Courses (')%>
|
||||
<% if (discount_data.is_discounted) { %>
|
||||
<span class='list-price'>
|
||||
<%- StringUtils.interpolate(
|
||||
gettext('${listPrice}'), {listPrice: discount_data.total_incl_tax_excl_discounts.toFixed(2)}
|
||||
)
|
||||
%>
|
||||
</span>
|
||||
<% } %>
|
||||
<%- StringUtils.interpolate(
|
||||
gettext(' ${price} {currency} )'),
|
||||
{price: full_program_price.toFixed(2), currency: discount_data.currency}
|
||||
)
|
||||
%>
|
||||
</a>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="course-list-headings">
|
||||
<% if (inProgressCount) { %>
|
||||
<div class="in-progress-group">
|
||||
<h4 class="course-list-heading">
|
||||
<span class="status"><%- gettext('COURSES IN PROGRESS') %></span>
|
||||
<span class="count"><%- inProgressCount %></span>
|
||||
</h4>
|
||||
<div class="course-list js-course-list-in-progress row"></div>
|
||||
</div>
|
||||
<% } %>
|
||||
<% if (remainingCount) { %>
|
||||
<div class="remaining-group">
|
||||
<h4 class="course-list-heading">
|
||||
<span class="status"><%- gettext('REMAINING COURSES') %></span>
|
||||
<span class="count"><%- remainingCount %></span>
|
||||
</h4>
|
||||
<div class="course-list js-course-list-remaining row"></div>
|
||||
</div>
|
||||
<% } %>
|
||||
<div class="completed-group">
|
||||
<h4 class="course-list-heading">
|
||||
<span class="status"><%- gettext('COMPLETED COURSES') %></span>
|
||||
<span class="count"><%- completedCount %></span>
|
||||
</h4>
|
||||
<% if (completedCount) { %>
|
||||
<div class="course-list js-course-list-completed row"></div>
|
||||
<% } else { %>
|
||||
<div class="motivating-section">
|
||||
<p class='motivating-heading'><%- gettext("As you complete courses, you will see them listed here.") %></p>
|
||||
<p class='motivating-message'><%- gettext('Complete courses on your schedule to ensure you stand out in your field!') %></p>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
<% if (programDiscussionEnabled) { %>
|
||||
<div class="tab-pane fade" id="community" role="tabpanel" aria-labelledby="community-tab">Community tab content</div>
|
||||
<% } %>
|
||||
<div class="tab-pane fade" id="live" role="tabpanel" aria-labelledby="live-tab">Live tab content</div>
|
||||
<div class="tab-pane fade" id="pathways" role="tabpanel" aria-labelledby="pathaways-tab">
|
||||
<% if (creditPathways.length > 0) { %>
|
||||
<aside class="aside js-program-pathways program-credit-pathways">
|
||||
<h2 class = "divider-heading"><%- gettext('Additional Credit Opportunities') %></h2>
|
||||
|
||||
<% for (var i = 0; i < creditPathways.length; i++) {
|
||||
var pathway = creditPathways[i];
|
||||
%>
|
||||
<div class="pathway-wrapper">
|
||||
<div class = "pathway-info">
|
||||
<h2 class="pathway-heading"> <%- pathway.name %> </h2>
|
||||
<% if (pathway.description) { %>
|
||||
<p> <%- pathway.description %> </p>
|
||||
<% } %>
|
||||
<% if (pathway.destination_url) { %>
|
||||
<div class="sidebar-button-wrapper">
|
||||
<a href="<%- pathway.destination_url %>" class="pathway-link">
|
||||
<button class="btn pathway-button sidebar-button" data-pathway-uuid="<%- pathway.uuid %>" data-pathway-name="<%- pathway.name %>"><%- gettext('Learn More') %></button>
|
||||
</a>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</aside>
|
||||
<% } %>
|
||||
|
||||
<% if (industryPathways.length > 0) { %>
|
||||
<aside class="aside js-program-pathways program-industry-pathways">
|
||||
<h2 class = "divider-heading"><%- gettext('Additional Professional Opportunities') %></h2>
|
||||
|
||||
<% for (var i = 0; i < industryPathways.length; i++) {
|
||||
var pathway = industryPathways[i];
|
||||
%>
|
||||
<div class="pathway-wrapper">
|
||||
<div class = "pathway-info">
|
||||
<h2 class="pathway-heading"> <%- pathway.name %> </h2>
|
||||
<% if (pathway.description) { %>
|
||||
<p> <%- pathway.description %> </p>
|
||||
<% } %>
|
||||
<% if (pathway.destination_url) { %>
|
||||
<div class="sidebar-button-wrapper">
|
||||
<a href="<%- pathway.destination_url %>" class="pathway-link">
|
||||
<button class="btn pathway-button sidebar-button" data-pathway-uuid="<%- pathway.uuid %>" data-pathway-name="<%- pathway.name %>"><%- gettext('Learn More') %></button>
|
||||
</a>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</aside>
|
||||
<% } %>
|
||||
Pathways tab content
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<aside class="js-program-sidebar program-sidebar"></aside>
|
||||
@@ -1,31 +1,5 @@
|
||||
<header class="js-program-header program-header full-width-banner"></header>
|
||||
<!-- TODO: consider if article is the most appropriate element here -->
|
||||
|
||||
<% if (programDiscussionEnabled) { %>
|
||||
<div class="program-detail-nav">
|
||||
<ul class="nav nav-tabs program-detail-nav-list" id="programTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn-link active" id="home-tab" data-toggle="tab" data-target="#journey" type="button" role="tab" aria-controls="journey" aria-selected="true">Journey</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn-link" id="profile-tab" data-toggle="tab" data-target="#community" type="button" role="tab" aria-controls="community" aria-selected="false">Community</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn-link" id="contact-tab" data-toggle="tab" data-target="#live" type="button" role="tab" aria-controls="live" aria-selected="false">Live</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link btn-link" id="contact-tab" data-toggle="tab" data-target="#pathways" type="button" role="tab" aria-controls="pathways" aria-selected="false">Pathways</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tab-content" id="ProgramTabContent">
|
||||
<div class="tab-pane fade show active" id="journey" role="tabpanel" aria-labelledby="journey-tab">Journey tab content</div>
|
||||
<div class="tab-pane fade" id="community" role="tabpanel" aria-labelledby="community-tab">Community tab content</div>
|
||||
<div class="tab-pane fade" id="live" role="tabpanel" aria-labelledby="live-tab">Live tab content</div>
|
||||
<div class="tab-pane fade" id="pathways" role="tabpanel" aria-labelledby="pathaways-tab">Pathways tab content</div>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<article class="program-details-content">
|
||||
<div class="program-heading">
|
||||
<% if (completedCount === totalCount) { %>
|
||||
@@ -102,3 +76,4 @@
|
||||
</div>
|
||||
</article>
|
||||
<aside class="js-program-sidebar program-sidebar"></aside>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user