Add pagination for Pictures and Links in the ContactDrawer

CHANGELOG.md

@@ -48,6 +48,7 @@ v0.20 (trunk)
 * Remove the old API code
 * Add support of XEP-0393: Message Styling
 * Add a BundleCapabilityResolver to link OMEMO bundles with the capability/info table
+* Add pagination for Pictures and Links in the ContactDrawer
 
 v0.19
 ---------------------------

app/widgets/ContactActions/ContactActions.php

@@ -13,6 +13,9 @@ include_once WIDGETS_PATH . 'Post/Post.php';
 
 class ContactActions extends Base
 {
+    private $_picturesPagination = 20;
+    private $_linksPagination = 12;
+
     public function load()
     {
         $this->addjs('contactactions.js');
@@ -53,18 +56,21 @@ class ContactActions extends Base
 
         $tpl = $this->tpl();
         $tpl->assign('contact', \App\Contact::firstOrNew(['id' => $jid]));
+
+        $picturesCount = 0;
+        $linksCount = 0;
+
         if ($jid != $this->user->id) {
-            $tpl->assign('pictures', \App\Message::jid($jid)
-                                                ->where('picture', true)
-                                                ->orderBy('published', 'desc')
-                                                ->take(24)
-                                                ->get());
-            $tpl->assign('links', \App\Message::jid($jid)
-                                                ->where('picture', false)
-                                                ->whereNotNull('urlid')
-                                                ->orderBy('published', 'desc')
-                                                ->take(24)
-                                                ->get());
+            $picturesCount = \App\Message::jid($jid)
+                ->where('picture', true)
+                ->orderBy('published', 'desc')
+                ->count();
+            $linksCount = \App\Message::jid($jid)
+                ->where('picture', false)
+                ->whereNotNull('urlid')
+                ->count();
+            $tpl->assign('picturesCount', $picturesCount);
+            $tpl->assign('linksCount', $linksCount);
             $tpl->assign('roster', $this->user->session->contacts()->where('jid', $jid)->first());
         } else {
             $tpl->assign('pictures', collect());
@@ -88,6 +94,14 @@ class ContactActions extends Base
         Drawer::fill($tpl->draw('_contactactions_drawer'));
         $this->rpc('Tabs.create');
 
+        if ($picturesCount > 0) {
+            $this->rpc('ContactActions_ajaxHttpGetPictures', $jid);
+        }
+
+        if ($linksCount > 0) {
+            $this->rpc('ContactActions_ajaxHttpGetLinks', $jid);
+        }
+
         if ($hasFingerprints) {
             $this->rpc('ContactActions.getDrawerFingerprints', $jid);
         }
@@ -150,6 +164,55 @@ class ContactActions extends Base
         $this->rpc('MovimUtils.redirect', $this->route('chat', $jid));
     }
 
+    public function ajaxHttpGetPictures($jid, $page = 0)
+    {
+        $tpl = $this->tpl();
+
+        $more = false;
+        $pictures = \App\Message::jid($jid)
+            ->where('picture', true)
+            ->orderBy('published', 'desc')
+            ->take($this->_picturesPagination + 1)
+            ->skip($this->_picturesPagination * $page)
+            ->get();
+
+        if ($pictures->count() == $this->_picturesPagination + 1) {
+            $pictures->pop();
+            $more = true;
+        }
+        $tpl->assign('pictures', $pictures);
+        $tpl->assign('more', $more);
+        $tpl->assign('page', $page);
+        $tpl->assign('jid', $jid);
+
+        $this->rpc('MovimTpl.append', '#contact_pictures', $tpl->draw('_contactactions_drawer_pictures'));
+    }
+
+    public function ajaxHttpGetLinks($jid, $page = 0)
+    {
+        $tpl = $this->tpl();
+
+        $more = false;
+        $links = \App\Message::jid($jid)
+            ->where('picture', false)
+            ->whereNotNull('urlid')
+            ->orderBy('published', 'desc')
+            ->take($this->_linksPagination + 1)
+            ->skip($this->_linksPagination * $page)
+            ->get();
+
+        if ($links->count() == $this->_linksPagination + 1) {
+            $links->pop();
+            $more = true;
+        }
+        $tpl->assign('links', $links);
+        $tpl->assign('more', $more);
+        $tpl->assign('page', $page);
+        $tpl->assign('jid', $jid);
+
+        $this->rpc('MovimTpl.append', '#contact_links', $tpl->draw('_contactactions_drawer_links'));
+    }
+
     public function prepareEmbedUrl(EmbedLight $embed)
     {
         return (new \Chat)->prepareEmbed($embed, true);

app/widgets/ContactActions/_contactactions_drawer.tpl

@@ -138,32 +138,12 @@
 
     <ul class="tabs" id="navtabs"></ul>
 
-    {if="$pictures->count() > 0"}
-        <div class="tabelem" title="{$c->__('general.pictures')}" id="contact_medias">
-            <ul class="grid active">
-                {loop="$pictures"}
-                    <li style="background-image: url('{$value->file['uri']|protectPicture}')"
-                        onclick="Preview_ajaxHttpShow('{$value->file['uri']}')">
-                        <i class="material-icons">visibility</i>
-                    </li>
-                {/loop}
-            </ul>
-        </div>
+    {if="$picturesCount > 0"}
+        <div class="tabelem spin" title="{$c->__('general.pictures')}" id="contact_pictures"></div>
     {/if}
 
-    {if="$links->count() > 0"}
-        <div class="tabelem" title="{$c->__('general.links')}" id="room_links">
-            <ul class="list thick">
-                {loop="$links"}
-                    {autoescape="off"}
-                        {$resolved = $value->resolvedUrl->cache}
-                        {if="$resolved"}
-                            {$c->prepareEmbedUrl($resolved)}
-                        {/if}
-                    {/autoescape}
-                {/loop}
-            </ul>
-        </div>
+    {if="$linksCount > 0"}
+        <div class="tabelem spin" title="{$c->__('general.links')}" id="contact_links"></div>
     {/if}
 
     {if="$roster && $roster->presences->count() > 0"}

app/widgets/ContactActions/_contactactions_drawer_links.tpl

@@ -0,0 +1,26 @@
+<ul class="list thick">
+    {loop="$links"}
+        {autoescape="off"}
+            {$resolved = $value->resolvedUrl->cache}
+            {if="$resolved"}
+                {$c->prepareEmbedUrl($resolved)}
+            {/if}
+        {/autoescape}
+    {/loop}
+</ul>
+
+{if="$more"}
+    <ul class="list middle" onclick="ContactActions.moreLinks(this, '{$jid}', {$page + 1})">
+        <hr />
+        <li class="active">
+            <span class="primary icon gray">
+                <i class="material-icons">expand_more</i>
+            </span>
+            <div>
+                <p class="line normal center">
+                    {$c->__('button.more')}
+                </p>
+            </div>
+        </li>
+    </ul>
+{/if}

app/widgets/ContactActions/_contactactions_drawer_pictures.tpl

@@ -0,0 +1,24 @@
+<ul class="grid active">
+    {loop="$pictures"}
+        <li style="background-image: url('{$value->file['uri']|protectPicture}')"
+            onclick="Preview_ajaxHttpShow('{$value->file['uri']}')">
+            <i class="material-icons">visibility</i>
+        </li>
+    {/loop}
+</ul>
+
+{if="$more"}
+    <ul class="list middle" onclick="ContactActions.morePictures(this, '{$jid}', {$page + 1})">
+        <hr />
+        <li class="active">
+            <span class="primary icon gray">
+                <i class="material-icons">expand_more</i>
+            </span>
+            <div>
+                <p class="line normal center">
+                    {$c->__('button.more')}
+                </p>
+            </div>
+        </li>
+    </ul>
+{/if}

app/widgets/ContactActions/contactactions.js

@@ -5,6 +5,14 @@ var ContactActions = {
             ContactActions_ajaxGetDrawerFingerprints(jid, deviceId);
         });
     },
+    morePictures(button, jid, page) {
+        button.remove();
+        ContactActions_ajaxHttpGetPictures(jid, page);
+    },
+    moreLinks(button, jid, page) {
+        button.remove();
+        ContactActions_ajaxHttpGetLinks(jid, page);
+    },
     resolveSessionsStates : function(jid) {
         var store = new ChatOmemoStorage();
 

app/widgets/Publish/publish.css

@@ -48,4 +48,8 @@
 
 #publish span.privacy form > div .checkbox > input[type="checkbox"]:checked + label i:before {
     content: 'wifi_tethering';
+}
+
+#publishreply {
+    margin-bottom: -1rem;
 }

app/widgets/Publish/publish.tpl

@@ -74,7 +74,7 @@
                         <i class="material-icons">close</i>
                     </span>
                     <div>
-                        <ul class="list">
+                        <ul class="list card shadow middle" id="publishreply">
                             {autoescape="off"}
                                 {$replyblock}
                             {/autoescape}