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:
Yusuf Musleh
2024-05-07 20:29:35 +03:00
committed by GitHub
parent 88336c78d6
commit a3924f687b
8 changed files with 121 additions and 21 deletions

View 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;
}
);

View File

@@ -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();
});

View File

@@ -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({

View File

@@ -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;