Added format description in my-collection view & fixed bug in list

.gitignore

@@ -123,3 +123,4 @@ yarn.lock
 public/css
 public/css
 docker-compose.yml
+dump

docker-compose.yml.dev

@@ -31,6 +31,8 @@ services:
       - 27617:27017
     networks:
       - mymusiclibrary
+    volumes:
+      - ./dump:/dump
 
 networks:
   mymusiclibrary:

sass/index.scss

@@ -34,7 +34,6 @@
 @import './toast';
 @import './flash';
 @import './pagination';
-@import './list';
 
 @import './home';
 @import './connexion';

sass/list.scss

@@ -1,16 +0,0 @@
-.items {
-    span {
-        margin-right: 0.6rem;
-
-        &::after {
-            content: ",";
-        }
-
-        &:last-child {
-            &::after {
-                margin-right: 0;
-                content: "";
-            }
-        }
-    }
-}

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 />

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>