💄 (reportComment): Add front form to create report comment

assets/styles/app.css

@@ -1,10 +1,12 @@
-@import "tailwindcss";
-@import "../vendor/daisyui/daisyui.min.css";
-@import "./plumber-dark-theme.css";
-@import "./plumber-light-theme.css";
+@import 'tailwindcss';
+@import '../vendor/daisyui/daisyui.min.css';
+@import './plumber-dark-theme.css';
+@import './plumber-light-theme.css';
 
 @plugin "../vendor/daisyui/daisyui.index.js" {
-    themes: plumber-light --default, plumber-dark --prefersdark;
+    themes:
+        plumber-light --default,
+        plumber-dark --prefersdark;
 }
 
 @source "../../templates/";
@@ -13,6 +15,10 @@ body {
     scroll-behavior: smooth;
 }
 
+textarea {
+    width: 100%;
+}
+
 [data-report-upvote].upvoted .text-green-200 {
     @apply text-gray-400;
 }
@@ -40,7 +46,8 @@ body {
 }
 
 @keyframes gradient-x {
-    0%, 100% {
+    0%,
+    100% {
         background-size: 200% 200%;
         background-position: left center;
     }
@@ -62,7 +69,8 @@ body {
 }
 
 @keyframes float {
-    0%, 100% {
+    0%,
+    100% {
         transform: translateY(0px);
     }
     50% {
@@ -71,7 +79,8 @@ body {
 }
 
 @keyframes pulse-smooth {
-    0%, 100% {
+    0%,
+    100% {
         opacity: 0.5;
         transform: scale(1);
     }
@@ -97,7 +106,6 @@ body {
     animation: pulse-smooth 1.5s ease-in-out infinite;
 }
 
-
 .line-clamp-5 {
     display: -webkit-box;
     -webkit-line-clamp: 5;

src/Application/CommandHandler/Report/CreateReportCommentCommandHandler.php

@@ -12,8 +12,10 @@
 use App\Domain\Model\Report\Report;
 use App\Domain\Repository\Report\ReportCommentRepositoryInterface;
 use Psr\Log\LoggerInterface;
+use Symfony\Component\Messenger\Attribute\AsMessageHandler;
 use Symfony\Component\Messenger\MessageBusInterface;
 
+#[AsMessageHandler]
 class CreateReportCommentCommandHandler
 {
     public function __construct(
@@ -26,7 +28,9 @@ public function __construct(
 
     public function __invoke(CreateReportCommentCommand $command): void
     {
-        $reportEnvelope = $this->messageBus->dispatch(new GetReportByIdQuery($command->reportId));
+        $reportEnvelope = $this->messageBus->dispatch(
+            new GetReportByIdQuery($command->reportId),
+        );
         /** @var Report $report */
         $report = $this->messageBusHelper->getContentFromEnvelope(
             envelope: $reportEnvelope,

src/Application/EventListener/JsonExceptionListener.php

@@ -37,9 +37,7 @@ public function onKernelException(ExceptionEvent $event): void
             'message' => $this->createMessage($exceptionCode),
         ];
 
-        $event->setResponse(
-            new JsonResponse($content, $content['code'])
-        );
+        $event->setResponse(new JsonResponse($content, $content['code']));
     }
 
     private function createMessage(int $code): string

src/Application/QueryHandler/Report/GetReportByIdQueryHandler.php

@@ -7,7 +7,9 @@
 use App\Application\Query\Report\GetReportByIdQuery;
 use App\Domain\Model\Report\Report;
 use App\Domain\Repository\Report\ReportRepositoryInterface;
+use Symfony\Component\Messenger\Attribute\AsMessageHandler;
 
+#[AsMessageHandler]
 class GetReportByIdQueryHandler
 {
     public function __construct(

src/Presentation/Controller/CreateReportCommentController.php

@@ -15,17 +15,27 @@
 
 class CreateReportCommentController extends AbstractController
 {
-    #[Route(path: '/reports/{reportId}/comment/new', name: 'create_report_comment', methods: [Request::METHOD_POST])]
+    #[
+        Route(
+            path: '/reports/{reportId}/comment/new',
+            name: 'create_report_comment',
+            methods: [Request::METHOD_POST],
+        ),
+    ]
     public function __invoke(
         Request $request,
         string $reportId,
         MessageBusInterface $messageBus,
     ): Response {
-        $createReportCommentForm = $this->createForm(CreateReportCommentForm::class);
+        $createReportCommentForm = $this->createForm(
+            CreateReportCommentForm::class,
+        );
         $createReportCommentForm->handleRequest($request);
 
         /** @var string $formDataGameSlug */
-        $formDataGameSlug = $request->request->all()['create_report_comment_form']['gameSlug'];
+        $formDataGameSlug = $request->request->all()[
+            'create_report_comment_form'
+        ]['gameSlug'];
 
         if (
             $createReportCommentForm->isSubmitted()
@@ -34,13 +44,17 @@ public function __invoke(
             /** @var CreateReportCommentFormInputDto $createReportCommentFormInputDto */
             $createReportCommentFormInputDto = $createReportCommentForm->getData();
 
-            $messageBus->dispatch(new CreateReportCommentCommand(
-                $createReportCommentFormInputDto->comment,
-                $createReportCommentFormInputDto->ip,
-                $reportId,
-            ));
+            $messageBus->dispatch(
+                new CreateReportCommentCommand(
+                    $createReportCommentFormInputDto->comment,
+                    $createReportCommentFormInputDto->ip,
+                    $reportId,
+                ),
+            );
         }
 
-        return $this->redirectToRoute('reports_for_game', ['gameSlug' => $formDataGameSlug]);
+        return $this->redirectToRoute('reports_for_game', [
+            'gameSlug' => $formDataGameSlug,
+        ]);
     }
 }

src/Presentation/Controller/ReportsController.php

@@ -9,6 +9,7 @@
 use App\Application\Query\Game\GetGameBySlugQuery;
 use App\Domain\Model\Game\Game;
 use App\Domain\Model\Report\Report;
+use App\Presentation\Form\CreateReportCommentForm;
 use App\Presentation\Form\CreateReportForm;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
@@ -88,13 +89,19 @@ class: Game::class,
             ]
         );
 
+        $createReportCommentForm = $this->createForm(
+            CreateReportCommentForm::class,
+            null,
+        );
+
         return $this->render(
             '@app/reports/reports_for_game.html.twig',
             [
                 'game' => $game,
                 'reports' => $reports ?? [],
                 'gameSlug' => $game->getSlug(),
                 'createReportForm' => $createReportForm->createView(),
+                'createReportCommentForm' => $createReportCommentForm->createView(),
             ]
         );
     }

src/Presentation/Form/CreateReportCommentForm.php

@@ -25,7 +25,18 @@ public function buildForm(
     ): void {
         $builder
             ->add('comment', TextareaType::class, [
-                'label' => $this->translator->trans('form.create.comment.label', [], 'reportComment'),
+                'label' => $this->translator->trans(
+                    'form.create.comment.label',
+                    [],
+                    'reportComment',
+                ),
+                'attr' => [
+                    'placeholder' => $this->translator->trans(
+                        'form.create.comment.placeholder',
+                        [],
+                        'reportComment',
+                    ),
+                ],
                 'empty_data' => '',
                 'required' => true,
             ])
@@ -34,8 +45,7 @@ public function buildForm(
             ])
             ->add('gameSlug', HiddenType::class, [
                 'required' => true,
-            ])
-        ;
+            ]);
     }
 
     public function configureOptions(OptionsResolver $resolver): void

src/Presentation/Template/reports/partials/_reports_comment_modal.html.twig

@@ -0,0 +1,39 @@
+{% trans_default_domain 'reportComment' %}
+
+<dialog id="comment_{{ modal_index }}" class="modal">
+  <div class="modal-box w-full flex-col">
+    <div class="divider divider-start text-lg font-bold">{{ 'reports.modal.title'|trans }}</div>
+
+    <div class="modal-action flex flex-col">
+        {{ form_start(createReportCommentForm, {
+            'action': path('create_report_comment', { reportId: report.id }),
+            'method': 'POST',
+        }) }}
+
+        {{ form_widget(createReportCommentForm.comment, {
+            'attr': {
+                'class': 'textarea textarea-warning'
+            }
+        }) }}
+
+        {{ form_widget(createReportCommentForm.gameSlug, {
+            'attr': {
+                'value': game.slug,
+            }
+        }) }}
+
+        {{ form_widget(createReportCommentForm.ip, {
+            'attr': {
+                'value': app.request.clientIp,
+            }
+        }) }}
+
+        <button class="btn btn-primary">{{ 'reports.modal.submit'|trans }}</button>
+
+        {{ form_rest(createReportCommentForm) }}
+        {{ form_end(createReportCommentForm) }}
+
+        <button type="button" class="btn" formnovalidate onclick="document.getElementById('comment_{{ modal_index }}').close()">{{ 'reports.modal.close'|trans }}</button>
+    </div>
+  </div>
+</dialog>

src/Presentation/Template/reports/partials/_reports_list.html.twig

@@ -108,6 +108,15 @@
                 {% endif %}
             </turbo-frame>
         </td>
+
+        <td class="text-center hover:bg-base-300">
+            <div class="w-6 h-6 mx-auto">
+                <button class="btn text-warning btn-square -m-2" onclick="comment_{{ loop.index }}.showModal()">
+                    {{ ux_icon('ph:warning') }}
+                </button>
+            </div>
+        </td>
+        {% include '@reports/partials/_reports_comment_modal.html.twig' with { modal_index: loop.index, report: report, game: report.game } %}
     </tr>
 {% endfor %}
 

src/Presentation/Template/reports/partials/_reports_list_footer.html.twig

@@ -8,6 +8,7 @@
                 <th colspan="4" class="text-center bg-primary/50">TV</th>
                 <th colspan="4" class="text-center bg-secondary/50">Portable</th>
                 <th colspan="3" class="text-center bg-accent/50">Misc</th>
+                <th></th>
             </tr>
         </tfoot>
     </table>

src/Presentation/Template/reports/partials/_reports_list_header.html.twig

@@ -17,6 +17,7 @@
                     <th class="text-center">{{ 'list.table.header.better_loading_times'|trans }}</th>
                     <th class="text-center">{{ 'list.table.header.switch_2_edition'|trans }}</th>
                     <th class="text-center">{{ 'list.table.header.upvoted'|trans }}</th>
+                    <th class="text-center">{{ 'list.table.header.issue'|trans }}</th>
                 </tr>
             </thead>
             <tbody>

translations/report.en.yaml

@@ -46,6 +46,7 @@ list:
             native_resolution: 'Native Res****'
             better_loading_times: 'Better loading'
             switch_2_edition: 'Switch 2 Edition'
+            issue: 'Issue?'
             upvoted: 'Upvoted'
             portable_label: 'Portable'
             tv_label: 'TV'

translations/reportComment.en.yaml

@@ -1,4 +1,11 @@
+reports:
+    modal:
+        title: 'Describe the issue with this report'
+        submit: 'Submit'
+        close: 'Close'
+
 form:
     create:
         comment:
             label: 'Leave a comment'
+            placeholder: 'Describe the issue with this report'