Some changes

This commit is contained in:
Damien Broqua 2022-02-16 15:42:02 +01:00
parent 99d2507248
commit a35c8899ac
27 changed files with 200 additions and 48 deletions

View file

@ -17,7 +17,7 @@
</label>
<div class="control">
<div class="select is-small">
<select v-model="artist" @change="fetch">
<select v-model="artist" @change="changeFilter">
<option value="">Tous</option>
<%
for (let i = 0; i < page.artists.length; i += 1 ) {
@ -50,7 +50,32 @@
<span>Pays</span>
</span>
</th>
<th>Format</th>
<th>
<div class="field">
<label class="label">
<span class="icon-text">
<span class="icon has-text-info">
<i v-if="sort !== 'formats.name'" class="fa-solid fa-sort" @click="changeSort('formats.name', 'asc')"></i>
<i v-if="sort === 'formats.name' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('formats.name', 'asc')"></i>
<i v-if="sort === 'formats.name' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('formats.name', 'desc')"></i>
</span>
<span>Format</span>
</span>
</label>
<div class="control">
<div class="select is-small">
<select v-model="format" @change="changeFilter">
<option value="">Tous</option>
<%
for (let i = 0; i < page.formats.length; i += 1 ) {
__append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
}
%>
</select>
</div>
</div>
</div>
</th>
<th>Genres</th>
<th>Styles</th>
</tr>
@ -129,6 +154,7 @@
totalPages: 1,
limit: 5,
artist: '',
format: '',
sort: 'artists_sort',
order: 'asc',
}
@ -140,7 +166,15 @@
fetch() {
this.loading = true;
axios.get(`/api/v1/albums?page=${this.page}&limit=${this.limit}&artists_sort=${this.artist}&sort=${this.sort}&order=${this.order}`)
let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
if ( this.artist ) {
url += `&artists_sort=${this.artist}`;
}
if ( this.format ) {
url += `&format=${this.format}`;
}
axios.get(url)
.then( response => {
this.items = response.data.rows;
this.total = response.data.count;
@ -180,6 +214,11 @@
this.fetch();
},
changeFilter() {
this.page = 1;
this.fetch();
}
}
}).mount('#app')
</script>