Revue des filtres avec les stars

assets/styles/app.scss

@@ -56,3 +56,10 @@ body {
     background-color: var(--bs-body-bg);
     color: var(--bs-body-color);
 }
+
+/* Force les étoiles à occuper la même hauteur qu'un .form-select (Bootstrap 5.3) */
+.star-rating-field {
+    display: flex;
+    align-items: center;
+    height: calc(1.5em + 0.75rem + 2px);
+}

src/Form/FiltersType.php

@@ -9,6 +9,7 @@ use Doctrine\ORM\QueryBuilder;
 use Symfony\Bridge\Doctrine\Form\Type\EntityType;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\Extension\Core\Type\HiddenType;
 use Symfony\Component\Form\Extension\Core\Type\NumberType;
 use Symfony\Component\Form\FormBuilderInterface;
 use Symfony\Component\OptionsResolver\OptionsResolver;
@@ -18,21 +19,9 @@ class FiltersType extends AbstractType
     public function buildForm(FormBuilderInterface $builder, array $options): void
     {
         $builder
-            ->add('note', NumberType::class, [
+            ->add('note', HiddenType::class, [
                 'required'  => false,
                 'label'       => "Note au dessus de",
-                'attr'      => [
-                    'data-clear-value' => '0',
-                    'class' => "rating",
-                    'data-min-threshold' => '0',
-                    'data-min'  => '0',
-                    'data-max'  => '5',
-                    'data-step' => 1,
-                    'data-show-clear'   => "true",
-                    'data-show-caption' => "false",
-                    'data-size'         => "sm",
-                    'data-theme'          => "krajee-fa"
-                ],
             ])
             ->add('limit', ChoiceType::class, [
                 'choices' => [

templates/videotheque/_filters_form.html.twig

@@ -1,11 +1,23 @@
 {% if filtersForm is defined %}
-<div data-controller="collapser mb-3">
+<div class="mb-3" data-controller="collapser">
     <button class="btn text-primary" data-bs-toggle="collapse" data-bs-target="#collapse-filters">Filtres <i data-collapser-target="button" class="fa-solid fa-chevron-circle-right fa-lg"></i></button>
     <div id="collapse-filters" class="collapse" data-collapser-target="collapse">
         {#{% form_theme filtersForm 'bootstrap_5_horizontal_layout.html.twig' %}#}
-            {{ form_start(filtersForm, {'attr': {'class': 'row row-cols-lg-auto g-3 align-items-center'} } ) }}
+            {{ form_start(filtersForm, {'attr': {'class': 'row row-cols-lg-auto g-3 align-items-start'} } ) }}
         
-            {{ form_row(filtersForm.note) }}
+            <div class="mb-3">
+                {{ form_label(filtersForm.note) }}
+                {{ form_widget(filtersForm.note) }}
+                <div {{ vue_component('StarRating', {
+                    value: (filtersForm.note.vars.value ?: 0) * 1,
+                    max: 5,
+                    step: 1,
+                    disabled: false,
+                    size: 'lg',
+                    input: filtersForm.note.vars.id
+                }) }} class="star-rating-field"></div>
+                {{ form_errors(filtersForm.note) }}
+            </div>
             {{ form_row(filtersForm.limit) }}
             {{ form_row(filtersForm.userName) }}
 
@@ -13,7 +25,9 @@
             {{ form_row(filtersForm.sortOrder) }}
             {{ form_rest(filtersForm)}}
             
-            <button class="btn btn-primary mb-3" type="submit">Filtrer</button>
+            <div class="align-self-end mb-3">
+                <button class="btn btn-primary" type="submit">Filtrer</button>
+            </div>
             {{ form_end(filtersForm) }}
     </div>
 </div>

templates/videotheque/voirfilm.html.twig

@@ -138,7 +138,7 @@
                                 <a data-bs-toggle="collapse" role="button" href="#collapseCommentaire" aria-expanded="false" aria-controls="collapseCommentaire">Commenter <i data-collapser-target="button" class="fa fa-chevron-right"></i></a>
                             </p>
                             <div class="collapse" id="collapseCommentaire" data-collapser-target="collapse">
-                            {{ include('videotheque/form_commentaire.html.twig') }}
+                            {{ include('videotheque/_form_commentaire.html.twig') }}
                             </div>
                     {% endif %}
                     <div class="list-group">