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"));
@@ -317,15 +319,21 @@ SPARQL queries for existing values. --%>
                 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,14 +281,7 @@ var addAuthorForm = {
     
     initAuthorReordering: function() {
     	$('#authorships').sortable({
-    		update: function() {
+    		stop: function(event, ui) {
-    			addAuthorForm.reorderAuthorships();
-    		}
-    	});   	
-    },
-    
-    reorderAuthorships: function() {
-    	
         		var predicateUri = '<' + $('#rankPred').val() + '>',
         		rankXsdType = $('#rankXsdType').val(),
         		additions = '',
@@ -310,11 +309,10 @@ var addAuthorForm = {
         			additions += subjectUri + ' ' + predicateUri + ' ' + newRankForN3 +  ' .';
         			retractions += subjectUri + ' ' + predicateUri + ' ' + oldRankForN3 + ' .';
     		
-    		// This object will be used to modify the page after success or failure of the
+        			// This data will be used to modify the page after successful completion
-    		// Ajax request.
+        			// of the Ajax request.
         			authorship = {
         		        uri: uri,
-    	        oldRank: oldRank,
         				newRank: newRank + '_' + rankXsdType
         			};
         			authorships.push(authorship);
@@ -335,13 +333,36 @@ var addAuthorForm = {
         			processData: 'false',
         			dataType: 'json',
         			type: 'POST',
+        			movedItem: ui.item,
         			success: function(data, status, request) {
-    			addAuthorForm.updateRanks(this.authorships);
+        		    	$.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) {
-    			addAuthorForm.resetOrder(this.authorships);
+        				// Put the moved item back to its original position.
-    			alert('Reordering of author ranks failed.');
+        				// 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
     	});   	
     },
     
@@ -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 = {};