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 (#55)

Browse source 
Co-authored-by: dbroqua <contact@darkou.fr>
Reviewed-on: #55
This commit is contained in:
Damien Broqua 2022-08-29 08:36:43 +02:00
parent 1377b4c0c1
commit 827dcb9ccc
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>
<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">
<span class="title">
{{ item.artists_sort}} - {{ item.title }}
@ -172,8 +178,56 @@
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) {
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}`;
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 ) {
url += `&artists_sort=${this.artist.replace('&', '%26')}`;
}
@ -190,38 +244,26 @@
url += `&style=${this.style.replace('&', '%26')}`;
}
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 cette collection");
})
.finally(() => {
this.loading = false;
});
location.href = url;
},
next(event) {
event.preventDefault();
this.page += 1;
this.fetch();
this.changeUrl();
},
previous(event) {
event.preventDefault();
this.page -= 1;
this.fetch();
this.changeUrl();
},
goTo(page) {
this.page = page;
this.fetch();
this.changeUrl();
},
changeSort() {
const [sort,order] = this.sortOrder.split('-');
@ -229,12 +271,12 @@
this.order = order;
this.page = 1;
this.fetch();
this.changeUrl();
},
changeFilter() {
this.page = 1;
this.fetch();
this.changeUrl();
},
showMoreFilters() {
this.moreFilters = !this.moreFilters;

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

@ -234,7 +234,53 @@
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?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 ) {
url += `&artists_sort=${this.artist.replace('&', '%26')}`;
}
@ -251,37 +297,26 @@
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 votre collection");
})
.finally(() => {
this.loading = false;
});
location.href = url;
},
next(event) {
event.preventDefault();
this.page += 1;
this.fetch();
this.changeUrl();
},
previous(event) {
event.preventDefault();
this.page -= 1;
this.fetch();
this.changeUrl();
},
goTo(page) {
this.page = page;
this.fetch();
this.changeUrl();
},
changeSort() {
const [sort,order] = this.sortOrder.split('-');
@ -289,12 +324,12 @@
this.order = order;
this.page = 1;
this.fetch();
this.changeUrl();
},
changeFilter() {
this.page = 1;
this.fetch();
this.changeUrl();
},
showMoreFilters() {
this.moreFilters = !this.moreFilters;