SwitchView en stimulus

assets/app.js

@@ -4,9 +4,6 @@ import './styles/app.scss';
 import 'bootstrap';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './js/colorModeBootstrap.js'
-import { switchView } from './js/switchViewVanilla.js';
 import './js/addCollectionVanilla.js'
 
-const sv = switchView("#switchview");
-
 registerVueControllerComponents(import.meta.glob('./vue/controllers/**/*.vue', { eager: true }));

assets/controllers/switch_view_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from '@hotwired/stimulus';
+import { visit } from '@hotwired/turbo';
+
+export default class extends Controller {
+    static values = {
+        url: { type: String, default: '/changeview' }
+    }
+
+    change(event) {
+        event.preventDefault();
+
+        fetch(this.urlValue)
+            .then((response) => {
+                if (!response.ok) {
+                    throw new Error(`Erreur Http : ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(() => {
+                visit(window.location.href, { action: 'replace' });
+            })
+    }
+}

assets/js/switchViewVanilla.js

@@ -1,24 +0,0 @@
-export function switchView(idSelector) {
-    const button = document.querySelector(idSelector);
-    if (!button) {
-        return
-    }
-    button.addEventListener("click", (event) => {
-        event.preventDefault();
-        change();
-    })
-    
-    function change() {
-        const fetchPromise = fetch("/changeview");
-        fetchPromise
-            .then((response) => {
-                if (!response.ok) {
-                    throw new Error(`Erreur Http : ${response.status}`);
-                }
-                return response.json();
-            })
-            .then((json) => {
-                window.location.reload();
-            })
-    }
-}

config/packages/reprise.yaml

@@ -21,6 +21,12 @@
     # script_attributes: []
     # link_attributes: []
 
+reprise:
+    script_attributes:
+        'data-turbo-track': reload
+    link_attributes:
+        'data-turbo-track': reload
+
 framework:
     assets:
         json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

templates/videotheque/_liste_header.html.twig

@@ -2,7 +2,12 @@
     {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
         <p class="me-2"><a class="btn btn-primary" role="button" href="{{ path('videotheque_ajouter') }}"><i class="fa-solid fa-plus-square fa-lg"></i> Ajouter un film</a></p>
         <p class="me-2"><a class="btn btn-primary" role="button" href="{{ path('videotheque_ajouter_tmdb') }}"><i class="fa-solid fa-plus-square fa-lg"></i> Ajouter par TMDB</a></p>
-        <p class="me-2"><a href="#" role="button" class="btn btn-secondary" id="switchview">Changer de vue</a></p>
+        <p class="me-2"><a href="#" role="button"
+            class="btn btn-secondary"
+            data-controller="switch-view"
+            data-action="click->switch-view#change"
+        >Changer de vue</a>
+        </p>
           
     {% endif %}
 </div>