dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 9 Pull requests Releases 14 Activity

Added filter and sort on my collection

Browse source
This commit is contained in:
Damien Broqua 2022-02-16 09:55:12 +01:00
parent 68fa736a91
commit 99d2507248
3 changed files with 94 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/middleware/Albums.js
View file

@ -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;

5
src/routes/index.js
View file

@ -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) {

66
views/pages/mon-compte/ma-collection.ejs
View file

@ -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>Pays</th>
<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>