224 lines
9.3 KiB
Text
224 lines
9.3 KiB
Text
<div class="container" id="app">
|
|
<table class="table is-striped is-hoverable is-fullwidth">
|
|
<thead>
|
|
<tr>
|
|
<th>Pochette</th>
|
|
<th>
|
|
<div class="field">
|
|
<label class="label">
|
|
<span class="icon-text">
|
|
<span class="icon has-text-info">
|
|
<i v-if="sort !== 'artists_sort'" class="fa-solid fa-sort" @click="changeSort('artists_sort', 'asc')"></i>
|
|
<i v-if="sort === 'artists_sort' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('artists_sort', 'asc')"></i>
|
|
<i v-if="sort === 'artists_sort' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('artists_sort', 'desc')"></i>
|
|
</span>
|
|
<span>Artiste</span>
|
|
</span>
|
|
</label>
|
|
<div class="control">
|
|
<div class="select is-small">
|
|
<select v-model="artist" @change="changeFilter">
|
|
<option value="">Tous</option>
|
|
<%
|
|
for (let i = 0; i < page.artists.length; i += 1 ) {
|
|
__append(`<option value="${page.artists[i]}">${page.artists[i]}</option>`);
|
|
}
|
|
%>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</th>
|
|
<th>Titre</th>
|
|
<th>
|
|
<span class="icon-text">
|
|
<span class="icon has-text-info">
|
|
<i v-if="sort !== 'year'" class="fa-solid fa-sort" @click="changeSort('year', 'asc')"></i>
|
|
<i v-if="sort === 'year' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('year', 'asc')"></i>
|
|
<i v-if="sort === 'year' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('year', 'desc')"></i>
|
|
</span>
|
|
<span>Année</span>
|
|
</span>
|
|
</th>
|
|
<th>
|
|
<span class="icon-text">
|
|
<span class="icon has-text-info">
|
|
<i v-if="sort !== 'country'" class="fa-solid fa-sort" @click="changeSort('country', 'asc')"></i>
|
|
<i v-if="sort === 'country' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('country', 'asc')"></i>
|
|
<i v-if="sort === 'country' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('country', 'desc')"></i>
|
|
</span>
|
|
<span>Pays</span>
|
|
</span>
|
|
</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>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-if="loading">
|
|
<td colspan="8">
|
|
Chargement en cours…
|
|
</td>
|
|
</tr>
|
|
<tr v-if="!loading" v-for="item in items">
|
|
<td>
|
|
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
|
|
</td>
|
|
<td>{{ item.artists_sort }}</td>
|
|
<td>
|
|
<a :href="'/ma-collection/' + item._id">{{ item.title }}</a>
|
|
</td>
|
|
<td>{{ item.year }}</td>
|
|
<td>{{ item.country }}</td>
|
|
<td>
|
|
<ul>
|
|
<li v-for="format in item.formats">{{ format.name }}</li>
|
|
</ul>
|
|
</td>
|
|
<td>
|
|
<ul>
|
|
<li v-for="genre in item.genres">{{ genre }}</li>
|
|
</ul>
|
|
</td>
|
|
<td>
|
|
<ul>
|
|
<li v-for="style in item.styles">{{ style }}</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<nav class="pagination" role="navigation" aria-label="pagination">
|
|
<a class="pagination-previous" :class="{'is-disabled': page === 1}" @click="previous">Précédent</a>
|
|
<a class="pagination-next" :class="{'is-disabled': (page*limit) >= total}" @click="next">Suivant</a>
|
|
<ul class="pagination-list">
|
|
<li v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
|
|
<a class="pagination-link" :class="{'is-current': p === page}" @click="goTo(p)" aria-label="Goto page 1">{{ p }}</a>
|
|
</li>
|
|
<!-- <li>
|
|
<span class="pagination-ellipsis">…</span>
|
|
</li>
|
|
<li>
|
|
<a class="pagination-link" aria-label="Goto page 45">45</a>
|
|
</li>
|
|
<li>
|
|
<a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
|
|
</li>
|
|
<li>
|
|
<a class="pagination-link" aria-label="Goto page 47">47</a>
|
|
</li>
|
|
<li>
|
|
<span class="pagination-ellipsis">…</span>
|
|
</li>
|
|
<li>
|
|
<a class="pagination-link" aria-label="Goto page 86">86</a>
|
|
</li> -->
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<script>
|
|
Vue.createApp({
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
items: [],
|
|
total: 0,
|
|
page: 1,
|
|
totalPages: 1,
|
|
limit: 5,
|
|
artist: '',
|
|
format: '',
|
|
sort: 'artists_sort',
|
|
order: 'asc',
|
|
}
|
|
},
|
|
created() {
|
|
this.fetch();
|
|
},
|
|
methods: {
|
|
fetch() {
|
|
this.loading = true;
|
|
|
|
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;
|
|
this.totalPages = parseInt(response.data.count / this.limit) + (response.data.count % this.limit > 0 ? 1 : 0);
|
|
|
|
})
|
|
.catch((err) => {
|
|
showToastr(err.response?.data?.message || "Impossible de charger votre collection");
|
|
})
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
next(event) {
|
|
event.preventDefault();
|
|
|
|
this.page += 1;
|
|
|
|
this.fetch();
|
|
},
|
|
previous(event) {
|
|
event.preventDefault();
|
|
|
|
this.page -= 1;
|
|
|
|
this.fetch();
|
|
},
|
|
goTo(page) {
|
|
this.page = page;
|
|
|
|
this.fetch();
|
|
},
|
|
changeSort(sort, order) {
|
|
this.sort = sort;
|
|
this.order = order;
|
|
this.page = 1;
|
|
|
|
this.fetch();
|
|
},
|
|
changeFilter() {
|
|
this.page = 1;
|
|
|
|
this.fetch();
|
|
}
|
|
}
|
|
}).mount('#app')
|
|
</script>
|