Add support for searching a QOTD

assets/controllers.json

@@ -1,5 +1,14 @@
 {
     "controllers": {
+        "@symfony/ux-live-component": {
+            "live": {
+                "enabled": true,
+                "fetch": "eager",
+                "autoimport": {
+                    "@symfony/ux-live-component/styles/live.css": true
+                }
+            }
+        },
         "@symfony/ux-turbo": {
             "turbo-core": {
                 "enabled": true,

composer.json

@@ -36,7 +36,9 @@
         "symfony/security-bundle": "6.2.*",
         "symfony/string": "6.2.*",
         "symfony/twig-bundle": "6.2.*",
+        "symfony/ux-live-component": "^2.7",
         "symfony/ux-turbo": "^2.7",
+        "symfony/ux-twig-component": "^2.7",
         "symfony/web-link": "6.2.*",
         "symfony/webpack-encore-bundle": "^1.16",
         "symfony/yaml": "6.2.*",

config/bundles.php

@@ -16,4 +16,6 @@
     Knp\Bundle\PaginatorBundle\KnpPaginatorBundle::class => ['all' => true],
     Doctrine\Bundle\FixturesBundle\DoctrineFixturesBundle::class => ['dev' => true, 'test' => true],
     Symfony\UX\Turbo\TurboBundle::class => ['all' => true],
+    Symfony\UX\TwigComponent\TwigComponentBundle::class => ['all' => true],
+    Symfony\UX\LiveComponent\LiveComponentBundle::class => ['all' => true],
 ];

config/routes/ux_live_component.yaml

@@ -0,0 +1,5 @@
+live_component:
+    resource: '@LiveComponentBundle/config/routes.php'
+    prefix: '/_components'
+    # adjust prefix to add localization to your components
+    #prefix: '/{_locale}/_components'

package.json

@@ -5,6 +5,7 @@
         "@hotwired/stimulus": "^3.0.0",
         "@hotwired/turbo": "^7.0.1",
         "@symfony/stimulus-bridge": "^3.2.0",
+        "@symfony/ux-live-component": "file:vendor/symfony/ux-live-component/assets",
         "@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/assets",
         "@symfony/webpack-encore": "^4.0.0",
         "core-js": "^3.23.0",

src/Controller/QotdController.php

@@ -70,4 +70,10 @@ public function vote(Request $request, Qotd $qotd, QotdVote $vote, #[CurrentUser
 
         return $this->redirect($request->headers->get('referer') ?? $this->generateUrl('qotd_index'));
     }
+
+    #[Route('/search', name: 'qotd_search', methods: ['GET'])]
+    public function search(): Response
+    {
+        return $this->render('qotd/search.html.twig');
+    }
 }

src/Repository/QotdRepository.php

@@ -96,4 +96,25 @@ public function findForHomepageNotVoted(int $page, UserInterface $user): Paginat
             20,
         );
     }
+
+    /**
+     * @return PaginationInterface<string, Qotd>
+     */
+    public function search(string $query): PaginationInterface
+    {
+        $query = $this
+            ->createQueryBuilder('q')
+            ->where('q.message LIKE :query')->setParameter('query', "%{$query}%")
+            ->addOrderBy('q.vote', 'DESC')
+            ->addOrderBy('q.date', 'DESC')
+            ->setMaxResults(20)
+            ->getQuery()
+        ;
+
+        return $this->paginator->paginate(
+            $query,
+            1,
+            20,
+        );
+    }
 }

src/Twig/Components/SearchComponent.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Repository\QotdRepository;
+use Knp\Component\Pager\Pagination\PaginationInterface;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent('search')]
+final class SearchComponent
+{
+    use DefaultActionTrait;
+
+    #[LiveProp(writable: true)]
+    public ?string $query = '';
+
+    public function __construct(
+        private QotdRepository $qotdRepository,
+    ) {
+    }
+
+    /**
+     * @return PaginationInterface<string, Qotd>
+     */
+    public function getPagination(): PaginationInterface
+    {
+        return $this->qotdRepository->search($this->query);
+    }
+}

symfony.lock

@@ -230,9 +230,24 @@
             "templates/base.html.twig"
         ]
     },
+    "symfony/ux-live-component": {
+        "version": "2.7",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.6",
+            "ref": "73e69baf18f47740d6f58688c5464b10cdacae06"
+        },
+        "files": [
+            "config/routes/ux_live_component.yaml"
+        ]
+    },
     "symfony/ux-turbo": {
         "version": "v2.7.1"
     },
+    "symfony/ux-twig-component": {
+        "version": "v2.7.1"
+    },
     "symfony/web-profiler-bundle": {
         "version": "6.2",
         "recipe": {

templates/base.html.twig

@@ -39,6 +39,9 @@
                                     <li class="nav-item ">
                                         <a class="nav-link {{ 'qotd_not_voted' == active ? 'active' }}" href="{{ url('qotd_index_not_voted') }}">Not voted yet</a>
                                     </li>
+                                    <li class="nav-item ">
+                                        <a class="nav-link {{ 'qotd_search' == active ? 'active' }}" href="{{ url('qotd_search') }}">🔍Search</a>
+                                    </li>
                                 </ul>
                                 {# <ul class="navbar-nav mb-2 mb-lg-0 d-flex">
                                     <li class="nav-item ">

templates/components/search.html.twig

@@ -0,0 +1,10 @@
+<div{{ attributes }}>
+    <form>
+        <div class="mb-3">
+            <label for="query" class="form-label d-none">Search</label>
+            <input type="search" name="query" data-model="query" class="form-control" id="query">
+        </div>
+    </form>
+
+    {{ include("qotd/_qotds.html.twig", { pagination: this.pagination, with_pagination: false }, with_context = false) }}
+</div>

templates/qotd/_qotds.html.twig

@@ -0,0 +1,48 @@
+{% for qotd in pagination %}
+    <turbo-frame id="qotd-{{ qotd.id }}" data-delete-if-missing="true">
+        <div class="card mb-2">
+            <div class="card-body">
+                {{ qotd.message|replace_emoji|replace_username|markdown_to_html }}
+            </div>
+            <div class="card-footer text-muted">
+                <div class="d-flex justify-content-between">
+                    <div class="me-auto">
+                        {% cache qotd.id %}
+                            {{ qotd.date|format_date() }} by {{ qotd.username }}
+                        {% endcache %}
+                    </div>
+                    <div class="mx-1">
+                        <a href="{{ qotd.permalink }}" class="btn btn-sm btn-outline-secondary">🔗 view in Slack</a>
+                    </div>
+                    <form action="{{ url(qotd.hasVotedDown(app.user) ? 'qotd_vote_null' : 'qotd_vote_down', { id: qotd.id }) }}" method="POST" class="mx-1">
+                        <input type="hidden" name="page" value="{{ pagination.page }}">
+                        <input type="hidden" name="token" value="{{ csrf_token('vote') }}">
+                        <button type="submit" class="{{ html_classes('btn', 'btn-sm', { 'btn-outline-primary': qotd.hasVotedDown(app.user) }) }}">👎</button>
+                    </form>
+                    <div class="mx-1">
+                        <span class="badge bg-primary">
+                            {{ qotd.vote }}
+                        </span>
+                    </div>
+                    <form action="{{ url(qotd.hasVotedUp(app.user) ? 'qotd_vote_null' : 'qotd_vote_up', { id: qotd.id }) }}" method="POST">
+                        <input type="hidden" name="page" value="{{ pagination.page }}">
+                        <input type="hidden" name="token" value="{{ csrf_token('vote') }}">
+                        <button type="submit" class="{{ html_classes('btn', 'btn-sm', { 'btn-outline-primary': qotd.hasVotedUp(app.user) }) }}">👍</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </turbo-frame>
+{% else %}
+    <div class="card mb-2">
+        <div class="card-body">
+            No QOTD found.
+        </div>
+    </div>
+{% endfor %}
+
+{% if with_pagination ?? true %}
+    <div class="navigation">
+        {{ knp_pagination_render(pagination) }}
+    </div>
+{% endif %}