Merge pull request #2891 from myabc/feature/19669-toolbar-filter-count

19669 Add count to work packages toolbar filter button

app/assets/stylesheets/content/_badges.md

@@ -0,0 +1,13 @@
+# Badges
+
+```
+<span class="badge">0</span>
+<span class="badge">1</span>
+<span class="badge">2</span>
+```
+
+```
+<span class="badge -secondary">0</span>
+<span class="badge -secondary">1</span>
+<span class="badge -secondary">2</span>
+```

app/assets/stylesheets/content/_badges.sass

@@ -0,0 +1,35 @@
+//-- copyright
+// OpenProject is a project management system.
+// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See doc/COPYRIGHT.rdoc for more details.
+//++
+
+$badge-diameter: 1.25rem
+
+.badge
+  @include badge
+
+  &.-secondary
+    @include badge-style($secondary-color, auto)

app/assets/stylesheets/default.css.sass

@@ -44,6 +44,7 @@
 
 @import layout/all
 @import content/accounts
+@import content/badges
 @import content/context_menu
 @import content/forms
 @import content/choice

app/assets/stylesheets/open_project_global/_variables.sass

@@ -34,6 +34,7 @@ $body-font-color:         #555 !default
 $base-line-height:        1.5 !default
 
 $primary-color:           #06799F !default
+$secondary-color:         #bfbfbf !default
 
 $h1-font-size:            rem-calc(28px)    !default
 $h1-font-color:           $body-font-color  !default

frontend/app/templates/work_packages.list.html

@@ -28,6 +28,7 @@
                 ng-click="toggleShowFilterOptions()"
                 ng-class="{active: showFiltersOptions}">
           <i class="icon-filter-big icon-buttons"></i>{{ I18n.t('js.toolbar.filter') }}
+          <span class="badge -secondary">{{ getFilterCount() }}</span>
         </button>
       </li>
       <li class="toolbar-item" feature-flag="detailsView">

frontend/app/work_packages/controllers/work-packages-list-controller.js

@@ -287,4 +287,15 @@ module.exports = function($scope, $rootScope, $state, $location, latestTab,
       );
     }
   };
+
+  $scope.getFilterCount = function() {
+    if ($scope.query) {
+      var filters = $scope.query.filters;
+      return _.size(_.where(filters, function(filter) {
+        return !filter.deactivated;
+      }));
+    } else {
+      return 0;
+    }
+  };
 };

frontend/tests/unit/tests/work_packages/controllers/work-packages-list-controller-test.js

@@ -259,4 +259,39 @@ describe('WorkPackagesListController', function() {
       expect(scope.query.id).to.eq(testQueries['2'].id);
     });
   });
+
+  describe('getFilterCount', function() {
+    beforeEach(function(){
+      var testState = {
+        params: {
+          query_id: testQueries['2'].id
+        },
+        href: function() { return ''; },
+      };
+      var testLocation = {
+        search: function() {
+          return {};
+        },
+        url: angular.identity
+      };
+
+      buildController({}, testState, testLocation);
+    });
+
+    it('returns 0 with no filters', function() {
+      expect(scope.getFilterCount()).to.eq(0);
+    });
+
+    it('returns the filter count with filters', function() {
+      scope.query.filters = [{}, {}];
+
+      expect(scope.getFilterCount()).to.eq(2);
+    });
+
+    it('returns the filter count with deactivated filters', function() {
+      scope.query.filters = [{}, { deactivated: true }, { deactivated: true }];
+
+      expect(scope.getFilterCount()).to.eq(1);
+    });
+  });
 });

spec/features/work_packages/select_query_spec.rb

@@ -37,12 +37,19 @@ describe 'Query selection', type: :feature do
                               member_through_role: role
   }
 
-  let(:filter_name) { 'done_ratio' }
-  let(:i18n_filter_name) { WorkPackage.human_attribute_name(filter_name.to_sym) }
+  let(:filter_1_name) { 'assigned_to_id' }
+  let(:filter_2_name) { 'done_ratio' }
+  let(:i18n_filter_1_name) { WorkPackage.human_attribute_name(filter_1_name.to_sym) }
+  let(:i18n_filter_2_name) { WorkPackage.human_attribute_name(filter_2_name.to_sym) }
+
   let!(:query) do
-    query = FactoryGirl.build(:query, project: project, is_public: true)
-    query.filters = [Queries::WorkPackages::Filter.new(filter_name, operator: '>=', values: [10])]
-    query.save and return query
+    FactoryGirl.build(:query, project: project, is_public: true).tap do |query|
+      query.filters = [
+        Queries::WorkPackages::Filter.new(filter_1_name, operator: '=',  values: ['me']),
+        Queries::WorkPackages::Filter.new(filter_2_name, operator: '>=', values: [10])
+      ]
+      query.save
+    end
   end
 
   let(:work_packages_page) { WorkPackagesPage.new(project) }
@@ -51,17 +58,42 @@ describe 'Query selection', type: :feature do
     allow(User).to receive(:current).and_return current_user
   end
 
+  context 'default view, without a query selected' do
+    before do
+      work_packages_page.visit_index
+      # ensure the page is loaded before expecting anything
+      find('.advanced-filters--filters select option', text: /\AAssignee\Z/,
+                                                       visible: false)
+    end
+
+    it 'shows the default (status) filter', js: true do
+      work_packages_page.click_toolbar_button 'Activate Filter'
+      expect(work_packages_page.find_filter('status_id')).to have_content('Status')
+      expect(work_packages_page.find_filter('status_id'))
+        .to have_select('operators-status_id', selected: 'open')
+    end
+
+    it 'shows filter count within toggle button', js: true do
+      expect(find_button('Activate Filter')).to have_text /1$/
+    end
+  end
+
   context 'when a query is selected' do
     before do
       work_packages_page.select_query query
       # ensure the page is loaded before expecting anything
-      find('.advanced-filters--filters select option', text: /\AAssignee\Z/,
+      find('.advanced-filters--filters select option', text: /\AStart date\Z/,
                                                        visible: false)
     end
 
-    it 'should show the filter', js: true do
-      find('#work-packages-filter-toggle-button').click
-      expect(work_packages_page.selected_filter(filter_name)).to have_content(i18n_filter_name)
+    it 'shows the saved filters', js: true do
+      work_packages_page.click_toolbar_button 'Activate Filter'
+      expect(work_packages_page.find_filter(filter_1_name)).to have_content(i18n_filter_1_name)
+      expect(work_packages_page.find_filter(filter_2_name)).to have_content(i18n_filter_2_name)
+    end
+
+    it 'shows filter count within toggle button', js: true do
+      expect(find_button('Activate Filter')).to have_text /2$/
     end
   end
 end

spec/features/work_packages/work_packages_page.rb

@@ -66,7 +66,7 @@ class WorkPackagesPage
     visit query_path(query)
   end
 
-  def selected_filter(filter_name)
+  def find_filter(filter_name)
     find(".advanced-filters--filters #filter_#{filter_name}")
   end