.gitignore

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

docker-compose.yml.dev

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

sass/index.scss

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

sass/list.scss

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

views/pages/ajouter-un-album.ejs

@@ -25,25 +25,16 @@
                     <br />
                     <span><strong>Pays :</strong> {{ item.country }}</span>
                     <br />
-                    <span>
+                    <span class="items">
-                        <strong>Format : </strong>
+                        <strong>Format :</strong> <span v-for="format in item.format">{{ format }}</span>
-                        <template v-for="(format, index) in item.format">
-                            {{ format }}<template v-if="index < item.format.length - 1">, </template>
-                        </template>
                     </span>
                     <br />
-                    <span>
+                    <span class="items">
-                        <strong>Genre : </strong> 
+                        <strong>Genre :</strong> <span v-for="genre in item.genre">{{ genre }}</span>
-                        <template v-for="(genre, index) in item.genre">
-                            {{ genre }}<template v-if="index < item.genre.length - 1">, </template>
-                        </template>
                     </span>
                     <br />
-                    <span>
+                    <span class="items">
-                        <strong>Style : </strong>
+                        <strong>Style :</strong> <span v-for="style in item.style">{{ style }}</span>
-                        <template v-for="(style, index) in item.style">
-                            {{ style }}<template v-if="index < item.style.length - 1">, </template>
-                        </template>
                     </span>
                 </div>
             </div>
@@ -72,19 +63,15 @@
                     </div>
                     <div>
                         <div class="grid grid-cols-2 gap-10">
-                            <div>
+                            <div class="items">
                                 <strong>Genres</strong>
                                 <br />
-                                <template v-for="(genre, index) in details.genres">
+                                <span v-for="genre in details.genres">{{genre}}</span>
-                                    {{genre}}<template v-if="index < details.genres.length - 1">, </template>
-                                </template>
                             </div>
-                            <div>
+                            <div class="items">
                                 <strong>Styles</strong>
                                 <br />
-                                <span v-for="(style, index) in details.styles">
+                                <span v-for="style in details.styles">{{style}}</span>
-                                    {{style}}<template v-if="index < details.styles.length - 1">, </template>
-                                </span>
                             </div>
                         </div>
                         <hr />
@@ -110,9 +97,7 @@
                             <div>
                                 <strong>Format</strong>
                                 <br />
-                                <span v-for="(format, index) in details.formats">
+                                <span v-for="format in details.formats">{{format.name}}</span>
-                                    {{format.name}}<template v-if="index < details.formats.length - 1">, </template>
-                                </span>
                             </div>
                         </div>
                         <hr />

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

@@ -52,20 +52,11 @@
                 <br />
                 <span><strong>Pays :</strong> {{ item.country }}</span>
                 <br />
-                <span>
+                <span class="items"><strong>Format :</strong> <span v-for="format in item.formats">{{ format.name }}</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><strong>Genre :</strong> <template v-for="(genre, index) in item.genres">{{ genre }}<template v-if="index < item.genres.length - 1">, </template></template></span>
+                <span class="items"><strong>Genre :</strong> <span v-for="genre in item.genres">{{ genre }}</span></span>
                 <br />
-                <span><strong>Style :</strong> <template v-for="(style, index) in item.styles">{{ style }}<template v-if="index < item.styles.length - 1">, </template></template></span>
+                <span class="items"><strong>Style :</strong> <span v-for="style in item.styles">{{ style }}</span></span>
             </div>
         </div>
     </div>