From 0c1d28d2514114d407a9efe864e142a2f2f616cc Mon Sep 17 00:00:00 2001 From: Michael Krotscheck Date: Fri, 18 Apr 2014 10:09:23 -0700 Subject: [PATCH] Story detail view cleanup This commit collapses the multi-column view into a much more compact vertical layout, and with the added screen realestate adds more obvious edit controls for tasks. - Collapsed story detail view into a single column. - Added better edit toggle controls for the story and task edit forms. - Pulled task edit form out into its own custom directive so we can use it in multiple places. - Added disabled controls for author editing, since filtering thousands of users needs to be implemented on the backend first, and the assignee_id patch hasn't landed yet. Change-Id: I92b05ca7ef4b2bb4d0cc536eb2acf278249e2fe6 --- .../controllers/story_task_list_controller.js | 11 +- .../story_task_list_item_controller.js | 15 +- src/app/stories/directives/task_edit_form.js | 37 +++ src/app/templates/story/detail.html | 254 ++++++++++-------- src/app/templates/story/task_edit_form.html | 46 ++++ 5 files changed, 236 insertions(+), 127 deletions(-) create mode 100644 src/app/stories/directives/task_edit_form.js create mode 100644 src/app/templates/story/task_edit_form.html diff --git a/src/app/stories/controllers/story_task_list_controller.js b/src/app/stories/controllers/story_task_list_controller.js index 0307d1c0..96d7ce5b 100644 --- a/src/app/stories/controllers/story_task_list_controller.js +++ b/src/app/stories/controllers/story_task_list_controller.js @@ -18,7 +18,7 @@ * Controller that provides methods that allow editing of a story. */ angular.module('sb.story').controller('StoryTaskListController', - function ($log, $scope, $state, $stateParams, Task, Project) { + function ($log, $scope, $state, $stateParams, Task) { 'use strict'; // Parse the ID @@ -44,11 +44,6 @@ angular.module('sb.story').controller('StoryTaskListController', */ $scope.newTask = new Task({ story_id: id }); - /** - * Projects for the new task form - */ - $scope.projects = Project.query(); - /** * UI flag for when we're initially loading the view. * @@ -87,8 +82,8 @@ angular.module('sb.story').controller('StoryTaskListController', * Adds a task. */ $scope.addTask = function () { - $scope.newTask.$save(function () { - $scope.loadTasks(); + $scope.newTask.$save(function (savedTask) { + $scope.tasks.push(savedTask); $scope.newTask = new Task({story_id: id}); }); }; diff --git a/src/app/stories/controllers/story_task_list_item_controller.js b/src/app/stories/controllers/story_task_list_item_controller.js index f9227f29..780eb26b 100644 --- a/src/app/stories/controllers/story_task_list_item_controller.js +++ b/src/app/stories/controllers/story_task_list_item_controller.js @@ -18,10 +18,11 @@ * Controller for our story list. */ angular.module('sb.story').controller('StoryTaskListItemController', - function ($scope, $state, $modal, Project, Session, Task) { + function ($scope, $state, $modal, Project, Session, Task, User) { 'use strict'; var projectId = $scope.task.project_id || null; + var assigneeId = $scope.task.assignee_id || null; if (!!projectId) { Project.get({id: projectId}, @@ -32,6 +33,16 @@ angular.module('sb.story').controller('StoryTaskListItemController', }); } + if (!!assigneeId) { + User.get({id: assigneeId}, + function (assignee) { + $scope.assignee = assignee; + }, function () { + $scope.assignee = null; + }); + } + + /** * Updates this task's status */ @@ -89,7 +100,7 @@ angular.module('sb.story').controller('StoryTaskListItemController', }; /** - * Removes this task + * Updates the task list. */ $scope.updateTask = function () { $scope.task.$update(function () { diff --git a/src/app/stories/directives/task_edit_form.js b/src/app/stories/directives/task_edit_form.js new file mode 100644 index 00000000..d40bf6b9 --- /dev/null +++ b/src/app/stories/directives/task_edit_form.js @@ -0,0 +1,37 @@ +/* + * 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. + */ + +/** + * This directive encapsulates our task edit form. + */ +angular.module('sb.story').directive('taskEditForm', + function () { + 'use strict'; + + + return { + restrict: 'E', + templateUrl: 'app/templates/story/task_edit_form.html', + scope: { + task: '=', + onButtonClick: '&', + buttonLabel: '@' + }, + controller: function ($scope, Project) { + $scope.projects = Project.query(); + } + }; + }); \ No newline at end of file diff --git a/src/app/templates/story/detail.html b/src/app/templates/story/detail.html index 8fac6259..cd8fc0e2 100644 --- a/src/app/templates/story/detail.html +++ b/src/app/templates/story/detail.html @@ -16,7 +16,7 @@
-
+
@@ -25,18 +25,10 @@ src="'/inline/story_detail_form.html'" ng-show="showEditForm">
+
-
-

- -   -

-
-
-
-
@@ -51,6 +43,7 @@ No title +

{{story.description}} @@ -67,11 +60,11 @@

@@ -113,80 +106,52 @@ @@ -246,44 +211,109 @@