Compter en temps réel un nombre d'occurrences par un select

Je suis dans un projet Symfony ou j'ai créé une liste de produits qui s'affiche dans un template Twig avec en haut une liste déroulante avec des options et je souhaiterai que lorsque l'on choisi une option dans la liste déroulante, le nombre d'occurrences pour le fournisseur sélectionné s'affiche à coté sans qu'il n'y ait de rechargement de page ou autres, que le comptage soit réalisé directement.

Fonction dans mon ProductRepository.php

Code:

1
2
3
4
5
6
7
8
9
public function countBySupplier($supplier)
    {
        return $this->createQueryBuilder('a')
            ->select('count(a.id)')
            ->where('a.supplier = :supplier')
            ->setParameter('supplier', $supplier)
            ->getQuery()
            ->getSingleScalarResult();
    }

Controller

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
#[Route('/stock', name: 'stock')]
    public function index(ProductRepository $productRepository, PaginatorInterface $paginator, Request $request): Response
    {
        $data = $productRepository->findAll();
        $products = $paginator->paginate(
            $data,
            $request->query->getInt('page', 1),
            15
        );
 
        return $this->render('stock/list.html.twig', [
            'products' => $products,
        ]);

Template list.html.twig

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{% block content %}
  <div class="filter">
    <div>
      <label for="supplier-selector" class="select-desc">Nombre de produit en stock pour
      </label>
        <select name="supplier-number" id="supplier-selector">
          <option value=""></option>
          <option value="carrefour">carrefour</option>
          <option value="lidl">lidl</option>
          <option value="intermarché">intermarché</option>
          <option value="aldi">aldi</option>
          <option value="all">Tous les fournisseurs</option>
        </select>
    </div>
  </div>
  <table>
    <tr class="border-top-0 tr-header">
      <th>Fournisseur</th>
      <th class="table-head-center">Type de produit</th>
      <th class="table-head-center">Référence</th>
      <th class="table-head-center">Date de péremption</th>
      <th></th>
    </tr>
    {% for product in products %}
      <tr>
        <td>{{ product.supplier.compagnyName}}</td>
        <td class="table-row-center">{{ product.productCategory.type}}</td>
        <td class="table-row-center">{{ product.reference}}</td>
        <td class="table-row-center">{{ product.expirationDate |date('d-m-Y')}}</td>
        <td class="data-modifier">
          <a href="#">Modifier</a>
        </td>
      </tr>
    {% endfor %}
  </table>
{% endblock %}

Je suis bloqué... si quelqu'un a une idée, je suis preneur :)