Add most-recent first sorting in deadline and submission deviations

The default sorting in deadline/submission deviation tables is now most-recent first (descending). The ordering can also be toggled to be ascending. Fixes #1279
apluslms · Feb 1, 2024 · 801f1d7 · 801f1d7
1 parent 2673aa9
commit 801f1d7
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 15 deletions.
diff --git a/assets/js/table.js b/assets/js/table.js
@@ -64,6 +64,16 @@ $(function() {
 
     init: function() {
       const self = this;
+
+      const dataDefaultSortColumn = self.element.data('default-sort-column');
+      const dataDefaultSortOrder = self.element.data('default-sort-order');
+      if (dataDefaultSortColumn && dataDefaultSortOrder) {
+        const defaultColumnHeader = self.element.find('thead > tr > th').eq(dataDefaultSortColumn);
+        const orderMarker = $('<span class="glyphicon order-marker glyphicon-triangle-bottom" aria-hidden="true"></span>');
+        defaultColumnHeader.append(orderMarker);
+        self.orderTable(dataDefaultSortColumn, dataDefaultSortOrder === 'desc' ? true : false);
+      }
+
       function filterDelay(event) {
         const input = $(this);
         clearTimeout(self.timeout);
@@ -83,11 +93,17 @@ $(function() {
 
       function orderColumn(event) {
         event.preventDefault();
+        const isDescending = $(this).hasClass('desc');
         self.element.find('thead > tr > th > a > .order-marker').remove();
-        $(this).append(
-          $('<span class="glyphicon glyphicon-triangle-bottom order-marker" aria-hidden="true"></span>')
-        );
-        self.orderTable($(this).data('column'));
+        const orderMarker = $('<span class="glyphicon order-marker glyphicon-triangle-top" aria-hidden="true"></span>');
+        if (isDescending) {
+          $(this).removeClass('desc');
+        } else {
+          $(this).addClass('desc');
+          orderMarker.removeClass('glyphicon-triangle-top').addClass('glyphicon-triangle-bottom');
+        }
+        $(this).append(orderMarker);
+        self.orderTable($(this).data('column'), !isDescending);
       };
 
       function expandRow(event) {
@@ -196,12 +212,12 @@ $(function() {
             filterRow.append(filterCell);
           }
         }
-
         if (self.enable_order && !column.data('order-disable')) {
-          column.wrapInner(
-            $('<a href="#" data-column="' + i + '"></a>')
-            .on('click', orderColumn)
-          );
+          if (dataDefaultSortColumn === i - 1 && dataDefaultSortOrder === 'desc') {
+            column.wrapInner($('<a href="#" data-column="' + i + '" class="desc"></a>').on('click', orderColumn));
+          } else {
+            column.wrapInner($('<a href="#" data-column="' + i + '"></a>').on('click', orderColumn));
+          }
         }
 
         if (self.enable_group && column.data('group-checkbox')) {
@@ -388,23 +404,23 @@ $(function() {
       }
     },
 
-    orderTable: function(index) {
+    orderTable: function(index, isDescending) {
       function compareRows(aRow, bRow) {
         const aCell = $(aRow).find('td').eq(index);
         const bCell = $(bRow).find('td').eq(index);
         const aDate = aCell.data('datetime');
         const bDate = bCell.data('datetime');
         if (aDate && bDate) {
-          return aDate.localeCompare(bDate);
+          return isDescending ? bDate.localeCompare(aDate) : aDate.localeCompare(bDate);
         }
         const aText = aCell.text().trim();
         const bText = bCell.text().trim();
         const aNumber = Number(aText);
         const bNumber = Number(bText);
         if (!isNaN(aNumber) && !isNaN(bNumber)) {
-          return aNumber - bNumber;
+          return isDescending ? bNumber - aNumber : aNumber - bNumber;
         }
-        return aText.localeCompare(bText);
+        return isDescending ? bText.localeCompare(aText) : aText.localeCompare(bText);
       }
 
       // Order the top-level rows first.

diff --git a/deviations/templates/deviations/list_dl.html b/deviations/templates/deviations/list_dl.html
@@ -33,7 +33,7 @@
 			<div class="panel-heading">
 				<h3 class="panel-title">{% translate "DEADLINE_DEVIATIONS" %}</h3>
 			</div>
-			<table class="table table-striped table-bordered table-condensed filtered-table ordered-table grouped-table">
+			<table class="table table-striped table-bordered table-condensed filtered-table ordered-table grouped-table" data-default-sort-column="6" data-default-sort-order="desc">
 				<thead>
 					<tr>
 						<th>{% translate "SUBMITTER" %}</th>

diff --git a/deviations/templates/deviations/list_submissions.html b/deviations/templates/deviations/list_submissions.html
@@ -33,7 +33,7 @@
 			<div class="panel-heading">
 				<h3 class="panel-title">{% translate "SUBMISSION_DEVIATIONS" %}</h3>
 			</div>
-			<table class="table table-striped table-bordered table-condensed filtered-table ordered-table grouped-table">
+			<table class="table table-striped table-bordered table-condensed filtered-table ordered-table grouped-table" data-default-sort-column="4" data-default-sort-order="desc">
 				<thead>
 					<tr>
 						<th>{% translate "SUBMITTER" %}</th>