diff --git a/sass/collection.scss b/sass/collection.scss
index 6412fe1..88f94b5 100644
--- a/sass/collection.scss
+++ b/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 {
diff --git a/src/middleware/Albums.js b/src/middleware/Albums.js
index 7dd5ae6..2076b32 100644
--- a/src/middleware/Albums.js
+++ b/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);
}
}
diff --git a/views/pages/collection.ejs b/views/pages/collection.ejs
index da22489..a0530f7 100644
--- a/views/pages/collection.ejs
+++ b/views/pages/collection.ejs
@@ -40,6 +40,50 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Voir plus de filtres
+ Voir moins de filtres
+
+
+
+
@@ -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');
diff --git a/views/pages/mon-compte/ma-collection/index.ejs b/views/pages/mon-compte/ma-collection/index.ejs
index 9dd4bbd..eb21c37 100644
--- a/views/pages/mon-compte/ma-collection/index.ejs
+++ b/views/pages/mon-compte/ma-collection/index.ejs
@@ -6,6 +6,7 @@
Voir ma collection partagée
+
@@ -43,6 +44,50 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Voir plus de filtres
+ Voir moins de filtres
+
+
+
+
@@ -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');