133 lines
4.3 KiB
JavaScript
133 lines
4.3 KiB
JavaScript
if ( typeof userId !== 'undefined' ) {
|
|
Vue.createApp({
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
moreFilters: false,
|
|
items: [],
|
|
total: 0,
|
|
page: 1,
|
|
totalPages: 1,
|
|
limit: 16,
|
|
artist: '',
|
|
format: '',
|
|
year: '',
|
|
genre: '',
|
|
style: '',
|
|
sortOrder: 'artists_sort-asc',
|
|
sort: 'artists_sort',
|
|
order: 'asc',
|
|
userId,
|
|
}
|
|
},
|
|
created() {
|
|
this.fetch();
|
|
},
|
|
methods: {
|
|
fetch() {
|
|
this.loading = true;
|
|
this.total = 0;
|
|
|
|
const queryString = window.location.search;
|
|
const urlParams = new URLSearchParams(queryString);
|
|
const entries = urlParams.entries();
|
|
|
|
for(const entry of entries) {
|
|
switch(entry[0]) {
|
|
case 'artists_sort':
|
|
this.artist = entry[1];
|
|
break;
|
|
default:
|
|
this[entry[0]] = entry[1];
|
|
}
|
|
}
|
|
|
|
let url = `/api/v1/albums?userId=${this.userId}&page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
|
|
if ( this.artist ) {
|
|
url += `&artists_sort=${this.artist.replace('&', '%26')}`;
|
|
}
|
|
if ( this.format ) {
|
|
url += `&format=${this.format.replace('&', '%26')}`;
|
|
}
|
|
if ( this.year ) {
|
|
url += `&year=${this.year}`;
|
|
}
|
|
if ( this.genre ) {
|
|
url += `&genre=${this.genre.replace('&', '%26')}`;
|
|
}
|
|
if ( this.style ) {
|
|
url += `&style=${this.style.replace('&', '%26')}`;
|
|
}
|
|
|
|
axios.get(url)
|
|
.then( response => {
|
|
this.items = response.data.rows;
|
|
this.total = response.data.count || 0;
|
|
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 cette collection");
|
|
})
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
changeUrl() {
|
|
let url = `?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
|
|
if ( this.artist ) {
|
|
url += `&artists_sort=${this.artist.replace('&', '%26')}`;
|
|
}
|
|
if ( this.format ) {
|
|
url += `&format=${this.format.replace('&', '%26')}`;
|
|
}
|
|
if ( this.year ) {
|
|
url += `&year=${this.year}`;
|
|
}
|
|
if ( this.genre ) {
|
|
url += `&genre=${this.genre.replace('&', '%26')}`;
|
|
}
|
|
if ( this.style ) {
|
|
url += `&style=${this.style.replace('&', '%26')}`;
|
|
}
|
|
|
|
location.href = url;
|
|
},
|
|
next(event) {
|
|
event.preventDefault();
|
|
|
|
this.page += 1;
|
|
|
|
this.changeUrl();
|
|
},
|
|
previous(event) {
|
|
event.preventDefault();
|
|
|
|
this.page -= 1;
|
|
|
|
this.changeUrl();
|
|
},
|
|
goTo(page) {
|
|
this.page = page;
|
|
|
|
this.changeUrl();
|
|
},
|
|
changeSort() {
|
|
const [sort,order] = this.sortOrder.split('-');
|
|
this.sort = sort;
|
|
this.order = order;
|
|
this.page = 1;
|
|
|
|
this.changeUrl();
|
|
},
|
|
changeFilter() {
|
|
this.page = 1;
|
|
|
|
this.changeUrl();
|
|
},
|
|
showMoreFilters() {
|
|
this.moreFilters = !this.moreFilters;
|
|
}
|
|
}
|
|
}).mount('#collection-publique');
|
|
} |