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

This commit is contained in:
Damien Broqua 2023-01-17 16:54:58 +01:00
parent dff1d2baf0
commit 8822056c1f
3 changed files with 37 additions and 8 deletions

View File

@ -38,14 +38,21 @@ if (typeof item !== "undefined") {
} }
}, },
setTrackList() { setTrackList() {
this.tracklist = [];
let subTrack = { let subTrack = {
type: null, type: null,
title: null, title: null,
tracks: [], tracks: [],
}; };
for (let i = 0; i < this.item.tracklist.length; i += 1) { for (let i = 0; i < this.item.tracklist.length; i += 1) {
const { type_, title, position, duration, extraartists } = const {
this.item.tracklist[i]; type_,
title,
position,
duration,
artists,
extraartists,
} = this.item.tracklist[i];
if (type_ === "heading") { if (type_ === "heading") {
if (subTrack.type) { if (subTrack.type) {
@ -65,6 +72,7 @@ if (typeof item !== "undefined") {
position, position,
duration, duration,
extraartists, extraartists,
artists,
}); });
} }
} }

View File

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

View File

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