Display big category tree on route /category/ without parameter

Co-authored-by: Krzysiej <krzysiej@gmail.com>
Co-committed-by: Krzysiej <krzysiej@gmail.com>

src/Controller/CategoryController.php

@@ -8,22 +8,43 @@ use Symfony\Component\Routing\Attribute\Route;
 
 final class CategoryController extends BaseController
 {
-    #[Route('/category/{category}', name: 'app_category')]
+    #[Route('/category/{category?}',  name: 'app_category')]
-    public function __invoke(string $category): Response
+    public function __invoke(?string $category): Response
     {
         if($this->cache->getItem('list_category_'.$category)->isHit()) {
             return $this->render('productList.html.twig', ['listType' => 'category_'.$category]);
         }
 
+        /** @var Product[] $products */
         $products = Product::with(['price', 'lowestPrice'])
             ->selectRaw('products.*')
             ->distinct('products.id')
+            ->when(!is_null($category) , fn ($q) => $q->whereRaw('json_each.value = ?', [$category]))
             ->fromRaw('products, json_each(products.categories)')
-            ->whereRaw('json_each.value = ?', [$category])
             ->orderByDesc('starred')
             ->orderByDesc('created_by')
             ->get();
 
-        return $this->render('productList.html.twig', ['products' => $products, 'listType' => 'category_'.$category]);
+        $categoriesTree = [];
+
+        foreach ($products as $product) {
+            $categoriesTree = $this->addToTree($product->categories, $categoriesTree);
+        }
+
+        return $this->render('productList.html.twig', ['products' => $products, 'listType' => 'category_' . $category, 'category' => $category, 'categoryTree' => $categoriesTree]);
+    }
+
+    private function addToTree(array $categories, mixed $categoriesTree)
+    {
+        $tmp = &$categoriesTree;
+        foreach ($categories as $category) {
+            if (empty($tmp[$category])) {
+                $tmp[$category] = ['count' => 0];
+            }
+            $tmp = &$tmp[$category];
+            $tmp['count']++;
+        }
+
+        return $categoriesTree;
     }
 }

src/Twig/AppExtension.php

@@ -2,11 +2,11 @@
 
 namespace Krzysiej\RyobiCrawler\Twig;
 
-use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Collection;
 use Krzysiej\RyobiCrawler\Models\Price;
 use Krzysiej\RyobiCrawler\Models\Product;
 use Krzysiej\RyobiCrawler\Models\Stock;
+use Symfony\Component\Routing\RouterInterface;
 use Twig\Extension\AbstractExtension;
 use Twig\TwigFilter;
 use Twig\TwigFunction;
@@ -15,6 +15,10 @@ use function Symfony\Component\Clock\now;
 
 class AppExtension extends AbstractExtension
 {
+    public function __construct(public RouterInterface $route)
+    {
+    }
+
     public function getFunctions(): array
     {
         return [
@@ -23,6 +27,7 @@ class AppExtension extends AbstractExtension
             new TwigFunction('newCount', [$this, 'newCount']),
             new TwigFunction('discontinuedCount', [$this, 'discontinuedCount']),
             new TwigFunction('lowestPriceCount', [$this, 'lowestPriceCount']),
+            new TwigFunction('renderCategoryTree', [$this, 'renderCategoryTree']),
         ];
     }
 
@@ -56,7 +61,7 @@ class AppExtension extends AbstractExtension
     public function lowestPriceCount(): int
     {
         return Product::whereRaw('priceCurrent = priceLowest')
-            ->whereRaw('lastSeen = "'.now()->format('Y-m-d').'"')
+            ->whereRaw('lastSeen = "' . now()->format('Y-m-d') . '"')
             ->whereRaw('priceCurrent < productStandardPrice')
             ->count();
     }
@@ -65,4 +70,28 @@ class AppExtension extends AbstractExtension
     {
         return $items->first(fn($item) => str_starts_with($item->created_at, $date));
     }
+
+    public function renderCategoryTree($categories, $current, $level = 0): string
+    {
+        $tree = '';
+        if ($level == 0) {
+            $tree .= '<ul class="list-group list-group-flush">';
+        }
+        foreach ($categories as $categoryName => $category) {
+            $currentClass = $categoryName == $current ? 'list-group-item-primary' : '';
+            $tree .= '<a class="list-group-item list-group-item-action '.$currentClass.' text-decoration-none ms-' . ($level * 2) . '" href="' . $this->route->generate('app_category', ['category' => $categoryName]) . '">' . $categoryName . ' <span class="badge bg-primary rounded-pill">' . $category['count'] . '</span></a>';
+
+            unset($category['count']);
+            if (is_array($category) && count($category) >= 1) {
+                foreach ($category as $subcategoryName => $subCategory) {
+                    $tree .= $this->renderCategoryTree([$subcategoryName => $subCategory], $current, $level + 1);
+                }
+            }
+        }
+        if ($level == 0) {
+            $tree .= '</ul>';
+        }
+        return $tree;
+
+    }
 }

templates/productList.html.twig

@@ -1,8 +1,15 @@
 {% extends "template.html.twig" %}
 
 {% block content %}
-{% cache 'list_' ~ listType %}
+    {% cache 'list_' ~ listType %}
-<div class="table-responsive">
+
+        {% if listType starts with 'category_' %}
+            {{ renderCategoryTree(categoryTree, category) | raw }}
+        {% endif %}
+
+
+        {% if (listType starts with 'category_' and category == null)  or not (listType starts with 'category_') or (listType starts with 'category_' and category is not null)   %}
+            <div class="table-responsive">
                 <table class='table table-hover'>
                     <thead>
                     <tr>
@@ -19,28 +26,38 @@
                     {% for product in products %}
                         <tr>
                             <td class="align-middle font-weight-bold h3"><a class="text-warning text-decoration-none"
-                                                                href="{{ path('app_star', {'productId': product.id}) }}">{% if product.starred == true %}★{% else %} ☆ {% endif %}</a></td>
+                                                                            href="{{ path('app_star', {'productId': product.id}) }}">{% if product.starred == true %}★{% else %} ☆ {% endif %}</a>
-                <td class="align-middle" style="width: 120px;"><img src='{{ product.image }}&width=70' class='img-thumbnail' alt='{{ product.name }}'/></td>
+                            </td>
+                            <td class="align-middle" style="width: 120px;"><img src='{{ product.image }}&width=70'
+                                                                                class='img-thumbnail'
+                                                                                alt='{{ product.name }}'/></td>
                             <td class="align-middle">
-                    <a href='{{ path('app_product', {'productId': product.id}) }}' class="text-decoration-none">{{ product.name }}</a>
+                                <a href='{{ path('app_product', {'productId': product.id}) }}'
+                                   class="text-decoration-none">{{ product.name }}</a>
                                 {% if product.stock > 0 %}
                                     <span class="badge text-bg-light">stock: {{ product.stock }}</span>
                                 {% else %}
                                     <span class="badge text-bg-warning">out of stock</span>
                                 {% endif %}
                                 {% if product.isDiscontinued() %}
-                        <span class="badge text-bg-secondary"  data-bs-toggle="tooltip" data-bs-title="Last update: {{ product.lastSeen }}">is discontinued</span>
+                                    <span class="badge text-bg-secondary" data-bs-toggle="tooltip"
+                                          data-bs-title="Last update: {{ product.lastSeen }}">is discontinued</span>
                                 {% endif %}
                                 {% if product.isNew() %}
                                     <span class="badge text-bg-success">is new</span>
                                 {% endif %}
-                    <span class="badge text-bg-light"><a href="{{ path('app_search', {'search': product.subTitle}) }}" class="link-underline link-underline-opacity-0 link-dark">{{ product.subTitle }}</a></span>
+                                <span class="badge text-bg-light"><a
+                                            href="{{ path('app_search', {'search': product.subTitle}) }}"
+                                            class="link-underline link-underline-opacity-0 link-dark">{{ product.subTitle }}</a></span>
                             </td>
                             <td class="align-middle">
-                    <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>';" >
+                                <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>';">
                                     <ol class="breadcrumb mb-0">
                                         {% for category in product.categories %}
-                                <li class="breadcrumb-item" aria-current="page"><a class="breadcrumb-item text-decoration-none"  href="{{ path('app_category', {'category': category}) }}">{{ category }}</a></li>
+                                            <li class="breadcrumb-item" aria-current="page"><a
+                                                        class="breadcrumb-item text-decoration-none"
+                                                        href="{{ path('app_category', {'category': category}) }}">{{ category }}</a>
+                                            </li>
                                         {% endfor %}
                                     </ol>
                                 </nav>
@@ -50,14 +67,16 @@
                                 {% if product.isDiscontinued() or product.priceCurrent == product.productStandardPrice %}
                                 {{ product.priceLowest | format_currency(product.country.currency, {}, product.country.locale) }}
                                 {% else %}
-                        {% if product.priceLowest != product.priceCurrent %}{{ product.priceLowest | format_currency(product.country.currency, {}, product.country.locale) }}{%else%}<span class="badge text-bg-info">now lowest</span>{% endif %}</td>
+                                {% if product.priceLowest != product.priceCurrent %}{{ product.priceLowest | format_currency(product.country.currency, {}, product.country.locale) }}{% else %}
+                                    <span class="badge text-bg-info">now lowest</span>{% endif %}</td>
                             {% endif %}
 
                             <td class="align-middle text-end">{{ product.priceCurrent | format_currency(product.country.currency, {}, product.country.locale) }}</td>
                             <td class="align-middle">
                                 <div class="d-flex flex-row">
                                     {% if product.priceCurrent != product.productStandardPrice %}<span
-                                class="badge text-bg-warning text-decoration-line-through flex-fill">{{ product.productStandardPrice | format_currency(product.country.currency, {}, product.country.locale) }}</span> <span
+                                            class="badge text-bg-warning text-decoration-line-through flex-fill">{{ product.productStandardPrice | format_currency(product.country.currency, {}, product.country.locale) }}</span>
+                                        <span
                                                 class="badge text-bg-success flex-fill">{{ ((1 - product.priceCurrent / product.productStandardPrice)*100)|number_format(0) }}%</span>
                                     {% endif %}
                                 </div>
@@ -65,6 +84,7 @@
                         </tr>
                     {% endfor %}
                 </table>
-</div>
+            </div>
-{% endcache %}
+        {% endif %}
+    {% endcache %}
 {% endblock %}

templates/template.html.twig

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-bs-theme="light">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">