#45 - Ajouter de nouveaux filtres sur la liste
This commit is contained in:
parent
f5196edfb8
commit
9dd7a35f22
4 changed files with 164 additions and 1 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue