feat: Tag sections, subsections, and the whole course (#34690)
(In the legacy UI, if the 'new_studio_mfe.use_tagging_taxonomy_list_page' waffle flag is enabled)
This commit is contained in:
54
cms/static/js/views/course_manage_tags.js
Normal file
54
cms/static/js/views/course_manage_tags.js
Normal file
@@ -0,0 +1,54 @@
|
||||
define([
|
||||
'jquery', 'underscore', 'backbone', 'js/utils/templates',
|
||||
'edx-ui-toolkit/js/utils/html-utils', 'js/views/utils/tagging_drawer_utils',
|
||||
'js/views/tag_count', 'js/models/tag_count'],
|
||||
function(
|
||||
$, _, Backbone, TemplateUtils, HtmlUtils, TaggingDrawerUtils, TagCountView, TagCountModel
|
||||
) {
|
||||
'use strict';
|
||||
|
||||
var CourseManageTagsView = Backbone.View.extend({
|
||||
events: {
|
||||
'click .manage-tags-button': 'openManageTagsDrawer',
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
this.template = TemplateUtils.loadTemplate('course-manage-tags');
|
||||
this.courseId = course.id;
|
||||
},
|
||||
|
||||
openManageTagsDrawer: function(event) {
|
||||
const taxonomyTagsWidgetUrl = this.model.get('taxonomy_tags_widget_url');
|
||||
const contentId = this.courseId;
|
||||
TaggingDrawerUtils.openDrawer(taxonomyTagsWidgetUrl, contentId);
|
||||
},
|
||||
|
||||
renderTagCount: function() {
|
||||
const contentId = this.courseId;
|
||||
const tagCountsForCourse = this.model.get('course_tags_count');
|
||||
const tagsCount = tagCountsForCourse !== undefined ? tagCountsForCourse[contentId] : 0;
|
||||
var countModel = new TagCountModel({
|
||||
content_id: contentId,
|
||||
tags_count: tagsCount,
|
||||
course_authoring_url: this.model.get('course_authoring_url'),
|
||||
}, {parse: true});
|
||||
var tagCountView = new TagCountView({el: this.$('.tag-count'), model: countModel});
|
||||
tagCountView.setupMessageListener();
|
||||
tagCountView.render();
|
||||
this.$('.tag-count').click((event) => {
|
||||
event.preventDefault();
|
||||
this.openManageTagsDrawer();
|
||||
});
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var html = this.template(this.model.attributes);
|
||||
HtmlUtils.setHtml(this.$el, HtmlUtils.HTML(html));
|
||||
this.renderTagCount();
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
return CourseManageTagsView;
|
||||
}
|
||||
);
|
||||
@@ -34,17 +34,22 @@ function(
|
||||
|
||||
renderTagCount: function() {
|
||||
const contentId = this.model.get('id');
|
||||
const tagCountsByUnit = this.model.get('tag_counts_by_unit')
|
||||
const tagsCount = tagCountsByUnit !== undefined ? tagCountsByUnit[contentId] : 0
|
||||
const tagCountsByBlock = this.model.get('tag_counts_by_block')
|
||||
// Skip the course block since that is handled elsewhere in course_manage_tags
|
||||
if (contentId.includes('@course')) {
|
||||
return
|
||||
}
|
||||
const tagsCount = tagCountsByBlock !== undefined ? tagCountsByBlock[contentId] : 0
|
||||
const tagCountElem = this.$(`.tag-count[data-locator="${contentId}"]`);
|
||||
var countModel = new TagCountModel({
|
||||
content_id: contentId,
|
||||
tags_count: tagsCount,
|
||||
course_authoring_url: this.model.get('course_authoring_url'),
|
||||
}, {parse: true});
|
||||
var tagCountView = new TagCountView({el: this.$('.tag-count'), model: countModel});
|
||||
var tagCountView = new TagCountView({el: tagCountElem, model: countModel});
|
||||
tagCountView.setupMessageListener();
|
||||
tagCountView.render();
|
||||
this.$('.tag-count').click((event) => {
|
||||
tagCountElem.click((event) => {
|
||||
event.preventDefault();
|
||||
this.openManageTagsDrawer();
|
||||
});
|
||||
|
||||
@@ -4,10 +4,12 @@
|
||||
define([
|
||||
'jquery', 'underscore', 'gettext', 'js/views/pages/base_page', 'js/views/utils/xblock_utils',
|
||||
'js/views/course_outline', 'common/js/components/utils/view_utils', 'common/js/components/views/feedback_alert',
|
||||
'common/js/components/views/feedback_notification', 'js/views/course_highlights_enable', 'js/views/course_video_sharing_enable'],
|
||||
'common/js/components/views/feedback_notification', 'js/views/course_highlights_enable', 'js/views/course_video_sharing_enable',
|
||||
'js/views/course_manage_tags'],
|
||||
function($, _, gettext, BasePage, XBlockViewUtils, CourseOutlineView, ViewUtils, AlertView, NoteView,
|
||||
CourseHighlightsEnableView,
|
||||
CourseVideoSharingEnableView
|
||||
CourseVideoSharingEnableView,
|
||||
CourseManageTagsView
|
||||
) {
|
||||
'use strict';
|
||||
|
||||
@@ -135,6 +137,15 @@ function($, _, gettext, BasePage, XBlockViewUtils, CourseOutlineView, ViewUtils,
|
||||
this.highlightsEnableView.render();
|
||||
}
|
||||
|
||||
// if tagging enabled
|
||||
if (this.model.get('use_tagging_taxonomy_list_page')) {
|
||||
this.courseManageTagsView = new CourseManageTagsView({
|
||||
el: this.$('.status-manage-tags'),
|
||||
model: this.model
|
||||
});
|
||||
this.courseManageTagsView.render();
|
||||
}
|
||||
|
||||
// if video sharing enable
|
||||
if (this.model.get('video_sharing_enabled')) {
|
||||
this.videoSharingEnableView = new CourseVideoSharingEnableView({
|
||||
|
||||
@@ -185,6 +185,7 @@
|
||||
|
||||
.status-release,
|
||||
.status-highlights-enabled,
|
||||
.status-manage-tags,
|
||||
.status-video-sharing-enabled,
|
||||
.status-studio-frontend {
|
||||
@extend %t-copy-base;
|
||||
@@ -202,6 +203,7 @@
|
||||
}
|
||||
|
||||
.status-highlights-enabled,
|
||||
.status-manage-tags,
|
||||
.status-video-sharing-enabled {
|
||||
vertical-align: top;
|
||||
}
|
||||
@@ -209,9 +211,12 @@
|
||||
.status-release-label,
|
||||
.status-release-value,
|
||||
.status-highlights-enabled-label,
|
||||
.status-course-manage-tags-label,
|
||||
.status-video-sharing-enabled-label,
|
||||
.status-highlights-enabled-value,
|
||||
.status-course-manage-tags-value,
|
||||
.status-highlights-enabled-info,
|
||||
.status-course-manage-tags-info,
|
||||
.status-video-sharing-enabled-info,
|
||||
.status-actions {
|
||||
display: inline-block;
|
||||
@@ -221,6 +226,7 @@
|
||||
|
||||
.status-release-value,
|
||||
.status-highlights-enabled-value,
|
||||
.status-course-manage-tags-value,
|
||||
.status-video-sharing-enabled-value {
|
||||
@extend %t-strong;
|
||||
|
||||
@@ -228,6 +234,7 @@
|
||||
}
|
||||
|
||||
.status-highlights-enabled-info,
|
||||
.status-course-manage-tags-info,
|
||||
.status-video-sharing-enabled-info {
|
||||
font-size: smaller;
|
||||
margin-left: $baseline / 2;
|
||||
|
||||
Reference in New Issue
Block a user