From 827dcb9ccc0a409fd834d0a037f92f5af9727923 Mon Sep 17 00:00:00 2001 From: Damien Broqua Date: Mon, 29 Aug 2022 08:36:43 +0200 Subject: [PATCH] =?UTF-8?q?#50=20-=20Sur=20ma=20collection=20les=20filtres?= =?UTF-8?q?=20g=C3=A9n=C3=A8rent=20une=20nouvelle=20url=20(#55)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: dbroqua Reviewed-on: https://git.darkou.fr/dbroqua/MusicTopus/pulls/55 --- views/pages/collection.ejs | 78 ++++++++++++++----- .../pages/mon-compte/ma-collection/index.ejs | 69 ++++++++++++---- 2 files changed, 112 insertions(+), 35 deletions(-) diff --git a/views/pages/collection.ejs b/views/pages/collection.ejs index 8ba62cd..d7f4114 100644 --- a/views/pages/collection.ejs +++ b/views/pages/collection.ejs @@ -85,6 +85,12 @@
+
+
+
+ Chargement des données en cours… +
+
{{ 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; diff --git a/views/pages/mon-compte/ma-collection/index.ejs b/views/pages/mon-compte/ma-collection/index.ejs index 54f129a..b54d728 100644 --- a/views/pages/mon-compte/ma-collection/index.ejs +++ b/views/pages/mon-compte/ma-collection/index.ejs @@ -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;