NIHVIVO-646 Reorder authorships through drag-and-drop. Handle success and failure cases. Reset element positions after a removal.

productMods/edit/forms/addAuthorsToInformationResource.jsp

@@ -299,6 +299,7 @@ SPARQL queries for existing values. --%>
     <%
  
         int rank = 0;
+        int index = 0;
         for ( Individual authorship : authorships ) {
             String rankDatatypeUri = "";
             DataPropertyStatement rankStmt = authorship.getDataPropertyStatement(rankPredicateUri);
@@ -309,6 +310,7 @@ SPARQL queries for existing values. --%>
             
             Individual author = authorship.getRelatedIndividual(linkedAuthorProperty);
             if ( author != null ) {
+                index++;
                 request.setAttribute("authorName", author.getName());
                 // Doesn't seem to need urlencoding to add as id attribute value
                 //request.setAttribute("authorUri", URLEncoder.encode(author.getURI(), "UTF-8"));
@@ -316,16 +318,22 @@ SPARQL queries for existing values. --%>
                 request.setAttribute("authorshipUri", authorship.getURI());
                 request.setAttribute("rankValue", rank + "_" + rankDatatypeUri);
                 request.setAttribute("rank", rank);
+                
+                // This value is used to replace a moved element after a failed reorder.
+                // It's not the same as rank, because ranks may have gaps. It's easier to
+                // reposition the element using ordering.
+                request.setAttribute("position", index);
 
                 %> 
                 <c:url var="authorHref" value="/individual">
                     <c:param name="uri" value="${authorUri}"/>
                 </c:url>
-                <c:url var="deleteAuthorshipHref" value="/edit/primitiveRdfDelete" />
+                <c:url var="deleteAuthorshipHref" value="/edit/primitiveDelete" />
 
                 <%-- <c:url var="undoHref" value="/edit/addAuthorToInformationResource" /> --%>          
                 <li class="authorship" id="${authorshipUri}">
-                    <span class="rank" id="${rankValue}" /> <%--  ${rankDatatypeUri}</span>--%>
+                    <span class="rank" id="${rankValue}"></span> 
+                    <span class="position" id="${position}"></span> 
                     <%-- This span will be used in the next phase, when we display a message that the author has been
                     removed. That text will replace the a.authorLink. --%>
                     <span class="author"><a href="${authorHref}" id="${authorUri}" class="authorLink">${authorName}</a>

productMods/edit/forms/js/addAuthorsToInformationResource.js

@@ -118,9 +118,15 @@ var addAuthorForm = {
 //    				var authorLink = author.children('a.authorLink');
 //    				var authorName = authorLink.html();
     				if (status === 'success') {
+    					// Reset the position value of each succeeding authorship
+    					authorship.next().each(function() {
+    						var pos = parseInt($(this).children('.position').attr('id'));
+    						$(this).children('.position').attr('id', pos-1);
+    					});
     					authorship.fadeOut(400, function() {
     						$(this).remove();
     					});
+    					
 //    					$(this).hide();
 //    					$(this).siblings('.undo').show();
 //    					author.html(authorName + ' has been removed');
@@ -275,76 +281,91 @@ var addAuthorForm = {
     
     initAuthorReordering: function() {
     	$('#authorships').sortable({
-    		update: function() {
+    		stop: function(event, ui) {
-    			addAuthorForm.reorderAuthorships();
+        		var predicateUri = '<' + $('#rankPred').val() + '>',
-    		}
+        		rankXsdType = $('#rankXsdType').val(),
+        		additions = '',
+        		retractions = '',
+        		authorships = [];
+
+        		$('li.authorship').each(function(index) {
+        			var uri = $(this).attr('id'),
+        			subjectUri = '<' + uri + '>',
+        			oldRankVal = $(this).children('.rank').attr('id'),
+        			newRank = index + 1,                            
+        			newRankForN3,
+        			oldRank,
+        			oldRankType,
+        			oldRankForN3,
+        			rankVals;
+
+        			rankVals = oldRankVal.split('_');  // e.g., 1_http://www.w3.org/2001/XMLSchema#int
+        			oldRank = rankVals[0];
+        			oldRankType = rankVals[1];    		
+        			oldRankForN3 = addAuthorForm.makeRankDataPropVal(oldRank, oldRankType);
+
+        			newRankForN3 = addAuthorForm.makeRankDataPropVal(newRank, rankXsdType);
+    		
+        			additions += subjectUri + ' ' + predicateUri + ' ' + newRankForN3 +  ' .';
+        			retractions += subjectUri + ' ' + predicateUri + ' ' + oldRankForN3 + ' .';
+    		
+        			// This data will be used to modify the page after successful completion
+        			// of the Ajax request.
+        			authorship = {
+        		        uri: uri,
+        				newRank: newRank + '_' + rankXsdType
+        			};
+        			authorships.push(authorship);
+        			
+        		});
+    	
+        		// console.log(authorships)
+        		// console.log("additions: " + additions);
+        		// console.log("retractions: " + retractions);
+    	
+        		$.ajax({
+        			url: $('#reorderUrl').val(),
+        			data: {
+        				additions: additions,
+        				retractions: retractions
+        			},
+        			authorships: authorships,
+        			processData: 'false',
+        			dataType: 'json',
+        			type: 'POST',
+        			movedItem: ui.item,
+        			success: function(data, status, request) {
+        		    	$.each(authorships, function(index, obj) {
+        		    		// find the element with this uri as id
+        		    		var el = $('li[id=' + obj.uri + ']'),
+        		    			rank = obj.newRank,
+        		    			pos = rank.split('_')[0];
+        		    		// set the new rank for this element 
+        		    		el.children('.rank').attr('id', rank);   
+        		    		el.children('.position').attr('id', pos);
+        		    	});
+        			},
+        			error: function(request, status, error) {
+        				// Put the moved item back to its original position.
+        				// Seems we need to do this by hand. Can't see any way to do it with jQuery UI. ??
+        				var pos = ui.item.children('.position').attr('id'),
+        				    nextpos = parseInt(pos) + 1,
+        				    authorships = $('#authorships'),
+        				    next = authorships.find('.position[id=' + nextpos + ']').parent();
+        				
+        				if (next.length > 0) {
+        					ui.item.insertBefore(next);
+        				} else {
+        					ui.item.appendTo(authorships);
+        				}       					       				
+    				
+        				alert('Reordering of authors failed.');
+        			}
+        		});    	
+    		} // end stop callback
     	});   	
     },
     
-    reorderAuthorships: function() {
-    	
-    	var predicateUri = '<' + $('#rankPred').val() + '>',
-    		rankXsdType = $('#rankXsdType').val(),
-    		additions = '',
-    		retractions = '',
-    		authorships = [];
-    	
-    	$('li.authorship').each(function(index) {
-            var uri = $(this).attr('id'),
-            	subjectUri = '<' + uri + '>',
-                oldRankVal = $(this).children('.rank').attr('id'),
-                newRank = index + 1,                            
-    			newRankForN3,
-    			oldRank,
-    			oldRankType,
-    			oldRankForN3,
-    			rankVals;
-
-    		rankVals = oldRankVal.split('_');  // e.g., 1_http://www.w3.org/2001/XMLSchema#int
-    		oldRank = rankVals[0];
-    		oldRankType = rankVals[1];    		
-    		oldRankForN3 = addAuthorForm.makeRankDataPropVal(oldRank, oldRankType);
-
-    		newRankForN3 = addAuthorForm.makeRankDataPropVal(newRank, rankXsdType);
-    		
-    		additions += subjectUri + ' ' + predicateUri + ' ' + newRankForN3 +  ' .';
-    		retractions += subjectUri + ' ' + predicateUri + ' ' + oldRankForN3 + ' .';
-    		
-    		// This object will be used to modify the page after success or failure of the
-    		// Ajax request.
-    		authorship = {
-    	        uri: uri,
-    	        oldRank: oldRank,
-    	        newRank: newRank + '_' + rankXsdType
-    		};
-    		authorships.push(authorship);
-    		
-    	});
-    	
-    	// console.log(authorships)
-    	// console.log("additions: " + additions);
-    	// console.log("retractions: " + retractions);
-    	
-    	$.ajax({
-    		url: $('#reorderUrl').val(),
-    		data: {
-    			additions: additions,
-    			retractions: retractions
-    		},
-    		authorships: authorships,
-    		processData: 'false',
-    		dataType: 'json',
-    		type: 'POST',
-    		success: function(data, status, request) {
-    			addAuthorForm.updateRanks(this.authorships);
-    		},
-    		error: function(request, status, error) {
-    			addAuthorForm.resetOrder(this.authorships);
-    			alert('Reordering of author ranks failed.');
-    		}
-    	});    	
-    },
-    
     makeRankDataPropVal: function(rank, xsdType) {
     	var rankVal = '"' + rank + '"';
     	if (xsdType) {
@@ -353,23 +374,6 @@ var addAuthorForm = {
     	return rankVal;
     },
     
-    // After drag-and-drop reorder, update the rank vals stored with the authorships;
-    // otherwise, additional reorderings will issue incorrect retractions in the request.
-    updateRanks: function(authorships) {
-    	$.each(authorships, function(index, obj) {
-    		// find the element with this uri as id
-    		var el = $('li[id=' + obj.uri + ']');   
-    		// set the new rank for this element 
-    		el.children('.rank').attr('id', obj.newRank);    		
-    	});
-    },
-    
-    // After drag-and-drop failure, reset to original order
-    resetOrder: function(authorships) {
-    	// restore existing rankings after reordering failure
-    	// use span.rank id attr value to determine
-    },
-    
     initAutocomplete: function() {
 
     	var cache = {};