34 lines
1.2 KiB
Plaintext
34 lines
1.2 KiB
Plaintext
|
<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>
|