123 lines
No EOL
3.9 KiB
Text
123 lines
No EOL
3.9 KiB
Text
<div class="container" id="app">
|
|
<form @submit="search">
|
|
<div class="field has-addons">
|
|
<div class="control">
|
|
<input class="input" type="text" name="q" v-model="q" placeholder="Nom de l'album ou code barre (ex : Hybrid Theory">
|
|
</div>
|
|
<div class="control">
|
|
<button class="button is-link" :disabled="loading">
|
|
<span class="icon">
|
|
<i class="fas fa-search"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<table class="table is-striped is-hoverable is-fullwidth">
|
|
<thead>
|
|
<tr>
|
|
<th>Pochette</th>
|
|
<th>Titre</th>
|
|
<th>Pays</th>
|
|
<th>Année</th>
|
|
<th>Format</th>
|
|
<th>Genres</th>
|
|
<th>Styles</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-if="loading">
|
|
<td colspan="7">
|
|
Chargement en cours…
|
|
</td>
|
|
</tr>
|
|
<tr v-for="item in items">
|
|
<td>
|
|
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
|
|
</td>
|
|
<td>
|
|
<a :href="'/ajouter-un-album/' + item.id">{{ item.title }}</a>
|
|
</td>
|
|
<td>{{ item.year }}</td>
|
|
<td>{{ item.country }}</td>
|
|
<td>
|
|
<ul>
|
|
<li v-for="format in item.format">{{ format }}</li>
|
|
</ul>
|
|
</td>
|
|
<td>
|
|
<ul>
|
|
<li v-for="genre in item.genre">{{ genre }}</li>
|
|
</ul>
|
|
</td>
|
|
<td>
|
|
<ul>
|
|
<li v-for="style in item.style">{{ style }}</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<script>
|
|
Vue.createApp({
|
|
data() {
|
|
return {
|
|
q: '',
|
|
loading: false,
|
|
items: [],
|
|
}
|
|
},
|
|
methods: {
|
|
search(event) {
|
|
event.preventDefault();
|
|
|
|
if ( this.loading ) {
|
|
return false;
|
|
}
|
|
|
|
this.loading = true;
|
|
|
|
axios.get(`/api/v1/search?q=${this.q}`)
|
|
.then( response => {
|
|
const {
|
|
results,
|
|
} = response.data;
|
|
let items = [];
|
|
|
|
for (let i = 0 ; i < results.length ; i += 1 ) {
|
|
const {
|
|
id,
|
|
title,
|
|
thumb,
|
|
year,
|
|
country,
|
|
format,
|
|
genre,
|
|
style,
|
|
} = results[i];
|
|
items.push({
|
|
id,
|
|
title,
|
|
thumb,
|
|
year,
|
|
country,
|
|
format,
|
|
genre,
|
|
style,
|
|
});
|
|
}
|
|
|
|
this.items = items;
|
|
})
|
|
.catch((err) => {
|
|
showToastr(err.response?.data?.message || "Aucun résultat trouvé :/");
|
|
})
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
}
|
|
}
|
|
}).mount('#app')
|
|
</script>
|
|
|