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

Display validation messages for any xblock on the container page.

Browse Source 
TNL-683
This commit is contained in:
cahrens
2014-10-23 17:21:48 -04:00
parent cb5e90fc08
commit 08ce09bde7
26 changed files with 1146 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cms/templates/js/group-configuration-details.underscore
View File

@@ -71,7 +71,7 @@
<i class="icon-exclamation-sign"></i>
<% } %>
<span class="group-configuration-validation-message">
<%= unit.validation.message %>
<%= unit.validation.text %>
</span>
</p>
<% } %>

3
cms/templates/js/mock/mock-xblock.underscore
View File

@@ -9,6 +9,9 @@
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
<a href="#" class="button action-button notification-action-button" data-notification-action="add-missing-groups">
<span class="action-button-text">Add Missing Groups</span>
</a>
</div>
</header>
<article class="xblock-render">

49
cms/templates/js/xblock-validation-messages.underscore Normal file
View File

@@ -0,0 +1,49 @@
<%
var summaryMessage = validation.get("summary");
var aggregateMessageType = summaryMessage.type;
var aggregateValidationClass = aggregateMessageType === "error"? "has-errors" : "has-warnings";
%>
<div class="xblock-message validation <%= aggregateValidationClass %> <%= additionalClasses %>">
<p class="<%= aggregateMessageType %>"><i class="<%= getIcon(aggregateMessageType) %>"></i>
<%- summaryMessage.text %>
<% if (summaryMessage.action_class) { %>
<a href="#" class="button action-button <%- summaryMessage.action_class %>">
<span class="action-button-text"><%- summaryMessage.action_label %></span>
</a>
<% } else if (summaryMessage.action_runtime_event) {%>
<a href="#" class="button action-button notification-action-button" data-notification-action="<%- summaryMessage.action_runtime_event %>">
<span class="action-button-text"><%- summaryMessage.action_label %></span>
</a>
<% } %>
</p>
<% var detailedMessages = validation.get("messages"); %>
<% if (detailedMessages.length > 0) { %>
<ul class="xblock-message-list">
<% for (var i = 0; i < detailedMessages.length; i++) { %>
<%
var message = detailedMessages[i];
var messageType = message.type
var messageTypeDisplayName = getDisplayName(messageType)
%>
<li class="xblock-message-item <%= messageType %>">
<span class="message-text">
<% if (messageTypeDisplayName) { %>
<span class="sr"><%- messageTypeDisplayName %>:</span>
<% } %>
<%- message.text %>
<% if (message.action_class) { %>
<a href="#" class="button action-button <%- message.action_class %>">
<span class="action-button-text"><%- message.action_label %></span>
</a>
<% } else if (message.action_runtime_event) {%>
<a href="#" class="button action-button notification-action-button" data-notification-action="<%- message.action_runtime_event %>">
<span class="action-button-text"><%- message.action_label %></span>
</a>
<% } %>
</span>
</li>
<% } %>
</ul>
<% } %>
</div>

72
cms/templates/studio_xblock_wrapper.html
View File

@@ -1,16 +1,51 @@
<%!
from django.utils.translation import ugettext as _
from contentstore.views.helpers import xblock_studio_url
import json
%>
<%
xblock_url = xblock_studio_url(xblock)
show_inline = xblock.has_children and not xblock_url
section_class = "level-nesting" if show_inline else "level-element"
collapsible_class = "is-collapsible" if xblock.has_children else ""
label = xblock.display_name or xblock.scope_ids.block_type
messages = json.dumps(xblock.validate().to_json())
%>
<%namespace name='static' file='static_content.html'/>
<%block name="header_extras">
<script type="text/template" id="xblock-validation-messages-tpl">
<%static:include path="js/xblock-validation-messages.underscore" />
</script>
</%block>
<script type='text/javascript'>
require(["js/views/xblock_validation", "js/models/xblock_validation"],
function (XBlockValidationView, XBlockValidationModel) {
var validationMessages = ${messages};
% if xblock_url and not is_root:
validationMessages.showSummaryOnly = true;
% endif
var model = new XBlockValidationModel(validationMessages, {parse: true});
if (!model.get("empty")) {
var validationEle = $('div.xblock-validation-messages[data-locator="${xblock.location | h}"]');
var viewOptions = {
el: validationEle,
model: model
};
% if is_root:
viewOptions.root = true;
% endif
var view = new XBlockValidationView(viewOptions);
view.render();
}
});
</script>
% if not is_root:
% if is_reorderable:
<li class="studio-xblock-wrapper is-draggable" data-locator="${xblock.location | h}" data-course-key="${xblock.location.course_key | h}">
@@ -64,21 +99,29 @@ label = xblock.display_name or xblock.scope_ids.block_type
</ul>
</div>
</div>
% if xblock_url and not is_root:
<div class="xblock-header-secondary">
<div class="meta-info">${_('This block contains multiple components.')}</div>
<ul class="actions-list">
<li class="action-item action-view">
<a href="${xblock_url}" class="action-button">
## Translators: this is a verb describing the action of viewing more details
<span class="action-button-text">${_('View')}</span>
<i class="icon-arrow-right"></i>
</a>
</li>
</ul>
</div>
% if not is_root:
<div class="wrapper-xblock-message xblock-validation-messages" data-locator="${xblock.location | h}"/>
% if xblock_url:
<div class="xblock-header-secondary">
<div class="meta-info">${_('This block contains multiple components.')}</div>
<ul class="actions-list">
<li class="action-item action-view">
<a href="${xblock_url}" class="action-button">
## Translators: this is a verb describing the action of viewing more details
<span class="action-button-text">${_('View')}</span>
<i class="icon-arrow-right"></i>
</a>
</li>
</ul>
</div>
% endif
% endif
</header>
% if is_root:
<div class="wrapper-xblock-message xblock-validation-messages" data-locator="${xblock.location | h}"/>
% endif
% if is_root or not xblock_url:
<article class="xblock-render">
${content}
@@ -86,7 +129,6 @@ label = xblock.display_name or xblock.scope_ids.block_type
% else:
<div class="xblock-message-area">
${content}
</div>
% endif
% if not is_root: