#3

public/font/icon.svg

@@ -20,6 +20,10 @@
 
 <glyph glyph-name="eye" unicode="&#xe806;" d="M929 314q-85 132-213 197 34-58 34-125 0-103-73-177t-177-73-177 73-73 177q0 67 34 125-128-65-213-197 75-114 187-182t242-68 243 68 186 182z m-402 215q0 11-8 19t-19 7q-70 0-120-50t-50-119q0-11 8-19t19-8 19 8 8 19q0 48 34 82t82 34q11 0 19 8t8 19z m473-215q0-19-11-38-78-129-210-206t-279-77-279 77-210 206q-11 19-11 38t11 39q78 128 210 205t279 78 279-78 210-205q11-20 11-39z" horiz-adv-x="1000" />
 
+<glyph glyph-name="left-open" unicode="&#xe807;" d="M654 682l-297-296 297-297q10-10 10-25t-10-25l-93-93q-11-10-25-10t-25 10l-414 415q-11 10-11 25t11 25l414 414q10 11 25 11t25-11l93-93q10-10 10-25t-10-25z" horiz-adv-x="714.3" />
+
+<glyph glyph-name="right-open" unicode="&#xe808;" d="M618 361l-414-415q-11-10-25-10t-25 10l-93 93q-11 11-11 25t11 25l296 297-296 296q-11 11-11 25t11 25l93 93q10 11 25 11t25-11l414-414q10-11 10-25t-10-25z" horiz-adv-x="714.3" />
+
 <glyph glyph-name="spin" unicode="&#xe839;" d="M855 9c-189-190-520-172-705 13-190 190-200 494-28 695 11 13 21 26 35 34 36 23 85 18 117-13 30-31 35-76 16-112-5-9-9-15-16-22-140-151-145-379-8-516 153-153 407-121 542 34 106 122 142 297 77 451-83 198-305 291-510 222l0 1c236 82 492-24 588-252 71-167 37-355-72-493-11-15-23-29-36-42z" horiz-adv-x="1000" />
 
 <glyph glyph-name="link-ext" unicode="&#xf08e;" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" />

public/js/main.js

@@ -1,7 +1,7 @@
 /**
-             * Fonction permettant d'afficher un message dans un toastr
+ * Fonction permettant d'afficher un message dans un toastr
-             * @param {String} message
+ * @param {String} message
-             */
+ */
  function showToastr(message) {
     let x = document.getElementById("toastr");
     if ( message ) {
@@ -124,7 +124,6 @@ document.addEventListener('DOMContentLoaded', () => {
     if ( currentThemeIsDark === 'false' && window.matchMedia ) {
         currentThemeIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     }
-    console.log('currentThemeIsDark:', currentThemeIsDark);
     switchTheme({target: {checked: currentThemeIsDark === 'dark'}});
     toggleSwitch.checked = currentThemeIsDark === 'dark';
 });

sass/global.scss

@@ -1,5 +1,6 @@
 html {
     min-height: 100vh;
+    scroll-behavior: smooth;
 
     body {
         background-color: var(--bg-color);
@@ -70,3 +71,15 @@ html {
 .is-hidden {
     display: none;
 }
+
+.ml-4 {
+    margin-left: 1rem;
+}
+
+.sm-hidden {
+    display: none;
+
+    @include respond-to("small-up") {
+        display: initial;
+    }
+}

sass/icons.scss

@@ -39,6 +39,8 @@
 .icon-link:before { content: '\e804'; } /* '' */
 .icon-heart:before { content: '\e805'; } /* '' */
 .icon-eye:before { content: '\e806'; } /* '' */
+.icon-left-open:before { content: '\e807'; } /* '' */
+.icon-right-open:before { content: '\e808'; } /* '' */
 .icon-spin:before { content: '\e839'; } /* '' */
 .icon-link-ext:before { content: '\f08e'; } /* '' */
 .icon-sun:before { content: '\f185'; } /* '' */

sass/index.scss

@@ -44,3 +44,4 @@
 @import './home';
 @import './ajouter-un-album';
 @import './ma-collection';
+@import './ma-collection-details';

sass/ma-collection-details.scss

@@ -0,0 +1,55 @@
+.ma-collection-details {
+    .galerie {
+        display: flex;
+        flex-wrap: wrap;
+
+        div {
+            width: 80px;
+            height: 80px;
+            margin: 0.25rem;
+            padding: 0.25rem;
+            border: 2px solid var(--font-color);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+
+            img {
+                max-width: 90%;
+            }
+        }
+    }
+
+    .modal {
+        button.close {
+            height: 36px;
+            max-height: 36px;
+            max-width: 36px;
+            min-height: 36px;
+            min-width: 36px;
+            width: 36px;
+            position: absolute;
+            background-color: rgba(10,10,10,.6);
+            right: 12px;
+            top: 12px;
+        }
+
+        .navigation {
+            position: absolute;
+            top: 50%;
+            cursor: pointer;
+            z-index: 10;
+
+            &.previous {
+                left: 12px;
+            }
+            &.next {
+                right: 12px;
+            }
+            i {
+                font-size: 2rem;
+                color: $nord4;
+            }
+        }
+    }
+}

sass/modal.scss

@@ -24,6 +24,47 @@
         top: 0;
     }
 
+    button.close {
+        user-select: none;
+        background-color: rgba(10,10,10,.2);
+        border: none;
+        border-radius: 9999px;
+        cursor: pointer;
+        pointer-events: auto;
+        display: inline-block;
+        flex-grow: 0;
+        flex-shrink: 0;
+        font-size: 0;
+        height: 20px;
+        max-height: 20px;
+        max-width: 20px;
+        min-height: 20px;
+        min-width: 20px;
+        outline: none;
+        position: relative;
+        width: 20px;
+
+        &::before,
+        &::after {
+            background-color: var(--default-color);
+            content: "";
+            display: block;
+            left: 50%;
+            position: absolute;
+            top: 50%;
+            transform: translateX(-50%) translateY(-50%) rotate(45deg);
+            transform-origin: center center;
+        }
+        &::before {
+            height: 2px;
+            width: 50%;
+        }
+        &::after {
+            height: 50%;
+            width: 2px;
+        }
+    }
+
     .modal-card {
         position: relative;
         width: 300px;
@@ -62,47 +103,6 @@
             justify-content: space-between;
             font-size: 1.5rem;
             @include transition() {}
-
-            button {
-                user-select: none;
-                background-color: rgba(10,10,10,.2);
-                border: none;
-                border-radius: 9999px;
-                cursor: pointer;
-                pointer-events: auto;
-                display: inline-block;
-                flex-grow: 0;
-                flex-shrink: 0;
-                font-size: 0;
-                height: 20px;
-                max-height: 20px;
-                max-width: 20px;
-                min-height: 20px;
-                min-width: 20px;
-                outline: none;
-                position: relative;
-                width: 20px;
-
-                &::before,
-                &::after {
-                    background-color: var(--default-color);
-                    content: "";
-                    display: block;
-                    left: 50%;
-                    position: absolute;
-                    top: 50%;
-                    transform: translateX(-50%) translateY(-50%) rotate(45deg);
-                    transform-origin: center center;
-                }
-                &::before {
-                    height: 2px;
-                    width: 50%;
-                }
-                &::after {
-                    height: 50%;
-                    width: 2px;
-                }
-            }
         }
         section {
             background-color: var(--default-color);

src/middleware/Albums.js

@@ -137,6 +137,20 @@ class Albums extends Pages {
         this.setPageContent("artists", artists);
         this.setPageContent("formats", formats);
     }
+
+    /**
+     * Méthode permettant d'afficher le détails d'un album
+     */
+    async loadItem() {
+        const { itemId: _id } = this.req.params;
+        const { _id: User } = this.req.user;
+        const item = await AlbumsModel.findOne({
+            _id,
+            User,
+        });
+
+        this.setPageContent("item", item);
+    }
 }
 
 export default Albums;

src/routes/index.js

@@ -107,6 +107,20 @@ router
         }
     });
 
+router
+    .route("/ma-collection/:itemId")
+    .get(ensureLoggedIn("/connexion"), async (req, res, next) => {
+        try {
+            const page = new Albums(req, "mon-compte/ma-collection/details");
+
+            await page.loadItem();
+
+            render(res, page);
+        } catch (err) {
+            next(err);
+        }
+    });
+
 router.route("/nous-contacter").get(async (req, res, next) => {
     try {
         const page = new Pages(req, "nous-contacter");

views/pages/ajouter-un-album.ejs

@@ -52,12 +52,12 @@
         </div>
     </div>
 
-    <div class="modal" :class="{'is-visible': modalIsVisible}" id="addAlbum">
+    <div class="modal" :class="{'is-visible': modalIsVisible}">
         <div class="modal-background"></div>
         <div class="modal-card">
             <header>
                 <div>{{details.artists_sort}} - {{details.title}}</div>
-                <button aria-label="Fermer" @click="toggleModal"></button>
+                <button aria-label="Fermer" class="close" @click="toggleModal"></button>
             </header>
             <section>
                 <div class="grid grid-cols-2 gap-16">
@@ -217,8 +217,6 @@
                 this.modalIsVisible = !this.modalIsVisible;
             },
             loadDetails(discogsId) {
-                console.log('discogsId:', discogsId);
-
                 axios.get(`/api/v1/search/${discogsId}`)
                     .then( response => {
                         const {
@@ -245,5 +243,5 @@
                     });
             },
         }
-    }).mount('#app')
+    }).mount('#app');
   </script>

views/pages/composants.ejs

@@ -230,6 +230,8 @@
     <i class="icon-moon">.icon-moon</i>
     <i class="icon-trash">.icon-trash</i>
     <i class="icon-blind">.icon-blind</i>
+    <i class="icon-left-open">.icon-left-open</i>
+    <i class="icon-right-open">.icon-right-open</i>
 
     <h2 id="listes">Les listes</h2>
     <div class="grid grid-cols-1 md:grid-cols-2 list">

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

@@ -40,12 +40,12 @@
     <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">
-                {{ item.artists_sort}} - {{ item.title }}
+                <a :href="'/ma-collection/' + item._id">{{ item.artists_sort}} - {{ item.title }}</a>
                 <i class="icon-trash" @click="showConfirmDelete(item._id)"></i>
             </span>
             <div class="grid grid-cols-2 md:grid-cols-4">
                 <div>
-                    <img :src="item.thumb" :alt="item.title" />
+                    <a :href="'/ma-collection/' + item._id"><img :src="item.thumb" :alt="item.title" /></a>
                 </div>
                 <div class="md:col-span-3">
                     <span><strong>Année :</strong> {{ item.year }}</span>
@@ -175,7 +175,6 @@
                 this.fetch();
             },
             changeSort() {
-                console.log('TEST:', this.sortOrder);
                 const [sort,order] = this.sortOrder.split('-');
                 this.sort = sort;
                 this.order = order;
@@ -208,5 +207,5 @@
                     });
             }
         }
-  }).mount('#app')
+  }).mount('#app');
 </script>

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

@@ -0,0 +1,260 @@
+<main class="layout-maxed ma-collection-details" id="app">
+
+    <h1>{{item.artists_sort}} - {{item.title}}</h1>
+    <div class="grid md:grid-cols-3 gap-16">
+        <div class="text-center">
+            <img :src="item.thumb %>" :alt="`Miniature pour l'album ${item.title}`" />
+        </div>
+        <div class="md:col-span-2 text-center galerie">
+            <div v-for="(image, index) in item.images" :data-index="index" @click.stop.prevent="showGallery">
+                <img :src="image.uri150" :alt="`Miniature de type ${image.type}`" />
+            </div>
+        </div>
+    </div>
+    <hr />
+    <div class="grid md:grid-cols-3 gap-16">
+        <div>
+            <template v-for="album in tracklist">
+                <strong v-if="album.title">{{album.title}}</strong>
+                <ol class="ml-4">
+                    <li v-for="track in album.tracks">
+                        {{ track.title }} ({{track.duration}})
+                        <ul v-if="track.extraartists && track.extraartists.length > 0" class="sm-hidden ml-4">
+                            <li v-for="extra in track.extraartists">
+                                <small>{{extra.role}} : {{extra.name}}</small>
+                            </li>
+                        </ul>
+                    </li>
+                </ol>
+            </template>
+        </div>
+        <div class="md:col-span-2">
+            <div class="grid grid-cols-2 gap-10">
+                <div>
+                    <strong>Genres</strong>
+                    <br />
+                    <template v-for="(genre, index) in item.genres">
+                        {{genre}}<template v-if="index < item.genres.length - 1">, </template>
+                    </template>
+                </div>
+                <div>
+                    <strong>Styles</strong>
+                    <br />
+                    <span v-for="(style, index) in item.styles">
+                        {{style}}<template v-if="index < item.styles.length - 1">, </template>
+                    </span>
+                </div>
+            </div>
+            <hr />
+            <div class="grid grid-cols-3 gap-10">
+                <div>
+                    <strong>Pays</strong>
+                    <br />
+                    <span>{{item.country}}</span>
+                </div>
+                <div>
+                    <strong>Année</strong>
+                    <br />
+                    <span>{{item.year}}</span>
+                </div>
+                <div>
+                    <strong>Date de sortie</strong>
+                    <br />
+                    <span>{{item.released}}</span>
+                </div>
+            </div>
+            <hr />
+            <div class="grid gap-10">
+                <div>
+                    <strong>Format</strong>
+                    <ul class="ml-4">
+                        <li v-for="(format) in item.formats">
+                            {{format.name}}
+                            (<span v-for="(description, index) in format.descriptions">
+                                {{description}}<template v-if="index < format.descriptions.length - 1">, </template>
+                            </span>)
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <hr />
+            <div class="grid grid-cols-2 gap-10">
+                <div>
+                    <strong id="identifiers">Codes barres</strong>
+                    <ol class="ml-4">
+                        <li v-for="identifier in identifiers">
+                            {{identifier.value}} ({{identifier.type}})
+                        </li>
+                    </ol>
+                    <template v-if="item.identifiers.length > identifiersPreviewLength">
+                        <button type="button" class="button is-link" v-if="identifiersMode === 'preview'" @click="showAllIdentifiers">
+                            Voir la suite
+                        </button>
+                        <button type="button" class="button is-link" v-if="identifiersMode === 'all'" @click="showLessIdentifiers">
+                            Voir moins
+                        </button>
+                    </template>
+                </div>
+                <div>
+                    <strong>Label</strong>
+                    <br />
+                    <template v-for="label in item.labels">
+                        {{label.name}} {{label.catno}}
+                        <br />
+                    </template>
+                    <hr />
+                    <strong>Sociétés</strong>
+                    <br />
+                    <template v-for="company in item.companies">
+                        <strong>{{company.entity_type_name}}</strong> : {{company.name}}
+                        <br />
+                    </template>
+                </div>
+            </div>
+            <!-- <hr />
+            <div class="grid gap-10">
+                <div>
+                    <strong>Note</strong>
+                    <br />
+                    <span>{{item.notes}}</span>
+                </div>
+            </div> -->
+            <hr />
+            <div class="grid gap-10">
+                <div>
+                    <strong>Vidéos</strong>
+                    <dl>
+                        <template v-for="video in item.videos">
+                            <dt>
+                                <a :href="video.uri" target="_blank" rel="noopener noreferrer">{{video.title}} ({{video.duration}})</a>
+                            </dt>
+                            <dd>
+                                {{video.description}}
+                            </dd>
+                        </template>
+                    </dl>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal" :class="{'is-visible': modalIsVisible}">
+        <div class="modal-background"></div>
+        <button type="button" aria-label="Fermer" class="close" @click="toggleModal"></button>
+        <button type="button" aria-label="Image précédente" class="navigation previous" @click="previous">
+            <i class="icon-left-open"></i>
+        </button>
+        <button type="button" aria-label="Image suivante" class="navigation next" @click="next">
+            <i class="icon-right-open"></i>
+        </button>
+        <div class="modal-card">
+            <img :src="preview" />
+        </div>
+    </div>
+</main>
+
+<script>
+    Vue.createApp({
+        data() {
+            return {
+                item: <%- JSON.stringify(page.item) %>,
+                tracklist: [],
+                identifiers: [],
+                modalIsVisible: false,
+                identifiersMode: 'preview',
+                identifiersPreviewLength: 16,
+                preview: null,
+                index: null,
+            }
+        },
+        created() {
+            this.setTrackList();            
+            this.setIdentifiers();
+        },
+        methods: {
+            setIdentifiers() {
+                this.identifiers = [];
+
+                let max = this.identifiersMode == 'preview' && this.item.identifiers.length > this.identifiersPreviewLength ? this.identifiersPreviewLength : this.item.identifiers.length;
+
+                for ( let i = 0 ; i < max ; i += 1 ) {
+                    this.identifiers.push(this.item.identifiers[i]);
+                }
+            },
+            setTrackList() {
+                let subTrack = {
+                type: null,
+                title: null,
+                tracks: [],
+            };
+            for (let i = 0 ; i < this.item.tracklist.length ; i += 1 ) {
+                const {
+                    type_,
+                    title,
+                    position,
+                    duration,
+                    extraartists,
+                } = this.item.tracklist[i];
+
+                if ( type_ === 'heading' ) {
+                    if ( subTrack.type ) {
+                        this.tracklist.push(subTrack);
+                        subTrack = {
+                            type: null,
+                            title: null,
+                            tracks: [],
+                        };
+                    }
+
+                    subTrack.type = type_;
+                    subTrack.title = title;
+                } else {
+                    subTrack.tracks.push({
+                        title,
+                        position,
+                        duration,
+                        extraartists
+                    });
+                }
+            }
+            this.tracklist.push(subTrack);
+            },
+            setImage() {
+                this.preview = this.item.images[this.index].uri;
+            },
+            showGallery(event) {
+                const item = event.target.tagName === 'IMG' ? event.target.parentElement : event.target;
+                
+                const {
+                    index,
+                } = item.dataset;
+
+                this.index = Number(index);
+                this.modalIsVisible = true;
+
+                this.setImage();
+            },
+            toggleModal() {
+                this.modalIsVisible = !this.modalIsVisible;
+            },
+            previous() {
+                this.index = this.index > 0 ? this.index - 1 : this.item.images.length -1;
+                this.setImage();
+            },
+            next() {
+                this.index = (this.index +1) === this.item.images.length ? 0 : this.index + 1;
+                this.setImage();
+            },
+            showAllIdentifiers() {
+                this.identifiersMode = 'all';
+                this.setIdentifiers();
+            },
+            showLessIdentifiers() {
+                this.identifiersMode = 'preview';
+                this.setIdentifiers();
+
+                document.querySelector('#identifiers').scrollIntoView({ behavior: 'smooth' });
+            }
+        },
+    }).mount('#app');
+</script>