dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 9 Pull requests Releases 14 Activity

#50 - Sur ma collection les filtres génèrent une nouvelle url

Browse source
This commit is contained in:
Damien Broqua 2022-08-29 08:36:18 +02:00
parent 1377b4c0c1
commit 90f93aebc2
2 changed files with 112 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
views/pages/collection.ejs
View file

@ -85,6 +85,12 @@
</span> </span>
<div class="grid grid-cols-1 md:grid-cols-2 list"> <div class="grid grid-cols-1 md:grid-cols-2 list">
<div class="loader" v-if="loading">
<div class="animation"></div>
<div>
Chargement des données en cours…
</div>
</div>
<div class="item" v-if="!loading" v-for="item in items"> <div class="item" v-if="!loading" v-for="item in items">
<span class="title"> <span class="title">
{{ item.artists_sort}} - {{ item.title }} {{ item.artists_sort}} - {{ item.title }}
@ -172,8 +178,56 @@
methods: { methods: {
fetch() { fetch() {
this.loading = true; 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) {
console.log(`${entry[0]}: ${entry[1]}`);
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}`; 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}`;
}
if ( this.format ) {
url += `&format=${this.format}`;
}
if ( this.year ) {
url += `&year=${this.year}`;
}
if ( this.genre ) {
url += `&genre=${this.genre}`;
}
if ( this.style ) {
url += `&style=${this.style}`;
}
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 ) { if ( this.artist ) {
url += `&artists_sort=${this.artist.replace('&', '%26')}`; url += `&artists_sort=${this.artist.replace('&', '%26')}`;
} }
@ -190,38 +244,26 @@
url += `&style=${this.style.replace('&', '%26')}`; url += `&style=${this.style.replace('&', '%26')}`;
} }
axios.get(url) location.href = 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 cette collection");
})
.finally(() => {
this.loading = false;
});
}, },
next(event) { next(event) {
event.preventDefault(); event.preventDefault();
this.page += 1; this.page += 1;
this.fetch(); this.changeUrl();
}, },
previous(event) { previous(event) {
event.preventDefault(); event.preventDefault();
this.page -= 1; this.page -= 1;
this.fetch(); this.changeUrl();
}, },
goTo(page) { goTo(page) {
this.page = page; this.page = page;
this.fetch(); this.changeUrl();
}, },
changeSort() { changeSort() {
const [sort,order] = this.sortOrder.split('-'); const [sort,order] = this.sortOrder.split('-');
@ -229,12 +271,12 @@
this.order = order; this.order = order;
this.page = 1; this.page = 1;
this.fetch(); this.changeUrl();
}, },
changeFilter() { changeFilter() {
this.page = 1; this.page = 1;
this.fetch(); this.changeUrl();
}, },
showMoreFilters() { showMoreFilters() {
this.moreFilters = !this.moreFilters; this.moreFilters = !this.moreFilters;

69
views/pages/mon-compte/ma-collection/index.ejs
View file

@ -234,7 +234,53 @@
this.loading = true; this.loading = true;
this.total = 0; this.total = 0;
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const entries = urlParams.entries();
for(const entry of entries) {
console.log(`${entry[0]}: ${entry[1]}`);
switch(entry[0]) {
case 'artists_sort':
this.artist = entry[1];
break;
default:
this[entry[0]] = entry[1];
}
}
let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&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}`;
}
if ( this.year ) {
url += `&year=${this.year}`;
}
if ( this.genre ) {
url += `&genre=${this.genre}`;
}
if ( this.style ) {
url += `&style=${this.style}`;
}
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 votre collection");
})
.finally(() => {
this.loading = false;
});
},
changeUrl() {
let url = `?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
if ( this.artist ) { if ( this.artist ) {
url += `&artists_sort=${this.artist.replace('&', '%26')}`; url += `&artists_sort=${this.artist.replace('&', '%26')}`;
} }
@ -251,37 +297,26 @@
url += `&style=${this.style.replace('&', '%26')}`; url += `&style=${this.style.replace('&', '%26')}`;
} }
axios.get(url) location.href = 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 votre collection");
})
.finally(() => {
this.loading = false;
});
}, },
next(event) { next(event) {
event.preventDefault(); event.preventDefault();
this.page += 1; this.page += 1;
this.fetch(); this.changeUrl();
}, },
previous(event) { previous(event) {
event.preventDefault(); event.preventDefault();
this.page -= 1; this.page -= 1;
this.fetch(); this.changeUrl();
}, },
goTo(page) { goTo(page) {
this.page = page; this.page = page;
this.fetch(); this.changeUrl();
}, },
changeSort() { changeSort() {
const [sort,order] = this.sortOrder.split('-'); const [sort,order] = this.sortOrder.split('-');
@ -289,12 +324,12 @@
this.order = order; this.order = order;
this.page = 1; this.page = 1;
this.fetch(); this.changeUrl();
}, },
changeFilter() { changeFilter() {
this.page = 1; this.page = 1;
this.fetch(); this.changeUrl();
}, },
showMoreFilters() { showMoreFilters() {
this.moreFilters = !this.moreFilters; this.moreFilters = !this.moreFilters;