Boutons en vuejs

assets/js/Components/Seen.vue

@@ -0,0 +1,47 @@
+<template>
+  <i  @click="fetchData" data-bs-toggle="tooltip" :title=tooltipMessage :class="[ state ? statusOn : statusOff ]"></i>
+</template>
+
+<script>
+import axios from "axios"
+
+export default {
+    props: {
+        content: { type: String },
+        path: { type: String },
+        initialState: { type: Boolean, default: false },
+        stateOn: { type: String },
+        stateOff: { type: String },
+        textOn: { type: String },
+        textOff: { type: String }
+    },
+    data () {
+        return {
+            filmId: this.content,
+            state: this.initialState,
+            statusOn: this.stateOn,
+            statusOff: this.stateOff,
+        }
+    },
+    computed: {
+        tooltipMessage() {
+            return (this.state ? this.textOn : this.textOff)
+        }
+    },
+    methods: {
+        fetchData() {
+            axios.post( this.path, {
+                id_film: this.filmId
+            },{
+                headers: {'X-Requested-With': 'XMLHttpRequest'},
+            }).then(response => {
+                this.state = response.data.newState
+            })
+        }
+    },
+}
+</script>
+
+<style>
+
+</style>

assets/js/Components/card.vue

@@ -1,20 +0,0 @@
-<template>
-  <button class="btn btn-primary me-3 font-bold" @click="count++">Count is: {{ count }}</button>
-</template>
-
-<script>
-export default {
-    props: {
-        initialCounter: { type: Number, default: 0 }
-    },
-    data () {
-        return {
-            count: this.initialCounter
-        }
-    }
-}
-</script>
-
-<style>
-
-</style>

assets/js/suivifilms2.js

@@ -11,7 +11,7 @@
                 $.ajax({
                     type: 'POST',
                     url: chemin,
-                    data: 'id_film=' + contenu,
+                    data: { 'id_film': contenu },
                     success: function (data) {
                         if ($icone.attr('class') === iconeEtatUn) {
                             $icone.attr('class', iconeEtatDeux);

assets/js/vuejs.js

@@ -1,8 +1,8 @@
 import { createApp } from "vue";
-import card from "./Components/card"
+import Seen from "./Components/Seen"
 
 const app = createApp ({
     components: {
-        card
+        Seen,
     }
 }).mount('#vue-app')

package.json

@@ -4,6 +4,7 @@
         "@popperjs/core": "^2.10.2",
         "@symfony/stimulus-bridge": "^3.2.1",
         "@symfony/webpack-encore": "^2.1.0",
+        "axios": "^0.27.2",
         "bootstrap": "^5.1.3",
         "bootstrap-star-rating": "^4.1.2",
         "core-js": "^3.0.0",

src/Controller/VideothequePersonnelleController.php

@@ -45,9 +45,10 @@ class VideothequePersonnelleController extends AbstractController
     public function modifierFilmDansListeAction(Request $request, EntityManagerInterface $em, FilmRepository $repo, FilmManager $filmManager)
     {
         $result = null;
-        $film = $repo->find($request->request->get('id_film'));
+        
         if ($request->isXmlHttpRequest())
         {
+            $film = $repo->find(json_decode($request->getContent(), true)['id_film']);
             $result = $filmManager->inverseUserWantToView($film);
             $em->flush();
         }
@@ -63,9 +64,10 @@ class VideothequePersonnelleController extends AbstractController
     {
         $result = null;
 
-        $film = $repo->find($request->request->get('id_film'));
+        
         if ($request->isXmlHttpRequest())
         {
+            $film = $repo->find(json_decode($request->getContent(), true)['id_film']);
             $result = $filmManager->inverseUserWhoSeen($film);
             $em->flush();
         }

templates/videotheque/liste_tableaux.html.twig

@@ -1,5 +1,13 @@
 {% extends "videotheque/base.html.twig" %}
 
+{% block stylesheets %}
+    {{ encore_entry_link_tags('vuejs') }}
+{% endblock %}
+
+{% block javascripts %}
+    {{ encore_entry_script_tags('vuejs') }}
+{% endblock %}
+
 {% block title %}
 {% if titre is defined %}{{ parent() }} - {{ titre }}{% else %}{{ parent() }}{% endif %}
 {% endblock %}
@@ -29,111 +37,105 @@
 			value="0">
 		</p>
 	</div>
-	<table
-		class="table table-bordered table-hover table-sm align-middle">
-		<thead class="">
-			<tr>
-				{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
-					<th style="width:1em;"></th>
-					<th style="width:1em;"></th>
-					<th>Ajouté par</th>
-				{% endif %}
-				<th>Titre</th>
-				<th>Genre</th>
-				<th>Réalisateur</th>
-				<th style="width:5em;">Note</th>
-				<th style="width:5em;">Année</th>
-				<th style="width:6em;">Sortie</th>
-			</tr>
-		</thead>
-		<tbody id="tableFilms">
-			{% for film in listeFilms %}
-			<tr data-auteur="{{ film.authered.nomComplet }}">
-				{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
+	<div id="vue-app" class="">
+		<table
+			class="table table-bordered table-hover table-sm align-middle">
+			<thead class="">
+				<tr>
+					{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
+						<th style="width:1em;"></th>
+						<th style="width:1em;"></th>
+						<th>Ajouté par</th>
+					{% endif %}
+					<th>Titre</th>
+					<th>Genre</th>
+					<th>Réalisateur</th>
+					<th style="width:5em;">Note</th>
+					<th style="width:5em;">Année</th>
+					<th style="width:6em;">Sortie</th>
+				</tr>
+			</thead>
+			<tbody id="tableFilms">
+				{% for film in listeFilms %}
+				<tr data-auteur="{{ film.authered.nomComplet }}">
+					{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
+						<td>
+							<Seen
+								class="fa-lg"
+								content="{{ film.id }}"
+								:initial-state="{{ app.user in film.usersWantToView ? "true" : "false" }}"
+								path="{{ path('maliste_modifier_a_voir') }}"
+								state-on="fa fa-bookmark text-primary"
+								text-on="Supprimer ce film de votre liste à voir"
+								state-off="fa fa-bookmark-o text-secondary"
+								text-off="Ajouter ce film à votre liste à voir"
+							>
+							</Seen>
+						</td>
+						<td>
+							<Seen
+								class="fa-lg"
+								content="{{ film.id }}"
+								:initial-state="{{ app.user in film.usersWhoSeen ? "true" : "false" }}"
+								path="{{ path('maliste_modifier_vus') }}"
+								state-on="fa fa-eye text-success"
+								text-on="Marquer ce film comme non vu"
+								state-off="fa fa-eye-slash text-secondary"
+								text-off="Marquer ce film comme vu"
+							>
+							</Seen>
+						</td>
+						<td>
+							{%  if film.authered is defined %}
+								{% if film.authered.activeNow %}
+									<i class="fa fa-user text-success" data-bs-toggle="tooltip" title="En ligne"></i>
+								{% else %}
+									<i class="fa fa-user-o text-secondary" data-bs-toggle="tooltip" title="Hors ligne"></i>
+								{% endif %}
+								{{ film.authered.username }}
+							{% endif %}
+						</td>
+					{% endif %}
+					<td>
+						<a href="{{ path('videotheque_voirfilm', {'id': film.id}) }}"><span data-bs-toggle="tooltip" data-placement="right" title="{{ film.information }}">{{ film.titre }}</span></a>
+						{% if film.new %}<span class="badge bg-success">New</span>{% endif %}
+						{% if film.nbComs %}<span class="badge bg-warning rounded-pill" data-bs-toggle="tooltip" title="{{ film.nbComs }} commentaire(s)">{{ film.nbComs }}</span>{% endif %}
+
+					</td>
 					<td>
-						{%  if app.user.wantToSee(film) %}
-							{% set follow_icone = "fa fa-bookmark fa-lg" %}
-							{% set follow_texte = "Supprimer ce film de votre liste à voir" %}
-						{% else %}
-							{% set follow_icone = "fa fa-bookmark-o text-secondary fa-lg" %}
-							{% set follow_texte = "Ajouter ce film à votre liste à voir" %}
+						{% if film.genres is defined %}
+							{% for genre in film.genres %}
+								<a href="{{ path("videotheque_listepargenre", {"id": genre.id}) }}"><span class="badge bg-secondary">{{ genre.name }}</span></a>
+							{% endfor %}
 						{% endif %}
-						<a href="#" type="button"
-									data-fonction="switch"
-									data-icone-actif="fa fa-bookmark fa-lg"
-									data-icone-inactif="fa fa-bookmark-o text-secondary fa-lg"
-									data-path="{{ path('maliste_modifier_a_voir') }}"
-									data-bs-toggle="tooltip"
-									title="{{ follow_texte }}"
-									data-content="{{ film.id }}">
-							<i class="{{ follow_icone }}"></i>
-						</a>
 					</td>
 					<td>
-						{%  if app.user.haveSeen(film) %}
-							{% set vu_icone = '<i class="fa fa-eye fa-lg text-success"></i>' %}
-						{% else %}
-							{% set vu_icone = '<i class="fa fa-eye-slash fa-lg text-secondary"></i>' %}
-						{% endif %}				
-						<a href="#"	type="button"
-									data-fonction="switch"
-									data-path="{{ path('maliste_modifier_vus') }}"
-									data-content="{{ film.id }}"
-									data-icone-actif = "fa fa-eye fa-lg text-success"
-									data-icone-inactif = "fa fa-eye-slash fa-lg text-secondary">
-							{{ vu_icone | raw }}
-						</a>
+					{% if film.realisateurs is defined %}
+						{%  for realisateur in film.realisateurs %}
+							<a href="{{ path('videotheque_listeparreal', {"id": realisateur.id}) }}"><span class="badge bg-info">{{ realisateur.nomComplet }}</span></a>
+						{%  endfor %}
+					{% endif %}
 					</td>
 					<td>
-						{%  if film.authered is defined %}
-							{% if film.authered.activeNow %}
-								<i class="fa fa-user text-success" data-bs-toggle="tooltip" title="En ligne"></i>
-							{% else %}
-								<i class="fa fa-user-o text-secondary" data-bs-toggle="tooltip" title="Hors ligne"></i>
-							{% endif %}
-							{{ film.authered.username }}
+						{% if film.note > 0 %}
+							<input class="rating"
+								data-disabled="true"
+								data-show-clear="false"
+								data-show-caption="false"
+								data-theme="krajee-fa"
+								style="display:none;"
+								min=0
+								max=5
+								data-step=0.5
+								data-size="xs"
+								value="{{ film.note }}">
 						{% endif %}
 					</td>
-				{% endif %}
-				<td>
-					<a href="{{ path('videotheque_voirfilm', {'id': film.id}) }}"><span data-bs-toggle="tooltip" data-placement="right" title="{{ film.information }}">{{ film.titre }}</span></a>
-					{% if film.new %}<span class="badge bg-success">New</span>{% endif %}
-					{% if film.nbComs %}<span class="badge bg-warning rounded-pill" data-bs-toggle="tooltip" title="{{ film.nbComs }} commentaire(s)">{{ film.nbComs }}</span>{% endif %}
-
-				</td>
-				<td>
-					{% if film.genres is defined %}
-						{% for genre in film.genres %}
-							<a href="{{ path("videotheque_listepargenre", {"id": genre.id}) }}"><span class="badge bg-secondary">{{ genre.name }}</span></a>
-						{% endfor %}
-					{% endif %}
-				</td>
-				<td>
-				{% if film.realisateurs is defined %}
-					{%  for realisateur in film.realisateurs %}
-						<a href="{{ path('videotheque_listeparreal', {"id": realisateur.id}) }}"><span class="badge bg-info">{{ realisateur.nomComplet }}</span></a>
-					{%  endfor %}
-				{% endif %}
-				</td>
-				<td>
-					{% if film.note > 0 %}
-						<input class="rating"
-							data-disabled="true"
-							data-show-clear="false"
-							data-show-caption="false"
-							data-theme="krajee-fa"
-							style="display:none;"
-							min=0
-							max=5
-							data-step=0.5
-							data-size="xs"
-							value="{{ film.note }}">
-					{% endif %}
-				</td>
-				<td>{{ film.annee | date('Y') }}</td>
-				<td>{% if film.dateSortie %}{{ film.dateSortie | date('d/m/y')}}{% endif %}</td>
-			</tr>
-			{% endfor %}
-		</tbody>
-	</table>
+					<td>{{ film.annee | date('Y') }}</td>
+					<td>{% if film.dateSortie %}{{ film.dateSortie | date('d/m/y')}}{% endif %}</td>
+				</tr>
+				{% endfor %}
+			</tbody>
+		</table>
+	</div>
 {% endblock %}

templates/videotheque/liste_vignettes.html.twig

@@ -1,5 +1,13 @@
 {% extends "videotheque/base.html.twig" %}
 
+{% block stylesheets %}
+    {{ encore_entry_link_tags('vuejs') }}
+{% endblock %}
+
+{% block javascripts %}
+    {{ encore_entry_script_tags('vuejs') }}
+{% endblock %}
+
 {% block title %}
 {% if titre is defined %}{{ parent() }} - {{ titre }}{% else %}{{ parent() }}{% endif %}
 {% endblock %}
@@ -37,129 +45,117 @@
 
 
 	<section id="tableFilms">
+		<div id="vue-app">
 		
-		{% for film in listeFilms %}
-		<article class="card border-primary mb-4" data-controller="collapser" data-auteur="{{ film.authered.nomComplet }}">
-			<div class="card-header d-flex justify-content-between">
-				<h3 class="card-title"><a class="" href="{{ path('videotheque_voirfilm', {'id': film.id}) }}"><span data-bs-toggle="tooltip" data-placement="right" title="{{ film.information }}">{{ film.titre }}</span></a>
-					{% if film.new %}<span class="badge bg-success">New</span>{% endif %}
-				</h3>
-				<div class="d-flex">
-					{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
-						<div class="me-3">
-							{%  if app.user.haveSeen(film) %}
-								{% set vu_icone = '<i class="fa fa-eye fa-lg text-success"></i>' %}
-							{% else %}
-								{% set vu_icone = '<i class="fa fa-eye-slash fa-lg text-secondary"></i>' %}
-							{% endif %}				
-							<button     type="button"
-										class="btn"
-										data-fonction="switch"
-										data-path="{{ path('maliste_modifier_vus') }}"
-										data-content="{{ film.id }}"
-										data-icone-actif = "fa fa-eye fa-lg text-success"
-										data-icone-inactif = "fa fa-eye-slash fa-lg text-secondary">
-								{{ vu_icone | raw }}
-							</button>
-						</div>
-						<div class="me-3">
-							{%  if app.user.wantToSee(film) %}
-								{% set follow_icone = "fa fa-bookmark fa-lg" %}
-								{% set follow_texte = "Supprimer ce film de votre liste à voir" %}
-							{% else %}
-								{% set follow_icone = "fa fa-bookmark-o text-secondary fa-lg" %}
-								{% set follow_texte = "Ajouter ce film à votre liste à voir" %}
-							{% endif %}
-							<button		type="button"
-										class="btn text-primary"
-										data-fonction="switch"
-										data-icone-actif="fa fa-bookmark fa-lg"
-										data-icone-inactif="fa fa-bookmark-o text-secondary fa-lg"
-										data-path="{{ path('maliste_modifier_a_voir') }}"
-										data-bs-toggle="tooltip"
-										title="{{ follow_texte }}"
-										data-content="{{ film.id }}">
-								<i class="{{ follow_icone }}"></i>
-							</button>
+			{% for film in listeFilms %}
+			<article class="card border-primary mb-4" data-controller="collapser" data-auteur="{{ film.authered.nomComplet }}">
+				<div class="card-header d-flex justify-content-between">
+					<h3 class="card-title"><a class="" href="{{ path('videotheque_voirfilm', {'id': film.id}) }}"><span data-bs-toggle="tooltip" data-placement="right" title="{{ film.information }}">{{ film.titre }}</span></a>
+						{% if film.new %}<span class="badge bg-success">New</span>{% endif %}
+					</h3>
+					<div class="d-flex">
+						{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
+							<Seen
+								class="me-3 btn fa-lg"
+								content="{{ film.id }}"
+								:initial-state="{{ app.user in film.usersWantToView ? "true" : "false" }}"
+								path="{{ path('maliste_modifier_a_voir') }}"
+								state-on="fa fa-bookmark text-primary"
+								text-on="Supprimer ce film de votre liste à voir"
+								state-off="fa fa-bookmark-o text-secondary"
+								text-off="Ajouter ce film à votre liste à voir"
+							>
+							</Seen>
+							<Seen
+								class="me-3 btn fa-lg"
+								content="{{ film.id }}"
+								:initial-state="{{ app.user in film.usersWhoSeen ? "true" : "false" }}"
+								path="{{ path('maliste_modifier_vus') }}"
+								state-on="fa fa-eye text-success"
+								text-on="Marquer ce film comme non vu"
+								state-off="fa fa-eye-slash text-secondary"
+								text-off="Marquer ce film comme vu"
+							>
+							</Seen>
+						{% endif %}
+						<div class="">
+							<button class="btn text-primary" data-bs-toggle="collapse" data-bs-target="#collapse-id-{{ film.id }}"><i data-collapser-target="button" class="fa fa-chevron-circle-right fa-lg"></i></button>
 						</div>
-					{% endif %}
-					<div class="">
-						<button class="btn text-primary" data-bs-toggle="collapse" data-bs-target="#collapse-id-{{ film.id }}"><i data-collapser-target="button" class="fa fa-chevron-circle-right fa-lg"></i></button>
 					</div>
 				</div>
-			</div>
-			<div class="card-body collapse" id="collapse-id-{{ film.id }}" data-collapser-target="collapse">
-				<table class="table">
-					<tbody>
-						<tr>
-							<th style="width: 9em;">Année</th>
-							<td>{{ film.annee | date('Y') }}</td>
-						<tr>
-						<tr>
-							<th>Réalisateur(s)</th>
-							<td>
-								{% for realisateur in film.realisateurs %}
-									<a href="{{ path('videotheque_listeparreal', {'id': realisateur.id}) }}"><span class="badge bg-info rounded-pill text-dark">{{ realisateur.nomComplet }}</span></a>
+				<div class="card-body collapse" id="collapse-id-{{ film.id }}" data-collapser-target="collapse">
+					<table class="table">
+						<tbody>
+							<tr>
+								<th style="width: 9em;">Année</th>
+								<td>{{ film.annee | date('Y') }}</td>
+							<tr>
+							<tr>
+								<th>Réalisateur(s)</th>
+								<td>
+									{% for realisateur in film.realisateurs %}
+										<a href="{{ path('videotheque_listeparreal', {'id': realisateur.id}) }}"><span class="badge bg-info rounded-pill text-dark">{{ realisateur.nomComplet }}</span></a>
+									{% endfor %}
+								</td>
+							</tr>
+							<tr>
+								<th>Genre</th>
+								<td>
+								{% for genre in film.genres %}
+									<a href="{{ path('videotheque_listepargenre', {'id': genre.id}) }}"><span class="badge bg-success rounded-pill">{{ genre.name }}</span></a>
 								{% endfor %}
-							</td>
-						</tr>
-						<tr>
-							<th>Genre</th>
-							<td>
-							{% for genre in film.genres %}
-								<a href="{{ path('videotheque_listepargenre', {'id': genre.id}) }}"><span class="badge bg-success rounded-pill">{{ genre.name }}</span></a>
-							{% endfor %}
-							</td>
-						</tr>
-						{% if film.information %}
-						<tr>
-							<th>Informations</th>
-							<td>{{ film.information | nl2br }}</td>
-						</tr>
-						{% endif %}
-						{% if film.dateSortie %}
+								</td>
+							</tr>
+							{% if film.information %}
 							<tr>
-								<th>Date de sortie</th>
-								<td>{{ film.dateSortie | date('d/m/y')}}</td>
+								<th>Informations</th>
+								<td>{{ film.information | nl2br }}</td>
 							</tr>
-						{% endif %}
-					</tbody>
-				</table>
-			</div>
-			<div class="card-footer d-flex justify-content-between">
-				<div class="d-flex">
-					<div class="me-3">
-						<input class="rating"
-							data-theme="krajee-fa"
-							data-language="fr"
-							data-display-only="true"
-							data-show-caption="false"
-							style="display:none;"
-							min=0
-							max=5
-							data-step=0.5
-							data-size="xs"
-							value="{{ film.note }}">
+							{% endif %}
+							{% if film.dateSortie %}
+								<tr>
+									<th>Date de sortie</th>
+									<td>{{ film.dateSortie | date('d/m/y')}}</td>
+								</tr>
+							{% endif %}
+						</tbody>
+					</table>
+				</div>
+				<div class="card-footer d-flex justify-content-between">
+					<div class="d-flex">
+						<div class="me-3">
+							<input class="rating"
+								data-theme="krajee-fa"
+								data-language="fr"
+								data-display-only="true"
+								data-show-caption="false"
+								style="display:none;"
+								min=0
+								max=5
+								data-step=0.5
+								data-size="xs"
+								value="{{ film.note }}">
+						</div>
+						<div class="">
+							{% if film.nbComs %}
+								<a href="{{ path('videotheque_voirfilm', {'id': film.id}) }}#coms"><span class="badge bg-warning text-dark">{{ film.nbComs }} commentaire{% if film.nbComs > 1 %}s{% endif %}</span></a>
+							{% endif %}
+						</div>
 					</div>
 					<div class="">
-						{% if film.nbComs %}
-							<a href="{{ path('videotheque_voirfilm', {'id': film.id}) }}#coms"><span class="badge bg-warning text-dark">{{ film.nbComs }} commentaire{% if film.nbComs > 1 %}s{% endif %}</span></a>
+					{%  if film.authered is defined %}
+						Ajouté par 
+						{{ film.authered.username }}
+						{% if film.authered.activeNow %}
+							<i class="fa fa-user text-success" data-bs-toggle="tooltip" title="En ligne"></i>
+						{% else %}
+							<i class="fa fa-user-o text-secondary" data-bs-toggle="tooltip" title="Hors ligne"></i>
 						{% endif %}
-					</div>
-				</div>
-				<div class="">
-				{%  if film.authered is defined %}
-					Ajouté par 
-					{{ film.authered.username }}
-					{% if film.authered.activeNow %}
-						<i class="fa fa-user text-success" data-bs-toggle="tooltip" title="En ligne"></i>
-					{% else %}
-						<i class="fa fa-user-o text-secondary" data-bs-toggle="tooltip" title="Hors ligne"></i>
 					{% endif %}
-				{% endif %}
+					</div>
 				</div>
-			</div>
-		</article>
-		{% endfor %}
+			</article>
+			{% endfor %}
+		</div>
 	</section>
 {% endblock %}

templates/videotheque/voirfilm.html.twig

@@ -10,43 +10,37 @@
 
 {% block title %}{{ parent() }} - Fiche film - {{ film.titre }}{% endblock %}
 {% block titre %}
-    {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
-        <div id="vue-app">
-            <card></card>
-        </div>
-    {% endif %}
-    {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
-        {%  if film.usersWantToView.contains(app.user) %}
-            {% set follow_icone = "fa fa-bookmark" %}
-            {% set follow_texte = "Supprimer ce film de votre liste à voir" %}
-        {% else %}
-            {% set follow_icone = "fa fa-bookmark-o text-secondary" %}
-            {% set follow_texte = "Ajouter ce film à votre liste à voir" %}
+    <div class="d-flex">
+        {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
+            <div id="vue-app">
+                <Seen
+                    class="me-2"
+                    content="{{ film.id }}"
+                    :initial-state="{{ app.user in film.usersWantToView ? "true" : "false" }}"
+                    path="{{ path('maliste_modifier_a_voir') }}"
+                    state-on="fa fa-bookmark text-primary"
+                    text-on="Supprimer ce film de votre liste à voir"
+                    state-off="fa fa-bookmark-o text-secondary"
+                    text-off="Ajouter ce film à votre liste à voir"
+                >
+                </Seen>
+                <Seen
+                    class="me-2"
+                    content="{{ film.id }}"
+                    :initial-state="{{ app.user in film.usersWhoSeen ? "true" : "false" }}"
+                    path="{{ path('maliste_modifier_vus') }}"
+                    state-on="fa fa-eye text-success"
+                    text-on="Marquer ce film comme non vu"
+                    state-off="fa fa-eye-slash text-secondary"
+                    text-off="Marquer ce film comme vu"
+                >
+                </Seen>
+            </div>
         {% endif %}
-        <a href="#"
-            type="button"
-            data-fonction="switch"
-            data-icone-actif="fa fa-bookmark"
-            data-icone-inactif="fa fa-bookmark-o text-secondary"
-            data-path="{{ path('maliste_modifier_a_voir') }}"
-            data-bs-toggle="tooltip"
-            title="{{ follow_texte }}"
-            data-content="{{ film.id }}">
-            <i class="{{ follow_icone }}"></i></a>
-        {% if film.usersWhoSeen.contains(app.user) %}
-            {% set vu_icone = '<i class="fa fa-eye text-success"></i>' %}
-        {% else %}
-            {% set vu_icone = '<i class="fa fa-eye-slash text-secondary"></i>' %}
-        {% endif %}				
-        <a href="#" type="button"
-                    data-fonction="switch"
-                    data-path="{{ path('maliste_modifier_vus') }}"
-                    data-content="{{ film.id }}"
-                    data-icone-actif = "fa fa-eye text-success"
-                    data-icone-inactif = "fa fa-eye-slash text-secondary">
-            {{ vu_icone | raw }}</a>
-    {% endif %}
-    {{ film.titre }}
+
+        {{ film.titre }}
+    </div>
+   
     
     {% if film.note > 0 %}
         <p>

yarn.lock

@@ -1720,6 +1720,19 @@ assets-webpack-plugin@7.0.*:
     escape-string-regexp "^4.0.0"
     lodash "^4.17.20"
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+axios@^0.27.2:
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
+  integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
+  dependencies:
+    follow-redirects "^1.14.9"
+    form-data "^4.0.0"
+
 babel-loader@^8.2.2:
   version "8.2.3"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.3.tgz#8986b40f1a64cacfcb4b8429320085ef68b1342d"
@@ -2013,6 +2026,13 @@ colorette@^2.0.10, colorette@^2.0.14:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.16.tgz#713b9af84fdb000139f04546bd4a93f62a5085da"
   integrity sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -2291,6 +2311,11 @@ del@^4.1.1:
     pify "^4.0.1"
     rimraf "^2.6.3"
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 depd@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
@@ -2628,11 +2653,25 @@ follow-redirects@^1.0.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.4.tgz#838fdf48a8bbdd79e52ee51fb1c94e3ed98b9379"
   integrity sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==
 
+follow-redirects@^1.14.9:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
+  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+
 font-awesome@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
   integrity sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -3243,6 +3282,13 @@ mime-db@1.52.0:
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
+mime-types@^2.1.12, mime-types@~2.1.34:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24:
   version "2.1.33"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.33.tgz#1fa12a904472fafd068e48d9e8401f74d3f70edb"
@@ -3250,13 +3296,6 @@ mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24:
   dependencies:
     mime-db "1.50.0"
 
-mime-types@~2.1.34:
-  version "2.1.35"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
-  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
-  dependencies:
-    mime-db "1.52.0"
-
 mime@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"