]> source.dussan.org Git - sonarqube.git/commitdiff
New Issues Page: sorting
authorStas Vilchik <vilchiks@gmail.com>
Tue, 14 Jan 2014 07:18:42 +0000 (13:18 +0600)
committerStas Vilchik <vilchiks@gmail.com>
Tue, 14 Jan 2014 07:18:42 +0000 (13:18 +0600)
plugins/sonar-core-plugin/src/main/resources/org/sonar/l10n/core.properties
sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issues_actions.hbs.erb
sonar-server/src/main/webapp/javascripts/navigator/issues-app.js
sonar-server/src/main/webapp/javascripts/navigator/issues.js
sonar-server/src/main/webapp/stylesheets/navigator.css
sonar-server/src/main/webapp/stylesheets/navigator/base.css
sonar-server/src/main/webapp/stylesheets/navigator/base.less

index 044b70a0e7f65cd67d0194b34e1d5846ccaad406..b52ecf15b52c7fc67fb12a6789449801847611af 100644 (file)
@@ -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
index 3f5aea023b43a7cb64cd673516434cd0bee540e1..3a50d94afedc5bd6c549aed4a1b74b95447ad8d4 100644 (file)
@@ -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>
index 2b1a63c1315d1e45471dc50d194280c412941784..ac0d8f234ee8e11a9d5ddaef915070e20f5447e6 100644 (file)
@@ -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);
   };
 
 });
index 6aa130bf3b30192f8f45a8c55a05fbc673d9253f..287871a5f88a1abe02c9da36fd7d5bef714a0d69 100644 (file)
@@ -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();
     }
   });
index 1a737a6c95836c5941286dcdf55a28def3f4f802..1135dd848c9351b5fc160b2a467d2bd7276b4b2b 100644 (file)
   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;
 }
 .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;
index d6b2885d02a2ba62c160e0701eddedbf41f4914f..09d87485b16543cf2e11a18fea9aa46035592cb1 100644 (file)
   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;
 }
 .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;
index 449b2dc4d0029347e02093ff82c426a993555e52..b3053ed3ddaa40da126b423de22c589174bac5d5 100644 (file)
 
 // Status
 .navigator-actions {
-  padding: 0 @navigatorPadding;
+  padding: 0 @navigatorPadding 0 0;
   line-height: @navigatorStatusHeight;
   border-right: 1px solid @navigatorBorderLightColor;
   border-top: 1px solid @navigatorBorderLightColor;
 
 .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 {