Merge "Show a modal when editing worklists in a board"

src/app/boards/controller/board_detail_controller.js

@@ -235,19 +235,24 @@ angular.module('sb.board').controller('BoardDetailController',
          * create a worklist to represent the lane if one doesn't exist
          * already.
          */
-        $scope.toggleEditLane = function(lane) {
-            if (lane.worklist.editing) {
-                if (lane.worklist.id === null) {
-                    lane.worklist.$create().then(function(list) {
-                        lane.list_id = list.id;
-                        $scope.board.$update();
-                    });
-                } else {
-                    Worklist.update({id: lane.worklist.id},
-                                    lane.worklist);
+        $scope.editWorklist = function(worklist) {
+            var modalInstance = $modal.open({
+                size: 'lg',
+                templateUrl: 'app/worklists/template/new.html',
+                controller: 'WorklistEditController',
+                resolve: {
+                    worklist: function() {
+                        return worklist;
+                    },
+                    board: function() {
+                        return $scope.board;
+                    }
                 }
-            }
-            lane.worklist.editing = !lane.worklist.editing;
+            });
+
+            modalInstance.result.finally(function() {
+                loadBoard();
+            });
         };
 
         /**

src/app/boards/template/detail.html

@@ -334,22 +334,17 @@
             <div as-sortable-item-handle>
                 <span ng-if="!lane.worklist.editing">
                     <a ng-class="{'kanban-lane-title': !!lane.worklist.title}"
-                       ng-click="toggleEditLane(lane)">
+                       href="/#!/worklist/{{lane.worklist.id}}">
                         {{ lane.worklist.title }}
-                        <i class="fa fa-pencil" ng-if="!lane.worklist.title"></i>
+                    </a>
+                    <a href ng-click="editWorklist(lane.worklist)">
+                        <i class="fa fa-pencil"></i>
                     </a>
                     <button type="button" class="close" title="Remove"
                             ng-click="removeLane(lane)">
                         &times;
                     </button>
                 </span>
-                <input class="form-control"
-                       type="text"
-                       ng-model="lane.worklist.title"
-                       placeholder="Lane Title"
-                       focus
-                       ng-if="lane.worklist.editing"
-                       ng-blur="toggleEditLane(lane)" />
             </div>
             <div ng-if="lane.worklist.automatic"
                  ng-include src="'app/boards/template/board_contents/kanban_lane_contents_static.html'">
@@ -371,7 +366,10 @@
         <div class="kanban-lane" ng-repeat="lane in board.lanes"
              ng-if="!lane.worklist.archived"
              ng-class="{'kanban-lane-automatic': lane.worklist.automatic}">
-            <span class="kanban-lane-title">{{ lane.worklist.title }}</span>
+            <a class="kanban-lane-title"
+               href="/#!/worklist/{{lane.worklist.id}}">
+                {{ lane.worklist.title }}
+            </a>
             <div ng-include src="'app/boards/template/board_contents/kanban_lane_contents.html'"
                  ng-if="(permissions.moveCards || permissions.editBoard) && !lane.worklist.automatic">
             </div>

src/app/worklists/controller/add_worklist_controller.js

@@ -119,4 +119,5 @@ angular.module('sb.worklist').controller('AddWorklistController',
         $scope.resourceTypes = ['Story'];
         $scope.showAddFilter = true;
         $scope.newFilter = angular.copy(blankFilter);
+        $scope.modalTitle = 'New Worklist';
     });

src/app/worklists/controller/worklist_edit_controller.js

@@ -0,0 +1,125 @@
+/*
+ * Copyright (c) 2015-2016 Codethink Limited
+ *
+ * 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.
+ */
+
+/**
+ * Controller for the "new worklist" modal popup.
+ */
+angular.module('sb.worklist').controller('WorklistEditController',
+    function ($scope, $modalInstance, $state, worklist, board, Worklist) {
+        'use strict';
+
+        var blankFilter = {
+            type: 'Story',
+            filter_criteria: [{
+                negative: false,
+                field: null,
+                value: null,
+                title: null
+            }]
+        };
+
+        /**
+         * Saves the worklist.
+         */
+        $scope.save = function () {
+            $scope.isSaving = true;
+            Worklist.update($scope.worklist, function () {
+                $scope.isSaving = false;
+                $modalInstance.dismiss('success');
+            });
+        };
+
+        /**
+         * Close this modal without saving.
+         */
+        $scope.close = function () {
+            $modalInstance.dismiss('cancel');
+        };
+
+        $scope.setType = function(type) {
+            $scope.newFilter.type = type;
+            $scope.resourceTypes = [type];
+            $scope.$broadcast('refresh-types');
+        };
+
+        $scope.setCriterion = function(criterion, tag) {
+            criterion.field = tag.type;
+            criterion.value = tag.value.toString();
+            criterion.title = tag.title;
+        };
+
+        $scope.addCriterion = function(filter) {
+            filter.filter_criteria.push({
+                negative: false,
+                field: null,
+                value: null,
+                title: null
+            });
+        };
+
+        $scope.removeTag = function(criterion) {
+            if ($scope.newFilter.filter_criteria.length > 1) {
+                var idx = $scope.newFilter.filter_criteria.indexOf(criterion);
+                $scope.newFilter.filter_criteria.splice(idx, 1);
+            } else {
+                criterion.field = null;
+                criterion.value = null;
+                criterion.title = null;
+            }
+        };
+
+        $scope.checkNewFilter = function() {
+            var valid = true;
+            angular.forEach(
+                $scope.newFilter.filter_criteria,
+                function(criterion) {
+                    if (criterion.field == null ||
+                        criterion.value == null ||
+                        criterion.title == null) {
+                        valid = false;
+                    }
+                }
+            );
+            return valid;
+        };
+
+        $scope.remove = function(filter) {
+            var idx = $scope.worklist.filters.indexOf(filter);
+            Worklist.Filters.delete({
+                id: $scope.worklist.id,
+                filter_id: filter.id
+            });
+            $scope.worklist.filters.splice(idx, 1);
+        };
+
+        $scope.saveNewFilter = function() {
+            var added = angular.copy($scope.newFilter);
+            Worklist.Filters.create(
+                {id: $scope.worklist.id}, added, function(result) {
+                    $scope.worklist.filters.push(result);
+                }
+            );
+            $scope.showAddFilter = false;
+            $scope.newFilter = angular.copy(blankFilter);
+        };
+
+        $scope.isSaving = false;
+        $scope.worklist = worklist;
+        $scope.resourceTypes = ['Story'];
+        $scope.showAddFilter = false;
+        $scope.newFilter = angular.copy(blankFilter);
+        $scope.modalTitle = 'Edit Worklist';
+    });

src/app/worklists/template/new.html

@@ -17,7 +17,7 @@
     <div class="panel-heading">
         <button type="button" class="close" aria-hidden="true"
                 ng-click="close()">&times;</button>
-        <h3 class="panel-title">New Worklist</h3>
+        <h3 class="panel-title">{{ modalTitle }}</h3>
     </div>
     <div class="panel-body">
         <div class="row">