From 6ce7ee753ff51752e67bb89852d690a221954937 Mon Sep 17 00:00:00 2001
From: Yolanda Robla <yolanda.robla-mota@hp.com>
Date: Thu, 2 Oct 2014 16:07:10 +0200
Subject: [PATCH] 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
---
 .../controller/story_detail_controller.js     | 17 +++++++++
 .../controller/story_task_list_controller.js  | 10 +++++
 .../story_task_list_item_controller.js        | 25 ++++++++++++
 src/app/stories/template/detail.html          | 38 ++++++++++++++++---
 src/theme/base/edit_tasks.less                | 13 +++++++
 src/theme/main.less                           |  1 +
 6 files changed, 98 insertions(+), 6 deletions(-)
 create mode 100644 src/theme/base/edit_tasks.less

diff --git a/src/app/stories/controller/story_detail_controller.js b/src/app/stories/controller/story_detail_controller.js
index 5cb6cc88..5f8d2a5a 100644
--- a/src/app/stories/controller/story_detail_controller.js
+++ b/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.
          */
diff --git a/src/app/stories/controller/story_task_list_controller.js b/src/app/stories/controller/story_task_list_controller.js
index 96d7ce5b..543db1ec 100644
--- a/src/app/stories/controller/story_task_list_controller.js
+++ b/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();
+
     });
diff --git a/src/app/stories/controller/story_task_list_item_controller.js b/src/app/stories/controller/story_task_list_item_controller.js
index 0beb4c69..3a90ea31 100644
--- a/src/app/stories/controller/story_task_list_item_controller.js
+++ b/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;
+            }
+        };
+
     });
diff --git a/src/app/stories/template/detail.html b/src/app/stories/template/detail.html
index 603b7579..f0e5b478 100644
--- a/src/app/stories/template/detail.html
+++ b/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>
diff --git a/src/theme/base/edit_tasks.less b/src/theme/base/edit_tasks.less
new file mode 100644
index 00000000..3e6d843d
--- /dev/null
+++ b/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;
+}
diff --git a/src/theme/main.less b/src/theme/main.less
index c2ef5127..f599407e 100644
--- a/src/theme/main.less
+++ b/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';