Bug 490923: Autocomplete assignee, qa contact, and cc on the client side

js/field.js

@@ -559,3 +559,74 @@ function browserCanHideOptions(aSelect) {
 }
 
 /* (end) option hiding code */
+
+/**
+ * The Autoselect
+ */
+YAHOO.bugzilla.userAutocomplete = {
+    counter : 0,
+    dataSource : null,
+    generateRequest : function ( enteredText ){ 
+      YAHOO.bugzilla.userAutocomplete.counter = 
+                                   YAHOO.bugzilla.userAutocomplete.counter + 1;
+      YAHOO.util.Connect.setDefaultPostHeader('application/json', true);
+      var json_object = {
+          method : "User.get",
+          id : YAHOO.bugzilla.userAutocomplete.counter,
+          params : [ { 
+            match : [ unescape(enteredText) ],
+            include_fields : [ "email", "real_name" ]
+          } ]
+      };
+      var stringified =  YAHOO.lang.JSON.stringify(json_object);
+      var debug = { msg: "json-rpc obj debug info", "json obj": json_object, 
+                    "param" : stringified}
+      YAHOO.bugzilla.userAutocomplete.debug_helper( debug );
+      return stringified;
+    },
+    resultListFormat : function(oResultData, enteredText, sResultMatch) {
+        return ( unescape(oResultData.real_name) + " (" +  oResultData.email + ")");
+    },
+    debug_helper : function ( ){
+        /* used to help debug any errors that might happen */
+        if( typeof(console) !== 'undefined' && console != null && arguments.length > 0 ){
+            console.log("debug helper info:", arguments);
+        }
+        return true;
+    },    
+    init_ds : function(){
+        this.dataSource = new YAHOO.util.XHRDataSource("jsonrpc.cgi");
+        this.dataSource.connMethodPost = true;
+        this.dataSource.responseSchema = {
+            resultsList : "result.users",
+            metaFields : { error: "error", jsonRpcId: "id"},
+            fields : [
+                { key : "email" },
+                { key : "real_name"}
+            ]
+        };    
+    },
+    init : function( field, container, multiple ) {
+        if( this.dataSource == null ){
+            this.init_ds();  
+        }            
+        var userAutoComp = new YAHOO.widget.AutoComplete( field, container, 
+                                this.dataSource );
+        // other stuff we might want to do with the autocomplete goes here
+        userAutoComp.generateRequest = this.generateRequest;
+        userAutoComp.formatResult = this.resultListFormat;
+        userAutoComp.doBeforeLoadData = this.debug_helper;
+        userAutoComp.minQueryLength = 3;
+        userAutoComp.autoHighlight = false;
+        // this is a throttle to determine the delay of the query from typing
+        // set this higher to cause fewer calls to the server
+        userAutoComp.queryDelay = 0.05
+        userAutoComp.useIFrame = true
+        userAutoComp.resultTypeList = false;
+        if( multiple == true ){
+            userAutoComp.delimChar = [","," "];
+        }
+        
+    }
+};
+

skins/standard/global.css

@@ -532,3 +532,8 @@ form#Create .comment {
 #down_button {
     background-image: url(global/down.png);
 }
+
+/* custom styles for inline instances of autocomplete input fields*/
+.yui-skin-sam .yui-ac-input { position:static !important; 
+                              vertical-align:middle !important;}
+.yui-skin-sam .yui-ac-container { left:0px !important;}

skins/standard/yui/autocomplete.css

+/*
+Copyright (c) 2008, Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.net/yui/license.txt
+version: 2.6.0
+*/
+.yui-skin-sam .yui-ac{position:relative;font-family:arial;font-size:100%;}.yui-skin-sam .yui-ac-input{position:absolute;width:100%;}.yui-skin-sam .yui-ac-container{position:absolute;top:1.6em;width:100%;}.yui-skin-sam .yui-ac-content{position:absolute;width:100%;border:1px solid #808080;background:#fff;overflow:hidden;z-index:9050;}.yui-skin-sam .yui-ac-shadow{position:absolute;margin:.3em;width:100%;background:#000;-moz-opacity:0.10;opacity:.10;filter:alpha(opacity=10);z-index:9049;}.yui-skin-sam .yui-ac iframe{opacity:0;filter:alpha(opacity=0);padding-right:.3em;padding-bottom:.3em;}.yui-skin-sam .yui-ac-content ul{margin:0;padding:0;width:100%;}.yui-skin-sam .yui-ac-content li{margin:0;padding:2px 5px;cursor:default;white-space:nowrap;list-style:none;zoom:1;}.yui-skin-sam .yui-ac-content li.yui-ac-prehighlight{background:#B3D4FF;}.yui-skin-sam .yui-ac-content li.yui-ac-highlight{background:#426FD9;color:#FFF;}

template/en/default/admin/components/create.html.tmpl

@@ -26,6 +26,8 @@
   
 [% title = BLOCK %]Add component to the [% product.name FILTER html %] product[% END %]
 [% PROCESS global/header.html.tmpl
+  style_urls = [ 'skins/standard/yui/autocomplete.css']
+  javascript_urls = [ "js/yui/bz_autocomplete_bundle.js", "js/field.js"]
   title = title
 %]
 

template/en/default/admin/components/edit.html.tmpl

@@ -33,6 +33,8 @@
 [% END %]
 [% PROCESS global/header.html.tmpl
   title = title
+  style_urls = [ 'skins/standard/yui/autocomplete.css']
+  javascript_urls = [ "js/yui/bz_autocomplete_bundle.js", "js/field.js"]
 %]
 
 <form method="post" action="editcomponents.cgi">

template/en/default/bug/create/create.html.tmpl

@@ -30,9 +30,11 @@
 
 [% PROCESS global/header.html.tmpl
   title = title
-  style_urls = [ 'skins/standard/create_attachment.css',
+  style_urls = [ 'skins/standard/yui/autocomplete.css',
+                 'skins/standard/create_attachment.css',
                  'skins/standard/yui/calendar.css' ]
-  javascript_urls = [ "js/attachment.js", "js/util.js", "js/yui/calendar.js",
+  javascript_urls = [ "js/yui/bz_autocomplete_bundle.js",
+                      "js/attachment.js", "js/util.js", "js/yui/calendar.js",
                       "js/field.js", "js/TUI.js" ]
   onload = 'set_assign_to();'
 %]
@@ -384,6 +386,7 @@ TUI_hide_default('expert_fields');
     <th><a href="page.cgi?id=fields.html#assigned_to">Assign To</a>:</th>
     <td colspan="2">
       [% INCLUDE global/userselect.html.tmpl
+         id => "assigned_to"
          name => "assigned_to"
          value => assigned_to
          disabled => assigned_to_disabled
@@ -400,6 +403,7 @@ TUI_hide_default('expert_fields');
       <th>QA Contact:</th>
       <td colspan="2">
       [% INCLUDE global/userselect.html.tmpl
+         id => "qa_contact"
          name => "qa_contact"
          value => qa_contact
          disabled => qa_contact_disabled
@@ -416,6 +420,7 @@ TUI_hide_default('expert_fields');
     <th>CC:</th>
     <td colspan="2">
       [% INCLUDE global/userselect.html.tmpl
+         id => "cc"
          name => "cc"
          value => cc
          disabled => cc_disabled

template/en/default/bug/field.html.tmpl

@@ -87,8 +87,7 @@
         <span>Calendar</span>
       </button>
 
-      <div id="con_calendar_[% field.name FILTER html %]"
-           class="yui-skin-sam"></div>
+      <div id="con_calendar_[% field.name FILTER html %]"></div>
 
       <script type="text/javascript">
         createCalendar('[% field.name FILTER js %]')

template/en/default/bug/show-header.html.tmpl

@@ -34,11 +34,12 @@
 [% title = "$terms.Bug $bug.bug_id – $filtered_desc" %]
 [% header = "$terms.Bug $bug.bug_id" %]
 [% header_addl_info = "Last modified: $filtered_timestamp" %]
-[% javascript_urls = [ "js/util.js", "js/field.js", "js/yui/calendar.js" ] %]
-[% style_urls = [ "skins/standard/yui/calendar.css",
+[% javascript_urls = [ "js/yui/bz_autocomplete_bundle.js",
+                       "js/util.js", "js/field.js", "js/yui/calendar.js" ] %]
+[% style_urls = [ "skins/standard/yui/autocomplete.css",
+                  "skins/standard/yui/calendar.css",
                   "skins/standard/show_bug.css" ] %]
 [% doc_section = "bug_page.html" %]
-
 [% bodyclasses = ['bz_bug',
                   "bz_status_$bug.bug_status",
                   "bz_product_$bug.product",

template/en/default/global/header.html.tmpl

@@ -260,7 +260,7 @@
         class="[% urlbase.replace('^https?://','').replace('/$','').replace('[-~@:/.]+','-') %]
                [% FOREACH class = bodyclasses %]
                  [% ' ' %][% class FILTER css_class_quote %]
-               [% END %]">
+               [% END %] yui-skin-sam">
 
 [%# Migration note: the following file corresponds to the old Param
   # 'bannerhtml'

template/en/default/global/userselect.html.tmpl

@@ -12,6 +12,7 @@
   #
   # Contributor(s): Byron Jones <bugzilla@glob.com.au>
   #                 Frédéric Buclin <LpSolit@gmail.com>
+  #                 Guy Pyrzak <guy.pyrzak@gmail.com>
   #%]
 
 [%# INTERFACE:
@@ -69,15 +70,30 @@
   [% END %]
 </select>
 [% ELSE %]
-<input
-  name="[% name FILTER html %]"
-  value="[% value FILTER html %]"
-  [% IF onchange %] onchange="[% onchange FILTER html %]" [% END %]
-  [% IF disabled %] disabled="[% disabled FILTER html %]" [% END %]
-  [% IF accesskey %] accesskey="[% accesskey FILTER html %]" [% END %]
-  [% IF size %] size="[% size FILTER html %]" [% END %]
-  [% IF id %] id="[% id FILTER html %]" [% END %]
->
+  [% IF id && feature_enabled('jsonrpc') %]
+    <div id="[% id FILTER html %]_autocomplete">
+  [% END %]  
+  <input
+    name="[% name FILTER html %]"
+    value="[% value FILTER html %]"
+    [% IF onchange %] onchange="[% onchange FILTER html %]" [% END %]
+    [% IF disabled %] disabled="[% disabled FILTER html %]" [% END %]
+    [% IF accesskey %] accesskey="[% accesskey FILTER html %]" [% END %]
+    [% IF size %] size="[% size FILTER html %]" [% END %]
+    [% IF id %] id="[% id FILTER html %]" [% END %]
+  >
+  [% IF id && feature_enabled('jsonrpc') %]
+    <div id="[% id FILTER html %]_autocomplete_container"></div>
+    </div>  
+    <script type="text/javascript">
+      if( typeof(YAHOO.bugzilla.userAutocomplete) !== 'undefined' 
+          && YAHOO.bugzilla.userAutocomplete != null){
+        YAHOO.bugzilla.userAutocomplete.init( "[% id FILTER js %]", 
+                    "[% id FILTER js %]_autocomplete_container"
+                    [% IF multiple %], true[% END%]);        
+      }
+    </script>
+  [% END %]
 [% END %]
 
 

template/en/default/list/list.html.tmpl

@@ -46,8 +46,10 @@
   title = title
   style = style
   atomlink = "buglist.cgi?$urlquerypart&title=$title&ctype=atom" 
-  javascript_urls = [ "js/util.js", "js/field.js", "js/yui/calendar.js" ]
-  style_urls = [ "skins/standard/buglist.css", "skins/standard/yui/calendar.css" ]
+  javascript_urls = [ "js/yui/bz_autocomplete_bundle.js", "js/util.js", 
+                      "js/field.js", "js/yui/calendar.js" ]
+  style_urls = [ "skins/standard/yui/autocomplete.css", 
+                  "skins/standard/buglist.css", "skins/standard/yui/calendar.css" ]
   doc_section = "query.html#list"
 %]