1.4.4 (#84)

Fonctionnalités :
- #82 - Utilisateur artists plutôt que artists_sort

Co-authored-by: dbroqua <contact@darkou.fr>
Reviewed-on: #84

javascripts/collection.js

@@ -21,7 +21,7 @@ Vue.createApp({
             showModalDelete: false,
             showModalShare: false,
             // eslint-disable-next-line no-undef
-            shareLink: `${protocol}//${host}/collection/${userId}`,
+            shareLink: `/collection/${userId}`,
             // eslint-disable-next-line no-undef
             isPublicCollection,
             // eslint-disable-next-line no-undef
@@ -32,6 +32,9 @@ Vue.createApp({
         this.fetch();
     },
     methods: {
+        formatParams(param) {
+            return param.replace("&", "%26").replace("+", "%2B");
+        },
         fetch() {
             this.loading = true;
             this.total = 0;
@@ -64,19 +67,19 @@ Vue.createApp({
 
             let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
             if (this.artist) {
-                url += `&artists_sort=${this.artist.replace("&", "%26")}`;
+                url += `&artist=${this.formatParams(this.artist)}`;
             }
             if (this.format) {
-                url += `&format=${this.format.replace("&", "%26")}`;
+                url += `&format=${this.formatParams(this.format)}`;
             }
             if (this.year) {
                 url += `&year=${this.year}`;
             }
             if (this.genre) {
-                url += `&genre=${this.genre.replace("&", "%26")}`;
+                url += `&genre=${this.formatParams(this.genre)}`;
             }
             if (this.style) {
-                url += `&style=${this.style.replace("&", "%26")}`;
+                url += `&style=${this.formatParams(this.style)}`;
             }
 
             axios
@@ -101,19 +104,19 @@ Vue.createApp({
         changeUrl() {
             let url = `?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
             if (this.artist) {
-                url += `&artists_sort=${this.artist.replace("&", "%26")}`;
+                url += `&artists_sort=${this.formatParams(this.artist)}`;
             }
             if (this.format) {
-                url += `&format=${this.format.replace("&", "%26")}`;
+                url += `&format=${this.formatParams(this.format)}`;
             }
             if (this.year) {
                 url += `&year=${this.year}`;
             }
             if (this.genre) {
-                url += `&genre=${this.genre.replace("&", "%26")}`;
+                url += `&genre=${this.formatParams(this.genre)}`;
             }
             if (this.style) {
-                url += `&style=${this.style.replace("&", "%26")}`;
+                url += `&style=${this.formatParams(this.style)}`;
             }
 
             window.location.href = url;
@@ -215,5 +218,20 @@ Vue.createApp({
                     this.toggleModalShare();
                 });
         },
+        renderAlbumTitle(item) {
+            let render = '';
+
+            for ( let i = 0 ; i < item.artists.length ; i += 1 ) {
+                const {
+                    name,
+                    join,
+                } = item.artists[i];
+                render += `${name} ${join ? `${join} ` : ''}`;
+            }
+
+            render += `- ${item.title}`;
+
+            return render;
+        }
     },
 }).mount("#collection");

src/middleware/Albums.js

@@ -80,7 +80,7 @@ class Albums extends Pages {
             exportFormat = "json",
             sort = "artists_sort",
             order = "asc",
-            artists_sort,
+            artist,
             format,
             year,
             genre,
@@ -92,8 +92,8 @@ class Albums extends Pages {
 
         const where = {};
 
-        if (artists_sort) {
-            where.artists_sort = artists_sort;
+        if (artist) {
+            where["artists.name"] = artist;
         }
         if (format) {
             where["formats.name"] = format;
@@ -236,7 +236,7 @@ class Albums extends Pages {
      */
     async loadMyCollection() {
         const artists = await Albums.getAllDistincts(
-            "artists_sort",
+            "artists.name",
             this.req.user._id
         );
         const formats = await Albums.getAllDistincts(
@@ -301,7 +301,7 @@ class Albums extends Pages {
             );
         }
 
-        const artists = await Albums.getAllDistincts("artists_sort", userId);
+        const artists = await Albums.getAllDistincts("artists.name", userId);
         const formats = await Albums.getAllDistincts("formats.name", userId);
         const years = await Albums.getAllDistincts("year", userId);
         const genres = await Albums.getAllDistincts("genres", userId);

views/pages/collection.ejs

@@ -11,9 +11,11 @@
         } %>
     </h1>
     <% if ( pageType === 'private' ) { %>
-        <a :href="shareLink" v-if="isPublicCollection" target="_blank">
-            <i class="icon-share"></i> Voir ma collection partagée
-        </a>
+        <div>
+            <a :href="shareLink" v-if="isPublicCollection" target="_blank">
+                <i class="icon-share"></i> Voir ma collection partagée
+            </a>
+        </div>
     <% } %>
 
     <%- include('../components/filters/index') %>
@@ -28,7 +30,7 @@
         <div class="item" v-if="!loading" v-for="item in items">
             <span class="title">
                 <% if ( pageType === 'private' ) { %>
-                    <a :href="'/ma-collection/' + item._id">{{ item.artists_sort}} - {{ item.title }}</a>
+                    <a :href="'/ma-collection/' + item._id">{{ renderAlbumTitle(item) }}</a>
                     <i class="icon-trash" @click="showConfirmDelete(item._id)"></i>
                 <% } else { %>
                     {{ item.artists_sort}} - {{ item.title }}
@@ -72,6 +74,9 @@
     </div>
     <nav class="pagination" role="navigation" aria-label="Pagination">
         <ul class="pagination-list">
+            <li v-if="page > 1">
+                <a class="pagination-link" @click="goTo(1)" aria-label="Aller à la première page">&laquo;</a>
+            </li>
             <template v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
                 <template v-if="p < 2 || p > (totalPages - 1) || (Number(page) - 1) <= p && Number(page) + 1 >= p">
                     <li>
@@ -84,6 +89,9 @@
                     </li>
                 </template>
             </template>
+            <li v-if="page < totalPages">
+                <a class="pagination-link" @click="goTo(totalPages)" aria-label="Aller à la derière page">&raquo;</a>
+            </li>
         </ul>
     </nav>
 

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

@@ -1,7 +1,11 @@
 <main class="layout-maxed ma-collection-details" id="ma-collection-details" v-cloak @keyup="changeImage">
 
     <h1>
-        <a :href="`/ma-collection?page=1&limit=16&sort=year&order=asc&artists_sort=${item.artists_sort}`">{{item.artists_sort}}</a> - {{item.title}}
+        <template v-for="artist in item.artists">
+            <a :href="`/ma-collection?page=1&limit=16&sort=year&order=asc&artist=${artist.name}`">{{artist.name}}</a>
+            <template v-if="artist.join">&nbsp;{{artist.join}}&nbsp;</template>
+        </template>
+        - {{item.title}}
         <i class="icon-trash" title="Supprimer cette fiche" @click="showConfirmDelete()"></i>
         <i class="icon-refresh" title="Mettre à jour les données de cette fiche" @click="updateItem()"></i>
     </h1>