Improve the Search widget and suggest public contacts

app/models/contact/ContactDAO.php

@@ -361,13 +361,20 @@ class ContactDAO extends SQL
             left outer join privacy
                 on contact.jid = privacy.pkey
             where jid like :jid
+            and jid not in (
+                select jid
+                from rosterlink
+                where session = :session
+            )
             and privacy.value = 1
-            order by jid';
+            order by jid
+            limit 5';
 
         $this->prepare(
             'Contact',
             [
-                'jid' => '%'.$search.'%'
+                'jid' => '%'.$search.'%',
+                'rosterlink.session' => $this->_user
             ]
         );
         return $this->run('Contact');

app/widgets/ContactDisco/_contactdisco.tpl

@@ -2,7 +2,7 @@
     <li class="subheader">
         <p>{$c->__('explore.explore')}</p>
     </li>
-{loop="$users"}
+    {loop="$users"}
         <li class="block" title="{$value->jid}" onclick="MovimUtils.redirect('{$c->route('contact', $value->jid)}')">
             {$url = $value->getPhoto('s')}
             {if="$url"}
@@ -31,7 +31,7 @@
                 {/if}
             </p>
         </li>
-{/loop}
+    {/loop}
 </ul>
 
 <ul class="list active middle card shadow">

app/widgets/Search/Search.php

@@ -48,12 +48,20 @@ class Search extends \Movim\Widget\Base
             if(!$posts) $view->assign('empty', true);
         }
 
+        if(!empty($key)) {
+            $cd = new \Modl\ContactDAO;
+            $view->assign('contacts', $cd->searchJid($key));
+        } else {
+            $view->assign('contacts', null);
+        }
+
         return $view->draw('_search_results', true);
     }
 
     function ajaxSearch($key)
     {
         $this->rpc('MovimTpl.fill', '#results', $this->prepareSearch($key));
+        $this->rpc('Search.searchClear');
     }
 
     function ajaxChat($jid)
@@ -61,8 +69,4 @@ class Search extends \Movim\Widget\Base
         $contact = new ContactActions;
         $contact->ajaxChat($jid);
     }
-
-    function display()
-    {
-    }
 }

app/widgets/Search/_search.tpl

@@ -48,7 +48,7 @@
         {/loop}
     </ul>
 </section>
-<div>
+<div id="searchbar">
     <ul class="list">
         <li>
             <span class="primary icon gray">
@@ -56,7 +56,10 @@
             </span>
             <form name="search" onsubmit="return false;">
                 <div>
-                    <input name="keyword" placeholder="{$c->__('search.keyword')}" onkeyup="Search_ajaxSearch(this.value); Search.roster(this.value)" type="text">
+                    <input name="keyword"
+                        placeholder="{$c->__('search.keyword')}"
+                        onkeyup="Search.searchSomething(this.value)"
+                        type="text">
                 </div>
             </form>
         </li>

app/widgets/Search/_search_results.tpl

@@ -1,4 +1,4 @@
-{if="$empty == true"}
+{if="$empty == true && $contacts == null"}
     <div class="placeholder icon search">
         <h4>{$c->__('search.subtitle')}</h4>
     </div>
@@ -31,4 +31,36 @@
             </li>
         {/loop}
     </ul>
+    {if="$contacts != null"}
+    <ul class="list">
+        <li class="subheader">
+            <p>{$c->__('explore.explore')}</p>
+        </li>
+        {loop="$contacts"}
+            <li
+                id="{$value->jid|cleanupId}"
+                title="{$value->jid}"
+            >
+                {$url = $value->getPhoto('m')}
+                {if="$url"}
+                    <span class="primary icon bubble"
+                        style="background-image: url({$url});">
+                    </span>
+                {else}
+                    <span class="primary icon bubble color {$value->jid|stringToColor}
+                    ">
+                        <i class="zmdi zmdi-account"></i>
+                    </span>
+                {/if}
+                <span class="control icon active gray" onclick="MovimUtils.reload('{$c->route('contact', $value->jid)}')">
+                    <i class="zmdi zmdi-account"></i>
+                </span>
+                <span class="control icon active gray" onclick="Search_ajaxChat('{$value->jid}')">
+                    <i class="zmdi zmdi-comment-text-alt"></i>
+                </span>
+                <p class="normal line">{$value->getTrueName()}</p>
+            </li>
+        {/loop}
+        </ul>
+    {/if}
 {/if}

app/widgets/Search/search.js

@@ -1,4 +1,6 @@
 var Search = {
+    timer : null,
+
     init : function() {
         document.querySelector('input[name=keyword]').focus();
     },
@@ -22,6 +24,24 @@ var Search = {
         } else if(subheader) {
             subheader.classList.remove('found');
         }
+    },
+
+    searchSomething : function(value) {
+        clearTimeout(Search.timer);
+
+        if(value !== '') {
+            document.querySelector('#searchbar span.primary i').className = 'zmdi zmdi-rotate-right zmdi-hc-spin';
+        }
+
+        Search.timer = setTimeout(() => {
+            Search_ajaxSearch(value);
+            Search.roster(value);
+        },
+        700);
+    },
+
+    searchClear : function() {
+        document.querySelector('#searchbar span.primary i').className = 'zmdi zmdi-search';
     }
 }
 
@@ -30,3 +50,4 @@ document.addEventListener('keydown', function(e) {
         Search_ajaxRequest();
     }
 });
+