Added filter and sort on my collection

src/middleware/Albums.js

@@ -83,23 +83,48 @@ class Albums extends Pages {
         return album.save();
     }
 
+    static async getMyArtists(req) {
+        const artists = await AlbumsModel.find(
+            {
+                user: req.user._id,
+            },
+            [],
+            {
+                sort: {
+                    artists_sort: 1,
+                },
+            }
+        ).distinct("artists_sort");
+
+        return artists;
+    }
+
     async getAll() {
         const {
             page = 1,
             limit = 4,
             sort = "artists_sort",
             order = "asc",
+            artists_sort,
         } = this.req.query;
 
         const skip = (page - 1) * limit;
 
+        const where = {};
+
+        if (artists_sort) {
+            where.artists_sort = artists_sort;
+        }
+
         const count = await AlbumsModel.count({
             user: this.req.user._id,
+            ...where,
         });
 
         const rows = await AlbumsModel.find(
             {
                 user: this.req.user._id,
+                ...where,
             },
             [],
             {
@@ -116,6 +141,12 @@ class Albums extends Pages {
             count,
         };
     }
+
+    async loadMyCollection() {
+        const artists = await Albums.getMyArtists(this.req);
+
+        this.setPageContent("artists", artists);
+    }
 }
 
 export default Albums;

src/routes/index.js

@@ -4,6 +4,7 @@ import { ensureLoggedIn } from "connect-ensure-login";
 
 import Pages from "../middleware/Pages";
 import Auth from "../middleware/Auth";
+import Albums from "../middleware/Albums";
 
 import render from "../libs/format";
 
@@ -76,7 +77,9 @@ router
     .route("/ma-collection")
     .get(ensureLoggedIn("/connexion"), async (req, res, next) => {
         try {
-            const page = new Pages(req, "mon-compte/ma-collection");
+            const page = new Albums(req, "mon-compte/ma-collection");
+
+            await page.loadMyCollection();
 
             render(res, page);
         } catch (err) {

views/pages/mon-compte/ma-collection.ejs

@@ -3,10 +3,53 @@
         <thead>
             <tr>
                 <th>Pochette</th>
-                <th>Artiste</th>
+                <th>
+                    <div class="field">
+                        <label class="label">
+                            <span class="icon-text">
+                                <span class="icon has-text-info">
+                                    <i v-if="sort !== 'artists_sort'" class="fa-solid fa-sort" @click="changeSort('artists_sort', 'asc')"></i>
+                                    <i v-if="sort === 'artists_sort' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('artists_sort', 'asc')"></i>
+                                    <i v-if="sort === 'artists_sort' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('artists_sort', 'desc')"></i>
+                                </span>
+                                <span>Artiste</span>
+                            </span>
+                        </label>
+                        <div class="control">
+                            <div class="select is-small">
+                                <select v-model="artist" @change="fetch">
+                                    <option value="">Tous</option>
+                                    <% 
+                                        for (let i = 0; i < page.artists.length; i += 1 ) {
+                                            __append(`<option value="${page.artists[i]}">${page.artists[i]}</option>`);
+                                        }
+                                    %>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                </th>
                 <th>Titre</th>
-                <th>Année</th>
+                <th>
-                <th>Pays</th>
+                    <span class="icon-text">
+                        <span class="icon has-text-info">
+                            <i v-if="sort !== 'year'" class="fa-solid fa-sort" @click="changeSort('year', 'asc')"></i>
+                            <i v-if="sort === 'year' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('year', 'asc')"></i>
+                            <i v-if="sort === 'year' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('year', 'desc')"></i>
+                        </span>
+                        <span>Année</span>
+                    </span>
+                </th>
+                <th>
+                    <span class="icon-text">
+                        <span class="icon has-text-info">
+                            <i v-if="sort !== 'country'" class="fa-solid fa-sort" @click="changeSort('country', 'asc')"></i>
+                            <i v-if="sort === 'country' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('country', 'asc')"></i>
+                            <i v-if="sort === 'country' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('country', 'desc')"></i>
+                        </span>
+                        <span>Pays</span>
+                    </span>
+                </th>
                 <th>Format</th>
                 <th>Genres</th>
                 <th>Styles</th>
@@ -85,6 +128,9 @@
                 page: 1,
                 totalPages: 1,
                 limit: 5,
+                artist: '',
+                sort: 'artists_sort',
+                order: 'asc',
             }
         },
         created() {
@@ -93,14 +139,13 @@
         methods: {
             fetch() {
                 this.loading = true;
-        
+
-                axios.get(`/api/v1/albums?page=${this.page}&limit=${this.limit}`)
+                axios.get(`/api/v1/albums?page=${this.page}&limit=${this.limit}&artists_sort=${this.artist}&sort=${this.sort}&order=${this.order}`)
                     .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);
 
-                        console.log('total:', this.total, (this.page * this.limit));
                     })
                     .catch((err) => {
                         showToastr(err.response?.data?.message || "Impossible de charger votre collection");
@@ -127,7 +172,14 @@
                 this.page = page;
 
                 this.fetch();
-            }
+            },
+            changeSort(sort, order) {
+                this.sort = sort;
+                this.order = order;
+                this.page = 1;
+
+                this.fetch();
+            },
         }
   }).mount('#app')
 </script>