-Fix for sorting the tables and taking into account the fact that the first column is not sort-able when it contains checkboxes.

 -Also adds icons (up/down arrows to indicate the current sort order).
- Last but not least fixes a number of problems when adding/removing linked objects the lists were not sorting or hilighting properly.

git-svn-id: http://svn.code.sf.net/p/itop/code/trunk@828 a333f486-631f-4898-b8df-5754b55c2be0

application/displayblock.class.inc.php

@@ -270,7 +270,23 @@ class DisplayBlock
 				 $("#'.$sId.'").empty();
 				 $("#'.$sId.'").append(data);
 				 $("#'.$sId.'").removeClass("loading");
-				 $("#'.$sId.' .listResults").tablesorter( { headers: { 0:{sorter: false }}, widgets: [\'zebra\']} ); // sortable and zebra tables
+				 // Check each "listResults" table for a checkbox in the first column and make the first column sortable only if it does not contain a checkbox in the header
+				 $("#'.$sId.'".listResults").each( function()
+					{
+						var table = $(this);
+						var id = $(this).parent();
+						var checkbox = (table.find(\'th:first :checkbox\').length > 0);
+						if (checkbox)
+						{
+							// There is a checkbox in the first column, do not make it sortable
+							table.tablesorter( { headers: { 0: {sorter: false}}, widgets: [\'myZebra\', \'truncatedList\']} ); // sortable and zebra tables
+						}
+						else
+						{
+							// There is NO checkbox in the first column, all columns are considered sortable
+							table.tablesorter( { widgets: [\'myZebra\', \'truncatedList\']} ); // sortable and zebra tables
+						}
+					});	
 				}
 			 );
 			 </script>';

application/itopwebpage.class.inc.php

@@ -162,6 +162,11 @@ class iTopWebPage extends NiceWebPage
 			$("tbody tr.red:even",table).removeClass('red').removeClass('even').addClass('red_even');
 			$("tbody tr.orange:even",table).removeClass('orange').removeClass('even').addClass('orange_even');
 			$("tbody tr.green:even",table).removeClass('green').removeClass('even').addClass('green_even');
+			// In case we sort again the table, we need to remove the added 'even' classes on odd rows
+			$("tbody tr:odd",table).removeClass('even');
+			$("tbody tr.red_even:odd",table).removeClass('even').removeClass('red_even').addClass('red');
+			$("tbody tr.orange_even:odd",table).removeClass('even').removeClass('orange_even').addClass('orange');
+			$("tbody tr.green_even:odd",table).removeClass('even').removeClass('green_even').addClass('green');
 	    } 
 	});
 		
@@ -231,7 +236,23 @@ class iTopWebPage extends NiceWebPage
 	  
 	// End of Tabs handling
 	$("table.listResults").tableHover(); // hover tables
-	$(".listResults").tablesorter( { widgets: ['myZebra', 'truncatedList']} ); // sortable and zebra tables
+	// Check each 'listResults' table for a checkbox in the first column and make the first column sortable only if it does not contain a checkbox in the header
+	$(".listResults").each( function()
+		{
+			var table = $(this);
+			var id = $(this).parent();
+			var checkbox = (table.find('th:first :checkbox').length > 0);
+			if (checkbox)
+			{
+				// There is a checkbox in the first column, don't make it sortable
+				table.tablesorter( { headers: { 0: {sorter: false}}, widgets: ['myZebra', 'truncatedList']} ); // sortable and zebra tables
+			}
+			else
+			{
+				// There is NO checkbox in the first column, all columns are considered sortable
+				table.tablesorter( { widgets: ['myZebra', 'truncatedList']} ); // sortable and zebra tables
+			}
+		});
 	$(".date-pick").datepicker({
 			showOn: 'button',
 			buttonImage: '../images/calendar.png',

application/uilinkswizard.class.inc.php

@@ -179,7 +179,7 @@ class UILinksWizard
 				function(data)
 				{
 					$('#SearchResultsToAdd').html(data);
-					$('#SearchResultsToAdd .listResults').tablesorter( { widgets: ['myZebra', 'truncatedList']} ); // sortable and zebra tables
+					$('#SearchResultsToAdd .listResults').tablesorter( { headers: {0: false}}, widgets: ['myZebra', 'truncatedList']} ); // sortable and zebra tables
 					
 				},
 				'html'
@@ -233,7 +233,7 @@ class UILinksWizard
 					}
 					$('.listResults tbody').append(data);
 					$('.listResults').trigger('update');
-					$('.listResults').tablesorter( { widgets: ['myZebra', 'truncatedList']} ); // sortable and zebra tables
+					$('.listResults').tablesorter( { headers: {0: false}}, widgets: ['myZebra', 'truncatedList']} ); // sortable and zebra tables
 				},
 				'html'
 			);

css/light-grey.css

@@ -66,31 +66,31 @@ tr.containerHeader, tr.containerHeader td {
 	background: transparent;
 } 
 
-tr.even td {
+tr.even td, .wizContainer tr.even td {
 	background-color: #f9f9f1;
 } 
-tr.red_even td {
+tr.red_even td, .wizContainer tr.red_even td {
 	background-color: #f97e75;
 	color: #ffffff;
 }
-tr.red td {
+tr.red td, .wizContainer tr.red td {
 	background-color: #f9a397;
 	color: #ffffff;
 }
-tr.orange_even td {
+tr.orange_even td, .wizContainer tr.orange_even td {
 	background-color: #f4d07a;
 }
-tr.orange td {
+tr.orange td, .wizContainer tr.orange td {
 	background-color: #f4e96c;
 } 
-tr.green_even td {
+tr.green_even td, .wizContainer tr.green_even td {
 	background-color: #bee5a3;
 } 
-tr.green td {
+tr.green td, .wizContainer tr.green td {
 	background-color: #b3e5b4;
 } 
 
-tr td.hover, tr.even td.hover, .hover a, .hover a:visited, .hover a:hover {
+tr td.hover, tr.even td.hover, .hover a, .hover a:visited, .hover a:hover, .wizContainer tr.even td.hover,  .wizContainer tr td.hover {
 	background-color: #fdf5d0;
 	color: #000000;
 }
@@ -105,10 +105,21 @@ th {
 
 th.header {
 	cursor: pointer;
+	background-repeat: no-repeat;
+	background-position: center right;
+	background-image: url(../images/bg.gif);
+	background-repeat: no-repeat;
+	padding-right: 16px; // some space for the asc/desc icons
 }
 
-th.headerSortUp, th.headerSortDown {
-	
+th.headerSortUp {
+	background-image: url(../images/asc.gif);
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+th.headerSortDown {
+	background-image: url(../images/desc.gif);
 	text-decoration: underline;
 	cursor: pointer;
 }
@@ -635,22 +646,22 @@ div.HRDrawer {
 }
 
 /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
-table.listResults tr.odd td.truncated, table.listResults tr td.truncated {
+table.listResults tr.odd td.truncated, table.listResults tr td.truncated, .wizContainer table.listResults tr.odd td.truncated, .wizContainer table.listResults tr td.truncated {
 	background: url(../images/truncated.png) bottom  repeat-x;
 }
 
 /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
-table.listResults tr.even td.truncated {
+table.listResults tr.even td.truncated, .wizContainer table.listResults  tr.even td.truncated {
 	background: #f9f9f1 url(../images/truncated.png) bottom  repeat-x;
 }
 
 /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
-table.listResults tr.even td.hover.truncated {
+table.listResults tr.even td.hover.truncated, , .wizContainer table.listResults  tr.even td.hover.truncated {
 	background: #fdf5d0 url(../images/truncated.png) bottom  repeat-x;
 }
 
 /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
-table.listResults tr.odd td.hover.truncated,  table.listResults tr td.hover.truncated{
+table.listResults tr.odd td.hover.truncated,  table.listResults tr td.hover.truncated, .wizContainer table.listResults  tr.odd td.hover.truncated, .wizContainer table.listResults  tr td.hover.truncated {
 	background: #fdf5d0 url(../images/truncated.png) bottom  repeat-x;
 }
 

js/linkswidget.js

@@ -36,8 +36,8 @@ function LinksWidget(id, sClass, sAttCode, iInputId, sSuffix)
 		);
 		// Disable the button since all the selected items have been removed
 		$(my_id+'_btnRemove').attr('disabled','disabled');
-		// Re-run the zebra plugin to properly highlight the remaining lines
-		$('#linkset_'+this.id+' .listResults').trigger('update');
+		// Re-run the zebra plugin to properly highlight the remaining lines & and take into account the removed ones
+		$('#linkedset_'+this.id+' .listResults').trigger('update').trigger("applyWidgets");
 		
 	}
 
@@ -97,7 +97,8 @@ function LinksWidget(id, sClass, sAttCode, iInputId, sSuffix)
 			function(data)
 			{
 				$(sSearchAreaId).html(data);
-				$(sSearchAreaId+' .listResults').tablesorter( { widgets: ['myZebra', 'truncatedList']} ); // sortable and zebra tables
+				$(sSearchAreaId+' .listResults').tableHover();
+				$(sSearchAreaId+' .listResults').tablesorter( { headers: {0: {sorter: false}}, widgets: ['myZebra', 'truncatedList']} ); // sortable and zebra tables
 				
 			},
 			'html'
@@ -151,7 +152,8 @@ function LinksWidget(id, sClass, sAttCode, iInputId, sSuffix)
 					$('#'+me.id+'_empty_row').remove();
 					$('#linkedset_'+me.id+' .listResults tbody').append(data);
 					$('#linkedset_'+me.id+' .listResults').trigger('update');
-					$('#linkedset_'+me.id+' .listResults').tablesorter( { widgets: ['myZebra', 'truncatedList']} ); // sortable and zebra tables
+					$('#linkedset_'+me.id+' .listResults').tableHover();
+					$('#linkedset_'+me.id+' .listResults').trigger('update').trigger("applyWidgets"); // table is already sortable, just refresh it
 					$('#linkedset_'+me.id+' :input').each( function() { $(this).trigger('validate', ''); }); // Validate newly added form fields...
 				}
 			},

js/utils.js

@@ -13,7 +13,22 @@ function ReloadTruncatedList(divId, sSerializedFilter, sExtraParams)
 		 $('#'+divId).append(data);
 		 $('#'+divId).removeClass('loading');
 		 $('#'+divId+' .listResults').tableHover(); // hover tables
-		 $('#'+divId+' .listResults').tablesorter( { widgets: ['zebra', 'truncatedList']} ); // sortable and zebra tables
+		 $('#'+divId+' .listResults').each( function()
+				{
+					var table = $(this);
+					var id = $(this).parent();
+					var checkbox = (table.find('th:first :checkbox').length > 0);
+					if (checkbox)
+					{
+						// There is a checkbox in the first column, don't make it sortable
+						table.tablesorter( { headers: { 0: {sorter: false}}, widgets: ['myZebra', 'truncatedList']} ); // sortable and zebra tables
+					}
+					else
+					{
+						// There is NO checkbox in the first column, all columns are considered sortable
+						table.tablesorter( { widgets: ['myZebra', 'truncatedList']} ); // sortable and zebra tables
+					}
+				});
 		 //$('#'+divId).unblockUI();
 		}
 	 );
@@ -47,7 +62,22 @@ function ReloadBlock(divId, sStyle, sSerializedFilter, sExtraParams)
 		 $('#'+divId).append(data);
 		 $('#'+divId).removeClass('loading');
 		 $('#'+divId+' .listResults').tableHover(); // hover tables
-		 $('#'+divId+' .listResults').tablesorter( { widgets: ['myZebra', 'truncatedList']} ); // sortable and zebra tables
+		 $('#'+divId+' .listResults').each( function()
+				{
+					var table = $(this);
+					var id = $(this).parent();
+					var checkbox = (table.find('th:first :checkbox').length > 0);
+					if (checkbox)
+					{
+						// There is a checkbox in the first column, don't make it sortable
+						table.tablesorter( { headers: { 0: {sorter: false}}, widgets: ['myZebra', 'truncatedList']} ); // sortable and zebra tables
+					}
+					else
+					{
+						// There is NO checkbox in the first column, all columns are considered sortable
+						table.tablesorter( { widgets: ['myZebra', 'truncatedList']} ); // sortable and zebra tables
+					}
+				});
 		 //$('#'+divId).unblockUI();
 		}
 	 );