From a1f5cc94c180adee2d58a3fe822dc2543a8a7287 Mon Sep 17 00:00:00 2001
From: Riju19 <19.riju@gmail.com>
Date: Tue, 12 Mar 2019 09:49:29 +0530
Subject: [PATCH] Enhance adding tags on story details page

This patch allows multiple tags to be added to stories faster by pressing the enter key and there's a tiny cross icon that can be clicked once done adding all tags. Also resolves a task where the input field needs to be cleared after adding a tag.

Change-Id: I2af4566627e544d03a9c52a1c556932c6dbb1347
Task: 6197
---
 .../controller/story_detail_controller.js       |  3 ++-
 src/app/stories/template/detail.html            | 17 +++++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/app/stories/controller/story_detail_controller.js b/src/app/stories/controller/story_detail_controller.js
index 7c85f2ce..8045fcbd 100644
--- a/src/app/stories/controller/story_detail_controller.js
+++ b/src/app/stories/controller/story_detail_controller.js
@@ -784,6 +784,7 @@ angular.module('sb.story').controller('StoryDetailController',
         $scope.showAddTag = false;
 
         $scope.toggleAddTag = function() {
+            $scope.newTag.name = null;
             $scope.showAddTag = !$scope.showAddTag;
         };
 
@@ -794,11 +795,11 @@ angular.module('sb.story').controller('StoryDetailController',
                         DSCacheFactory.get('defaultCache').put(
                             storyboardApiBase + '/stories/' + story.id,
                             updatedStory);
-                        $scope.showAddTag = false;
                         $scope.story.tags.push(tag_name);
                         $scope.loadEvents();
                     },
                     handleServiceError);
+                $scope.newTag.name = null;
             }
         };
 
diff --git a/src/app/stories/template/detail.html b/src/app/stories/template/detail.html
index e1141b6b..46adf212 100644
--- a/src/app/stories/template/detail.html
+++ b/src/app/stories/template/detail.html
@@ -366,18 +366,19 @@
     <p class="text-muted" ng-if="story.tags.length == 0 && !isLoggedIn">
         <em>This story has no tags yet.</em>
     </p>
-    <span class="input-group" ng-show="showAddTag">
-       <input type="text" class="form-control" ng-model="newTag.name"
-         typeahead="tag as tag.name for tag in searchTags($viewValue)"
-         typeahead-on-select="updateViewValue($model.name);"/>
-
+    <div class="col-xs-3 input-group" ng-show="showAddTag">
+       <input type="text" 
+              class="form-control"
+              ng-model="newTag.name"
+              typeahead="tag as tag.name for tag in searchTags($viewValue)"
+              typeahead-on-select="updateViewValue($model.name);"
+              ng-enter="addTag(newTag.name)"
+              focus/>
         <span class="input-group-btn">
-            <button class="btn btn-primary" type="button"
-                    ng-click="addTag(newTag.name)">Add</button>
             <button class="btn btn-default" type="button"
                     ng-click="toggleAddTag()">Cancel</button>
         </span>
-    </span>
+    </div>
     <button class="btn btn-default" ng-click="toggleAddTag()"
             ng-show="!showAddTag && isLoggedIn">
         <i class="fa fa-plus-circle"></i>&nbsp;Add Tag