Task status updates

Task statuses can now be changed by authorized users. It's a fairly naive
implementation, using the three statuses that are already supported by the API.
Ultimately I'd like it if the status list were populated from the server, however
for now this should do.

- Created a dropdown control that allows a status to be changed.
- Updated the UI to present slightly different UI for logged in
or logged out.
- Update UI to allow different color indicators for different statuses.

Change-Id: I98c1eb31438fb7f05d991ad7c0972dc994087a1e

src/app/stories/controllers/story_task_list_item_controller.js

@@ -31,4 +31,12 @@ angular.module('sb.story').controller('StoryTaskListItemController',
                     $scope.project = null;
                 });
         }
+
+        /**
+         * Updates this task's status
+         */
+        $scope.updateStatus = function (status) {
+            $scope.task.status = status;
+            $scope.task.$update();
+        };
     });

src/app/templates/story/detail.html

@@ -167,10 +167,12 @@
                 <tr ng-repeat="task in tasks"
                     ng-controller="StoryTaskListItemController">
                     <td>
-                    <span class="label label-default pull-right">
-                        {{task.status}}
-                    </span>
-
+                        <div class="pull-right">
+                            <task-status-dropdown
+                                    editable="{{isLoggedIn}}"
+                                    on-change="updateStatus(status)"
+                                    status="{{task.status}}"/>
+                        </div>
                         <p><strong>
                             <a href="">{{task.title}}</a>
                         </strong></p>

src/app/templates/util/task_status_dropdown.html

@@ -0,0 +1,23 @@
+<span class="label label-{{style}}" ng-hide="editable">
+    {{status}}
+</span>
+<div class="dropdown" ng-show="editable">
+    <a class="btn btn-{{style}} btn-xs dropdown-toggle" data-toggle="dropdown">
+        {{status}}
+        <i class="fa fa-caret-down"></i>
+    </a>
+    <ul class="dropdown-menu dropdown-menu-right">
+        <li ng-class="{disabled: status == 'Todo'}">
+            <a href=""
+               ng-click="setStatus('Todo')">Todo</a>
+        </li>
+        <li ng-class="{disabled: status == 'In review'}">
+            <a href=""
+               ng-click="setStatus('In review')">In review</a>
+        </li>
+        <li ng-class="{disabled: status == 'Landed'}">
+            <a href=""
+               ng-click="setStatus('Landed')">Landed</a>
+        </li>
+    </ul>
+</div>

src/app/util/directive/task_status_dropdown.js

@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2013 Hewlett-Packard Development Company, L.P.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License. You may obtain
+ * a copy of the License at
+ *
+ * 	http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * A convenience directive that allows us to bind the current task status onto
+ * a control. This control will automatically render itself either as a
+ * dropdown (if editable) or as a label (if not). It will also automatically
+ * color itself based on the status.
+ *
+ * TODO(krotscheck): Once we can load task status types from the database,
+ * allow binding that to this control. At that point we can revisit the color
+ * mapping too, because it might be possible to genericize this.
+ */
+angular.module('sb.util').directive('taskStatusDropdown',
+    function () {
+        'use strict';
+
+        /**
+         * Map our task status to a display style.
+         */
+        function setStyle(status) {
+            switch (status) {
+                case 'Landed':
+                    return 'success';
+                case 'In review':
+                    return 'info';
+                case 'Todo':
+                    return 'default';
+                default:
+                    return 'default';
+            }
+        }
+
+        return {
+            restrict: 'E',
+            templateUrl: 'app/templates/util/task_status_dropdown.html',
+            scope: {
+                status: '@',
+                onChange: '&',
+                editable: '@'
+            },
+            link: function ($scope) {
+
+                // Initialize the style.
+                $scope.style = setStyle($scope.status);
+
+                // Make sure our scope can set its own status
+                $scope.setStatus = function (newStatus) {
+                    if (newStatus !== $scope.status) {
+                        $scope.style = setStyle(newStatus);
+                        $scope.status = newStatus;
+                        $scope.onChange({status: newStatus});
+                    }
+                };
+            }
+        };
+    });