From 7cc43dba4387f340c7699b8c56c5bf70e4200714 Mon Sep 17 00:00:00 2001
From: dbroqua <contact@darkou.fr>
Date: Tue, 22 Feb 2022 08:15:07 +0100
Subject: [PATCH] Added format description in my-collection view & fixed bug in
 list

---
 sass/index.scss                          |  1 -
 sass/list.scss                           | 16 ----------
 views/pages/ajouter-un-album.ejs         | 37 +++++++++++++++++-------
 views/pages/mon-compte/ma-collection.ejs | 15 ++++++++--
 4 files changed, 38 insertions(+), 31 deletions(-)
 delete mode 100644 sass/list.scss

diff --git a/sass/index.scss b/sass/index.scss
index 4ba329e..8c5e965 100644
--- a/sass/index.scss
+++ b/sass/index.scss
@@ -34,7 +34,6 @@
 @import './toast';
 @import './flash';
 @import './pagination';
-@import './list';
 
 @import './home';
 @import './connexion';
diff --git a/sass/list.scss b/sass/list.scss
deleted file mode 100644
index a93f11e..0000000
--- a/sass/list.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.items {
-    span {
-        margin-right: 0.6rem;
-
-        &::after {
-            content: ",";
-        }
-
-        &:last-child {
-            &::after {
-                margin-right: 0;
-                content: "";
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/views/pages/ajouter-un-album.ejs b/views/pages/ajouter-un-album.ejs
index 071c3c5..54c492b 100644
--- a/views/pages/ajouter-un-album.ejs
+++ b/views/pages/ajouter-un-album.ejs
@@ -25,16 +25,25 @@
                     <br />
                     <span><strong>Pays :</strong> {{ item.country }}</span>
                     <br />
-                    <span class="items">
-                        <strong>Format :</strong> <span v-for="format in item.format">{{ format }}</span>
+                    <span>
+                        <strong>Format : </strong>
+                        <template v-for="(format, index) in item.format">
+                            {{ format }}<template v-if="index < item.format.length - 1">, </template>
+                        </template>
                     </span>
                     <br />
-                    <span class="items">
-                        <strong>Genre :</strong> <span v-for="genre in item.genre">{{ genre }}</span>
+                    <span>
+                        <strong>Genre : </strong> 
+                        <template v-for="(genre, index) in item.genre">
+                            {{ genre }}<template v-if="index < item.genre.length - 1">, </template>
+                        </template>
                     </span>
                     <br />
-                    <span class="items">
-                        <strong>Style :</strong> <span v-for="style in item.style">{{ style }}</span>
+                    <span>
+                        <strong>Style : </strong>
+                        <template v-for="(style, index) in item.style">
+                            {{ style }}<template v-if="index < item.style.length - 1">, </template>
+                        </template>
                     </span>
                 </div>
             </div>
@@ -63,15 +72,19 @@
                     </div>
                     <div>
                         <div class="grid grid-cols-2 gap-10">
-                            <div class="items">
+                            <div>
                                 <strong>Genres</strong>
                                 <br />
-                                <span v-for="genre in details.genres">{{genre}}</span>
+                                <template v-for="(genre, index) in details.genres">
+                                    {{genre}}<template v-if="index < details.genres.length - 1">, </template>
+                                </template>
                             </div>
-                            <div class="items">
+                            <div>
                                 <strong>Styles</strong>
                                 <br />
-                                <span v-for="style in details.styles">{{style}}</span>
+                                <span v-for="(style, index) in details.styles">
+                                    {{style}}<template v-if="index < details.styles.length - 1">, </template>
+                                </span>
                             </div>
                         </div>
                         <hr />
@@ -97,7 +110,9 @@
                             <div>
                                 <strong>Format</strong>
                                 <br />
-                                <span v-for="format in details.formats">{{format.name}}</span>
+                                <span v-for="(format, index) in details.formats">
+                                    {{format.name}}<template v-if="index < details.formats.length - 1">, </template>
+                                </span>
                             </div>
                         </div>
                         <hr />
diff --git a/views/pages/mon-compte/ma-collection.ejs b/views/pages/mon-compte/ma-collection.ejs
index 87b9d1d..71dd2dd 100644
--- a/views/pages/mon-compte/ma-collection.ejs
+++ b/views/pages/mon-compte/ma-collection.ejs
@@ -52,11 +52,20 @@
                 <br />
                 <span><strong>Pays :</strong> {{ item.country }}</span>
                 <br />
-                <span class="items"><strong>Format :</strong> <span v-for="format in item.formats">{{ format.name }}</span></span>
+                <span>
+                    <strong>Format : </strong>
+                    <span v-for="(format, index) in item.formats">
+                        {{ format.name }} 
+                        (<template v-for="(description, j) in format.descriptions">
+                            {{description}}<template v-if="j < format.descriptions.length - 1">, </template>
+                        </template>)
+                        <template v-if="index < item.formats.length - 1">,</template>
+                    </span>
+                </span>
                 <br />
-                <span class="items"><strong>Genre :</strong> <span v-for="genre in item.genres">{{ genre }}</span></span>
+                <span><strong>Genre :</strong> <template v-for="(genre, index) in item.genres">{{ genre }}<template v-if="index < item.genres.length - 1">, </template></template></span>
                 <br />
-                <span class="items"><strong>Style :</strong> <span v-for="style in item.styles">{{ style }}</span></span>
+                <span><strong>Style :</strong> <template v-for="(style, index) in item.styles">{{ style }}<template v-if="index < item.styles.length - 1">, </template></template></span>
             </div>
         </div>
     </div>