Move and undo move XBlock

- TNL-6062
- TNL-6229

common/static/common/js/components/views/feedback.js

@@ -21,6 +21,8 @@
                 options: {
                     title: '',
                     message: '',
+                    titleHtml: '',  // an optional html that comes after the title.
+                    messageHtml: '',    // an optional html that comes after the message.
                     intent: null,  // "warning", "confirmation", "error", "announcement", "step-required", etc
                     type: null, // "alert", "notification", or "prompt": set by subclass
                     shown: true,  // is this view currently being shown?

common/static/common/js/components/views/feedback_move.js

@@ -0,0 +1,49 @@
+/**
+ * The MovedAlertView to show confirmation message when moving XBlocks.
+ */
+(function(define) {
+    'use strict';
+    define(['jquery', 'underscore', 'common/js/components/views/feedback_alert', 'js/views/utils/xblock_utils',
+        'js/views/utils/move_xblock_utils', 'edx-ui-toolkit/js/utils/string-utils'],
+        function($, _, AlertView, XBlockViewUtils, MoveXBlockUtils, StringUtils) {
+            var MovedAlertView = AlertView.Confirmation.extend({
+                events: _.extend({}, AlertView.Confirmation.prototype.events, {
+                    'click .action-undo-move': 'undoMoveXBlock'
+                }),
+
+                options: $.extend({}, AlertView.Confirmation.prototype.options),
+
+                initialize: function() {
+                    AlertView.prototype.initialize.apply(this, arguments);
+                    this.movedAlertView = null;
+                },
+
+                undoMoveXBlock: function(event) {
+                    var self = this,
+                        $moveButton = $(event.target),
+                        sourceLocator = $moveButton.data('source-locator'),
+                        sourceDisplayName = $moveButton.data('source-display-name'),
+                        sourceParentLocator = $moveButton.data('source-parent-locator'),
+                        targetIndex = $moveButton.data('target-index');
+                    XBlockViewUtils.moveXBlock(sourceLocator, sourceParentLocator, targetIndex)
+                    .done(function(response) {
+                        // show XBlock element
+                        $('.studio-xblock-wrapper[data-locator="' + response.move_source_locator + '"]').show();
+                        if (self.movedAlertView) {
+                            self.movedAlertView.hide();
+                        }
+                        self.movedAlertView = MoveXBlockUtils.showMovedNotification(
+                            StringUtils.interpolate(
+                                gettext('Move cancelled. "{sourceDisplayName}" has been moved back to its original ' +
+                                    'location.'),
+                                {
+                                    sourceDisplayName: sourceDisplayName
+                                }
+                            )
+                        );
+                    });
+                }
+            });
+            return MovedAlertView;
+        });
+}).call(this, define || RequireJS.define);

common/static/common/templates/components/system-feedback.underscore

@@ -15,8 +15,9 @@
     <% } %>
 
     <div class="copy">
-      <h2 class="title title-3" id="<%= type %>-<%= intent %>-title"><%- title %></h2>
+      <h2 class="title title-3" id="<%= type %>-<%= intent %>-title"><%- title %><% if(titleHtml) { %> <%= titleHtml %> <% } %></h2>
       <% if(obj.message) { %><p class="message" id="<%= type %>-<%= intent %>-description"><%- message %></p><% } %>
+      <% if(messageHtml) { %> <%= messageHtml %> <% } %>
     </div>
 
     <% if(obj.actions) { %>