BIS-659 / SP-1195 : ELN UI : Sort Samples table by column contents clicking on the header

SVN: 31156

plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/css/style.css

@@ -230,6 +230,34 @@ h1, h2, legend {
 	margin: 10px;
 }
 
+/* Sorting */
+
+.interactive th:hover {
+    cursor: pointer;
+    background-color: #F5F5F5;
+}
+
+.current-sort {
+	margin-right: 20px;
+	background-color: lightblue;
+	background-size:14px 14px;
+	background-repeat:no-repeat;
+	background-position: right center;
+	border-right: 5px solid lightblue;
+}
+
+.interactive th.current-sort:hover {
+	background-color: lightblue;
+}
+
+.current-sort[sort-order = DS] {
+	background-image: url("../img/chevron-down-icon.png");
+}
+
+.current-sort[sort-order = AS] {
+	background-image: url("../img/chevron-up-icon.png");
+}
+
 /*
  * Sample Table - Inspector Previews
  */

plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/views/SampleTable.js

@@ -205,7 +205,7 @@ function SampleTable(serverFacade, sampleTableId, profile, sampleTypeCode, inspe
 		$("#tableContainer").append("<div class='wrapper' style='clear: both; padding-top: 10px;'>");
 		
 		var tableTemplate = "<table style='width:100%;' class='table table-hover' id=\"sample-table\"><thead>";
-		tableTemplate += "<tr class=\"sample-table-header\"><th sort-attribute='code'>Code</th>";
+		tableTemplate += "<tr class=\"sample-table-header interactive\"><th sort-attribute='code'>Code</th>";
 		for (var i = 0; i < sampleTypePropertiesDisplayNames.length; i++) {
 			tableTemplate += "<th sort-property='" + sampleTypeProperties[i] + "'>" + sampleTypePropertiesDisplayNames[i]+ "</th>";
 		}
@@ -253,6 +253,8 @@ function SampleTable(serverFacade, sampleTableId, profile, sampleTypeCode, inspe
 		}
 		
 		var sortingFunction = function(event) {
+			$(".sample-table-header th").removeClass("current-sort")
+			
 			var $th = $(this);
 			var sortProperty = $th.attr("sort-property");
 			var sortAttribute = $th.attr("sort-attribute");
@@ -272,6 +274,8 @@ function SampleTable(serverFacade, sampleTableId, profile, sampleTypeCode, inspe
 			if(sortAttribute) {
 				sortByAttribute(sortAttribute,sortOrder === "AS");
 			}
+			
+			$th.addClass("current-sort");
 		}
 		
 		var $headers = $(".sample-table-header th").click(sortingFunction);