Fix Delete sequence vertex - refs BT#9893 #TMI

app/Resources/public/css/base.css

@@ -5857,7 +5857,9 @@ div#chat-remote-video video {
   -webkit-border-radius: 5px;
   position: relative;
 }
-
+#parents .parent.parent-deleted .sequence-course {
+    text-decoration: line-through;
+}
 #parents .parent .big-icon .sequence-course{
   font-size: 12px;
 }

main/inc/ajax/sequence.ajax.php

@@ -54,12 +54,29 @@ switch ($action) {
                 $image = Display::return_icon('item-sequence.png', null, null, ICON_SIZE_LARGE);
                 $sessionInfo = api_get_session_info($id);
                 if (!empty($sessionInfo)) {
-                    $linkDelete = '';
+                    $linkDelete = $linkUndo = '';
                     if ($showDelete) {
-                        $linkDelete = Display::url(
+                        $linkDelete = Display::toolbarButton(
                             get_lang('Delete'),
-                            'javascript:void(0);',
-                            ['class' => 'delete_vertex', 'data-id' => $id]
+                            '#',
+                            'trash',
+                            'default',
+                            [
+                                'class' => 'delete_vertex btn btn-block btn-xs',
+                                'data-id' => $id
+                            ]
+                        );
+
+                        $linkUndo = Display::toolbarButton(
+                            get_lang('Undo'),
+                            '#',
+                            'undo',
+                            'default',
+                            [
+                                'class' => 'undo_delete btn btn-block btn-xs',
+                                'style' => 'display: none;',
+                                'data-id' => $id
+                            ]
                         );
                     }
 
@@ -68,7 +85,8 @@ switch ($action) {
                     $link .= $image;
                     $link .= '<div class="sequence-course">' . $sessionInfo['name'] . '</div>';
                     $link .= '<div class="sequence-id">' . $id . '</div>';
-                    $link .= '<div class="sequence-deleted">' . $linkDelete . '</div>';
+                    $link .= $linkDelete;
+                    $link .= $linkUndo;
                     $link .= '</div></div>';
                 }
                 break;

main/template/default/admin/resource_sequence.tpl

@@ -88,22 +88,27 @@
             sequenceId = $("#sequence_id option:selected" ).val();
 
             // Load parents
-            $('#parents').on('click', 'a', function() {
-                var vertexId = $(this).attr('data-id');
-                var parent = $(this).parent();
+            $('#parents').on('click', 'a', function(e) {
+                e.preventDefault();
 
-                if (vertexId) {
-                    var class_click = $(this).attr('class');
+                var self = $(this),
+                    parent = self.parent(),
+                    vertexId = self.attr('data-id') || 0;
 
-                    if (class_click == 'undo_delete')  {
-                        parent.find('span').css('text-decoration', 'none');
-                        parent.find('.undo_delete').remove();
-                    } else {
-                        parent.parent().find('span').css('text-decoration', 'line-through');
+                if (!vertexId) {
+                    return;
+                }
 
-                        var link = "<a href=\"javascript:void(0);\" class=\"undo_delete\" data-id="+vertexId+">{{ 'Undo' | get_lang }}</a>";
-                        parent.parent().append(link);
-                    }
+                if (self.is('.delete_vertex')) {
+                    self.hide();
+                    parent.find('.undo_delete').show();
+
+                    self.parents('.parent').addClass('parent-deleted');
+                } else if (self.is('.undo_delete')) {
+                    self.hide();
+                    parent.find('.delete_vertex').show();
+
+                    self.parents('.parent').removeClass('parent-deleted');
                 }
             });
 
@@ -138,36 +143,57 @@
             });
 
             // Button save
-            $('button[name="save_resource"]').click(function() {
+            $('button[name="save_resource"]').click(function(e) {
+                e.preventDefault();
+
+                // parse to integer the parents IDs
+                parentList = parentList.map(function(id) {
+                    return parseInt(id);
+                });
+
+                var deletingVertex = new Array();
 
                 // Delete all vertex confirmed to be deleted.
-                $('#parents .delete_vertex').each( function (index, data) {
-                    var vertexId = $(this).attr('data-id');
-                    var textDecoration = $(this).parent().css('text-decoration');
-                    if (textDecoration == 'line-through') {
-                        $.ajax({
-                            async:false,
-                            url: url + '?a=delete_vertex&id=' + resourceId + '&vertex_id=' + vertexId + '&type=' + type + '&sequence_id=' + sequenceId,
+                $('#parents .parent.parent-deleted').each(function() {
+                    var self = $(this),
+                        vertexId = self.data('id') || 0,
+                        deleteVertex;
+
+                    deleteVertex = $.ajax(url, {
+                        data: {
+                            a: 'delete_vertex',
+                            id: resourceId,
+                            vertex_id: vertexId,
+                            type: type,
+                            sequence_id: sequenceId
+                        },
+                        success: function() {
+                            parentList.splice($.inArray(vertexId, parentList), 1);
+                        }
+                    });
+
+                    deletingVertex.push(deleteVertex);
+                });
+
+                $.when.apply($, deletingVertex).done(function() {
+                    if (resourceId != 0) {
+                        var params = decodeURIComponent(parentList);
+
+                        $.ajax(url, {
+                            data: {
+                                a: 'save_resource',
+                                id: resourceId,
+                                parents: params,
+                                type: type,
+                                sequence_id: sequenceId
+                            },
                             success: function (data) {
-                                parentList.splice( $.inArray(vertexId, parentList), 1 );
-                                /*parent.remove();
-                                useAsReference(type, sequenceId);*/
+                                alert('saved');
+                                useAsReference(type, sequenceId);
                             }
                         });
                     }
                 });
-
-                if (resourceId != 0) {
-                    var params = decodeURIComponent(parentList);
-                    $.ajax({
-                        url: url + '?a=save_resource&id=' + resourceId + '&parents=' + params+'&type='+type+'&sequence_id='+sequenceId,
-                        success: function (data) {
-                            alert('saved');
-                            useAsReference(type, sequenceId);
-                        }
-                    });
-                }
-                return false;
             });
         });
     </script>