Optimize the way tag list is rendered

Instead of retrieve all informations about entries of a tag to just count them, we’ll count them before with a fastest query.

Also change the layout of the tag list in material design

app/Resources/static/themes/material/css/main.css

@@ -414,9 +414,9 @@ main ul.row {
   max-width: 50%;
 }
 
-.card .card-entry-labels li {
+.card .card-entry-labels li, .card-tag-labels li {
   margin: 10px 10px 10px auto;
-  padding: 5px 12px 5px 16px;
+  padding: 5px 12px 5px 16px !important;
   background-color: rgba(0, 151, 167, 0.85);
   border-radius: 0 3px 3px 0;
   color: #fff;
@@ -447,6 +447,7 @@ main ul.row {
 
 .card-entry-tags a,
 .card-entry-labels a,
+.card-tag-labels a,
 .card-entry-labels-hidden a,
 #list .chip a {
   text-decoration: none;

src/Wallabag/ApiBundle/Controller/WallabagRestController.php

@@ -387,7 +387,7 @@ class WallabagRestController extends FOSRestController
 
         $tags = $this->getDoctrine()
             ->getRepository('WallabagCoreBundle:Tag')
-            ->findAllTagsWithEntries($this->getUser()->getId());
+            ->findAllTags($this->getUser()->getId());
 
         $json = $this->get('serializer')->serialize($tags, 'json');
 

src/Wallabag/CoreBundle/Controller/TagController.php

@@ -86,10 +86,25 @@ class TagController extends Controller
     {
         $tags = $this->getDoctrine()
             ->getRepository('WallabagCoreBundle:Tag')
-            ->findAllTagsWithEntries($this->getUser()->getId());
+            ->findAllTags($this->getUser()->getId());
+
+        $flatTags = [];
+
+        foreach ($tags as $key => $tag) {
+            $nbEntries = $this->getDoctrine()
+                ->getRepository('WallabagCoreBundle:Entry')
+                ->countAllEntriesByUserIdAndTagId($this->getUser()->getId(), $tag['id']);
+
+            $flatTags[] = [
+                'id' => $tag['id'],
+                'label' => $tag['label'],
+                'slug' => $tag['slug'],
+                'nbEntries' => $nbEntries,
+            ];
+        }
 
         return $this->render('WallabagCoreBundle:Tag:tags.html.twig', [
-            'tags' => $tags,
+            'tags' => $flatTags,
         ]);
     }
 

src/Wallabag/CoreBundle/Repository/EntryRepository.php

@@ -309,4 +309,24 @@ class EntryRepository extends EntityRepository
 
         return $qb->getQuery()->getSingleScalarResult();
     }
+
+    /**
+     * Count all entries for a tag and a user.
+     *
+     * @param int $userId
+     * @param int $tagId
+     *
+     * @return int
+     */
+    public function countAllEntriesByUserIdAndTagId($userId, $tagId)
+    {
+        $qb = $this->createQueryBuilder('e')
+            ->select('count(e.id)')
+            ->leftJoin('e.tags', 't')
+            ->where('e.user=:userId')->setParameter('userId', $userId)
+            ->andWhere('t.id=:tagId')->setParameter('tagId', $tagId)
+        ;
+
+        return $qb->getQuery()->getSingleScalarResult();
+    }
 }

src/Wallabag/CoreBundle/Repository/TagRepository.php

@@ -33,19 +33,23 @@ class TagRepository extends EntityRepository
     }
 
     /**
-     * Find all tags with associated entries per user.
+     * Find all tags per user.
      *
      * @param int $userId
      *
      * @return array
      */
-    public function findAllTagsWithEntries($userId)
+    public function findAllTags($userId)
     {
         return $this->createQueryBuilder('t')
+            ->select('t.slug', 't.label', 't.id')
             ->leftJoin('t.entries', 'e')
             ->where('e.user = :userId')->setParameter('userId', $userId)
+            ->groupBy('t.slug')
+            ->addGroupBy('t.label')
+            ->addGroupBy('t.id')
             ->getQuery()
-            ->getResult();
+            ->getArrayResult();
     }
 
     /**

src/Wallabag/CoreBundle/Resources/views/themes/baggy/Tag/tags.html.twig

@@ -9,7 +9,7 @@
 
     <ul>
     {% for tag in tags %}
-        <li id="tag-{{ tag.id|e }}"><a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{tag.label}} ({{ tag.entries.getValues | length }})</a></li>
+        <li id="tag-{{ tag.id|e }}"><a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{tag.label}} ({{ tag.nbEntries | length }})</a></li>
     {% endfor %}
     </ul>
 

src/Wallabag/CoreBundle/Resources/views/themes/material/Tag/tags.html.twig

@@ -6,12 +6,19 @@
     <div class="results clearfix">
         <div class="nb-results left">{{ 'tag.list.number_on_the_page'|transchoice(tags|length) }}</div>
     </div>
+
     <br />
-    <ul class="row data">
+
-    {% for tag in tags %}
+    <div class="row">
-        <li id="tag-{{ tag.id|e }}" class="col l4 m6 s12"><a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{tag.label}} ({{ tag.entries.getValues | length }})</a></li>
+        <ul class="card-tag-labels">
-    {% endfor %}
+            {% for tag in tags %}
-    </ul>
+                <li title="{{tag.label}} ({{ tag.nbEntries }})" id="tag-{{ tag.id }}" class="col l2 m2 s2">
+                    <a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{tag.label}} ({{ tag.nbEntries }})</a>
+                </li>
+            {% endfor %}
+        </ul>
+    </div>
+
     <div>
         <a href="{{ path('untagged') }}">{{ 'tag.list.see_untagged_entries'|trans }}</a>
     </div>