javascripts/collection.js

@@ -1,4 +1,3 @@
-if (typeof userId !== "undefined") {
 Vue.createApp({
     data() {
         return {
@@ -6,7 +5,8 @@ if (typeof userId !== "undefined") {
             moreFilters: false,
             items: [],
             total: 0,
-                page: 1,
+            // eslint-disable-next-line no-undef
+            page: query.page || 1,
             totalPages: 1,
             limit: 16,
             artist: "",
@@ -17,8 +17,15 @@ if (typeof userId !== "undefined") {
             sortOrder: "artists_sort-asc",
             sort: "artists_sort",
             order: "asc",
+            itemId: null,
+            showModalDelete: false,
+            showModalShare: false,
             // eslint-disable-next-line no-undef
-                userId,
+            shareLink: `${protocol}//${host}/collection/${userId}`,
+            // eslint-disable-next-line no-undef
+            isPublicCollection,
+            // eslint-disable-next-line no-undef
+            query,
         };
     },
     created() {
@@ -33,6 +40,11 @@ if (typeof userId !== "undefined") {
             const urlParams = new URLSearchParams(queryString);
             const entries = urlParams.entries();
 
+            const sortOrder = {
+                sort: "artists_sort",
+                order: "asc",
+            };
+
             // eslint-disable-next-line no-restricted-syntax
             for (const entry of entries) {
                 const [key, value] = entry;
@@ -41,11 +53,16 @@ if (typeof userId !== "undefined") {
                         this.artist = value;
                         break;
                     default:
+                        if (["order", "sort"].indexOf(key) !== -1) {
+                            sortOrder[key] = value;
+                        }
                         this[key] = value;
                 }
             }
 
-                let url = `/api/v1/albums?userId=${this.userId}&page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
+            this.sortOrder = `${sortOrder.sort}-${sortOrder.order}`;
+
+            let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
             if (this.artist) {
                 url += `&artists_sort=${this.artist.replace("&", "%26")}`;
             }
@@ -74,7 +91,7 @@ if (typeof userId !== "undefined") {
                 .catch((err) => {
                     showToastr(
                         err.response?.data?.message ||
-                                "Impossible de charger cette collection"
+                            "Impossible de charger votre collection"
                     );
                 })
                 .finally(() => {
@@ -136,6 +153,67 @@ if (typeof userId !== "undefined") {
         showMoreFilters() {
             this.moreFilters = !this.moreFilters;
         },
+        toggleModal() {
+            this.showModalDelete = !this.showModalDelete;
         },
-    }).mount("#collection-publique");
+        toggleModalShare() {
+            this.showModalShare = !this.showModalShare;
+        },
+        showConfirmDelete(itemId) {
+            this.itemId = itemId;
+            this.toggleModal();
+        },
+        deleteItem() {
+            if ( vueType === 'private' ) {
+                return false;
             }
+            axios
+                .delete(`/api/v1/albums/${this.itemId}`)
+                .then(() => {
+                    this.fetch();
+                })
+                .catch((err) => {
+                    showToastr(
+                        err.response?.data?.message ||
+                            "Impossible de supprimer cet album"
+                    );
+                })
+                .finally(() => {
+                    this.toggleModal();
+                });
+        },
+        shareCollection() {
+            if ( vueType === 'private' ) {
+                return false;
+            }
+            axios
+                .patch(`/api/v1/me`, {
+                    isPublicCollection: !this.isPublicCollection,
+                })
+                .then((res) => {
+                    this.isPublicCollection = res.data.isPublicCollection;
+
+                    if (this.isPublicCollection) {
+                        showToastr(
+                            "Votre collection est désormais publique",
+                            true
+                        );
+                    } else {
+                        showToastr(
+                            "Votre collection n'est plus partagée",
+                            true
+                        );
+                    }
+                })
+                .catch((err) => {
+                    showToastr(
+                        err.response?.data?.message ||
+                            "Impossible de supprimer cet album"
+                    );
+                })
+                .finally(() => {
+                    this.toggleModalShare();
+                });
+        },
+    },
+}).mount("#collection");

javascripts/mon-compte/ma-collection/details.js

@@ -38,14 +38,21 @@ if (typeof item !== "undefined") {
                 }
             },
             setTrackList() {
+                this.tracklist = [];
                 let subTrack = {
                     type: null,
                     title: null,
                     tracks: [],
                 };
                 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 (subTrack.type) {
@@ -65,6 +72,7 @@ if (typeof item !== "undefined") {
                             position,
                             duration,
                             extraartists,
+                            artists,
                         });
                     }
                 }

javascripts/mon-compte/ma-collection/index.js

@@ -1,201 +0,0 @@
-if (typeof isPublicCollection !== "undefined") {
-    Vue.createApp({
-        data() {
-            return {
-                loading: false,
-                moreFilters: false,
-                items: [],
-                total: 0,
-                page: 1,
-                totalPages: 1,
-                limit: 16,
-                artist: "",
-                format: "",
-                year: "",
-                genre: "",
-                style: "",
-                sortOrder: "artists_sort-asc",
-                sort: "artists_sort",
-                order: "asc",
-                itemId: null,
-                showModalDelete: false,
-                showModalShare: false,
-                shareLink: `${protocol}//${host}/collection/${userId}`,
-                // eslint-disable-next-line no-undef
-                isPublicCollection,
-            };
-        },
-        created() {
-            this.fetch();
-        },
-        methods: {
-            fetch() {
-                this.loading = true;
-                this.total = 0;
-
-                const queryString = window.location.search;
-                const urlParams = new URLSearchParams(queryString);
-                const entries = urlParams.entries();
-
-                // eslint-disable-next-line no-restricted-syntax
-                for (const entry of entries) {
-                    const [key, value] = entry;
-                    switch (key) {
-                        case "artists_sort":
-                            this.artist = value;
-                            break;
-                        default:
-                            this[key] = value;
-                    }
-                }
-
-                let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
-                if (this.artist) {
-                    url += `&artists_sort=${this.artist.replace("&", "%26")}`;
-                }
-                if (this.format) {
-                    url += `&format=${this.format.replace("&", "%26")}`;
-                }
-                if (this.year) {
-                    url += `&year=${this.year}`;
-                }
-                if (this.genre) {
-                    url += `&genre=${this.genre.replace("&", "%26")}`;
-                }
-                if (this.style) {
-                    url += `&style=${this.style.replace("&", "%26")}`;
-                }
-
-                axios
-                    .get(url)
-                    .then((response) => {
-                        this.items = response.data.rows;
-                        this.total = response.data.count || 0;
-                        this.totalPages =
-                            parseInt(response.data.count / this.limit, 10) +
-                            (response.data.count % this.limit > 0 ? 1 : 0);
-                    })
-                    .catch((err) => {
-                        showToastr(
-                            err.response?.data?.message ||
-                                "Impossible de charger votre collection"
-                        );
-                    })
-                    .finally(() => {
-                        this.loading = false;
-                    });
-            },
-            changeUrl() {
-                let url = `?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
-                if (this.artist) {
-                    url += `&artists_sort=${this.artist.replace("&", "%26")}`;
-                }
-                if (this.format) {
-                    url += `&format=${this.format.replace("&", "%26")}`;
-                }
-                if (this.year) {
-                    url += `&year=${this.year}`;
-                }
-                if (this.genre) {
-                    url += `&genre=${this.genre.replace("&", "%26")}`;
-                }
-                if (this.style) {
-                    url += `&style=${this.style.replace("&", "%26")}`;
-                }
-
-                window.location.href = url;
-            },
-            next(event) {
-                event.preventDefault();
-
-                this.page += 1;
-
-                this.changeUrl();
-            },
-            previous(event) {
-                event.preventDefault();
-
-                this.page -= 1;
-
-                this.changeUrl();
-            },
-            goTo(page) {
-                this.page = page;
-
-                this.changeUrl();
-            },
-            changeSort() {
-                const [sort, order] = this.sortOrder.split("-");
-                this.sort = sort;
-                this.order = order;
-                this.page = 1;
-
-                this.changeUrl();
-            },
-            changeFilter() {
-                this.page = 1;
-
-                this.changeUrl();
-            },
-            showMoreFilters() {
-                this.moreFilters = !this.moreFilters;
-            },
-            toggleModal() {
-                this.showModalDelete = !this.showModalDelete;
-            },
-            toggleModalShare() {
-                this.showModalShare = !this.showModalShare;
-            },
-            showConfirmDelete(itemId) {
-                this.itemId = itemId;
-                this.toggleModal();
-            },
-            deleteItem() {
-                axios
-                    .delete(`/api/v1/albums/${this.itemId}`)
-                    .then(() => {
-                        this.fetch();
-                    })
-                    .catch((err) => {
-                        showToastr(
-                            err.response?.data?.message ||
-                                "Impossible de supprimer cet album"
-                        );
-                    })
-                    .finally(() => {
-                        this.toggleModal();
-                    });
-            },
-            shareCollection() {
-                axios
-                    .patch(`/api/v1/me`, {
-                        isPublicCollection: !this.isPublicCollection,
-                    })
-                    .then((res) => {
-                        this.isPublicCollection = res.data.isPublicCollection;
-
-                        if (this.isPublicCollection) {
-                            showToastr(
-                                "Votre collection est désormais publique",
-                                true
-                            );
-                        } else {
-                            showToastr(
-                                "Votre collection n'est plus partagée",
-                                true
-                            );
-                        }
-                    })
-                    .catch((err) => {
-                        showToastr(
-                            err.response?.data?.message ||
-                                "Impossible de supprimer cet album"
-                        );
-                    })
-                    .finally(() => {
-                        this.toggleModalShare();
-                    });
-            },
-        },
-    }).mount("#ma-collection");
-}

package.json

@@ -5,13 +5,13 @@
   "scripts": {
     "start": "node ./dist/bin/www",
     "run:all": "npm-run-all build sass uglify start",
-    "watch": "nodemon -e js,scss",
+    "watch": "npx nodemon -e js,scss",
     "sass": "npx sass sass/index.scss public/css/main.css -s compressed --color",
     "uglify": "npx gulp",
     "prebuild": "rimraf dist",
-    "build": "babel ./src --out-dir dist --copy-files",
+    "build": "npx babel ./src --out-dir dist --copy-files",
     "test": "jest",
-    "prepare": "husky install"
+    "prepare": "npx husky install"
   },
   "engines": {
     "node": "16.x",
@@ -78,7 +78,7 @@
     "vue": "^3.2.31"
   },
   "nodemonConfig": {
-    "exec": "yarn run:all",
+    "exec": "npm run run:all",
     "watch": [
       "src/*",
       "sass/*",

src/routes/ma-collection.js

@@ -10,7 +10,7 @@ const router = express.Router();
 
 router.route("/").get(ensureLoggedIn("/connexion"), async (req, res, next) => {
     try {
-        const page = new Albums(req, "mon-compte/ma-collection/index");
+        const page = new Albums(req, "collection");
 
         await page.loadMyCollection();
 

views/components/filters/artist.ejs

@@ -0,0 +1,11 @@
+<div class="field">
+    <label for="artist">Artiste</label>
+    <select id="artist" v-model="artist" @change="changeFilter">
+        <option value="">Tous</option>
+        <%
+            for (let i = 0; i < page.artists.length; i += 1 ) {
+                __append(`<option value="${page.artists[i]}">${page.artists[i]}</option>`);
+            }
+        %>
+    </select>
+</div>

views/components/filters/format.ejs

@@ -0,0 +1,11 @@
+<div class="field">
+    <label for="format">Format</label>
+    <select id="format" v-model="format" @change="changeFilter">
+        <option value="">Tous</option>
+        <%
+            for (let i = 0; i < page.formats.length; i += 1 ) {
+                __append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
+            }
+        %>
+    </select>
+</div>

views/components/filters/genre.ejs

@@ -0,0 +1,12 @@
+
+<div class="field">
+    <label for="genre">Genre</label>
+    <select id="genre" v-model="genre" @change="changeFilter">
+        <option value="">Tous</option>
+        <%
+            for (let i = 0; i < page.genres.length; i += 1 ) {
+                __append(`<option value="${page.genres[i]}">${page.genres[i]}</option>`);
+            }
+        %>
+    </select>
+</div>

views/components/filters/index.ejs

@@ -0,0 +1,18 @@
+<div class="filters">
+    <%- include('./artist') %>
+    <%- include('./format') %>
+    <%- include('./sort') %>
+</div>
+
+<div class="filters" v-if="moreFilters">
+    <%- include('./year') %>
+    <%- include('./genre') %>
+    <%- include('./style') %>
+</div>
+
+<span @click="showMoreFilters" class="showMoreFilters">
+  <template v-if="!moreFilters">Voir plus de filtres</template>
+  <template v-if="moreFilters">Voir moins de filtres</template>
+  <i class="icon-left-open down" v-if="!moreFilters"></i>
+  <i class="icon-left-open up" v-if="moreFilters"></i>
+</span>

views/components/filters/sort.ejs

@@ -0,0 +1,15 @@
+<div class="field">
+  <label for="sortOrder">Trier par</label>
+  <select id="sortOrder" v-model="sortOrder" @change="changeSort">
+      <option value="artists_sort-asc">Artiste (A-Z)</option>
+      <option value="artists_sort-desc">Artiste (Z-A)</option>
+      <option value="year-asc">Année (1-9)</option>
+      <option value="year-desc">Année (9-1)</option>
+      <option value="country-asc">Pays (A-Z)</option>
+      <option value="country-desc">Pays (Z-A)</option>
+      <option value="formats.name-asc">Format (A-Z)</option>
+      <option value="formats.name-desc">Format (Z-A)</option>
+      <option value="createdAt-asc">Date d'ajout (1-9)</option>
+      <option value="createdAt-desc">Date d'ajout (9-1)</option>
+  </select>
+</div>

views/components/filters/style.ejs

@@ -0,0 +1,11 @@
+<div class="field">
+    <label for="style">Style</label>
+    <select id="style" v-model="style" @change="changeFilter">
+        <option value="">Tous</option>
+        <%
+            for (let i = 0; i < page.styles.length; i += 1 ) {
+                __append(`<option value="${page.styles[i]}">${page.styles[i]}</option>`);
+            }
+        %>
+    </select>
+</div>

views/components/filters/year.ejs

@@ -0,0 +1,11 @@
+<div class="field">
+    <label for="format">Année</label>
+    <select id="format" v-model="year" @change="changeFilter">
+        <option value="">Toutes</option>
+        <%
+            for (let i = 0; i < page.years.length; i += 1 ) {
+                __append(`<option value="${page.years[i]}">${page.years[i]}</option>`);
+            }
+        %>
+    </select>
+</div>

views/pages/ajouter-un-album.ejs

@@ -1,7 +1,7 @@
 <main class="layout-maxed ajouter-un-album" id="ajouter-album">
     <h1>Ajouter un album</h1>
     <form @submit="search">
-        <div class="grid sm:grid-cols-2">
+        <div class="grid grid-cols-1 md:grid-cols-2">
             <div>
                 <label for="q">Nom de l'album ou code barre</label>
                 <div class="field has-addons">
@@ -87,7 +87,14 @@
                             <hr />
                         </div>
                         <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>
                     </div>
                     <div>
@@ -129,10 +136,19 @@
                         <div class="grid grid-cols-2 gap-10">
                             <div>
                                 <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>
                         <hr />

views/pages/collection.ejs

@@ -1,90 +1,24 @@
-<main class="layout-maxed collection" id="collection-publique">
+<%
+    const pageType = page.username ? 'public' : 'private';
+%>
+
+<main class="layout-maxed collection" id="collection">
     <h1>
-        Collection de <%= page.username %>
+        <% if ( pageType === 'private' ) {
+            __append('Ma collection <i class="icon-share" @click="toggleModalShare" aria-label="Partager ma collection" title="Votre collection sera visible en lecture aux personnes ayant le lien de partage"></i>');
+        } else {
+            __append(`Collection de ${page.username}`);
+        } %>
     </h1>
+    <% if ( pageType === 'private' ) { %>
+        <a :href="shareLink" v-if="isPublicCollection" target="_blank">
+            <i class="icon-share"></i> Voir ma collection partagée
+        </a>
+    <% } %>
 
-    <div class="filters">
+    <%- include('../components/filters/index') %>
-        <div class="field">
-            <label for="artist">Artiste</label>
-            <select id="artist" v-model="artist" @change="changeFilter">
-                <option value="">Tous</option>
-                <%
-                    for (let i = 0; i < page.artists.length; i += 1 ) {
-                        __append(`<option value="${page.artists[i]}">${page.artists[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-        <div class="field">
-            <label for="format">Format</label>
-            <select id="format" v-model="format" @change="changeFilter">
-                <option value="">Tous</option>
-                <%
-                    for (let i = 0; i < page.formats.length; i += 1 ) {
-                        __append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-        <div class="field">
-            <label for="sortOrder">Trier par</label>
-            <select id="sortOrder" v-model="sortOrder" @change="changeSort">
-                <option value="artists_sort-asc">Artiste (A-Z)</option>
-                <option value="artists_sort-desc">Artiste (Z-A)</option>
-                <option value="year-asc">Année (A-Z)</option>
-                <option value="year-desc">Année (Z-A)</option>
-                <option value="country-asc">Pays (A-Z)</option>
-                <option value="country-desc">Pays (Z-A)</option>
-                <option value="formats.name-asc">Format (A-Z)</option>
-                <option value="formats.name-desc">Format (Z-A)</option>
-            </select>
-        </div>
-    </div>
 
-    <div class="filters" v-if="moreFilters">
+    <div class="grid grid-cols-1 md:grid-cols-2 list hover">
-        <div class="field">
-            <label for="format">Année</label>
-            <select id="format" v-model="year" @change="changeFilter">
-                <option value="">Toutes</option>
-                <%
-                    for (let i = 0; i < page.years.length; i += 1 ) {
-                        __append(`<option value="${page.years[i]}">${page.years[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-        <div class="field">
-            <label for="genre">Genre</label>
-            <select id="genre" v-model="genre" @change="changeFilter">
-                <option value="">Tous</option>
-                <%
-                    for (let i = 0; i < page.genres.length; i += 1 ) {
-                        __append(`<option value="${page.genres[i]}">${page.genres[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-        <div class="field">
-            <label for="style">Style</label>
-            <select id="style" v-model="style" @change="changeFilter">
-                <option value="">Tous</option>
-                <%
-                    for (let i = 0; i < page.styles.length; i += 1 ) {
-                        __append(`<option value="${page.styles[i]}">${page.styles[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-    </div>
-
-    <span @click="showMoreFilters" class="showMoreFilters">
-        <template v-if="!moreFilters">Voir plus de filtres</template>
-        <template v-if="moreFilters">Voir moins de filtres</template>
-        <i class="icon-left-open down" v-if="!moreFilters"></i>
-        <i class="icon-left-open up" v-if="moreFilters"></i>
-    </span>
-
-    <div class="grid grid-cols-1 md:grid-cols-2 list">
         <div class="loader" v-if="loading">
             <div class="animation"></div>
             <div>
@@ -93,11 +27,20 @@
         </div>
         <div class="item" v-if="!loading" v-for="item in items">
             <span class="title">
+                <% if ( pageType === 'private' ) { %>
+                    <a :href="'/ma-collection/' + item._id">{{ item.artists_sort}} - {{ item.title }}</a>
+                    <i class="icon-trash" @click="showConfirmDelete(item._id)"></i>
+                <% } else { %>
                     {{ item.artists_sort}} - {{ item.title }}
+                <% } %>
             </span>
             <div class="grid grid-cols-2 md:grid-cols-4">
                 <div>
+                    <% if ( pageType === 'private' ) { %>
+                        <a :href="'/ma-collection/' + item._id"><img :src="item.thumb" :alt="item.title" /></a>
+                    <% } else { %>
                         <img :src="item.thumb" :alt="item.title" />
+                    <% } %>
                 </div>
                 <div class="md:col-span-3">
                     <span><strong>Année :</strong> {{ item.year }}</span>
@@ -130,12 +73,12 @@
     <nav class="pagination" role="navigation" aria-label="Pagination">
         <ul class="pagination-list">
             <template v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
-                <template v-if="p < 2 || p > (totalPages - 1) || (page - 1) <= p && page + 1 >= p">
+                <template v-if="p < 2 || p > (totalPages - 1) || (Number(page) - 1) <= p && Number(page) + 1 >= p">
                     <li>
-                        <a class="pagination-link" :class="{'is-current': p === page}" @click="goTo(p)" aria-label="Aller à la page {{p}}">{{ p }}</a>
+                        <a class="pagination-link" :class="{'is-current': p === Number(page)}" @click="goTo(p)" :aria-label="'Aller à la page '+p">{{ p }}</a>
                     </li>
                 </template>
-                <template v-if="(page - 3 === p && page - 2 > 1) || (page + 2 === p && page + 2 < totalPages - 1)">
+                <template v-if="(Number(page) - 3 === p && Number(page) - 2 > 1) || (Number(page) + 2 === p && Number(page) + 2 < totalPages - 1)">
                     <li>
                         <a class="pagination-link is-disabled">…</a>
                     </li>
@@ -143,8 +86,64 @@
             </template>
         </ul>
     </nav>
+
+    <% if ( pageType === 'private' ) { %>
+        <div class="modal" :class="{'is-visible': showModalDelete}">
+            <div class="modal-background"></div>
+            <div class="modal-card">
+                <header></header>
+                <section>
+                    Êtes-vous sûr de vouloir supprimer cet album ?
+                </section>
+                <footer>
+                    <button class="button is-primary" @click="deleteItem">Supprimer</button>
+                    <button class="button" @click="toggleModal">Annuler</button>
+                </footer>
+            </div>
+        </div>
+        <div class="modal" :class="{'is-visible': showModalShare}">
+            <div class="modal-background"></div>
+            <div class="modal-card">
+                <header>
+                    Partager ma collection
+                </header>
+                <section>
+                    <template v-if="!isPublicCollection">
+                        Votre collection sera visible de toute personne disposant du lien suivant :
+                        <br />
+                        <a :href="shareLink" target="_blank">{{shareLink}}</a>
+                        <br />
+                        Ce lien permet uniquement de visualiser l'ensemble de votre collection mais ne perment <strong class="is-danger">en aucun cas</strong> de la modifier.
+                        <br />
+                        Vous pourrez à tout moment supprimer le lien de partage en cliquant à nouveau sur l'icône <i class="icon-share"></i> sur votre collection.
+                    </template>
+                    <template v-if="isPublicCollection">
+                        Vous êtes sur le point de rendre votre collection privée.
+                        <br />
+                        Toute les personnes ayant le lien partagé ne pourront plus accéder à votre collection.
+                        <br />
+                        Vous pourrez à tout moment rendre à nouveau votre collection publique en cliquant sur l'icône <i class="icon-share"></i>.
+                    </template>
+                </section>
+                <footer>
+                    <button v-if="!isPublicCollection" class="button is-primary" @click="shareCollection">Partager</button>
+                    <button v-if="isPublicCollection" class="button is-danger" @click="shareCollection">Supprimer</button>
+                    <button class="button" @click="toggleModalShare">Annuler</button>
+                </footer>
+            </div>
+        </div>
+    <% } %>
+
 </main>
 
 <script>
+    const vueType = "<%= pageType %>";
+    const query = <%- JSON.stringify(query) %>;
+<% if ( pageType === 'private' ) { %>
+    const isPublicCollection = <%= user.isPublicCollection ? 'true' : 'false' %>;
+    const userId = "<%= user._id %>";
+<% } else { %>
     const userId = "<%= params.userId %>";
+    const isPublicCollection = false;
+<% } %>
 </script>

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

@@ -20,16 +20,21 @@
         <div>
             <template v-for="album in tracklist">
                 <strong v-if="album.title">{{album.title}}</strong>
-                <ol class="ml-4">
+                <ul>
-                    <li v-for="track in album.tracks">
+                    <li v-for="(track, index) in album.tracks" class="ml-4">
-                        {{ 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.extraartists && track.extraartists.length > 0" class="sm-hidden ml-4">
+                        <ul v-if="track.artists && track.artists.length > 0" class="sm-hidden">
-                            <li v-for="extra in track.extraartists">
+                            <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>
-                </ol>
+                </ul>
             </template>
         </div>
         <div class="md:col-span-2">

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

@@ -1,201 +0,0 @@
-<main class="layout-maxed collection" id="ma-collection">
-    <h1>
-        Ma collection
-        <i class="icon-share" @click="toggleModalShare" aria-label="Partager ma collection" title="Votre collection sera visible en lecture aux personnes ayant le lien de partage"></i>
-    </h1>
-    <a :href="shareLink" v-if="isPublicCollection" target="_blank">
-        <i class="icon-share"></i> Voir ma collection partagée
-    </a>
-
-    <div class="filters">
-        <div class="field">
-            <label for="artist">Artiste</label>
-            <select id="artist" v-model="artist" @change="changeFilter">
-                <option value="">Tous</option>
-                <%
-                    for (let i = 0; i < page.artists.length; i += 1 ) {
-                        __append(`<option value="${page.artists[i]}">${page.artists[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-        <div class="field">
-            <label for="format">Format</label>
-            <select id="format" v-model="format" @change="changeFilter">
-                <option value="">Tous</option>
-                <%
-                    for (let i = 0; i < page.formats.length; i += 1 ) {
-                        __append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-        <div class="field">
-            <label for="sortOrder">Trier par</label>
-            <select id="sortOrder" v-model="sortOrder" @change="changeSort">
-                <option value="artists_sort-asc">Artiste (A-Z)</option>
-                <option value="artists_sort-desc">Artiste (Z-A)</option>
-                <option value="year-asc">Année (A-Z)</option>
-                <option value="year-desc">Année (Z-A)</option>
-                <option value="country-asc">Pays (A-Z)</option>
-                <option value="country-desc">Pays (Z-A)</option>
-                <option value="formats.name-asc">Format (A-Z)</option>
-                <option value="formats.name-desc">Format (Z-A)</option>
-            </select>
-        </div>
-    </div>
-
-    <div class="filters" v-if="moreFilters">
-        <div class="field">
-            <label for="format">Année</label>
-            <select id="format" v-model="year" @change="changeFilter">
-                <option value="">Toutes</option>
-                <%
-                    for (let i = 0; i < page.years.length; i += 1 ) {
-                        __append(`<option value="${page.years[i]}">${page.years[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-        <div class="field">
-            <label for="genre">Genre</label>
-            <select id="genre" v-model="genre" @change="changeFilter">
-                <option value="">Tous</option>
-                <%
-                    for (let i = 0; i < page.genres.length; i += 1 ) {
-                        __append(`<option value="${page.genres[i]}">${page.genres[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-        <div class="field">
-            <label for="style">Style</label>
-            <select id="style" v-model="style" @change="changeFilter">
-                <option value="">Tous</option>
-                <%
-                    for (let i = 0; i < page.styles.length; i += 1 ) {
-                        __append(`<option value="${page.styles[i]}">${page.styles[i]}</option>`);
-                    }
-                %>
-            </select>
-        </div>
-    </div>
-
-    <span @click="showMoreFilters" class="showMoreFilters">
-        <template v-if="!moreFilters">Voir plus de filtres</template>
-        <template v-if="moreFilters">Voir moins de filtres</template>
-        <i class="icon-left-open down" v-if="!moreFilters"></i>
-        <i class="icon-left-open up" v-if="moreFilters"></i>
-    </span>
-
-    <div class="grid grid-cols-1 md:grid-cols-2 list hover">
-        <div class="loader" v-if="loading">
-            <div class="animation"></div>
-            <div>
-                Chargement des données en cours…
-            </div>
-        </div>
-        <div class="item" v-if="!loading" v-for="item in items">
-            <span class="title">
-                <a :href="'/ma-collection/' + item._id">{{ item.artists_sort}} - {{ item.title }}</a>
-                <i class="icon-trash" @click="showConfirmDelete(item._id)"></i>
-            </span>
-            <div class="grid grid-cols-2 md:grid-cols-4">
-                <div>
-                    <a :href="'/ma-collection/' + item._id"><img :src="item.thumb" :alt="item.title" /></a>
-                </div>
-                <div class="md:col-span-3">
-                    <span><strong>Année :</strong> {{ item.year }}</span>
-                    <br />
-                    <span><strong>Pays :</strong> {{ item.country }}</span>
-                    <br />
-                    <span>
-                        <strong>Format : </strong>
-                        <span v-for="(format, index) in item.formats">
-                            {{ format.name }}
-                            <template v-if="format.descriptions">
-                                (<template v-for="(description, j) in format.descriptions">
-                                    {{description}}<template v-if="j < format.descriptions.length - 1">, </template>
-                                </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>
-                    <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>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="total">
-        <strong>Nombre total d'éléments : </strong>{{total}}
-    </div>
-    <nav class="pagination" role="navigation" aria-label="Pagination">
-        <ul class="pagination-list">
-            <template v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
-                <template v-if="p < 2 || p > (totalPages - 1) || (page - 1) <= p && page + 1 >= p">
-                    <li>
-                        <a class="pagination-link" :class="{'is-current': p === page}" @click="goTo(p)" aria-label="Aller à la page {{p}}">{{ p }}</a>
-                    </li>
-                </template>
-                <template v-if="(page - 3 === p && page - 2 > 1) || (page + 2 === p && page + 2 < totalPages - 1)">
-                    <li>
-                        <a class="pagination-link is-disabled">…</a>
-                    </li>
-                </template>
-            </template>
-        </ul>
-    </nav>
-
-    <div class="modal" :class="{'is-visible': showModalDelete}">
-        <div class="modal-background"></div>
-        <div class="modal-card">
-            <header></header>
-            <section>
-                Êtes-vous sûr de vouloir supprimer cet album ?
-            </section>
-            <footer>
-                <button class="button is-primary" @click="deleteItem">Supprimer</button>
-                <button class="button" @click="toggleModal">Annuler</button>
-            </footer>
-        </div>
-    </div>
-    <div class="modal" :class="{'is-visible': showModalShare}">
-        <div class="modal-background"></div>
-        <div class="modal-card">
-            <header>
-                Partager ma collection
-            </header>
-            <section>
-                <template v-if="!isPublicCollection">
-                    Votre collection sera visible de toute personne disposant du lien suivant :
-                    <br />
-                    <a :href="shareLink" target="_blank">{{shareLink}}</a>
-                    <br />
-                    Ce lien permet uniquement de visualiser l'ensemble de votre collection mais ne perment <strong class="is-danger">en aucun cas</strong> de la modifier.
-                    <br />
-                    Vous pourrez à tout moment supprimer le lien de partage en cliquant à nouveau sur l'icône <i class="icon-share"></i> sur votre collection.
-                </template>
-                <template v-if="isPublicCollection">
-                    Vous êtes sur le point de rendre votre collection privée.
-                    <br />
-                    Toute les personnes ayant le lien partagé ne pourront plus accéder à votre collection.
-                    <br />
-                    Vous pourrez à tout moment rendre à nouveau votre collection publique en cliquant sur l'icône <i class="icon-share"></i>.
-                </template>
-            </section>
-            <footer>
-                <button v-if="!isPublicCollection" class="button is-primary" @click="shareCollection">Partager</button>
-                <button v-if="isPublicCollection" class="button is-danger" @click="shareCollection">Supprimer</button>
-                <button class="button" @click="toggleModalShare">Annuler</button>
-            </footer>
-        </div>
-    </div>
-</main>
-
-<script>
-    const isPublicCollection = <%= user.isPublicCollection ? 'true' : 'false' %>;
-    const userId = "<%= user._id %>";
-</script>