diff pylons_app/templates/admin/repos/repo_edit.html @ 298:15e96b5a2685

autocomplete for repository managment of users
author Marcin Kuzminski <marcin@python-works.com>
date Sat, 26 Jun 2010 18:42:13 +0200
parents 29370bb76fa6
children d303aacb3349
line wrap: on
line diff
--- a/pylons_app/templates/admin/repos/repo_edit.html	Fri Jun 25 21:53:13 2010 +0200
+++ b/pylons_app/templates/admin/repos/repo_edit.html	Sat Jun 26 18:42:13 2010 +0200
@@ -35,7 +35,12 @@
         	</tr>
         	<tr>
         		<td>${_('Owner')}</td>
-        		<td>${h.text('user')}</td>
+				<td class='ac'>
+					<div id="perm_ac">
+						${h.text('user',class_='yui-ac-input')}
+						<div id="owner_container"></div>
+					</div>
+				</td>        		
         		<td>${self.get_form_error('user')}</td>
         	</tr>
         	<tr>
@@ -59,10 +64,7 @@
 	        					<td>${r2p.user.username}</td>
 	        				</tr>
 						%endfor
-
-						
 						<%
-							
 							if not hasattr(c,'form_errors'):
 								d = 'display:none;'
 							else:
@@ -74,7 +76,12 @@
         					<td>${h.radio('perm_new_user','repository.read')}</td>
         					<td>${h.radio('perm_new_user','repository.write')}</td>
         					<td>${h.radio('perm_new_user','repository.admin')}</td>
-        					<td>${h.text('perm_new_user_name',size=10)}</td>
+        					<td class='ac'>
+        						<div id="perm_ac">
+        							${h.text('perm_new_user_name',class_='yui-ac-input')}
+									<div id="perm_container"></div>
+        						</div>
+        					</td>
         					<td>${self.get_form_error('perm_new_user_name')}</td>     					
         				</tr>
         				<tr>
@@ -105,5 +112,114 @@
 				});
             });
         </script>
+		<script type="text/javascript">    
+		YAHOO.example.FnMultipleFields = function(){
+		    var myContacts = ${c.users_array|n}
+		    
+		    // Define a custom search function for the DataSource
+		    var matchNames = function(sQuery) {
+		        // Case insensitive matching
+		        var query = sQuery.toLowerCase(),
+		            contact,
+		            i=0,
+		            l=myContacts.length,
+		            matches = [];
+		        
+		        // Match against each name of each contact
+		        for(; i<l; i++) {
+		            contact = myContacts[i];
+		            if((contact.fname.toLowerCase().indexOf(query) > -1) ||
+		                (contact.lname.toLowerCase().indexOf(query) > -1) ||
+		                (contact.nname && (contact.nname.toLowerCase().indexOf(query) > -1))) {
+		                matches[matches.length] = contact;
+		            }
+		        }
+		
+		        return matches;
+		    };
+		
+		    // Use a FunctionDataSource
+		    var oDS = new YAHOO.util.FunctionDataSource(matchNames);
+		    oDS.responseSchema = {
+		        fields: ["id", "fname", "lname", "nname"]
+		    }
+		
+		    // Instantiate AutoComplete for perms
+		    var oAC_perms = new YAHOO.widget.AutoComplete("perm_new_user_name", "perm_container", oDS);
+		    oAC_perms.useShadow = false;
+		    oAC_perms.resultTypeList = false;
+		    
+		    // Instantiate AutoComplete for owner
+		 	var oAC_owner = new YAHOO.widget.AutoComplete("user", "owner_container", oDS);
+		 	oAC_owner.useShadow = false;
+		 	oAC_owner.resultTypeList = false;
+		    
+		    
+		    // Custom formatter to highlight the matching letters
+		    var custom_formatter = function(oResultData, sQuery, sResultMatch) {
+		        var query = sQuery.toLowerCase(),
+		            fname = oResultData.fname,
+		            lname = oResultData.lname,
+		            nname = oResultData.nname || "", // Guard against null value
+		            query = sQuery.toLowerCase(),
+		            fnameMatchIndex = fname.toLowerCase().indexOf(query),
+		            lnameMatchIndex = lname.toLowerCase().indexOf(query),
+		            nnameMatchIndex = nname.toLowerCase().indexOf(query),
+		            displayfname, displaylname, displaynname;
+		            
+		        if(fnameMatchIndex > -1) {
+		            displayfname = highlightMatch(fname, query, fnameMatchIndex);
+		        }
+		        else {
+		            displayfname = fname;
+		        }
+		
+		        if(lnameMatchIndex > -1) {
+		            displaylname = highlightMatch(lname, query, lnameMatchIndex);
+		        }
+		        else {
+		            displaylname = lname;
+		        }
+		
+		        if(nnameMatchIndex > -1) {
+		            displaynname = "(" + highlightMatch(nname, query, nnameMatchIndex) + ")";
+		        }
+		        else {
+		            displaynname = nname ? "(" + nname + ")" : "";
+		        }
+		
+		        return displayfname + " " + displaylname + " " + displaynname;
+		        
+		    };
+		    oAC_perms.formatResult = custom_formatter; 
+		    oAC_owner.formatResult = custom_formatter;
+		    			    
+		    // Helper function for the formatter
+		    var highlightMatch = function(full, snippet, matchindex) {
+		        return full.substring(0, matchindex) + 
+		                "<span class='match'>" + 
+		                full.substr(matchindex, snippet.length) + 
+		                "</span>" +
+		                full.substring(matchindex + snippet.length);
+		    };
+		
+		    var myHandler = function(sType, aArgs) {
+		        var myAC = aArgs[0]; // reference back to the AC instance
+		        var elLI = aArgs[1]; // reference to the selected LI element
+		        var oData = aArgs[2]; // object literal of selected item's result data
+		        myAC.getInputEl().value = oData.nname;
+		    };
+
+		    oAC_perms.itemSelectEvent.subscribe(myHandler);
+		    oAC_owner.itemSelectEvent.subscribe(myHandler);
+		    
+		    return {
+		        oDS: oDS,
+		        oAC_perms: oAC_perms,
+		        oAC_owner: oAC_owner, 
+		    };
+		}();
+		    
+		</script>        
     </div>
 </%def>