105 lines
3.3 KiB
Plaintext
105 lines
3.3 KiB
Plaintext
<div class="container-fluid" id="app">
|
|
<form @submit="search">
|
|
<div class="input-group mb-3">
|
|
<div class="form-outline">
|
|
<input v-model="q" type="search" id="q" class="form-control" />
|
|
<label class="form-label" for="q">Nom de l'album ou code barre</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-search"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<table class="table table-striped table-hover table-sm align-middle">
|
|
<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-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: '',
|
|
items: [],
|
|
}
|
|
},
|
|
methods: {
|
|
search(event) {
|
|
event.preventDefault();
|
|
|
|
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 => {
|
|
console.log('err:', err);
|
|
});
|
|
}
|
|
}
|
|
}).mount('#app')
|
|
</script>
|
|
|