From 736a0afa44116b1cdb66053022e8d0c75ffbbf8c Mon Sep 17 00:00:00 2001
From: Damien Broqua <damien@freemiumplay.com>
Date: Fri, 15 Dec 2023 08:30:41 +0100
Subject: [PATCH] {WIP} Component for album details

---
 views/components/album.ejs                    | 133 +++++++++++++++++
 views/pages/ajouter-un-album.ejs              |   4 +-
 .../mon-compte/ma-collection/details.ejs      | 134 +-----------------
 3 files changed, 136 insertions(+), 135 deletions(-)
 create mode 100644 views/components/album.ejs

diff --git a/views/components/album.ejs b/views/components/album.ejs
new file mode 100644
index 0000000..b834a4d
--- /dev/null
+++ b/views/components/album.ejs
@@ -0,0 +1,133 @@
+<div class="grid md:grid-cols-3 gap-16">
+  <div>
+      <template v-for="album in tracklist">
+          <strong v-if="album.title">{{album.title}}</strong>
+          <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>
+                      </li>
+                  </ul>
+              </li>
+          </ul>
+      </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<template v-if="item.formats.length > 1">s</template></strong>
+              <ul class="ml-4">
+                  <li v-for="(format) in item.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 />
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
+          <div>
+              <strong id="identifiers">Code<template v-if="item.identifiers.length > 1">s</template> barre<template v-if="item.identifiers.length > 1">s</template></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<template v-if="item.labels.length > 1">s</template></strong>
+              <ol class="ml-4">
+                  <li v-for="label in item.labels">
+                      {{label.name}} {{label.catno}}
+                  </li>
+              </ol>
+              <strong>Société<template v-if="item.companies.length > 1">s</template></strong>
+              <ol class="ml-4">
+                  <li v-for="company in item.companies">
+                      <strong>{{company.entity_type_name}}</strong> {{company.name}}
+                  </li>
+              </ol>
+          </div>
+      </div>
+      <hr />
+      <div class="grid gap-10">
+          <div>
+              <strong>Note</strong>
+              <div v-html="(item.notes || '').replaceAll('\n', '<br />')"></div>
+          </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}}</a>
+                      </dt>
+                      <dd>
+                          {{video.description}}
+                      </dd>
+                  </template>
+              </dl>
+          </div>
+      </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/views/pages/ajouter-un-album.ejs b/views/pages/ajouter-un-album.ejs
index 1c29db2..f8f7c96 100644
--- a/views/pages/ajouter-un-album.ejs
+++ b/views/pages/ajouter-un-album.ejs
@@ -79,7 +79,7 @@
                 <button aria-label="Fermer" class="close" @click="toggleModal"></button>
             </header>
             <section>
-                <div class="grid grid-cols-1 sm:grid-cols-2 gap-16">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-16">
                     <div>
                         <div class="text-center">
                             <img :src="details.thumb %>" :alt="`Miniature pour l'album ${details.title}`" />
@@ -104,7 +104,7 @@
                             </li>
                         </ul>
                     </div>
-                    <div>
+                    <div class="md:col-span-2">
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                             <div class="grid grid-cols-1">
                                 <strong>Genres</strong>
diff --git a/views/pages/mon-compte/ma-collection/details.ejs b/views/pages/mon-compte/ma-collection/details.ejs
index 0512dac..3b50b40 100644
--- a/views/pages/mon-compte/ma-collection/details.ejs
+++ b/views/pages/mon-compte/ma-collection/details.ejs
@@ -21,139 +21,7 @@
         </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>
-                <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>
-                            </li>
-                        </ul>
-                    </li>
-                </ul>
-            </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<template v-if="item.formats.length > 1">s</template></strong>
-                    <ul class="ml-4">
-                        <li v-for="(format) in item.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 />
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
-                <div>
-                    <strong id="identifiers">Code<template v-if="item.identifiers.length > 1">s</template> barre<template v-if="item.identifiers.length > 1">s</template></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<template v-if="item.labels.length > 1">s</template></strong>
-                    <ol class="ml-4">
-                        <li v-for="label in item.labels">
-                            {{label.name}} {{label.catno}}
-                        </li>
-                    </ol>
-                    <strong>Société<template v-if="item.companies.length > 1">s</template></strong>
-                    <ol class="ml-4">
-                        <li v-for="company in item.companies">
-                            <strong>{{company.entity_type_name}}</strong> {{company.name}}
-                        </li>
-                    </ol>
-                </div>
-            </div>
-            <hr />
-            <div class="grid gap-10">
-                <div>
-                    <strong>Note</strong>
-                    <div v-html="(item.notes || '').replaceAll('\n', '<br />')"></div>
-                </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}}</a>
-                            </dt>
-                            <dd>
-                                {{video.description}}
-                            </dd>
-                        </template>
-                    </dl>
-                </div>
-            </div>
-        </div>
-    </div>
+    <%- include('../../../components/album.ejs') %>
 
     <div class="modal" :class="{'is-visible': modalIsVisible}">
         <div class="modal-background"></div>