Index: lams_gradebook/web/gradebookMonitor.jsp
===================================================================
diff -u -r668f1ed8de162a63b6d97ed22b86fa6e1bdd8cb1 -r468d69b9c1d4817c71e5449ce78f919ea9aa6234
--- lams_gradebook/web/gradebookMonitor.jsp	(.../gradebookMonitor.jsp)	(revision 668f1ed8de162a63b6d97ed22b86fa6e1bdd8cb1)
+++ lams_gradebook/web/gradebookMonitor.jsp	(.../gradebookMonitor.jsp)	(revision 468d69b9c1d4817c71e5449ce78f919ea9aa6234)
@@ -14,6 +14,8 @@
 	
 	<lams:css/>
 	<link type="text/css" href="<lams:LAMSURL />gradebook/includes/css/gradebook.css" rel="stylesheet" />
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/x-editable.css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/x-editable-lams.css"> 
 	<lams:css suffix="chart"/>
 	
 	<jsp:include page="includes/jsp/jqGridIncludes.jsp"></jsp:include>
@@ -23,6 +25,7 @@
 	<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/d3.js"></script>
  	<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/chart.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL />gradebook/includes/javascript/blockexportbutton.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/x-editable.js"></script>
 	
 	<script type="text/javascript">
 	
@@ -155,6 +158,7 @@
 			    height: "100%",
 			    width: jqgridWidth,
 				shrinkToFit: false,
+				cmTemplate: { title: false },
 			    cellEdit: true,
 			    viewrecords: true,
 			    sortorder: "asc", 
@@ -176,19 +180,23 @@
 			    ],
 			    colModel:[
 			      {name:'id', index:'id', sortable:false, editable:false, hidden:true, search:false, hidedlg:true},
-			      {name:'rowNamer',index:'rowName', sortable:true, editable:false, autoencode:true, formatter:userNameFormatter},
-			      {name:'status',index:'status', sortable:false, editable:false, search:false, width:50, align:"center"},
-			      {name:'timeTaken',index:'timeTaken', sortable:true, editable:false, search:false, width:80, align:"center"},
-			      {name:'startDate',index:'startDate', sortable:true, editable:false, hidden:false, search:false, width:85, align:"left"},
-			      {name:'finishDate',index:'finishDate', sortable:false, editable:false, hidden:false, search:false, width:85, align:"left"},
+			      {name:'rowNamer',index:'rowName', sortable:true, editable:false, autoencode:true, width: 150, formatter:userNameFormatter},
+			      {name:'status',index:'status', sortable:false, editable:false, search:false, width:30, align:"center"},
+				  {name:'timeTaken',index:'timeTaken', sortable:true, editable: false, width:50, align:"center",
+						cellattr: function(rowID, val, rawObject, cm, rdata) {
+				    	    return 'title="' + rdata.startDate + ' - ' + rdata.finishDate + '"';
+				    	}
+			      },
+				  {name:'startDate',index:'startDate', width:0, hidden: true},
+				  {name:'finishDate',index:'finishDate', width:0, hidden: true},
 			      {name:'feedback',index:'feedback', sortable:true, editable:true, edittype:'textarea', editoptions:{rows:'4',cols:'20'}, search:false },
 			      {name:'mark',index:'mark', sortable:true, editable:true, editrules:{number:true}, search:false, width:50, align:"center"},
 			      {name:'portraitId', index:'portraitId', width:0, hidden: true},
 			      {name:'hasArchivedMarks', index:'hasArchivedMarks', width:0, hidden: true}
 			      ],
 			    loadError: function(xhr,st,err) {
-				    	jQuery("#userView").clearGridData();
-				    	alert("<fmt:message key="gradebook.error.loaderror"/>");
+				    jQuery("#userView").clearGridData();
+				   	alert("<fmt:message key="gradebook.error.loaderror"/>");
 			    },
 			    subGrid: true,
 				subGridRowExpanded: function(subgrid_id, row_id) {
@@ -205,6 +213,7 @@
 						     url: "<lams:LAMSURL />/gradebook/gradebook.do?dispatch=getActivityGridData&lessonID=${lessonDetails.lessonID}&view=monUserView&userID=" + userID,
 						     height: "100%",
 						     autowidth:true,
+						     cmTemplate: { title: false },
 						     cellEdit:true,
 						     pager: subgrid_table_id + "_pager",
 						     rowList:[10,20,30,40,50,100],
@@ -219,21 +228,31 @@
 						    	"<fmt:message key="gradebook.columntitle.startDate"/>", 
 						    	"<fmt:message key="gradebook.columntitle.completeDate"/>", 
 						     	"<fmt:message key="gradebook.columntitle.activityFeedback"/>", 
+						     	"<fmt:message key="gradebook.columntitle.outcome"/>",
 						     	"<fmt:message key="gradebook.columntitle.mark"/>"
 						     ],
 						     colModel: [
 						       	{name:'id', index:'id', sortable:false, hidden:true, hidedlg:true},
 						       	{name:'marksAvailable',index:'marksAvailable', sortable:false, editable:false, hidden:true, search:false, hidedlg:true},
-								{name:'rowName',  index:'rowName', sortable:false, editable: false},
-								{name:'status',  index:'status', sortable:false, editable:false, width:50, align:"center"},
-								{name:'timeTaken',index:'timeTaken', sortable:true, editable: false, width:80, align:"center"},
-							    {name:'startDate',index:'startDate', sortable:true, editable:false, search:false, width:85, align:"left"},
-							    {name:'finishDate',index:'finishDate', sortable:false, editable:false, search:false, width:85, align:"left"},
+								{name:'rowName',  index:'rowName', sortable:false, editable: false, width: 150},
+								{name:'status',  index:'status', sortable:false, editable:false, width:30, align:"center"},
+								{name:'timeTaken',index:'timeTaken', sortable:true, editable: false, width:51, align:"center",
+									cellattr: function(rowID, val, rawObject, cm, rdata) {
+							    	    return 'title="' + rdata.startDate + ' - ' + rdata.finishDate;
+							    	}
+						    	},
+							    {name:'startDate',index:'startDate', width:0, hidden: true},
+							    {name:'finishDate',index:'finishDate', width:0, hidden: true},
 								{name:'feedback',  index:'feedback', sortable:false, editable: true, edittype:'textarea', editoptions:{rows:'4',cols:'20'}, width:200, hidden:true},
-								{name:'mark', index:'mark', sortable:true, editable: true, editrules:{number:true}, width:50, align:"center" }
+								{name:'outcome', index:'outcome', sortable:false, editable: false,
+									cellattr: function(rowID, val, rawObject, cm, rdata) {
+							    	    return 'style="text-align:' + (rdata.outcome.startsWith('[') ? 'left"' : 'center"');
+							    	}
+						    	},
+								{name:'mark', index:'mark', sortable:true, editable: true, editrules:{number:true}, width:49, align:"center" }
 						     ],
 						     loadError: function(xhr,st,err) {
-						    		jQuery("#"+subgrid_table_id).clearGridData();
+						    	jQuery("#"+subgrid_table_id).clearGridData();
 						 	 	alert("<fmt:message key="gradebook.error.loaderror"/>");
 						     },
 						     formatCell: function(rowid, cellname,value, iRow, iCol) {
@@ -282,7 +301,6 @@
 					    	 	}
 					    	 },
 						     afterSaveCell: function(rowid, cellname,value, iRow, iCol) {
-						     	
 						     	var currRowData = jQuery("#"+subgrid_table_id).getRowData(rowid);
 						     	if (cellname == "mark") {
 							     	
@@ -305,8 +323,70 @@
 						     	alert("<fmt:message key="error.cellsave"/>");
 						     },
 							 gridComplete: function(){
-							 	toolTip($(".jqgrow"), "jqgridTooltip");
 							 	fixPagerInCenter(subgrid_table_id+"_pager", 1);
+
+							 	// if there are outcomes mapped to this activity, make them editable
+							 	var subgrid = $(this);
+							 	$('tr[role="row"]', subgrid).each(function(){
+								 	// find out row ID
+								 	var row = $(this),
+								 		id = row.attr('id');
+							 		// first row does not have ID
+								 	if (id) {
+									 	// content is JSON code sent from server
+								 		var content = $(subgrid).jqGrid('getCell', id, 'outcome');
+										if (content && content.startsWith('[')) {
+											var outcomes = JSON.parse(content),
+												outcomeValues = {},
+												result = '';
+											// go through each JSON item
+											$.each(outcomes, function() {
+												// assign values 0..n to ordered value names
+												var editablePossibleValues = this.possibleValues.map(function(value, index){
+													return {
+														value : index,
+														text  : value
+													}
+												});
+												// add a marker for unsetting result
+												editablePossibleValues.unshift({
+													value : -1,
+													text  : '<fmt:message key="outcome.result.not.set"/>'
+												});
+												outcomeValues[this.mappingId] = editablePossibleValues;
+												// build HTML code for x-editable
+												result += '<span title="' + this.code + '">' + this.name + 
+														': <a href="#" class="outcome" mappingId="' + this.mappingId + '"></a></span><br />';
+											});
+											// set HTML to the cell
+											$(subgrid).jqGrid('setCell', id, 'outcome', result);
+
+											// enable editable for each outcome
+											$('.outcome', row).each(function() {
+												var editable = $(this),
+													mappingId = editable.attr('mappingId');
+												editable.editable({
+												    type: 'select',
+												    emptytext : '<fmt:message key="outcome.result.error"/>',
+												    pk : mappingId,
+												    // a trick to send extra param to the server
+												    name : userID,
+												    url : '<lams:LAMSURL/>outcome.do?method=outcomeSetResult',
+												    mode : 'inline',
+												    source : outcomeValues[mappingId],
+												    // sending -1 removes the result
+												    value : typeof this.value == 'undefined' ? -1 : this.value,
+												    success: function(response, newValue) {
+													    if (response != "OK"){
+														    // it will set the value to empty and display emptytext, i.e. "ERROR!"
+														    return {'newValue' : null}
+														}
+													}
+												});
+											});
+										}
+							 		}
+								 });
 							 },
 							 subGrid : hasArchivedMarks,
 							 subGridRowExpanded: function(subgrid_id, row_id) {
@@ -339,9 +419,13 @@
 									       	{name:'id', index:'id',  sortable:false, editable: false ,width:70, align:"right"},
 											{name:'lessonMark',  index:'lessonMark', sortable:false, editable: false, width:80, align:"center" },
 											{name:'status',  index:'status', sortable:false, editable:false, width:50, align:"center"},
-											{name:'timeTaken',index:'timeTaken', sortable:false, editable: false, width:80, align:"center"},
-										    {name:'startDate',index:'startDate', sortable:false, editable:false, search:false, width:85, align:"left"},
-										    {name:'finishDate',index:'finishDate', sortable:false, editable:false, search:false, width:85, align:"left"},
+											{name:'timeTaken',index:'timeTaken', sortable:true, editable: false, width:51, align:"center",
+												cellattr: function(rowID, val, rawObject, cm, rdata) {
+										    	    return 'title="' + rdata.startDate + ' - ' + rdata.finishDate;
+										    	}
+									    	},
+										    {name:'startDate',index:'startDate', width:0, hidden: true},
+										    {name:'finishDate',index:'finishDate', width:0, hidden: true},
 											{name:'feedback',  index:'feedback', sortable:false, editable: false, width:200, hidden:true},
 											{name:'mark', index:'mark', sortable:false, editable: false, width:50, align:"center" }
 									     ],
@@ -384,7 +468,6 @@
 					  
 					},
 					gridComplete: function(){
-						toolTip($(".jqgrow"), "jqgridTooltip");  // Allow tooltips for this grid	
 				   	 	initializePortraitPopover('<lams:LAMSURL/>');
 						// Load dates shown but hide straight away as all columns needed initially so that subgrid is displayed properly LDEV-4289
 						processLessonDateFields( lessonDatesHidden );
@@ -403,10 +486,11 @@
 				    height: "100%",
 				    width: jqgridWidth,
 				    shrinkToFit: false,
+				    cmTemplate: { title: false },
 				    cellEdit: true,
 				    pager: "activityViewPager",
 				    rowList:[10,20,30,40,50,100],
-				    	rowNum:10,
+				    rowNum:10,
 				    sortorder: "asc", 
 				    sortname: "activityId", 
 				    colNames:[
@@ -426,9 +510,9 @@
 				      {name:'avgMark',index:'avgMark', sortable:true, editable:false, width:50, align:"center"}
 				    ],
 				    loadError: function(xhr,st,err) {
-			    			jQuery("#activityView").clearGridData();
-			    			alert("<fmt:message key="gradebook.error.loaderror"/>");
-			    		},
+			    		jQuery("#activityView").clearGridData();
+			    		alert("<fmt:message key="gradebook.error.loaderror"/>");
+			    	},
 				    subGrid: true,
 					subGridRowExpanded: function(subgrid_id, row_id) {
 					   var subgrid_table_id;
@@ -445,6 +529,7 @@
 						     url: "<lams:LAMSURL />/gradebook/gradebook.do?dispatch=getUserGridData&view=monActivityView&lessonID=${lessonDetails.lessonID}&activityID=" + activityID + "&groupId=" + groupID,
 						     height: "100%",
 						     autowidth:true,
+						     cmTemplate: { title: false },
 						     cellEdit:true,
 						     cellurl: "<lams:LAMSURL />/gradebook/gradebookMonitoring.do?dispatch=updateUserActivityGradebookData&lessonID=${lessonDetails.lessonID}&view=monActivityView&activityID=" + activityID,
 						     sortorder: "asc", 
@@ -462,17 +547,21 @@
 						    	"<fmt:message key="gradebook.columntitle.completeDate"/>", 
 						     	"<fmt:message key="gradebook.columntitle.activityFeedback"/>", 
 						     	"<fmt:message key="gradebook.columntitle.mark"/>",
-							    	'portraitId',
+							    'portraitId',
 						     	'activityURL'
 						     ],
 						     colModel:[
 						     	{name:'id', index:'id', sortable:false, editable:false, hidden:true, search:false, hidedlg:true},
 						     	{name:'marksAvailable',index:'marksAvailable', sortable:false, editable:false, hidden:true, search:false, hidedlg:true},
 						     	{name:'rowName',index:'rowName', sortable:true, editable:false, formatter:userNameFormatterActivity},
 						      	{name:'status', index:'status', sortable:false, editable:false, search:false, width:30, align:"center"},
-						      	{name:'timeTaken', index:'timeTaken', sortable:true, editable: false, search:false, width:80, align:"center"},
-							    {name:'startDate',index:'startDate', sortable:true, editable:false, search:false, width:85, align:"left"},
-							    {name:'finishDate',index:'finishDate', sortable:false, editable:false, search:false, width:85, align:"left"},
+								{name:'timeTaken',index:'timeTaken', sortable:true, editable: false, width:51, align:"center",
+									cellattr: function(rowID, val, rawObject, cm, rdata) {
+							    	    return 'title="' + rdata.startDate + ' - ' + rdata.finishDate + '"';
+							    	}
+						    	},
+							    {name:'startDate',index:'startDate', width:0, hidden: true},
+							    {name:'finishDate',index:'finishDate', width:0, hidden: true},
 						     	{name:'feedback',index:'feedback', sortable:false, editable:true, edittype:'textarea', editoptions:{rows:'4',cols:'20'} , search:false, width:200, hidden:true},
 						     	{name:'mark',index:'mark', sortable:true, editable:true, editrules:{number:true}, search:false, width:50, align:"center"},
 						     	{name:'portraitId', index:'portraitId', width:0, hidden: true},
@@ -546,7 +635,6 @@
 						     	alert("<fmt:message key="error.cellsave"/>");
 						     },
 							 gridComplete: function(){
-							 	toolTip($(".jqgrow"), "jqgridTooltip");	// applying tooltips for this grid
 						   	 	initializePortraitPopover('<lams:LAMSURL/>');
 						   	 	fixPagerInCenter(subgrid_table_id+"_pager", 1);
 							 }
@@ -555,7 +643,6 @@
 
 					},
 					 gridComplete: function(){
-					 	toolTip($(".jqgrow"), "jqgridTooltip");	// enable tooltips for grid
 					 	fixPagerInCenter('activityViewPager', 0);
 					 }	 
 				}).navGrid("#activityViewPager", {edit:false,add:false,del:false,search:false}); // enable refresh button
@@ -807,10 +894,7 @@
 				<br />
 				
 				<table id="activityView" class="scroll" ></table>
-				<div id="activityViewPager" class="scroll" ></div>	
-				
-				<%-- not #tooltip as it conflicts with the learner progress tooltip --%>
-				<div class="tooltip-lg" id="jqgridTooltip"></div> 
+				<div id="activityViewPager" class="scroll" ></div>
 			</div>
 	 
 	<c:if test="not isInTabs">