Allow assigning tasks without expanding the edition box

Add an autocomplete box for assignee instead of the fixed label
that was now. Allow selecting user from there, and updating
automatically to In progress, with the same behaviour as the
assignee edition field.

Autocomplete box will be replacing a clickable label,
so we don't break the layout and allow inline edition.

Change-Id: Ifac7905e28495550599dd0532b928816d23e3192

src/app/stories/controller/story_detail_controller.js

@@ -86,6 +86,23 @@ angular.module('sb.story').controller('StoryDetailController',
             }
         };
 
+        /**
+        * Formats the user name.
+        */
+        $scope.formatUserName = function (model) {
+            if (!!model) {
+                return model.full_name;
+            }
+            return '';
+        };
+
+        /**
+        * User typeahead search method.
+        */
+        $scope.searchUsers = function (value) {
+            return User.query({full_name: value, limit: 10}).$promise;
+        };
+
         /**
          * UI Flag for when we're in edit mode.
          */

src/app/stories/controller/story_task_list_controller.js

@@ -88,6 +88,16 @@ angular.module('sb.story').controller('StoryTaskListController',
             });
         };
 
+        $scope.disableAssigneeInTasks = function() {
+            // first hide all assignee inputs
+            for (var i=0;i<$scope.tasks.length;i++)
+            {
+                var task = $scope.tasks[i];
+                task.showAssigneeForm = false;
+            }
+        };
+
         // Initialize our view
         $scope.loadTasks();
+
     });

src/app/stories/controller/story_task_list_item_controller.js

@@ -60,12 +60,25 @@ angular.module('sb.story').controller('StoryTaskListItemController',
             $scope.task.$update();
         };
 
+        /**
+         * Select a new user.
+         */
+        $scope.selectNewUser = function (model) {
+            $scope.task.assignee_id = model.id;
+            if ($scope.task.status === 'todo') {
+                $scope.task.status = 'inprogress';
+            }
+            $scope.task.$update();
+            $scope.task.showAssigneeForm = false;
+        };
 
         /**
          * UI Toggle for when the edit form should be displayed.
          */
         $scope.showTaskEditForm = false;
 
+        $scope.showAssigneeForm = false;
+
         /**
          * Scope method to toggle said edit form.
          */
@@ -118,4 +131,16 @@ angular.module('sb.story').controller('StoryTaskListItemController',
                 $scope.showTaskEditForm = false;
             });
         };
+
+        /***
+         * Scope method to show assignee form.
+         */
+        $scope.displayAssigneeForm = function () {
+            $scope.disableAssigneeInTasks();
+
+            if (!$scope.task.showAssigneeForm) {
+                $scope.task.showAssigneeForm = true;
+            }
+        };
+
     });

src/app/stories/template/detail.html

@@ -270,12 +270,31 @@
         </span>
     </td>
     <td ng-hide="showTaskEditForm">
-        <span ng-show="assignee">
-            {{assignee.full_name}}
-        </span>
-        <em class="text-muted" ng-hide="assignee">
-            Not assigned
-        </em>
+        <div class="has-feedback" ng-show="isLoggedIn" ng-click="displayAssigneeForm();">
+            <span class="expandable back-index"
+                ng-hide="task.showAssigneeForm"
+                ng-if="assignee != null">
+            {{assignee.full_name}}</span>
+            <em class="expandable text-muted back-index"
+                ng-hide="task.showAssigneeForm" ng-if="assignee == null">
+            Please click to assign</em>
+            <input type="text"
+                   typeahead-editable="false"
+                   typeahead="user as user.full_name for user in searchUsers($viewValue)"
+                   typeahead-loading="loadingUsers"
+                   typeahead-input-formatter="formatUserName($model)"
+                   typeahead-on-select="selectNewUser($model)"
+                   ng-model="assignee"
+                   ng-show="task.showAssigneeForm" />
+        </div>
+        <div ng-show="!isLoggedIn">
+            <span ng-show="assignee">
+                {{assignee.full_name}}
+            </span>
+            <em class="text-muted" ng-hide="assignee">
+                Not assigned
+            </em>
+        </div>
     </td>
     <td ng-show="showTaskEditForm"
         colspan="3">
@@ -311,3 +330,10 @@
 <script type="text/ng-template" id="/inline/metadata.html">
 
 </script>
+
+<script type="text/javascript">
+$(document).ready(function()
+{
+	$("
+});
+</script>

src/theme/base/edit_tasks.less

@@ -0,0 +1,13 @@
+.expandable {
+    cursor: pointer;
+}
+
+.back-index {
+    z-index: 0;
+}
+
+.dynamic-assignee {
+    position: absolute;
+    left: 150px;
+    box-sizing: border-box;
+}

src/theme/main.less

@@ -41,3 +41,4 @@
 @import './base/tag_input.less';
 @import './base/header.less';
 @import './base/icons.less';
+@import './base/edit_tasks.less';