NIHVIVO-2343 Create accountProxyCommon.js to partition the code, and add filtering to prevent duplicates.

webapp/web/js/account/accountProxyCommon.js

@@ -0,0 +1,90 @@
+/* $This file is distributed under the terms of the license in /doc/license.txt$ */
+
+/*
+ * A collection of building blocks for the proxy-management UI.
+ */
+
+/* 
+ * ----------------------------------------------------------------------------
+ * proxyInfoElement
+ * ----------------------------------------------------------------------------
+ * Display information about an entity according to the template. The entity 
+ * can be either:
+ *    a profile -- Individual to be edited.
+ *    a proxy   -- User Account to do the editing, optionally with info from a 
+ *                   profile associated with that individual.
+ * ----------------------------------------------------------------------------
+ * The template must inlude
+ * 1) a link with attribute templatePart="remove"
+ * 2) a link with attribute templatePart="restore"
+ * 3) a hidden field with attribute templatePart="uriField" and value="%uri%" see below
+ * 
+ * The template may include tokens to be replaced, from the following:
+ *    %uri% -- the URI of the individual being displayed 
+ *    %label& -- the label of the individual.
+ *    %classLabel% -- the label of the most specific class of the individual.
+ *    %imageUrl% -- the URL that will fetch the image of the individual, 
+ *                  or a placeholder image.
+ * ----------------------------------------------------------------------------
+ */
+
+function proxyInfoElement(template, uri, label, classLabel, imageUrl, existing) {
+	this.uri = uri;
+	
+	var existed = existing;
+	var removed = false;
+
+	var content = template.replace(/%uri%/g, uri).replace(/%label%/g, label)
+			.replace(/%classLabel%/g, classLabel).replace(/%imageUrl%/g,
+					imageUrl);
+
+	this.toString = function() {
+		return "proxyInfoElement: " + content;
+	}
+
+	this.element = function() {
+		var element = $("<div name='proxyInfoElement'>" + content + "</div>");
+		var removeLink = $("[templatePart='remove']", element).first();
+		var restoreLink = $("[templatePart='restore']", element).first();
+		var proxyUriField = $("[templatePart='uriField']", element);
+
+		var setClass = function(r) {
+			if (r) {
+				element.removeClass('new existing').addClass('removed')
+			} else if (existed) {
+				element.removeClass('new removed').addClass('existing')
+			} else {
+				element.removeClass('removed existing').addClass('new')
+			}
+		}
+
+		var setRemoved = function(r) {
+			removed = r;
+			if (r) {
+				removeLink.hide();
+				restoreLink.show();
+				proxyUriField.attr('disabled', 'disabled');
+				setClass(r);
+			} else {
+				removeLink.show();
+				restoreLink.hide();
+				proxyUriField.attr('disabled', '');
+				setClass(r);
+			}
+		}
+
+		removeLink.click(function(event) {
+			setRemoved(true);
+			return false;
+		});
+
+		restoreLink.click(function(event) {
+			setRemoved(false);
+			return false;
+		});
+
+		setRemoved(removed);
+
+		return element;
+	}
+}

webapp/web/js/account/accountProxyProxiesPanel.js

@@ -33,12 +33,12 @@ function proxyProxiesPanel(p)  {
 			var label = $("p[name='label']", data).text();
 			var classLabel = $("p[name='classLabel']", data).text();
 			var imageUrl = $("p[name='imageUrl']", data).text();
-			this.proxyData.push(new proxyProxy(this.templateHtml, uri, label, classLabel, imageUrl, true));
+			this.proxyData.push(new proxyInfoElement(this.templateHtml, uri, label, classLabel, imageUrl, true));
 		}
 	}
 
 	this.displayProxyData = function() {
-		$("div[name='proxyActual']", this.proxyDataDiv).remove();
+		$("div[name='proxyInfoElement']", this.proxyDataDiv).remove();
 		
 		for (i = 0; i < this.proxyData.length; i++) {
 			this.proxyData[i].element().appendTo(this.proxyDataDiv);
@@ -63,64 +63,6 @@ function proxyProxiesPanel(p)  {
 	this.setupAutoCompleteFields();
 }
 
-function proxyProxy(template, uri, label, classLabel, imageUrl, existing) {
-	var existed = existing;
-	
-	var content = template.replace(/%uri%/g, uri)
-                          .replace(/%label%/g, label)
-                          .replace(/%classLabel%/g, classLabel)
-                          .replace(/%imageUrl%/g, imageUrl);
-
-	this.toString = function() {
-		return "ProxyProxy: " + content;
-	}
-	
-	this.element = function() {
-		var element = $("<div name='proxyActual'>" + content + "</div>");
-		var removeLink = $("[name='removeProxy']", element).first();
-		var restoreLink = $("[name='restoreProxy']", element).first();
-		var proxyUriField = $("[name='proxyUri']", element);
-		
-		var setClass = function(r) {
-			if (r) {
-				element.removeClass('new existing').addClass('removed')
-			} else if (existed) {
-				element.removeClass('new removed').addClass('existing')
-			} else {
-				element.removeClass('removed existing').addClass('new')
-			}
-		}
-		
-		var setRemoved = function(r) {
-			if (r) {
-				removeLink.hide();
-				restoreLink.show();
-				proxyUriField.attr('disabled', 'disabled');
-				setClass(r);
-			} else {
-				removeLink.show();
-				restoreLink.hide();
-				proxyUriField.attr('disabled', '');
-				setClass(r);
-			}
-		}
-		
-		removeLink.click(function(event) {
-			setRemoved(true);
-			return false;
-			});
-		
-		restoreLink.click(function(event) {
-			setRemoved(false);
-			return false;
-			});
-		
-		setRemoved(false);
-		
-		return element;
-	}
-}
-
 function proxyAutocomplete(parent) {
 	var cache = [];
 	
@@ -139,11 +81,29 @@ function proxyAutocomplete(parent) {
 		+ "ORDER BY ASC(?lastName) ASC(?firstName) \n"
 		+ "LIMIT 25 \n";
 	
+	var filterResults = function(parsed, data) {
+		var filtered = [];
+		for (var p = 0; p < parsed.length; p++) {
+			var dupe = false;
+			for (var d = 0; d < data.length; d++) {
+				if (data[d].uri == parsed[p].uri) {
+					dupe = true;
+					break;
+				}
+			}
+			if (!dupe) {
+				filtered.push(parsed[p]);
+			}
+		}
+		return filtered;
+	}
+	
     this.minLength = 3,
     
     this.source = function(request, response) {
         if (request.term in cache) {
-            response(cache[request.term]);
+        	var filtered = filterResults(cache[request.term], parent.proxyData);
+            response(filtered);
             return;
         }
         $.ajax({
@@ -157,28 +117,18 @@ function proxyAutocomplete(parent) {
                 var results = $.parseJSON(xhr.responseText);
                 var parsed = sparqlUtils.parseSparqlResults(results); 
                 cache[request.term] = parsed; 
-                response(parsed);
+                var filtered = filterResults(parsed, parent.proxyData);
+                response(filtered);
             }
         });
     }
     
     this.select = function(event, ui) {
-        parent.proxyData.unshift(new proxyProxy(parent.templateHtml, ui.item.uri, ui.item.label, "", "", false));
+        parent.proxyData.unshift(new proxyInfoElement(parent.templateHtml, ui.item.uri, ui.item.label, "", "", false));
         parent.displayProxyData();
 	}
-        
-; 
 }
 
-function dump(msg, obj) {
-    var out = '';
-    for (var i in obj) {
-        out += i + ": " + obj[i] + "\n";
-    }
-    console.log(msg, out);
-}
-
-
 $(document).ready(function() {
 	$("div[name='proxyProxiesPanel']").each(function(i) {
 		var ppp = new proxyProxiesPanel(this);

webapp/web/templates/freemarker/body/accounts/userAccounts-myAccount.ftl

@@ -59,6 +59,8 @@
 
 <section id="my-account" role="region">
     <form id="main-form" method="POST" action="${formUrls.myAccount}" class="customForm" role="my account">
+        <#include "userAccounts-myProxiesPanel.ftl">
+
         <label for="email-address">Email address<span class="requiredHint"> *</span></label>
         <input type="text" name="emailAddress" value="${emailAddress}" id="email-address" role="input" />
 

webapp/web/templates/freemarker/body/accounts/userAccounts-myProxiesPanel.ftl

@@ -26,9 +26,12 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/account/proxy.c
         </#list>
 
 		<#-- 
-		    Each proxy will be shown using the HTML inside this div.  
-		    One of the links "removeProxy" and "restoreProxy" will show at a time.
-		    The hidden input field named "proxyUri" is required.
+		    Each proxy will be shown using the HTML inside this div.
+		    It must contain at least:
+		      1) a link with templatePart="remove"
+		      2) a link with templatePart="restore"
+		      3) a hidden input field with templatePart="uriField"  
+		    One of the links "remove" and "restore" will show at a time.
 		-->
         <div name="template" style="display: none">
             <table>
@@ -37,11 +40,14 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/account/proxy.c
                         <img width="90" alt="%label%" src="%imageUrl%">
                     </td>
                     <td>
+                        <div>
                         %label% | %classLabel%
-                        <br>
-                        <a href="." name="removeProxy">remove</a>
-                        <a href="." name="restoreProxy">restore</a>
-                        <input type="hidden" name="proxyUri" value="%uri%" >
+                        </div>
+                        <div>
+                            <a href="." templatePart="remove">remove</a>
+                            <a href="." templatePart="restore">restore</a>
+                            <input type="hidden" name="proxyUri" templatePart="uriField" value="%uri%" >
+                            </div>
                     </td>
                 </tr>
             </table>
@@ -51,4 +57,5 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/account/proxy.c
 
 ${scripts.add('<script type="text/javascript" src="${urls.base}/js/jquery.js"></script>',
               '<script type="text/javascript" src="${urls.base}/js/sparqlUtils.js"></script>',   
+              '<script type="text/javascript" src="${urls.base}/js/account/accountProxyCommon.js"></script>',   
               '<script type="text/javascript" src="${urls.base}/js/account/accountProxyProxiesPanel.js"></script>')}