owner filter works with autocomplete awesomeness

lib/WebGUI/Admin.pm

@@ -261,6 +261,44 @@ sub getTreePaginator {
 }
 
 
+#----------------------------------------------------------------------
+
+=head2 www_findUser ( )
+
+Find a user based on a partial name, username, alias, or e-mail address
+
+=cut
+
+sub www_findUser {
+    my ( $self ) = @_;
+    my $session = $self->session;
+    my ( $form, $db, $url ) = $session->quick(qw( form db url ));
+
+    my $query   = '%' . $form->get('query') . '%';
+
+    my @places; # Places to look
+    for my $col ( 'username', 'alias', 'firstName', 'lastName', 'CONCAT(firstName," ",lastName)' ) {
+        push @places, $col . " LIKE ?";
+    }
+
+    my $sql     = 'SELECT userId, CONCAT(firstName,lastName) AS name, username, alias, avatar
+                FROM users JOIN userProfileData USING (userId) WHERE ' . join( ' || ', @places );
+    my $params  = [ ( $query ) x scalar @places ];
+    $session->log->warn( 'SQL: ' . $sql );
+    $session->log->warn( 'PARAM: ' . join ", ", @$params );
+
+    my $sth = $db->read( $sql, $params );
+    my @results;
+    while ( my $result = $sth->hashRef ) {
+        $result->{avatar} ||= $url->extras('icon/user.png');
+        push @results, $result;
+    }
+
+    my $output = JSON->new->encode( { results => \@results } );
+    $session->log->warn( $output );
+    return $output;
+}
+
 #----------------------------------------------------------------------
 
 =head2 www_getClipboard ( ) 
@@ -485,6 +523,7 @@ sub www_view {
     $style->setLink( $url->extras('yui/build/paginator/assets/skins/sam/paginator.css'), {rel=>'stylesheet', type=>'text/css'});
     $style->setLink( $url->extras('yui/build/datatable/assets/skins/sam/datatable.css'), {rel=>'stylesheet', type=>'text/css'});
     $style->setLink( $url->extras('yui/build/container/assets/skins/sam/container.css'), {rel=>'stylesheet', type=>'text/css'});
+    $style->setLink( $url->extras('yui/build/autocomplete/assets/skins/sam/autocomplete.css'), {rel=>'stylesheet', type=>'text/css'});
     $style->setLink( $url->extras('yui/build/menu/assets/skins/sam/menu.css'), {rel=>'stylesheet', type=>'text/css'});
     #$style->setLink( $url->extras('yui-webgui/build/assetManager/assetManager.css' ), { rel => "stylesheet", type => 'text/css' } );
     $style->setLink( $url->extras('admin/admin.css'), { type=>'text/css', rel=>'stylesheet'} );
@@ -501,6 +540,7 @@ sub www_view {
     $style->setScript($url->extras('yui/build/tabview/tabview-min.js'));
     $style->setScript($url->extras('yui/build/menu/menu-min.js'));
     $style->setScript($url->extras('yui/build/button/button-min.js'));
+    $style->setScript($url->extras('yui/build/autocomplete/autocomplete-min.js'));
     $style->setScript( $url->extras( 'yui/build/json/json-min.js' ) );
     $style->setScript( $url->extras( 'yui-webgui/build/i18n/i18n.js' ) );
     $style->setScript($url->extras('admin/admin.js'));

www/extras/admin/admin.css

@@ -10,6 +10,13 @@ input.disabled {
     color: #555;
 }
 
+.with_avatar {
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    padding-left: 50px;
+    min-height: 50px;
+}
+
 #wrapper {
     position: relative;
     margin-left: 165px; /* move out of the adminbar's way */
@@ -168,7 +175,9 @@ input.disabled {
     display: block;
 }
 
-#searchFilters span {
+#searchFilters li { height: 28px; } /* autocomplete is position: absolute, so pretend some height */
+
+#searchFilters span.name {
     display: block;
     float: left;
     width: 9%;
@@ -181,12 +190,25 @@ input.disabled {
     clear: both;
 }
 
-.filter_title input {
+.filter_title input, .filter_ownerUserId div.autocomplete {
     display: block;
     float: left;
     width: 89%;
 }
 
+#searchFilters .yui-ac-bd li {
+    height: 50px;
+}
+
+.autocomplete_value {
+    font-size:  larger;
+    font-weight: bold;
+}
+
+.autocomplete_subtext {
+    font-size: smaller;
+}
+
 #wrapper .yui-content {
     margin: 0; padding: 0;
 }

www/extras/admin/admin.js

@@ -1158,6 +1158,7 @@ WebGUI.Admin.LocationBar.prototype.addFilter
 
     var name        = menuitem.cfg.getProperty('text');
     var nameElem    = document.createElement('span');
+    nameElem.className = "name";
     nameElem.appendChild( document.createTextNode( name ) );
     li.appendChild( nameElem );
 
@@ -1169,6 +1170,48 @@ WebGUI.Admin.LocationBar.prototype.addFilter
         YAHOO.util.Event.on( inputElem, 'keyup', this.updateLocationBarQuery, this, true );
         inputElem.focus();
     }
+    else if ( filter.type == "ownerUserId" ) {
+        var container       = document.createElement( 'div' );
+        container.className = "autocomplete";
+        li.appendChild( container );
+
+        var inputElem       = document.createElement('input');
+        filter.inputElem    = inputElem;
+        inputElem.type      = "text";
+        container.appendChild( inputElem );
+        filter.dataSource   = new YAHOO.util.XHRDataSource( '?op=admin;method=findUser;' );
+        filter.dataSource.responseType = YAHOO.util.XHRDataSource.TYPE_JSON;
+        filter.dataSource.responseSchema = {
+            resultsList : "results",
+            fields : [ 'username', 'name', 'userId', 'avatar', 'email' ]
+        };
+
+        // Auto-complete container
+        var acDiv    = document.createElement('div');
+        filter.acDiv = acDiv;
+        container.appendChild( acDiv );
+
+        filter.autocomplete = new YAHOO.widget.AutoComplete( inputElem, acDiv, filter.dataSource );
+        filter.autocomplete.queryQuestionMark = false;
+        filter.autocomplete.animVert = true;
+        filter.autocomplete.animSpeed = 0.1;
+        filter.autocomplete.minQueryLength = 1;
+        filter.autocomplete.queryDelay = 0.2;
+        filter.autocomplete.typeAhead = true;
+        filter.autocomplete.resultTypeList = false;
+        filter.autocomplete.applyLocalFilter = true;
+        filter.autocomplete.formatResult = function ( result, query, match ) {
+            var subtext = ( result.name ? result.name : "" )
+                        + ( result.email ? " <" + result.email + ">" : "" )
+                        ;
+            return '<div style="float: left; width: 50px; height: 50px; background: url(' + result.avatar + ') no-repeat 50% 50%;"></div>'
+                    + '<div class="autocomplete_value">' + result.username + "</div>"
+                    + '<div class="autocomplete_subtext">' + subtext + '</div>';
+
+        };
+
+        inputElem.focus();
+    }
 };
 
 /**