#76 - Avoir plus de détails sur le support physique sur la modale d'ajout

javascripts/mon-compte/ma-collection/details.js

@@ -38,14 +38,21 @@ if (typeof item !== "undefined") {
                 }
             },
             setTrackList() {
+                this.tracklist = [];
                 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];
+                    const {
+                        type_,
+                        title,
+                        position,
+                        duration,
+                        artists,
+                        extraartists,
+                    } = this.item.tracklist[i];
 
                     if (type_ === "heading") {
                         if (subTrack.type) {
@@ -65,6 +72,7 @@ if (typeof item !== "undefined") {
                             position,
                             duration,
                             extraartists,
+                            artists,
                         });
                     }
                 }

views/pages/ajouter-un-album.ejs

@@ -1,7 +1,7 @@
 <main class="layout-maxed ajouter-un-album" id="ajouter-album">
     <h1>Ajouter un album</h1>
     <form @submit="search">
-        <div class="grid sm:grid-cols-2">
+        <div class="grid grid-cols-1 md:grid-cols-2">
             <div>
                 <label for="q">Nom de l'album ou code barre</label>
                 <div class="field has-addons">
@@ -87,7 +87,14 @@
                             <hr />
                         </div>
                         <ol class="ml-4">
-                            <li v-for="track in details.tracklist">{{ track.title }} ({{track.duration}})</li>
+                            <li v-for="track in details.tracklist">
+                                {{ track.title }} ({{track.duration}})
+                                <ul v-if="track.artists && track.artists.length > 0" class="sm-hidden">
+                                    <li v-for="extra in track.artists" class=" ml-4">
+                                        <small>{{extra.role}} : {{extra.name}}</small>
+                                    </li>
+                                </ul>
+                            </li>
                         </ol>
                     </div>
                     <div>
@@ -129,10 +136,19 @@
                         <div class="grid grid-cols-2 gap-10">
                             <div>
                                 <strong>Format</strong>
-                                <br />
-                                <span v-for="(format, index) in details.formats">
-                                    {{format.name}}<template v-if="index < details.formats.length - 1">, </template>
-                                </span>
+                                <ul class="ml-4">
+                                    <li v-for="(format) in details.formats">
+                                        {{format.name}}
+                                        <template v-if="format.text">
+                                            - <i>{{format.text}}</i>
+                                        </template>
+                                        <template v-if="format.descriptions && format.descriptions.length > 0">
+                                        (<span v-for="(description, index) in format.descriptions">
+                                            {{description}}<template v-if="index < format.descriptions.length - 1">, </template>
+                                        </span>)
+                                        </template>
+                                    </li>
+                                </ul>
                             </div>
                         </div>
                         <hr />

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

@@ -23,6 +23,11 @@
                 <ul>
                     <li v-for="(track, index) in album.tracks" class="ml-4">
                         {{track.position || (index+1)}} - {{ track.title }} <template v-if="track.duration">({{track.duration}})</template>
+                        <ul v-if="track.artists && track.artists.length > 0" class="sm-hidden">
+                            <li v-for="extra in track.artists" class=" ml-4">
+                                <small>{{extra.name}}</small>
+                            </li>
+                        </ul>
                         <ul v-if="track.extraartists && track.extraartists.length > 0" class="sm-hidden">
                             <li v-for="extra in track.extraartists" class=" ml-4">
                                 <small>{{extra.role}} : {{extra.name}}</small>