fix(overlap): Issue angular-gantt#606 - Overlap Style Missing on Added Task

Handle task add.  Added timeout similar to data change handler. Added demo control.

Author: TomSchober

demo/app/index.html

@@ -211,6 +211,13 @@ <h4 class="panel-title">
                                                     </div>
                                                 </div>
 
+                                                <div class="form-group text-center">
+                                                    <label class="control-label"><i class="fa fa-database"></i>Add Overlapping Task</label><br>
+                                                    <div class="form-group">
+                                                        <input type="number" ng-model="options.targetDataAddRowIndex" step="1" min="0" class="form-control" placeholder="Row Index"/>
+                                                        <button class="btn btn-default" ng-click="addOverlapTaskToTargetRowIndex()">Add</button>
+                                                    </div>
+                                                </div>
 
                                             </div>
                                         </div>

demo/app/scripts/controllers/main.js

@@ -163,6 +163,7 @@ angular.module('angularGanttDemoApp')
                 enabled: true,
                 conflictChecker: true
             },
+            targetDataAddRowIndex: undefined,
             canDraw: function(event) {
                 var isLeftMouseButton = event.button === 0 || event.button === 1;
                 return $scope.options.draw && !$scope.options.readOnly && isLeftMouseButton;
@@ -367,6 +368,35 @@ angular.module('angularGanttDemoApp')
             $scope.data = [];
         };
 
+        // Add data to target row index
+        $scope.addOverlapTaskToTargetRowIndex = function() {
+            var targetDataAddRowIndex = parseInt($scope.options.targetDataAddRowIndex);
+
+            if (targetDataAddRowIndex) {
+                var targetRow = $scope.data[$scope.options.targetDataAddRowIndex];
+
+                if (targetRow && targetRow.tasks && targetRow.tasks.length > 0) {
+                    var firstTaskInRow = targetRow.tasks[0];
+                    var copiedColor = firstTaskInRow.color;
+                    var firstTaskEndDate = firstTaskInRow.to.toDate();
+                    var overlappingFromDate = new Date(firstTaskEndDate);
+
+                    overlappingFromDate.setDate(overlappingFromDate.getDate() - 1);
+
+                    var overlappingToDate = new Date(overlappingFromDate);
+
+                    overlappingToDate.setDate(overlappingToDate.getDate() + 7);
+
+                    targetRow.tasks.push({
+                        "name": "Overlapping",
+                        "from": overlappingFromDate,
+                        "to": overlappingToDate,
+                        "color": copiedColor
+                    });
+                }
+            }
+        };
+
 
         // Visual two way binding.
         $scope.live = {};

src/plugins/overlap.js

@@ -137,6 +137,18 @@
                             handleOverlaps(oldRow.tasks);
                         }
                     });
+
+                    api.tasks.on.add(scope, function(task) {
+                        // TODO: Mimicked functionality from api.data.on.change to defer until element creation, but not ideal.  Refactor necessary to raise 'add' event after task is fully drawn.
+                        $timeout(function() {
+                            if (scope.global) {
+                                var rows = task.row.rowsManager.rows;
+                                handleGlobalOverlaps(rows);
+                            } else {
+                                handleOverlaps(task.row.tasks);
+                            }
+                        });
+                    });
                 }
             }
         };