thomas

TP4/EX2/search-app.riot

@@ -0,0 +1,34 @@
+<search-app>
+    <h1>Recherche de films</h1>
+    <div class="search-container">
+        <input type="text" placeholder="Titre du film..." oninput="{ handleInput }">
+        <button onclick="{ searchMovies }">Rechercher</button>
+    </div>
+
+    <div id="movie-list">
+        <div each="{ movie in state.movies }" class="movie-card">
+            <h3>{ movie.Title } ({ movie.Year })</h3>
+            <img src="{ movie.Poster !== 'N/A' ? movie.Poster : 'https://via.placeholder.com/200x300.png?text=Pas+d%27image' }" alt="{ movie.Title }">
+        </div>
+        <p if="{ !state.movies.length && state.searched }">Aucun film trouvé.</p>
+    </div>
+
+    <script>
+        import { getMovies } from './service.js';
+
+        export default {
+            onMounted() {
+                this.update({ movies: [], searched: false, searchTerm: '' });
+            },
+            
+            handleInput(e) {
+                this.update({ searchTerm: e.target.value });
+            },
+
+            async searchMovies() {
+                const movies = await getMovies(this.state.searchTerm);
+                this.update({ movies, searched: true });
+            }
+        }
+    </script>
+</search-app>