Dev (#284)

* Added a default color for each board category to be used over the def…

* board.js fix for previous commit

* Feature for integration with Issue Tracking systems loosely based on TortoiseSVN Bugtraq.

api/boardRoutes.php

@@ -77,6 +77,7 @@ $app->post('/boards/remove', function() use($app, $jsonResponse) {
             R::trashAll($board->xownLane);
             R::trashAll($board->xownCategory);
             R::trashAll($board->xownAutoaction);
+            R::trashAll($board->xownTracker);
             R::trash($board);
             R::exec('DELETE from board_user WHERE board_id = ?', array($data->boardId));
             $jsonResponse->addAlert('success', 'Removed board ' . $board->name . '.');

api/helpers.php

@@ -216,6 +216,7 @@ function loadBoardData($board, $data) {
     foreach($data->categories as $item) {
         $category = R::load('category', $item->id);
         $category->name = $item->name;
+        $category->color = $item->color;
 
         // New category, add it to the board.
         if (!$category->id) {
@@ -224,6 +225,22 @@ function loadBoardData($board, $data) {
         R::store($category);
     }
 
+    $removeIds = getIdsToRemove($board->xownTracker, $data->trackers);
+    foreach($removeIds as $id) {
+        unset($board->xownTracker[$id]);
+    }
+    foreach($data->trackers as $item) {
+        $tracker = R::load('tracker', $item->id);
+        $tracker->name = $item->name;
+        $tracker->bugexpr = $item->bugexpr;
+
+        // New issue tracker, add it to the board.
+        if (!$tracker->id) {
+            $board->xownTracker[] = $tracker;
+        }
+        R::store($tracker);
+    }
+
     // Add or remove users as selected.
     for($i = 1; $i < count($data->users); $i++) {
         $user = R::load('user', $i);

index.html

@@ -53,6 +53,7 @@
         <script src="lib/angular-route.js"></script>
         <script src="lib/angular-sanitize.js"></script>
         <script src="lib/ng-context-menu.min.js"></script>
+        <script src="lib/hyperlink.js"></script>
         <script src="lib/marked.min.js"></script>
         <script src="lib/prefixfree.min.js"></script>
         <script src="lib/spectrum.js"></script>

js/controllers/boards.js

@@ -23,7 +23,7 @@ function ($scope, $routeParams, $location, $interval, $window,
     $scope.alerts = AlertService;
     $scope.marked = function(text) {
         if (text) {
-            return $window.marked(text);
+            return $window.marked(hyperlink(text, $scope.trackers));
         } else {
             return '';
         }
@@ -111,6 +111,7 @@ function ($scope, $routeParams, $location, $interval, $window,
     $scope.userNames = [];
     $scope.laneNames = [];
     $scope.categories = [];
+    $scope.trackers = [];
     $scope.currentBoard = {
         loading: true,
         name: 'Kanban Board App'
@@ -189,12 +190,18 @@ function ($scope, $routeParams, $location, $interval, $window,
                     });
 
                     if (board.ownCategory) {
-                        board.ownCategory.unshift({ id: 0, name: 'Uncategorized' });
+                        board.ownCategory.unshift({ id: 0, name: 'Uncategorized', color: '#ffffe0' });
                         board.ownCategory.forEach(function(category) {
                             $scope.categories[category.id] = category.name;
                         });
                     }
 
+                    if (board.ownTracker) {
+                        board.ownTracker.forEach(function(tracker) {
+                            $scope.trackers[tracker.id] = [tracker.name, tracker.bugexpr];
+                        });
+                    }
+
                     $scope.currentBoard = board;
                     $scope.boardNames.current = board.id;
                     boardFound = true;

js/controllers/boardsItemView.js

@@ -44,6 +44,18 @@ function ($scope, $window, BoardService) {
             convertDates($scope.viewItem.ownActivity);
         };
 
+    $scope.setColor = function(item) {
+        var color = item.color;
+        if (item.color != $scope.currentBoard.ownCategory[0].color)
+            return item.color;
+        $scope.currentBoard.ownCategory.forEach(function(cat) {
+            if(cat.id == item.category) {
+                color = cat.color;
+            }
+        });
+        return color;
+    }
+    
     $scope.openItem = function(item, openModal) {
         if (undefined === openModal) {
             openModal = true;

js/controllers/settingsAutoActions.js

@@ -1,11 +1,12 @@
 taskBoardControllers.controller('AutomaticActionsCtrl',
 ['$scope', '$interval', 'BoardService',
 function ($scope, $interval, BoardService) {
+    var defaultColor = '#ffffe0';
     $scope.loadingActions = true;
     $scope.actions = [];
 
     $scope.secondarySelection = [];
-    $scope.boardCategories = [{ id: 0, name: 'Uncategorized' }];
+    $scope.boardCategories = [{ id: 0, name: 'Uncategorized', color: defaultColor }];
     $scope.userList = [{ id: 0, name: 'Unassigned', username: 'Unassigned' }];
 
     $scope.actionData = {
@@ -79,7 +80,7 @@ function ($scope, $interval, BoardService) {
         },
 
         getCategories = function(boardData) {
-            var categories = [{ id: '0', name: 'Uncategorized' }];
+            var categories = [{ id: '0', name: 'Uncategorized', color: defaultColor }];
 
             if (boardData && boardData.ownCategory) {
                 boardData.ownCategory.forEach(function(category) {

js/controllers/settingsBoardForm.js

@@ -1,6 +1,8 @@
 taskBoardControllers.controller('BoardFormSettingsCtrl',
 ['$scope', 'BoardService',
 function ($scope, BoardService) {
+    var defaultColor = '#ffffe0';
+
     $scope.boardFormData = {
         setFocus: false,
         boardId: 0,
@@ -10,10 +12,15 @@ function ($scope, BoardService) {
         laneName: '',
         categories: [],
         categoryName: '',
+        color: defaultColor,
         users: [],
         nameError: false,
         lanesError: false,
         categoriesError: false,
+        trackers: [],
+        trackerName: '',
+        bugexpr: '',
+        trackersError: false,
         isSaving: false,
         updateLanesSorting: function() {
             var that = this;
@@ -52,7 +59,17 @@ function ($scope, BoardService) {
                 board.ownCategory.forEach(function(cat) {
                     that.categories.push({
                         id: cat.id,
-                        name: cat.name
+                        name: cat.name,
+                        color: cat.color
+                    });
+                });
+            }
+            if (undefined !== board.ownTracker) {
+                board.ownTracker.forEach(function(trac) {
+                    that.trackers.push({
+                        id: trac.id,
+                        name: trac.name,
+                        bugexpr: trac.bugexpr
                     });
                 });
             }
@@ -67,14 +84,14 @@ function ($scope, BoardService) {
         addLane: function() {
             this.lanesError = false;
             if (this.laneName === '') {
-                this.setAlert(false, true, false, 'Column  name cannot be empty.');
+                this.setAlert(false, true, false, false, 'Column  name cannot be empty.');
                 return;
             }
 
             var that = this;
             this.lanes.forEach(function(lane) {
                 if (that.laneName == lane.name) {
-                    that.setAlert(false, true, false, 'That column name has already been added.');
+                    that.setAlert(false, true, false, false, 'That column name has already been added.');
                     that.lanesError = true;
                 }
             });
@@ -103,14 +120,14 @@ function ($scope, BoardService) {
         addCategory: function() {
             this.categoriesError = false;
             if (this.categoryName === '') {
-                this.setAlert(false, false, true, 'Category name cannot be empty.');
+                this.setAlert(false, false, true, false, 'Category name cannot be empty.');
                 return;
             }
 
             var that = this;
             this.categories.forEach(function(category) {
                 if (that.categoryName == category) {
-                    this.setAlert(false, false, true, 'That category name has already been added.');
+                    this.setAlert(false, false, true, false, 'That category name has already been added.');
                 }
             });
 
@@ -118,7 +135,8 @@ function ($scope, BoardService) {
             if (!this.categoriesError) {
                 this.categories.push({
                     id: 0,
-                    name: this.categoryName
+                    name: this.categoryName,
+                    color: this.color
                 });
             }
             this.categoryName = '';
@@ -127,16 +145,50 @@ function ($scope, BoardService) {
             if (this.isSaving) { return; }
             this.categories.splice(this.categories.indexOf(category), 1);
         },
+        addTracker: function() {
+            this.trackersError = false;
+            if (this.trackerName === '') {
+                this.setAlert(false, false, false, true, 'Issue Tracker URL cannot be empty.');
+                return;
+            }
+            if (this.bugexpr === '') {
+                this.setAlert(false, false, false, true, 'Bug ID regular expression cannot be empty.');
+                return;
+            }
+            var that = this;
+            this.trackers.forEach(function(tracker) {
+                if (that.trackerName == tracker) {
+                    this.setAlert(false, false, false, true, 'That Issue Tracker URL has already been added.');
+                }
+            });
+
+            // Add the new issue tracker (if no error) and reset the input.
+            if (!this.trackersError) {
+                this.trackers.push({
+                    id: 0,
+                    name: this.trackerName,
+                    bugexpr: this.bugexpr
+                });
+            }
+            this.trackerName = '';
+            this.bugexpr = '';
+        },
+        removeTracker: function(tracker) {
+            if (this.isSaving) { return; }
+            this.trackers.splice(this.trackers.indexOf(tracker), 1);
+        },
         setForSaving: function() {
             this.nameError = false;
             this.lanesError = false;
             this.categoriesError = false;
+            this.trackersError = false;
             this.isSaving = true;
         },
-        setAlert: function(name, lane, cat, message) {
+        setAlert: function(name, lane, cat, trac, message) {
             this.nameError = name;
             this.lanesError = lane;
             this.categoriesError = cat;
+            this.trackersError = trac;
             this.isSaving = false;
             $scope.alerts.showAlert({ 'type': 'error', 'text': message });
         },
@@ -149,15 +201,24 @@ function ($scope, BoardService) {
             this.laneName = '';
             this.categories = [];
             this.categoryName = '';
+            this.color = defaultColor;
+            $('#spectrum').spectrum('enable');
+            $scope.spectrum(defaultColor);
             this.users = [];
             this.nameError = false;
             this.lanesError = false;
             this.categoriesError = false;
+            this.trackers = [];
+            this.trackerName = '';
+            this.bugexpr = '';
+            this.trackersError = false;
             this.isSaving = false;
         },
         // Uses jQuery to close modal and reset form data.
         cancel: function() {
             $('.boardModal').modal('hide');
+            $('#spectrum').spectrum('hide');
+            $('#spectrum').spectrum('enable');
             var that = this;
             $('.boardModal').on('hidden.bs.modal', function (e) {
                 that.reset();
@@ -166,8 +227,24 @@ function ($scope, BoardService) {
     };
     $scope.$parent.boardFormData = $scope.boardFormData;
 
+    $scope.spectrum = function(color) {
+        color = color || defaultColor;
+        $('#spectrum').spectrum({
+            color: color,
+            allowEmpty: false,
+            localStorageKey: 'taskboard.colorPalette',
+            showPalette: true,
+            palette: [ ['#fff', '#ececec', '#ffffe0', '#ffe0fa', '#bee7f4', '#c3f4b5', '#debee8', '#ffdea9', '#ffbaba'] ],
+            showSelectionPalette: true,
+            showButtons: false,
+            showInput: true,
+            preferredFormat: 'hex3',
+        });
+    };
     $scope.addBoard = function(boardFormData) {
         boardFormData.setForSaving();
+        $('#spectrum').spectrum('disable');
+
         if (!checkFormInputs(boardFormData)) {
             return;
         }
@@ -186,6 +263,8 @@ function ($scope, BoardService) {
 
     $scope.editBoard = function(boardFormData) {
         boardFormData.setForSaving();
+        $('#spectrum').spectrum('disable');
+
         if (!checkFormInputs(boardFormData)) {
             return;
         }
@@ -202,14 +281,48 @@ function ($scope, BoardService) {
         });
     };
 
+    $scope.editedCategory = {};
+    $scope.editColor = function(category) {
+        if ($scope.editedCategory.id === undefined)
+        {
+            $scope.editedCategory.id = category.id;
+            $scope.editedCategory.name = category.name;
+
+            $scope.editedCategory.color = $scope.boardFormData.color;
+            $scope.spectrum(category.color);
+        }
+        else if (($scope.editedCategory.id != category.id) &&
+                ($scope.editedCategory.name != category.name))
+        {
+            $scope.spectrum()
+            $scope.editedCategory = {};
+        }
+    };
+    $scope.storeColor = function(e) {
+        if (e.which === 13) { // Enter key 
+            $scope.boardFormData.categories.forEach(function(cat){
+                if ((cat.id == $scope.editedCategory.id) && 
+                   (cat.name == $scope.editedCategory.name))
+                    cat.color = $scope.boardFormData.color;
+            });
+            $scope.spectrum();
+            $scope.editedCategory = {};
+        }
+        else if (e.which === 27) { // Escape key
+            $scope.spectrum();
+	    $scope.editedCategory = {};
+        }
+    }; 
+
+
     var checkFormInputs = function(boardFormData) {
         if ('' === boardFormData.name) {
-            boardFormData.setAlert(true, false, false, 'Board name cannot be empty.');
+            boardFormData.setAlert(true, false, false, false, 'Board name cannot be empty.');
             return false;
         }
 
         if (0 === boardFormData.lanes.length) {
-            boardFormData.setAlert(false, true, false, 'At least one lane is required.');
+            boardFormData.setAlert(false, true, false, false, 'At least one lane is required.');
             return false;
         }
 

js/services/board.js

@@ -17,6 +17,7 @@ function($http) {
                 name: boardData.name,
                 lanes: boardData.lanes,
                 categories: boardData.categories,
+                trackers: boardData.trackers,
                 users: boardData.users
             });
         },
@@ -27,6 +28,7 @@ function($http) {
                 name: boardData.name,
                 lanes: boardData.lanes,
                 categories: boardData.categories,
+                trackers: boardData.trackers,
                 users: boardData.users
             });
         },

lib/hyperlink.js

@@ -0,0 +1,33 @@
+hyperlink = function(item, trackers) {
+
+  var s = item;
+  
+  var bugId = /%BUGID(?:\\(\d))?%/g;
+
+  if (trackers === undefined) return s;
+
+  for (i in trackers)
+  {
+    var tracker = trackers[i][0];
+    var bug     = trackers[i][1];
+
+    if ((tracker == "") || (bug == "")) continue;
+
+    var bGroups = bugId.exec(tracker);
+    var bugEx = new RegExp(bug);
+    var regEx = new RegExp("(^|\\s|[^\\\\\\?\\/\\-\\[])(" + bug + ")(?=\\W|$)", "mg"); 
+    //s = s.replace(regEx, "\$1[\$2]("+tracker.replace(bugId,"\$2")+")");
+    s = s.replace(regEx, function(match,g1,g2,offset, text){
+      
+      
+      var m = bugEx.exec(g2);
+      var r = tracker.replace(bugId, function(match ,p1, offset, text) {
+        var idx = 0;
+        if (p1 !== undefined) idx = parseInt(p1);
+        return m[idx];
+      });
+      return g1+"["+g2+"]("+r+")";
+    });
+  } 
+  return s;
+}

partials/board.html

@@ -56,11 +56,11 @@
                          data-ng-class="{'filtered': item.filtered, 'hidden': item.filtered && filter.hide}"
                          data-ng-repeat="item in lane.ownItem | orderBy:'position':false"
                          data-ng-dblclick="openItem(item)"
-                         style="background-color: {{ item.color }}"
+                         data-ng-style="{'background-color': setColor(item)}"
                          data-item-id="{{ item.id }}"
                          data-context-menu="onContextMenu(lane.id, item)" data-target="itemMenu">
                         <div class="itemHeader">
-                            <h4>{{ item.title }}</h4>
+                            <h4><span data-ng-bind-html="marked(item.title)"></span></h4>
                             <span class="badge" title="Points">{{ item.points }}</span>
                         </div>
                         <div class="description" data-ng-bind-html="marked(item.description)"></div>

partials/boardItemViewModal.html

@@ -8,7 +8,8 @@
                     <span aria-hidden="true" class="fa fa-times"></span>
                     <span class="sr-only">Close</span>
                 </button>
-                <h3 class="modal-title" id="itemViewLabel">{{ viewItem.title }}
+                <h3 class="modal-title" id="itemViewLabel">
+                    <span data-ng-bind-html="marked(viewItem.title)"></span>
                     <span data-ng-if="viewItem.points"> - {{ viewItem.points }}</span>
                 </h3>
             </div>

partials/settingsBoardModal.html

@@ -44,23 +44,85 @@
                         <h5>Categories</h5>
                         <ul class="list-group editable">
                             <li class="list-group-item small" data-ng-class="{ disabled: boardFormData.isSaving }"
-                                data-ng-repeat="category in boardFormData.categories | orderBy:'category':false">
+                                data-ng-repeat="category in boardFormData.categories | orderBy:'category':false"
+								style="background-color: {{ category.color }}">
                                 <span class="item-text">{{ category.name }}</span>
                                 <span class="links">
                                     <a class="fa fa-trash-o pull-right" title="Remove"
                                        data-ng-click="boardFormData.removeCategory(category)"></a>
                                     <span data-click-to-edit="category.name"
+                                          data-ng-click="editColor(category)"
+                                          data-ng-keydown="storeColor($event)"
                                           data-ng-disabled="boardFormData.isSaving"></span>
                                 </span>
                             </li>
                         </ul>
-                        <input class="form-control wide" type="text" placeholder="Category Name"
+                        <input class="form-control half-width" style="width: 85%;" type="text" placeholder="Category Name"
                                data-ng-model="boardFormData.categoryName" data-ng-disabled="boardFormData.isSaving">
+						<input class="form-control half-width" type="text" id="spectrum" data-ng-model="boardFormData.color"
+							   data-on-load-callback="spectrum">
                         <button type="submit" id="modalAddCategory" class="btn btn-default fa fa-plus"
                                 data-ng-disabled="boardFormData.isSaving"></button>
                     </form>
                 </div>
                 <div class="clearfix"></div>
+                <div class="form-group short-top" data-ng-class="{ 'has-error': boardFormData.trackersError }">
+                    <form role="form" class="form form-inline" data-ng-submit="boardFormData.addTracker()">
+                        <h5>Issue Trackers</h5>
+                        <p class="small clearfix short-top" data-ng-if="!boardFormData.trackers.length">
+                          <em>
+                            Idea based on <a href="https://tortoisesvn.net/docs/release/TortoiseSVN_en/tsvn-dug-bugtracker.html">TortoiseSVN bugtracker</a>.<br/>
+                            The %BUGID% can have a format of %BUGID\[1-9]% to further specify which group from Bug-ID regular expression is used (whole match is used as a default).<br/><br/>
+                            Example URL:    https://github.com/kiswa/TaskBoard/issues/%BUGID\1%<br/>
+                            Example Bug-ID: (?:Issue)?#(\d+)<br/>
+                            Replaces all Bug-ID matched strings within all board's items with hyperlinks to the Issue Tracker's issue.<br/>
+                            #1 -> <a href="https://github.com/kiswa/TaskBoard/issues/1">#1</a> (link to https://github.com/kiswa/TaskBoard/issues/1)<br/>
+                            Issue#2 -> <a href="https://github.com/kiswa/TaskBoard/issues/2">Issue#2</a> (link to https://github.com/kiswa/TaskBoard/issues/2)
+                          </em>
+                        </p>
+                        <ul class="list-group editable">
+                            <li class="list-group-item small" data-ng-class="{ disabled: boardFormData.isSaving }"
+                                data-ng-repeat="tracker in boardFormData.trackers | orderBy:'tracker':false">
+                                <table style="width: 100%;table-layout:fixed;">
+                                    <tr>
+                                      <td style="width:70%;padding:0px 15px 0px 15px;">
+                                          <span class="item-text">{{ tracker.name }}</span>
+                                          <span class="links">
+                                              <span data-click-to-edit="tracker.name"
+                                                    data-ng-disabled="boardFormData.isSaving"></span>
+                                          </span>
+                                      </td>
+                                      <td style="padding:0px 15px 0px 15px;border-left: 1px solid lightgray;">
+                                          <span class="item-text">{{ tracker.bugexpr }}</span>
+                                          <span class="links">
+                                              <span data-click-to-edit="tracker.bugexpr"
+                                                    data-ng-disabled="boardFormData.isSaving"></span>
+                                          </span>
+                                      </td>
+                                      <td style="width:25px;padding:0px 5px 0px 5px;border-left: 1px solid lightgray;">
+                                          <span class="links">
+                                              <a class="fa fa-trash-o pull-right" title="Remove"
+                                                 data-ng-click="boardFormData.removeTracker(tracker)"></a>
+                                          </span>
+                                      </td>
+                                    </tr>
+                                </table>
+                            </li>
+                        </ul>
+                        <input class="form-control half-width" style="width: 70%;" type="text" placeholder="Issue Tracker URL. Use %BUGID% as placeholder"
+                               title="Idea based on [https://tortoisesvn.net/docs/release/TortoiseSVN_en/tsvn-dug-bugtracker.html].
+The %BUGID% can have a format of %BUGID\[1-9]% to specify which group from BUG-ID regular expression is used (whole match is used as a default).
+Example: https://github.com/kiswa/TaskBoard/issues/%BUGID\1%."
+                               data-ng-model="boardFormData.trackerName" data-ng-disabled="boardFormData.isSaving">
+                        <input class="form-control wide" style="width: 25%;" type="text" placeholder="Bug-ID expression"
+                               title="Regular expression to be replaced by Issue Tracker url within the item text.
+Example: (?:Issue)?#(\d+)"
+                               data-ng-model="boardFormData.bugexpr" data-ng-disabled="boardFormData.isSaving">
+                        <button type="submit" id="modalAddTracker" class="btn btn-default fa fa-plus"
+                                data-ng-disabled="boardFormData.isSaving"></button>
+                    </form>
+                </div>
+                <div class="clearfix"></div>
                 <div class="form-group short-top">
                     <h5>Select Users</h5>
                     <div class="half-width" data-ng-repeat="user in users">

partials/settingsBoardTable.html

@@ -43,7 +43,7 @@
                     </td>
                     <td>
                         <ul class="list-group">
-                            <li class="list-group-item" data-ng-repeat="category in board.ownCategory | orderBy:'name':false">{{ category.name }}</li>
+                            <li class="list-group-item" data-ng-repeat="category in board.ownCategory | orderBy:'name':false" style="background-color:{{ category.color }}">{{ category.name }}</li>
                         </ul>
                     </td>
                     <td>