#77 - Je suis capable de trier ma collecion par date d'ajout
This commit is contained in:
parent
c1b01ea4c0
commit
663eb586cf
9 changed files with 91 additions and 159 deletions
11
views/components/filters/artist.ejs
Normal file
11
views/components/filters/artist.ejs
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<div class="field">
|
||||||
|
<label for="artist">Artiste</label>
|
||||||
|
<select id="artist" v-model="artist" @change="changeFilter">
|
||||||
|
<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>
|
||||||
11
views/components/filters/format.ejs
Normal file
11
views/components/filters/format.ejs
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<div class="field">
|
||||||
|
<label for="format">Format</label>
|
||||||
|
<select id="format" v-model="format" @change="changeFilter">
|
||||||
|
<option value="">Tous</option>
|
||||||
|
<%
|
||||||
|
for (let i = 0; i < page.formats.length; i += 1 ) {
|
||||||
|
__append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
|
||||||
|
}
|
||||||
|
%>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
12
views/components/filters/genre.ejs
Normal file
12
views/components/filters/genre.ejs
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
|
||||||
|
<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>
|
||||||
18
views/components/filters/index.ejs
Normal file
18
views/components/filters/index.ejs
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<div class="filters">
|
||||||
|
<%- include('./artist') %>
|
||||||
|
<%- include('./format') %>
|
||||||
|
<%- include('./sort') %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filters" v-if="moreFilters">
|
||||||
|
<%- include('./year') %>
|
||||||
|
<%- include('./genre') %>
|
||||||
|
<%- include('./style') %>
|
||||||
|
</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>
|
||||||
15
views/components/filters/sort.ejs
Normal file
15
views/components/filters/sort.ejs
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<div class="field">
|
||||||
|
<label for="sortOrder">Trier par</label>
|
||||||
|
<select id="sortOrder" v-model="sortOrder" @change="changeSort">
|
||||||
|
<option value="artists_sort-asc">Artiste (A-Z)</option>
|
||||||
|
<option value="artists_sort-desc">Artiste (Z-A)</option>
|
||||||
|
<option value="year-asc">Année (1-9)</option>
|
||||||
|
<option value="year-desc">Année (9-1)</option>
|
||||||
|
<option value="country-asc">Pays (A-Z)</option>
|
||||||
|
<option value="country-desc">Pays (Z-A)</option>
|
||||||
|
<option value="formats.name-asc">Format (A-Z)</option>
|
||||||
|
<option value="formats.name-desc">Format (Z-A)</option>
|
||||||
|
<option value="createdAt-asc">Date d'ajout (1-9)</option>
|
||||||
|
<option value="createdAt-desc">Date d'ajout (9-1)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
11
views/components/filters/style.ejs
Normal file
11
views/components/filters/style.ejs
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<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>
|
||||||
11
views/components/filters/year.ejs
Normal file
11
views/components/filters/year.ejs
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<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>
|
||||||
|
|
@ -3,86 +3,7 @@
|
||||||
Collection de <%= page.username %>
|
Collection de <%= page.username %>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<div class="filters">
|
<%- include('../components/filters/index') %>
|
||||||
<div class="field">
|
|
||||||
<label for="artist">Artiste</label>
|
|
||||||
<select id="artist" v-model="artist" @change="changeFilter">
|
|
||||||
<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 class="field">
|
|
||||||
<label for="format">Format</label>
|
|
||||||
<select id="format" v-model="format" @change="changeFilter">
|
|
||||||
<option value="">Tous</option>
|
|
||||||
<%
|
|
||||||
for (let i = 0; i < page.formats.length; i += 1 ) {
|
|
||||||
__append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
|
|
||||||
}
|
|
||||||
%>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<label for="sortOrder">Trier par</label>
|
|
||||||
<select id="sortOrder" v-model="sortOrder" @change="changeSort">
|
|
||||||
<option value="artists_sort-asc">Artiste (A-Z)</option>
|
|
||||||
<option value="artists_sort-desc">Artiste (Z-A)</option>
|
|
||||||
<option value="year-asc">Année (A-Z)</option>
|
|
||||||
<option value="year-desc">Année (Z-A)</option>
|
|
||||||
<option value="country-asc">Pays (A-Z)</option>
|
|
||||||
<option value="country-desc">Pays (Z-A)</option>
|
|
||||||
<option value="formats.name-asc">Format (A-Z)</option>
|
|
||||||
<option value="formats.name-desc">Format (Z-A)</option>
|
|
||||||
</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="grid grid-cols-1 md:grid-cols-2 list">
|
||||||
<div class="loader" v-if="loading">
|
<div class="loader" v-if="loading">
|
||||||
|
|
|
||||||
|
|
@ -7,86 +7,8 @@
|
||||||
<i class="icon-share"></i> Voir ma collection partagée
|
<i class="icon-share"></i> Voir ma collection partagée
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div class="filters">
|
|
||||||
<div class="field">
|
|
||||||
<label for="artist">Artiste</label>
|
|
||||||
<select id="artist" v-model="artist" @change="changeFilter">
|
|
||||||
<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 class="field">
|
|
||||||
<label for="format">Format</label>
|
|
||||||
<select id="format" v-model="format" @change="changeFilter">
|
|
||||||
<option value="">Tous</option>
|
|
||||||
<%
|
|
||||||
for (let i = 0; i < page.formats.length; i += 1 ) {
|
|
||||||
__append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
|
|
||||||
}
|
|
||||||
%>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<label for="sortOrder">Trier par</label>
|
|
||||||
<select id="sortOrder" v-model="sortOrder" @change="changeSort">
|
|
||||||
<option value="artists_sort-asc">Artiste (A-Z)</option>
|
|
||||||
<option value="artists_sort-desc">Artiste (Z-A)</option>
|
|
||||||
<option value="year-asc">Année (A-Z)</option>
|
|
||||||
<option value="year-desc">Année (Z-A)</option>
|
|
||||||
<option value="country-asc">Pays (A-Z)</option>
|
|
||||||
<option value="country-desc">Pays (Z-A)</option>
|
|
||||||
<option value="formats.name-asc">Format (A-Z)</option>
|
|
||||||
<option value="formats.name-desc">Format (Z-A)</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filters" v-if="moreFilters">
|
<%- include('../../../components/filters/index') %>
|
||||||
<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="grid grid-cols-1 md:grid-cols-2 list hover">
|
||||||
<div class="loader" v-if="loading">
|
<div class="loader" v-if="loading">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue