From: Stas Vilchik <vilchiks@gmail.com>
Date: Tue, 14 Jan 2014 07:18:42 +0000 (+0600)
Subject: New Issues Page: sorting
X-Git-Tag: 4.2~717
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=df4d50f8187e3b5a99d2177ad0e60df1660ba32d;p=sonarqube.git

New Issues Page: sorting
---

diff --git a/plugins/sonar-core-plugin/src/main/resources/org/sonar/l10n/core.properties b/plugins/sonar-core-plugin/src/main/resources/org/sonar/l10n/core.properties
index 044b70a0e7f..b52ecf15b52 100644
--- a/plugins/sonar-core-plugin/src/main/resources/org/sonar/l10n/core.properties
+++ b/plugins/sonar-core-plugin/src/main/resources/org/sonar/l10n/core.properties
@@ -650,6 +650,20 @@ issue_filter.shared_with_all_users=Shared with all users
 issue_filter.sharing=Sharing
 issue_filter.no_issues=No issues
 
+
+#------------------------------------------------------------------------------
+#
+# ISSUE FILTERS
+#
+#------------------------------------------------------------------------------
+issues.sort.creation_date=Creation Date
+issues.sort.update_date=Update Date
+issues.sort.close_date=Close Date
+issues.sort.assignee=Assignee
+issues.sort.severity=Severity
+issues.sort.status=Status
+
+
 #------------------------------------------------------------------------------
 #
 # ISSUE BULK CHANGE
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issues_actions.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issues_actions.hbs.erb
index 3f5aea023b4..3a50d94afed 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issues_actions.hbs.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issues_actions.hbs.erb
@@ -1,5 +1,25 @@
 <script id="issues-actions-template" type="text/x-handlebars-template">
-  <div class="navigator-actions-order">Order by <i class="icon-arrow-down"></i></div>
+  <div class="navigator-actions-order">
+    {{#if sorting}}
+      Ordered by {{sorting.sortText}} {{#if sorting.asc}}<i class="icon-arrow-up"></i>{{else}}<i class="icon-arrow-down"></i>{{/if}}
+    {{else}}
+      Order
+    {{/if}}
+  </div>
+  <ul class="navigator-actions-order-choices">
+    <li data-sort="CREATION_DATE" data-asc="true"><%= message('issues.sort.creation_date') -%> <i class="icon-arrow-up"></i></li>
+    <li data-sort="CREATION_DATE" data-asc="false"><%= message('issues.sort.creation_date') -%> <i class="icon-arrow-down"></i></li>
+    <li data-sort="UPDATE_DATE" data-asc="true"><%= message('issues.sort.update_date') -%> <i class="icon-arrow-up"></i></li>
+    <li data-sort="UPDATE_DATE" data-asc="false"><%= message('issues.sort.update_date') -%> <i class="icon-arrow-down"></i></li>
+    <li data-sort="CLOSE_DATE" data-asc="true"><%= message('issues.sort.close_date') -%> <i class="icon-arrow-up"></i></li>
+    <li data-sort="CLOSE_DATE" data-asc="false"><%= message('issues.sort.close_date') -%> <i class="icon-arrow-down"></i></li>
+    <li data-sort="ASSIGNEE" data-asc="true"><%= message('issues.sort.assignee') -%> <i class="icon-arrow-up"></i></li>
+    <li data-sort="ASSIGNEE" data-asc="false"><%= message('issues.sort.assignee') -%> <i class="icon-arrow-down"></i></li>
+    <li data-sort="SEVERITY" data-asc="true"><%= message('issues.sort.severity') -%> <i class="icon-arrow-up"></i></li>
+    <li data-sort="SEVERITY" data-asc="false"><%= message('issues.sort.severity') -%> <i class="icon-arrow-down"></i></li>
+    <li data-sort="STATUS" data-asc="true"><%= message('issues.sort.status') -%> <i class="icon-arrow-up"></i></li>
+    <li data-sort="STATUS" data-asc="false"><%= message('issues.sort.status') -%> <i class="icon-arrow-down"></i></li>
+  </ul>
   <div class="navigator-actions-total">
     Found: {{paging.total}}
     <span class="navigator-actions-bulk" title="Bulk Change"><i class="icon-settings"></i></span>
diff --git a/sonar-server/src/main/webapp/javascripts/navigator/issues-app.js b/sonar-server/src/main/webapp/javascripts/navigator/issues-app.js
index 2b1a63c1315..ac0d8f234ee 100644
--- a/sonar-server/src/main/webapp/javascripts/navigator/issues-app.js
+++ b/sonar-server/src/main/webapp/javascripts/navigator/issues-app.js
@@ -26,6 +26,7 @@ jQuery(function() {
     this.resultsRegion.show(this.issuesView);
 
     this.issuesActionsView = new window.SS.IssuesActionsView({
+      app: this,
       collection: this.issues
     });
     this.actionsRegion.show(this.issuesActionsView);
@@ -161,15 +162,73 @@ jQuery(function() {
   });
 
 
+  NavigatorApp.storeQuery = function(query, sorting) {
+    var fullQuery = query;
+    if (sorting) {
+      _.extend(fullQuery, {
+        sort: sorting.sort,
+        asc: '' + sorting.asc
+      });
+    }
+
+    var queryString = _.map(fullQuery, function(v, k) {
+      return [k, encodeURIComponent(v)].join('=');
+    }).join('&');
+    this.router.navigate(queryString);
+  };
+
+
+  NavigatorApp.restoreSorting = function(query) {
+    var sort = _.findWhere(query, { key: 'sort' }),
+        asc = _.findWhere(query, { key: 'asc' });
+
+    if (sort && asc) {
+      this.issues.sorting = {
+        sort: sort.value,
+        sortText: jQuery('[data-sort=' + sort.value + ']:first').text(),
+        asc: asc.value === 'true'
+      }
+    }
+  };
+
+
+  NavigatorApp.fetchIssues = function(firstPage) {
+    var query = this.filterBarView.getQuery(),
+        fetchQuery =_.extend({
+          pageIndex: this.issuesPage
+        }, query);
+
+    if (this.issues.sorting) {
+      _.extend(fetchQuery, {
+        sort: this.issues.sorting.sort,
+        asc: this.issues.sorting.asc
+      });
+    }
+
+    this.storeQuery(query, this.issues.sorting);
+
+    if (firstPage) {
+      this.issues.fetch({
+        data: fetchQuery
+      });
+    } else {
+      this.issues.fetch({
+        data: fetchQuery,
+        remove: false
+      });
+    }
+  };
+
+
   NavigatorApp.fetchFirstPage = function() {
     this.issuesPage = 1;
-    this.filterBarView.fetchNextPage();
+    this.fetchIssues(true);
   };
 
 
   NavigatorApp.fetchNextPage = function() {
     this.issuesPage++;
-    this.filterBarView.fetchNextPage();
+    this.fetchIssues(false);
   };
 
 });
diff --git a/sonar-server/src/main/webapp/javascripts/navigator/issues.js b/sonar-server/src/main/webapp/javascripts/navigator/issues.js
index 6aa130bf3b3..287871a5f88 100644
--- a/sonar-server/src/main/webapp/javascripts/navigator/issues.js
+++ b/sonar-server/src/main/webapp/javascripts/navigator/issues.js
@@ -122,20 +122,48 @@ jQuery(function() {
 
   var IssuesActionsView = Backbone.Marionette.ItemView.extend({
     template: Handlebars.compile(jQuery('#issues-actions-template').html() || ''),
+
+
     collectionEvents: {
       'sync': 'render'
     },
 
 
+    events: {
+      'click .navigator-actions-order': 'toggleOrderChoices',
+      'click .navigator-actions-order-choices': 'sort'
+    },
+
+
     onRender: function() {
       this.$el.toggle(this.collection.length > 0);
     },
 
 
+    toggleOrderChoices: function() {
+      this.$('.navigator-actions-order-choices').toggleClass('open');
+    },
+
+
+    sort: function(e) {
+      this.$('.navigator-actions-order-choices').removeClass('open');
+      var el = jQuery(e.target),
+          sort = el.data('sort'),
+          asc = el.data('asc');
+      this.collection.sorting = {
+        sort: sort,
+        sortText: el.text(),
+        asc: asc
+      };
+      this.options.app.fetchFirstPage();
+    },
+
+
     serializeData: function() {
       var data = Backbone.Marionette.ItemView.prototype.serializeData.apply(this, arguments);
       return _.extend(data || {}, {
-        paging: this.collection.paging
+        paging: this.collection.paging,
+        sorting: this.collection.sorting
       });
     }
   });
@@ -160,37 +188,12 @@ jQuery(function() {
 
 
     changeValue: function() {
-      var query = this.getQuery(),
-          fetchQuery =_.extend({
-            pageIndex: this.options.app.issuesPage
-          }, query);
-
-      this.storeQuery(query);
-      this.options.app.issues.fetch({
-        data: fetchQuery
-      });
+      this.options.app.fetchFirstPage();
     },
 
 
     fetchNextPage: function() {
-      var query = this.getQuery(),
-          fetchQuery =_.extend({
-            pageIndex: this.options.app.issuesPage
-          }, query);
-
-      this.storeQuery(query);
-      this.options.app.issues.fetch({
-        data: fetchQuery,
-        remove: false
-      });
-    },
-
-
-    storeQuery: function(query) {
-      var queryString = _.map(query, function(v, k) {
-        return [k, encodeURIComponent(v)].join('=');
-      }).join('&');
-      this.options.app.router.navigate(queryString);
+      this.options.app.fetchNextPage();
     }
 
   });
@@ -218,6 +221,7 @@ jQuery(function() {
         }
       });
       this.app.filterBarView.restoreFromQuery(params);
+      this.app.restoreSorting(params);
       this.app.fetchFirstPage();
     }
   });
diff --git a/sonar-server/src/main/webapp/stylesheets/navigator.css b/sonar-server/src/main/webapp/stylesheets/navigator.css
index 1a737a6c958..1135dd848c9 100644
--- a/sonar-server/src/main/webapp/stylesheets/navigator.css
+++ b/sonar-server/src/main/webapp/stylesheets/navigator.css
@@ -150,7 +150,7 @@
   background: #ffffff url("../images/loading.gif") no-repeat 4px 2px;
 }
 .navigator-actions {
-  padding: 0 10px;
+  padding: 0 10px 0 0;
   line-height: 30px;
   border-right: 1px solid #e1e1e1;
   border-top: 1px solid #e1e1e1;
@@ -158,7 +158,40 @@
 }
 .navigator-actions-order {
   float: left;
+  padding: 0 10px;
   cursor: pointer;
+  transition: all 0.3s ease;
+}
+.navigator-actions-order:hover {
+  background-color: #efefef;
+}
+.navigator-actions-order-choices {
+  position: fixed;
+  z-index: 2;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  bottom: 30px;
+  left: 0;
+  min-width: 160px;
+  max-height: 180px;
+  background-color: #fff;
+  border-top: 1px solid #e1e1e1;
+  border-right: 1px solid #e1e1e1;
+  overflow: scroll;
+  display: none;
+}
+.navigator-actions-order-choices > li {
+  height: 30px;
+  line-height: 30px;
+  padding: 0 10px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.navigator-actions-order-choices > li:hover {
+  background-color: #efefef;
+}
+.navigator-actions-order-choices.open {
+  display: block;
 }
 .navigator-actions-total {
   float: right;
diff --git a/sonar-server/src/main/webapp/stylesheets/navigator/base.css b/sonar-server/src/main/webapp/stylesheets/navigator/base.css
index d6b2885d02a..09d87485b16 100644
--- a/sonar-server/src/main/webapp/stylesheets/navigator/base.css
+++ b/sonar-server/src/main/webapp/stylesheets/navigator/base.css
@@ -150,7 +150,7 @@
   background: #ffffff url("../images/loading.gif") no-repeat 4px 2px;
 }
 .navigator-actions {
-  padding: 0 10px;
+  padding: 0 10px 0 0;
   line-height: 30px;
   border-right: 1px solid #e1e1e1;
   border-top: 1px solid #e1e1e1;
@@ -158,7 +158,40 @@
 }
 .navigator-actions-order {
   float: left;
+  padding: 0 10px;
   cursor: pointer;
+  transition: all 0.3s ease;
+}
+.navigator-actions-order:hover {
+  background-color: #efefef;
+}
+.navigator-actions-order-choices {
+  position: fixed;
+  z-index: 2;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  bottom: 30px;
+  left: 0;
+  min-width: 160px;
+  max-height: 180px;
+  background-color: #fff;
+  border-top: 1px solid #e1e1e1;
+  border-right: 1px solid #e1e1e1;
+  overflow: scroll;
+  display: none;
+}
+.navigator-actions-order-choices > li {
+  height: 30px;
+  line-height: 30px;
+  padding: 0 10px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.navigator-actions-order-choices > li:hover {
+  background-color: #efefef;
+}
+.navigator-actions-order-choices.open {
+  display: block;
 }
 .navigator-actions-total {
   float: right;
diff --git a/sonar-server/src/main/webapp/stylesheets/navigator/base.less b/sonar-server/src/main/webapp/stylesheets/navigator/base.less
index 449b2dc4d00..b3053ed3dda 100644
--- a/sonar-server/src/main/webapp/stylesheets/navigator/base.less
+++ b/sonar-server/src/main/webapp/stylesheets/navigator/base.less
@@ -183,7 +183,7 @@
 
 // Status
 .navigator-actions {
-  padding: 0 @navigatorPadding;
+  padding: 0 @navigatorPadding 0 0;
   line-height: @navigatorStatusHeight;
   border-right: 1px solid @navigatorBorderLightColor;
   border-top: 1px solid @navigatorBorderLightColor;
@@ -192,7 +192,42 @@
 
 .navigator-actions-order {
   float: left;
+  padding: 0 @navigatorPadding;
   cursor: pointer;
+  .trans;
+
+  &:hover {
+    background-color: @navigatorBarBackground;
+  }
+}
+
+.navigator-actions-order-choices {
+  .navigator-element;
+  bottom: @navigatorStatusHeight;
+  left: 0;
+  min-width: @navigatorResultsWidth / 2;
+  max-height: @navigatorStatusHeight * 6;
+  background-color: #fff;
+  border-top: 1px solid @navigatorBorderLightColor;
+  border-right: 1px solid @navigatorBorderLightColor;
+  overflow: scroll;
+  display: none;
+
+  & > li {
+    height: @navigatorStatusHeight;
+    line-height: @navigatorStatusHeight;
+    padding: 0 10px;
+    cursor: pointer;
+    .trans;
+
+    &:hover {
+      background-color: @navigatorBarBackground;
+    }
+  }
+
+  &.open {
+    display: block;
+  }
 }
 
 .navigator-actions-total {