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

Co-authored-by: dbroqua <contact@darkou.fr>
Reviewed-on: #55

views/pages/collection.ejs

@@ -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)
+                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) {
                 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;

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)
+                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) {
                 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;