#45 - Ajouter de nouveaux filtres sur la liste

sass/collection.scss

@@ -17,6 +17,7 @@
             }
 
             @include respond-to("small-up") {
+                width: 33%;
                 &:last-child {
                     padding-right: 0;
                 }
@@ -28,6 +29,17 @@
         }
     }
 
+    .showMoreFilters {
+        cursor: pointer;
+
+        .up::before {
+            transform: rotate(90deg);
+        }
+        .down::before {
+            transform: rotate(270deg);
+        }
+    }
+
     .list{
         .title {
             .icon-trash {

src/middleware/Albums.js

@@ -81,6 +81,9 @@ class Albums extends Pages {
             order = "asc",
             artists_sort,
             format,
+            year,
+            genre,
+            style,
             userId: collectionUserId,
         } = this.req.query;
 
@@ -94,6 +97,15 @@ class Albums extends Pages {
         if (format) {
             where["formats.name"] = format;
         }
+        if (year) {
+            where.year = year;
+        }
+        if (genre) {
+            where.genres = genre;
+        }
+        if (style) {
+            where.styles = style;
+        }
 
         if (!this.req.user && !collectionUserId) {
             throw new ErrorEvent(
@@ -199,9 +211,21 @@ class Albums extends Pages {
             "formats.name",
             this.req.user._id
         );
+        const years = await Albums.getAllDistincts("year", this.req.user._id);
+        const genres = await Albums.getAllDistincts(
+            "genres",
+            this.req.user._id
+        );
+        const styles = await Albums.getAllDistincts(
+            "styles",
+            this.req.user._id
+        );
 
         this.setPageContent("artists", artists);
         this.setPageContent("formats", formats);
+        this.setPageContent("years", years);
+        this.setPageContent("genres", genres);
+        this.setPageContent("styles", styles);
         this.setPageTitle("Ma collection");
     }
 
@@ -245,11 +269,17 @@ class Albums extends Pages {
 
         const artists = await Albums.getAllDistincts("artists_sort", userId);
         const formats = await Albums.getAllDistincts("formats.name", userId);
+        const years = await Albums.getAllDistincts("year", userId);
+        const genres = await Albums.getAllDistincts("genres", userId);
+        const styles = await Albums.getAllDistincts("styles", userId);
 
         this.setPageContent("username", user.username);
         this.setPageTitle(`Collection publique de ${user.username}`);
         this.setPageContent("artists", artists);
         this.setPageContent("formats", formats);
+        this.setPageContent("years", years);
+        this.setPageContent("genres", genres);
+        this.setPageContent("styles", styles);
     }
 }
 

views/pages/collection.ejs

@@ -40,6 +40,50 @@
             </select>
         </div>
     </div>
+
+    <div class="filters" v-if="moreFilters">
+        <div class="field">
+            <label for="format">Année</label>
+            <select id="format" v-model="year" @change="changeFilter">
+                <option value="">Toutes</option>
+                <%
+                    for (let i = 0; i < page.years.length; i += 1 ) {
+                        __append(`<option value="${page.years[i]}">${page.years[i]}</option>`);
+                    }
+                %>
+            </select>
+        </div>
+        <div class="field">
+            <label for="genre">Genre</label>
+            <select id="genre" v-model="genre" @change="changeFilter">
+                <option value="">Tous</option>
+                <%
+                    for (let i = 0; i < page.genres.length; i += 1 ) {
+                        __append(`<option value="${page.genres[i]}">${page.genres[i]}</option>`);
+                    }
+                %>
+            </select>
+        </div>
+        <div class="field">
+            <label for="style">Style</label>
+            <select id="style" v-model="style" @change="changeFilter">
+                <option value="">Tous</option>
+                <%
+                    for (let i = 0; i < page.styles.length; i += 1 ) {
+                        __append(`<option value="${page.styles[i]}">${page.styles[i]}</option>`);
+                    }
+                %>
+            </select>
+        </div>
+    </div>
+
+    <span @click="showMoreFilters" class="showMoreFilters">
+        <template v-if="!moreFilters">Voir plus de filtres</template>
+        <template v-if="moreFilters">Voir moins de filtres</template>
+        <i class="icon-left-open down" v-if="!moreFilters"></i>
+        <i class="icon-left-open up" v-if="moreFilters"></i>
+    </span>
+
     <div class="grid grid-cols-1 md:grid-cols-2 list">
         <div class="item"  v-if="!loading" v-for="item in items">
             <span class="title">
@@ -105,6 +149,7 @@
         data() {
             return {
                 loading: false,
+                moreFilters: false,
                 items: [],
                 total: 0,
                 page: 1,
@@ -112,6 +157,9 @@
                 limit: 16,
                 artist: '',
                 format: '',
+                year: '',
+                genre: '',
+                style: '',
                 sortOrder: 'artists_sort-asc',
                 sort: 'artists_sort',
                 order: 'asc',
@@ -132,6 +180,15 @@
                 if ( this.format ) {
                     url += `&format=${this.format}`;
                 }
+                if ( this.year ) {
+                    url += `&year=${this.year}`;
+                }
+                if ( this.genre ) {
+                    url += `&genre=${this.genre.replace('&', '%26')}`;
+                }
+                if ( this.style ) {
+                    url += `&style=${this.style.replace('&', '%26')}`;
+                }
 
                 axios.get(url)
                     .then( response => {
@@ -179,6 +236,9 @@
 
                 this.fetch();
             },
+            showMoreFilters() {
+                this.moreFilters = !this.moreFilters;
+            }
         }
   }).mount('#app');
 </script>

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

@@ -6,6 +6,7 @@
     <a :href="shareLink" v-if="isPublicCollection" target="_blank">
         <i class="icon-share"></i> Voir ma collection partagée
     </a>
+
     <div class="filters">
         <div class="field">
             <label for="artist">Artiste</label>
@@ -43,6 +44,50 @@
             </select>
         </div>
     </div>
+
+    <div class="filters" v-if="moreFilters">
+        <div class="field">
+            <label for="format">Année</label>
+            <select id="format" v-model="year" @change="changeFilter">
+                <option value="">Toutes</option>
+                <%
+                    for (let i = 0; i < page.years.length; i += 1 ) {
+                        __append(`<option value="${page.years[i]}">${page.years[i]}</option>`);
+                    }
+                %>
+            </select>
+        </div>
+        <div class="field">
+            <label for="genre">Genre</label>
+            <select id="genre" v-model="genre" @change="changeFilter">
+                <option value="">Tous</option>
+                <%
+                    for (let i = 0; i < page.genres.length; i += 1 ) {
+                        __append(`<option value="${page.genres[i]}">${page.genres[i]}</option>`);
+                    }
+                %>
+            </select>
+        </div>
+        <div class="field">
+            <label for="style">Style</label>
+            <select id="style" v-model="style" @change="changeFilter">
+                <option value="">Tous</option>
+                <%
+                    for (let i = 0; i < page.styles.length; i += 1 ) {
+                        __append(`<option value="${page.styles[i]}">${page.styles[i]}</option>`);
+                    }
+                %>
+            </select>
+        </div>
+    </div>
+
+    <span @click="showMoreFilters" class="showMoreFilters">
+        <template v-if="!moreFilters">Voir plus de filtres</template>
+        <template v-if="moreFilters">Voir moins de filtres</template>
+        <i class="icon-left-open down" v-if="!moreFilters"></i>
+        <i class="icon-left-open up" v-if="moreFilters"></i>
+    </span>
+
     <div class="grid grid-cols-1 md:grid-cols-2 list hover">
         <div class="item" v-if="!loading" v-for="item in items">
             <span class="title">
@@ -154,6 +199,7 @@
         data() {
             return {
                 loading: false,
+                moreFilters: false,
                 items: [],
                 total: 0,
                 page: 1,
@@ -161,6 +207,9 @@
                 limit: 16,
                 artist: '',
                 format: '',
+                year: '',
+                genre: '',
+                style: '',
                 sortOrder: 'artists_sort-asc',
                 sort: 'artists_sort',
                 order: 'asc',
@@ -185,6 +234,15 @@
                 if ( this.format ) {
                     url += `&format=${this.format}`;
                 }
+                if ( this.year ) {
+                    url += `&year=${this.year}`;
+                }
+                if ( this.genre ) {
+                    url += `&genre=${this.genre.replace('&', '%26')}`;
+                }
+                if ( this.style ) {
+                    url += `&style=${this.style.replace('&', '%26')}`;
+                }
 
                 axios.get(url)
                     .then( response => {
@@ -232,6 +290,9 @@
 
                 this.fetch();
             },
+            showMoreFilters() {
+                this.moreFilters = !this.moreFilters;
+            },
             toggleModal() {
                 this.showModalDelete = !this.showModalDelete;
             },
@@ -273,7 +334,7 @@
                     .finally(() => {
                         this.toggleModalShare();
                     });
-            }
+            },
         }
   }).mount('#app');
 </script>