← Back to team overview

dhis2-devs team mailing list archive

[Branch ~dhis2-devs-core/dhis2/trunk] Rev 13163: context-menus for validation module

 

------------------------------------------------------------
revno: 13163
committer: Morten Olav Hansen <mortenoh@xxxxxxxxx>
branch nick: dhis2
timestamp: Fri 2013-12-06 14:37:28 +0100
message:
  context-menus for validation module
modified:
  dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/javascript/general.js
  dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/javascript/validationRule.js
  dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/javascript/validationRuleGroup.js
  dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/validationRule.vm
  dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/validationRuleGroup.vm


--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk

Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription
=== modified file 'dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/javascript/general.js'
--- dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/javascript/general.js	2013-10-28 15:49:09 +0000
+++ dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/javascript/general.js	2013-12-06 13:37:28 +0000
@@ -1,6 +1,11 @@
-function showValidationRuleDetails( validationId )
+
+function showUpdateValidationRuleForm( context ) {
+  location.href = 'showUpdateValidationRuleForm.action?id=' + context.id;
+}
+
+function showValidationRuleDetails( context )
 {
-    jQuery.post( 'getValidationRule.action', { id: validationId }, function ( json ) {
+    jQuery.post( 'getValidationRule.action', { id: context.id }, function ( json ) {
 		setText( 'nameField', json.validationRule.name );
 		
 		var description = json.validationRule.description;
@@ -123,7 +128,6 @@
     return null;
 }
 
-function removeValidationRule( ruleId, ruleName )
-{
-	removeItem( ruleId, ruleName, i18n_confirm_delete, 'removeValidationRule.action' );
+function removeValidationRule( context ) {
+	removeItem( context.id, context.name, i18n_confirm_delete, 'removeValidationRule.action' );
 }

=== modified file 'dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/javascript/validationRule.js'
--- dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/javascript/validationRule.js	2013-10-28 15:49:09 +0000
+++ dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/javascript/validationRule.js	2013-12-06 13:37:28 +0000
@@ -1,31 +1,27 @@
-function changeRuleType()
-{
-	var ruleType = $( '#ruleType' ).val();
-	
-	if ( ruleType == 'validation' )
-	{
-		hideById( 'organisationUnitLevelTR' );
-		hideById( 'sequentialSampleCountTR' );
-		hideById( 'annualSampleCountTR' );
-		hideById( 'highOutliersTR' );
-		hideById( 'lowOutliersTR' );
-
-		showById( 'compulsory_pair' );
-	} 
-	else
-	{
-		showById( 'organisationUnitLevelTR' );
-		showById( 'sequentialSampleCountTR' );
-		showById( 'annualSampleCountTR' );
-		showById( 'highOutliersTR' );
-		showById( 'lowOutliersTR' );
-
-		var op = document.getElementById( 'operator' );
-		if ( 'compulsory_pair' == op.value )
-		{
-			showById( 'select_operator' );
-			op.selectedIndex = 0;
-		}
-		hideById( 'compulsory_pair' );
+function changeRuleType() {
+  var ruleType = $('#ruleType').val();
+
+  if( ruleType == 'validation' ) {
+    hideById('organisationUnitLevelTR');
+    hideById('sequentialSampleCountTR');
+    hideById('annualSampleCountTR');
+    hideById('highOutliersTR');
+    hideById('lowOutliersTR');
+
+    showById('compulsory_pair');
+  }
+  else {
+    showById('organisationUnitLevelTR');
+    showById('sequentialSampleCountTR');
+    showById('annualSampleCountTR');
+    showById('highOutliersTR');
+    showById('lowOutliersTR');
+
+    var op = document.getElementById('operator');
+    if( 'compulsory_pair' == op.value ) {
+      showById('select_operator');
+      op.selectedIndex = 0;
     }
+    hideById('compulsory_pair');
+  }
 }

=== modified file 'dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/javascript/validationRuleGroup.js'
--- dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/javascript/validationRuleGroup.js	2013-10-13 18:35:46 +0000
+++ dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/javascript/validationRuleGroup.js	2013-12-06 13:37:28 +0000
@@ -1,201 +1,179 @@
+
+function showUpdateValidationRuleGroupForm( context ) {
+  location.href = 'showUpdateValidationRuleGroupForm.action?id=' + context.id;
+}
+
 // -----------------------------------------------------------------------------
 // View details
 // -----------------------------------------------------------------------------
 
-function showValidationRuleGroupDetails( id )
-{
-	jQuery.post( 'getValidationRuleGroup.action', { 'id': id }, function ( json ) {
-		setInnerHTML( 'nameField', json.validationRuleGroup.name );
-		setInnerHTML( 'descriptionField', json.validationRuleGroup.description );
-		setInnerHTML( 'memberCountField', json.validationRuleGroup.memberCount );
-		setInnerHTML( 'userRolesToAlertCountField', json.validationRuleGroup.userRolesToAlertCount );
+function showValidationRuleGroupDetails( context ) {
+  jQuery.post('getValidationRuleGroup.action', { 'id': context.id }, function( json ) {
+    setInnerHTML('nameField', json.validationRuleGroup.name);
+    setInnerHTML('descriptionField', json.validationRuleGroup.description);
+    setInnerHTML('memberCountField', json.validationRuleGroup.memberCount);
+    setInnerHTML('userRolesToAlertCountField', json.validationRuleGroup.userRolesToAlertCount);
 
-		showDetails();
-	});
+    showDetails();
+  });
 }
 
 // -----------------------------------------------------------------------------
 // Remove data element group
 // -----------------------------------------------------------------------------
 
-function removeValidationRuleGroup( validationRuleGroupId, validationRuleGroupName )
-{
-    removeItem( validationRuleGroupId, validationRuleGroupName, i18n_confirm_delete, 'removeValidationRuleGroup.action' );
+function removeValidationRuleGroup( context ) {
+  removeItem(context.id, context.name, i18n_confirm_delete, 'removeValidationRuleGroup.action');
 }
 
 // -----------------------------------------------------------------------------
 // Select lists
 // -----------------------------------------------------------------------------
 
-function initLists()
-{
-    for ( var id in groupMembers )
-    {
-        $( "#groupMembers" ).append( $( "<option></option>" ).attr( "value", id ).text( groupMembers[id] ) );
-    }
-
-    for ( var id in availableValidationRules )
-    {
-        $( "#availableValidationRules" ).append(
-                $( "<option></option>" ).attr( "value", id ).text( availableValidationRules[id] ) );
-    }
-
-    for ( var id in availableUserRolesToAlert )
-    {
-        $( "#availableUserRolesToAlert" ).append( $( "<option></option>" ).attr( "value", id ).text( availableUserRolesToAlert[id] ) );
-    }
-
-    for ( var id in selectedUserRolesToAlert )
-    {
-        $( "#availableValidationRules" ).append(
-                $( "<option></option>" ).attr( "value", id ).text( selectedUserRolesToAlert[id] ) );
-    }
-}
-
-function filterGroupMembers()
-{
-    var filter = document.getElementById( 'groupMembersFilter' ).value;
-    var list = document.getElementById( 'groupMembers' );
-
-    list.options.length = 0;
-
-    for ( var id in groupMembers )
-    {
-        var value = groupMembers[id];
-
-        if ( value.toLowerCase().indexOf( filter.toLowerCase() ) != -1 )
-        {
-            list.add( new Option( value, id ), null );
-        }
-    }
-}
-
-function filterAvailableValidationRules()
-{
-    var filter = document.getElementById( 'availableValidationRulesFilter' ).value;
-    var list = document.getElementById( 'availableValidationRules' );
-
-    list.options.length = 0;
-
-    for ( var id in availableValidationRules )
-    {
-        var value = availableValidationRules[id];
-
-        if ( value.toLowerCase().indexOf( filter.toLowerCase() ) != -1 )
-        {
-            list.add( new Option( value, id ), null );
-        }
-    }
-}
-
-function addGroupMembers()
-{
-    var list = document.getElementById( 'availableValidationRules' );
-
-    while ( list.selectedIndex != -1 )
-    {
-        var id = list.options[list.selectedIndex].value;
-
-        list.options[list.selectedIndex].selected = false;
-
-        groupMembers[id] = availableValidationRules[id];
-
-        delete availableValidationRules[id];
-    }
-
-    filterGroupMembers();
-    filterAvailableValidationRules();
-}
-
-function removeGroupMembers()
-{
-    var list = document.getElementById( 'groupMembers' );
-
-    while ( list.selectedIndex != -1 )
-    {
-        var id = list.options[list.selectedIndex].value;
-
-        list.options[list.selectedIndex].selected = false;
-
-        availableValidationRules[id] = groupMembers[id];
-
-        delete groupMembers[id];
-    }
-
-    filterGroupMembers();
-    filterAvailableValidationRules();
-}
-
-function filterAvailableUserRolesToAlert()
-{
-    var filter = document.getElementById( 'availableUserRolesToAlertFilter' ).value;
-    var list = document.getElementById( 'availableUserRolesToAlert' );
-
-    list.options.length = 0;
-
-    for ( var id in availableUserRolesToAlert )
-    {
-        var value = availableUserRolesToAlert[id];
-
-        if ( value.toLowerCase().indexOf( filter.toLowerCase() ) != -1 )
-        {
-            list.add( new Option( value, id ), null );
-        }
-    }
-}
-
-function filterSelectedUserRolesToAlert()
-{
-    var filter = document.getElementById( 'selectedUserRolesToAlertFilter' ).value;
-    var list = document.getElementById( 'selectedUserRolesToAlert' );
-
-    list.options.length = 0;
-
-    for ( var id in selectedUserRolesToAlert )
-    {
-        var value = selectedUserRolesToAlert[id];
-
-        if ( value.toLowerCase().indexOf( filter.toLowerCase() ) != -1 )
-        {
-            list.add( new Option( value, id ), null );
-        }
-    }
-}
-
-function addSelectedUserRolesToAlert()
-{
-    var list = document.getElementById( 'selectedUserRolesToAlert' );
-
-    while ( list.selectedIndex != -1 )
-    {
-        var id = list.options[list.selectedIndex].value;
-
-        list.options[list.selectedIndex].selected = false;
-
-        selectedUserRolesToAlert[id] = availableUserRolesToAlert[id];
-
-        delete availableUserRolesToAlert[id];
-    }
-
-    filterAvailableUserRolesToAlert();
-    filterSelectedUserRolesToAlert();
-}
-
-function removeSelectedUserRolesToAlert()
-{
-    var list = document.getElementById( 'selectedUserRolesToAlert' );
-
-    while ( list.selectedIndex != -1 )
-    {
-        var id = list.options[list.selectedIndex].value;
-
-        list.options[list.selectedIndex].selected = false;
-
-        availableUserRolesToAlert[id] = selectedUserRolesToAlert[id];
-
-        delete selectedUserRolesToAlert[id];
-    }
-
-    filterAvailableUserRolesToAlert();
-    filterSelectedUserRolesToAlert();
+function initLists() {
+  for( var id in groupMembers ) {
+    $("#groupMembers").append($("<option></option>").attr("value", id).text(groupMembers[id]));
+  }
+
+  for( var id in availableValidationRules ) {
+    $("#availableValidationRules").append(
+      $("<option></option>").attr("value", id).text(availableValidationRules[id]));
+  }
+
+  for( var id in availableUserRolesToAlert ) {
+    $("#availableUserRolesToAlert").append($("<option></option>").attr("value", id).text(availableUserRolesToAlert[id]));
+  }
+
+  for( var id in selectedUserRolesToAlert ) {
+    $("#availableValidationRules").append(
+      $("<option></option>").attr("value", id).text(selectedUserRolesToAlert[id]));
+  }
+}
+
+function filterGroupMembers() {
+  var filter = document.getElementById('groupMembersFilter').value;
+  var list = document.getElementById('groupMembers');
+
+  list.options.length = 0;
+
+  for( var id in groupMembers ) {
+    var value = groupMembers[id];
+
+    if( value.toLowerCase().indexOf(filter.toLowerCase()) != -1 ) {
+      list.add(new Option(value, id), null);
+    }
+  }
+}
+
+function filterAvailableValidationRules() {
+  var filter = document.getElementById('availableValidationRulesFilter').value;
+  var list = document.getElementById('availableValidationRules');
+
+  list.options.length = 0;
+
+  for( var id in availableValidationRules ) {
+    var value = availableValidationRules[id];
+
+    if( value.toLowerCase().indexOf(filter.toLowerCase()) != -1 ) {
+      list.add(new Option(value, id), null);
+    }
+  }
+}
+
+function addGroupMembers() {
+  var list = document.getElementById('availableValidationRules');
+
+  while( list.selectedIndex != -1 ) {
+    var id = list.options[list.selectedIndex].value;
+
+    list.options[list.selectedIndex].selected = false;
+
+    groupMembers[id] = availableValidationRules[id];
+
+    delete availableValidationRules[id];
+  }
+
+  filterGroupMembers();
+  filterAvailableValidationRules();
+}
+
+function removeGroupMembers() {
+  var list = document.getElementById('groupMembers');
+
+  while( list.selectedIndex != -1 ) {
+    var id = list.options[list.selectedIndex].value;
+
+    list.options[list.selectedIndex].selected = false;
+
+    availableValidationRules[id] = groupMembers[id];
+
+    delete groupMembers[id];
+  }
+
+  filterGroupMembers();
+  filterAvailableValidationRules();
+}
+
+function filterAvailableUserRolesToAlert() {
+  var filter = document.getElementById('availableUserRolesToAlertFilter').value;
+  var list = document.getElementById('availableUserRolesToAlert');
+
+  list.options.length = 0;
+
+  for( var id in availableUserRolesToAlert ) {
+    var value = availableUserRolesToAlert[id];
+
+    if( value.toLowerCase().indexOf(filter.toLowerCase()) != -1 ) {
+      list.add(new Option(value, id), null);
+    }
+  }
+}
+
+function filterSelectedUserRolesToAlert() {
+  var filter = document.getElementById('selectedUserRolesToAlertFilter').value;
+  var list = document.getElementById('selectedUserRolesToAlert');
+
+  list.options.length = 0;
+
+  for( var id in selectedUserRolesToAlert ) {
+    var value = selectedUserRolesToAlert[id];
+
+    if( value.toLowerCase().indexOf(filter.toLowerCase()) != -1 ) {
+      list.add(new Option(value, id), null);
+    }
+  }
+}
+
+function addSelectedUserRolesToAlert() {
+  var list = document.getElementById('selectedUserRolesToAlert');
+
+  while( list.selectedIndex != -1 ) {
+    var id = list.options[list.selectedIndex].value;
+
+    list.options[list.selectedIndex].selected = false;
+
+    selectedUserRolesToAlert[id] = availableUserRolesToAlert[id];
+
+    delete availableUserRolesToAlert[id];
+  }
+
+  filterAvailableUserRolesToAlert();
+  filterSelectedUserRolesToAlert();
+}
+
+function removeSelectedUserRolesToAlert() {
+  var list = document.getElementById('selectedUserRolesToAlert');
+
+  while( list.selectedIndex != -1 ) {
+    var id = list.options[list.selectedIndex].value;
+
+    list.options[list.selectedIndex].selected = false;
+
+    availableUserRolesToAlert[id] = selectedUserRolesToAlert[id];
+
+    delete selectedUserRolesToAlert[id];
+  }
+
+  filterAvailableUserRolesToAlert();
+  filterSelectedUserRolesToAlert();
 }

=== modified file 'dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/validationRule.vm'
--- dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/validationRule.vm	2013-10-28 15:49:09 +0000
+++ dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/validationRule.vm	2013-12-06 13:37:28 +0000
@@ -1,53 +1,62 @@
 <script type="text/javascript">
+  jQuery(document).ready(function() {
+    tableSorter('listTable');
+
+    dhis2.contextmenu.makeContextMenu({
+      menuId: 'contextMenu',
+      menuItemActiveClass: 'contextMenuItemActive'
+    });
+  });
+
 	// add jquery.tablesorter parser for sorting the importance column:
 	// high => 3 medium => 2 low => 1
-	jQuery.tablesorter.addParser({
-	    id: 'importanceSorter',
-	    is: function(s) {
-			// return false so this parser is not auto-detected
-	        return false;
-	    },
-	    format: function(s) {
-	        return s
-	            .replace( '$i18n.getString( "high" )', 3 )
-	            .replace( '$i18n.getString( "medium" )', 2 )
-	            .replace( '$i18n.getString( "low" )', 1 );
-	    },
-	    type: 'numeric'
-	});
-	jQuery(document).ready(function(){	
-		tableSorter( 'listTable' );	
-	});
-	
-	function exportPDF( type )
-	{
-		var params = "type=" + type;
-		
-		exportPdfByType( type, params );
-	}
-	
-	var i18n_high = '$i18n.getString( "high" )';
-	var i18n_medium = '$i18n.getString( "medium" )';
-	var i18n_low = '$i18n.getString( "low" )';
-	
-	var i18n_validation = '$i18n.getString( "validation" )';
-	var i18n_surveillance = '$i18n.getString( "surveillance" )';
-	
-	var i18n_confirm_delete = '$i18n.getString( "confirm_delete_validation_rule" )';
-
-	var i18n_none = '$i18n.getString( "none" )';
-
-	var i18n_equal_to = '$i18n.getString( "equal_to" )';
-	var i18n_not_equal_to = '$i18n.getString( "not_equal_to" )';
-	var i18n_greater_than = '$i18n.getString( "greater_than" )';
-	var i18n_greater_than_or_equal_to = '$i18n.getString( "greater_than_or_equal_to" )';
-	var i18n_less_than = '$i18n.getString( "less_than" )';
-	var i18n_less_than_or_equal_to = '$i18n.getString( "less_than_or_equal_to" )';
-	var i18n_compulsory_pair = '$i18n.getString( "compulsory_pair" )';
+  jQuery.tablesorter.addParser({
+    id: 'importanceSorter',
+    is: function( s ) {
+      // return false so this parser is not auto-detected
+      return false;
+    },
+    format: function( s ) {
+      return s
+        .replace('$i18n.getString( "high" )', 3)
+        .replace('$i18n.getString( "medium" )', 2)
+        .replace('$i18n.getString( "low" )', 1);
+    },
+    type: 'numeric'
+  });
+
+  function exportPDF( type ) {
+    var params = "type=" + type;
+    exportPdfByType(type, params);
+  }
+
+  var i18n_high = '$i18n.getString( "high" )';
+  var i18n_medium = '$i18n.getString( "medium" )';
+  var i18n_low = '$i18n.getString( "low" )';
+  var i18n_validation = '$i18n.getString( "validation" )';
+  var i18n_surveillance = '$i18n.getString( "surveillance" )';
+  var i18n_confirm_delete = '$i18n.getString( "confirm_delete_validation_rule" )';
+  var i18n_none = '$i18n.getString( "none" )';
+  var i18n_equal_to = '$i18n.getString( "equal_to" )';
+  var i18n_not_equal_to = '$i18n.getString( "not_equal_to" )';
+  var i18n_greater_than = '$i18n.getString( "greater_than" )';
+  var i18n_greater_than_or_equal_to = '$i18n.getString( "greater_than_or_equal_to" )';
+  var i18n_less_than = '$i18n.getString( "less_than" )';
+  var i18n_less_than_or_equal_to = '$i18n.getString( "less_than_or_equal_to" )';
+  var i18n_compulsory_pair = '$i18n.getString( "compulsory_pair" )';
 </script>
 
 <h3>$encoder.htmlEncode( $i18n.getString( "validation_rule_management" ) ) #openHelp( "validationRule" )</h3>
 
+<div id="contextMenu" class="contextMenu">
+  <ul id="contextMenuItems" class="contextMenuItems">
+    <li><a data-target-fn="showUpdateValidationRuleForm"><i class="fa fa-edit"></i>&nbsp;&nbsp;$i18n.getString( "edit" )</a></li>
+    <li><a data-target-fn="translateWithContext"><i class="fa fa-globe"></i>&nbsp;&nbsp;$i18n.getString( "translation_translate" )</a></li>
+    <li data-enabled="canDelete"><a data-target-fn="removeValidationRule"><i class="fa fa-trash-o"></i>&nbsp;&nbsp;$i18n.getString( "remove" )</a></li>
+    <li><a data-target-fn="showValidationRuleDetails"><i class="fa fa-info-circle"></i>&nbsp;&nbsp;$i18n.getString( "show_details" )</a></li>
+  </ul>
+</div>
+
 <table class="mainPageTable">
 	<tr>
 		<td style="vertical-align:top">
@@ -70,35 +79,28 @@
 					<!-- Note: column-level sortInitialOrder only works in tablesorter 2.0.8 and later (an earlier version in use as of this writing.) --->
 					<th class="{sorter: 'importanceSorter', sortInitialOrder: 'desc'}">$encoder.htmlEncode( $i18n.getString("importance") )&nbsp;&nbsp;&nbsp;&nbsp;</th>
 					<th>$encoder.htmlEncode( $i18n.getString("period_type") )&nbsp;&nbsp;&nbsp;&nbsp;</th>
-					<th class="{sorter: false}">$encoder.htmlEncode( $i18n.getString( "operations" ) )</th>	
 				</tr>
 				</thead>			
 				<tbody id="list">
 				#foreach( $validationRule in $validationRulesList )
-				<tr id="tr${validationRule.id}">
-					<td onclick="showValidationRuleDetails( $validationRule.id )">$!encoder.htmlEncode( $validationRule.displayName )</td>
-					<td onclick="showValidationRuleDetails( $validationRule.id )">$encoder.htmlEncode( $i18n.getString($!validationRule.importance) ) </td>
-					<td onclick="showValidationRuleDetails( $validationRule.id )">$encoder.htmlEncode( $i18n.getString($!validationRule.periodType.name) ) </td>
-					<td style="text-align:right">
-						<a href="showUpdateValidationRuleForm.action?id=$validationRule.id" title="$i18n.getString( 'edit' )"><img src="../images/edit.png" alt="$i18n.getString( 'edit' )"></a>
-						<a href="javascript:translate( 'ValidationRule', '$validationRule.id' )"><img src="../images/i18n.png" alt="$i18n.getString( 'translation_translate' )"/></a>
-						#if( $auth.hasAccess( "dhis-web-validationrule", "removeValidationRule" ) )
-						<a href="javascript:removeValidationRule( $validationRule.id, '$encoder.jsEncode( $validationRule.displayName )' )" title="$i18n.getString( 'remove' )"><img src="../images/delete.png" alt="$i18n.getString( 'remove' )"></a>
-						#else <img src="../images/delete-denied.png"> #end
-						<a href="javascript:showValidationRuleDetails( $validationRule.id )" title="$i18n.getString( 'show_details' )"><img src="../images/information.png" alt="$i18n.getString( 'show_details' )"></a>
-					</td>
+				<tr id="tr${validationRule.id}" data-id="$!validationRule.id" data-uid="$!validationRule.uid" data-type="ValidationRule" data-name="$encoder.htmlEncode( $!validationRule.displayName )"
+				    data-can-manage="$security.canManage( $validationRule )"
+				    data-can-update="$security.canUpdate( $validationRule )"
+				    data-can-delete="#if($auth.hasAccess( "dhis-web-validationrule", "removeValidationRule" ) )true#{else}false#end">
+				    <td>$encoder.htmlEncode( $!validationRule.displayName )</td>
+				    <td>$encoder.htmlEncode( $i18n.getString($!validationRule.importance) )</td>
+				    <td>$encoder.htmlEncode( $i18n.getString($!validationRule.periodType.name) )</td>
 				</tr>
 				#end
 				</tbody>               
 			</table>
 			<p></p>
 			#parse( "/dhis-web-commons/paging/paging.vm" )
+		</td>
 
-		</td>
 		<td id="detailsData">
-
-            <div id="detailsArea">
-                <div id="hideDetailsArea">
+      <div id="detailsArea">
+        <div id="hideDetailsArea">
 					<a href="javascript:hideDetails()" title="$i18n.getString( 'hide_details' )"><img src="../images/hide.png" alt="$i18n.getString( 'hide_details' )"></a>
 				</div>				
 				<p><label>$i18n.getString( "name" ):</label><br><span id="nameField"></span></p>
@@ -120,7 +122,7 @@
 				</div>
 				<p><span id="warningField"></span></p>
 			</div>
+		</td>
 
-		</td>
 	</tr>
 </table>

=== modified file 'dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/validationRuleGroup.vm'
--- dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/validationRuleGroup.vm	2013-10-13 18:35:46 +0000
+++ dhis-2/dhis-web/dhis-web-validationrule/src/main/webapp/dhis-web-validationrule/validationRuleGroup.vm	2013-12-06 13:37:28 +0000
@@ -1,63 +1,69 @@
 <script type="text/javascript">
 	jQuery(document).ready(function(){		
 		tableSorter( 'listTable' );	
+
+    dhis2.contextmenu.makeContextMenu({
+      menuId: 'contextMenu',
+      menuItemActiveClass: 'contextMenuItemActive'
+    });
 	});
 
-    var i18n_confirm_delete = '$encoder.jsEscape( $i18n.getString( "confirm_delete_validation_rule_group" ) , "'")';
+  var i18n_confirm_delete = '$encoder.jsEscape( $i18n.getString( "confirm_delete_validation_rule_group" ) , "'")';
 </script>
 
 <h3>$encoder.htmlEncode( $i18n.getString( "validation_rule_group_management" ) ) #openHelp( "validationRuleGroup" )</h3>
 
+<div id="contextMenu" class="contextMenu">
+  <ul id="contextMenuItems" class="contextMenuItems">
+    <li><a data-target-fn="showUpdateValidationRuleGroupForm"><i class="fa fa-edit"></i>&nbsp;&nbsp;$i18n.getString( "edit" )</a></li>
+    <li><a data-target-fn="translateWithContext"><i class="fa fa-globe"></i>&nbsp;&nbsp;$i18n.getString( "translation_translate" )</a></li>
+    <li data-enabled="canDelete"><a data-target-fn="removeValidationRuleGroup"><i class="fa fa-trash-o"></i>&nbsp;&nbsp;$i18n.getString( "remove" )</a></li>
+    <li><a data-target-fn="showValidationRuleGroupDetails"><i class="fa fa-info-circle"></i>&nbsp;&nbsp;$i18n.getString( "show_details" )</a></li>
+  </ul>
+</div>
+
 <table class="mainPageTable">
     <tr>
         <td style="vertical-align:top">
 			<table width="100%">
 				<tr>
-                    <td>#filterDiv( "showValidationRuleGroupForm" )</td>
-                    <td colspan="3" style="text-align:right"><input type="button" value="$i18n.getString( "add_new" )" onclick="window.location.href='showAddValidationRuleGroupForm.action'"></td>
-                </tr>       
+          <td>#filterDiv( "showValidationRuleGroupForm" )</td>
+          <td colspan="3" style="text-align:right"><input type="button" value="$i18n.getString( "add_new" )" onclick="window.location.href='showAddValidationRuleGroupForm.action'"></td>
+        </tr>
 			</table>
 
-            <table class="listTable" id="listTable">
-                <col>
-                <col width="120px">                
-                <thead>  
-                <tr>
-                    <th>$i18n.getString( "name" )</th>
-                    <th colspan="3" class="{sorter: false}">$i18n.getString( "operations" )</th>
-                </tr>
-                </thead>              
-                <tbody id="list">
-                #foreach( $group in $validationRuleGroups )
-                <tr id="tr${group.id}">
-                    <td onclick="showValidationRuleGroupDetails( $group.id )">$!encoder.htmlEncode( $group.displayName )</td>
-                    <td style="text-align:right">
-						<a href="showUpdateValidationRuleGroupForm.action?id=$group.id" title="$i18n.getString( "edit" )"><img src="../images/edit.png" alt="$i18n.getString( "edit" )"></a>
-						<a href="javascript:translate( 'ValidationRuleGroup', '$group.id' )"><img src="../images/i18n.png" alt="$i18n.getString( 'translation_translate' )"/></a>
-						#if( $auth.hasAccess( "dhis-web-validationrule", "removeValidationRuleGroup" ) )
-						<a href="javascript:removeValidationRuleGroup( $group.id, '$encoder.jsEncode( $group.displayName )' )" title="$i18n.getString( "remove" )"><img src="../images/delete.png" alt="$i18n.getString( "remove" )"></a>
-						#else <img src="../images/delete-denied.png"> #end
-						<a href="javascript:showValidationRuleGroupDetails( $group.id )" title="$i18n.getString( "show_details" )"><img src="../images/information.png" alt="$i18n.getString( "show_details" )"></a>
-					</td>
-                </tr>
-                #end
-                </tbody>
-            </table>
+      <table class="listTable" id="listTable">
+        <col>
+        <thead>
+        <tr>
+          <th>$i18n.getString( "name" )</th>
+        </tr>
+        </thead>
+        <tbody id="list">
+        #foreach( $group in $validationRuleGroups )
+        <tr id="tr${group.id}" data-id="$!group.id" data-uid="$!group.uid" data-type="ValidationRuleGroup" data-name="$encoder.htmlEncode( $!group.displayName )"
+            data-can-manage="$security.canManage( $group )"
+            data-can-update="$security.canUpdate( $group )"
+            data-can-delete="#if($auth.hasAccess( "dhis-web-validationrule", "removeValidationRuleGroup" ))true#{else}false#end">
+            <td>$encoder.htmlEncode( $!group.displayName )</td>
+        </tr>
+        #end
+        </tbody>
+      </table>
 			<p></p>
 			#parse( "/dhis-web-commons/paging/paging.vm" )
-
-        </td>
-        <td id="detailsData">
-
-            <div id="detailsArea">
-                <div id="hideDetailsArea">
-                    <a href="javascript:hideDetails()" title="$i18n.getString( "hide_details" )"><img src="../images/hide.png" alt="$i18n.getString( "hide_details" )"></a>
-                </div>              
-                <p><label>$i18n.getString( "name" ):</label><br><span id="nameField"></span></p>
-                <p><label>$i18n.getString( "description" ):</label><br><span id="descriptionField"></span></p>
-                <p><label>$i18n.getString( "number_of_members" ):</label><br><span id="memberCountField"></span></p>
-                <p><label>$i18n.getString( "number_of_user_roles_to_alert" ):</label><br><span id="userRolesToAlertCountField"></span></p>
-            </div>
+    </td>
+
+    <td id="detailsData">
+      <div id="detailsArea">
+          <div id="hideDetailsArea">
+            <a href="javascript:hideDetails()" title="$i18n.getString( "hide_details" )"><img src="../images/hide.png" alt="$i18n.getString( "hide_details" )"></a>
+          </div>
+          <p><label>$i18n.getString( "name" ):</label><br><span id="nameField"></span></p>
+          <p><label>$i18n.getString( "description" ):</label><br><span id="descriptionField"></span></p>
+          <p><label>$i18n.getString( "number_of_members" ):</label><br><span id="memberCountField"></span></p>
+          <p><label>$i18n.getString( "number_of_user_roles_to_alert" ):</label><br><span id="userRolesToAlertCountField"></span></p>
+      </div>
 
 			<div id="warningArea">
 				<div id="hideDetailsArea">
@@ -66,6 +72,6 @@
 				<p><span id="warningField"></span></p>
 			</div>
 			
-        </td>
+    </td>
     </tr>
 </table>