Show in user interface the saving state of the task

ChangeLog

@@ -9,6 +9,7 @@ New features:
 
 Improvements:
 
+* Show in user interface the saving state of the task
 * Add dropdown menu for subtasks, categories, swimlanes, columns, custom filters, task links and groups
 * Add new template hooks
 * Application settings are not cached anymore in the session

app/Template/board/task_private.php

@@ -12,6 +12,7 @@
 
     <?php if ($this->board->isCollapsed($task['project_id'])): ?>
         <div class="task-board-collapsed">
+            <div class="task-board-saving-icon" style="display: none;"><i class="fa fa-spinner fa-pulse"></i></div>
             <?php if ($this->user->hasProjectAccess('taskmodification', 'edit', $task['project_id'])): ?>
                 <?= $this->render('board/task_menu', array('task' => $task)) ?>
             <?php else: ?>
@@ -27,6 +28,7 @@
         </div>
     <?php else: ?>
         <div class="task-board-expanded">
+            <div class="task-board-saving-icon" style="display: none;"><i class="fa fa-spinner fa-pulse fa-2x"></i></div>
             <?php if ($this->user->hasProjectAccess('taskmodification', 'edit', $task['project_id'])): ?>
                 <?= $this->render('board/task_menu', array('task' => $task)) ?>
             <?php else: ?>

assets/css/src/base.css

@@ -70,4 +70,3 @@ hr {
 .web-notification-icon:hover {
     color: #000;
 }
-

assets/css/src/board.css

@@ -155,3 +155,16 @@ div.draggable-item-selected {
     float: left;
     padding-right: 5px;
 }
+
+/* board saving state */
+.task-board-saving-state {
+    opacity: 0.3;
+}
+
+.task-board-saving-icon {
+    position: absolute;
+    margin: auto;
+    width: 100%;
+    text-align: center;
+    color: #000;
+}

assets/js/src/Board.js

@@ -108,9 +108,12 @@ Board.prototype.dragAndDrop = function() {
         placeholder: "draggable-placeholder",
         items: ".draggable-item",
         stop: function(event, ui) {
+            var taskId = ui.item.attr('data-task-id');
             ui.item.removeClass("draggable-item-selected");
+            self.changeTaskState(taskId);
+
             self.save(
-                ui.item.attr('data-task-id'),
+                taskId,
                 ui.item.parent().attr("data-column-id"),
                 ui.item.index() + 1,
                 ui.item.parent().attr('data-swimlane-id')
@@ -130,6 +133,12 @@ Board.prototype.dragAndDrop = function() {
     $(".board-task-list").sortable(params);
 };
 
+Board.prototype.changeTaskState = function(taskId) {
+    var task = $("div[data-task-id=" + taskId + "]");
+    task.addClass('task-board-saving-state');
+    task.find('.task-board-saving-icon').show();
+};
+
 Board.prototype.listen = function() {
     var self = this;