#68 - Unifier les vues pour la liste des albums

javascripts/collection.js

@@ -1,12 +1,12 @@
-if (typeof userId !== "undefined") {
+Vue.createApp({
-    Vue.createApp({
     data() {
         return {
             loading: false,
             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/index.js

@@ -1,215 +0,0 @@
-if (typeof isPublicCollection !== "undefined") {
-    Vue.createApp({
-        data() {
-            return {
-                loading: false,
-                moreFilters: false,
-                items: [],
-                total: 0,
-                // eslint-disable-next-line no-undef
-                page: query.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,
-                // eslint-disable-next-line no-undef
-                shareLink: `${protocol}//${host}/collection/${userId}`,
-                // eslint-disable-next-line no-undef
-                isPublicCollection,
-                // eslint-disable-next-line no-undef
-                query,
-            };
-        },
-        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();
-
-                const sortOrder = {
-                    sort: "artists_sort",
-                    order: "asc",
-                };
-
-                // 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:
-                            if (["order", "sort"].indexOf(key) !== -1) {
-                                sortOrder[key] = value;
-                            }
-                            this[key] = value;
-                    }
-                }
-
-                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")}`;
-                }
-                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");
-}

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/pages/collection.ejs

@@ -1,11 +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>
+    <% } %>
 
     <%- include('../components/filters/index') %>
 
-    <div class="grid grid-cols-1 md:grid-cols-2 list">
+    <div class="grid grid-cols-1 md:grid-cols-2 list hover">
         <div class="loader" v-if="loading">
             <div class="animation"></div>
             <div>
@@ -14,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>
@@ -51,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>
@@ -64,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/index.ejs

@@ -1,124 +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>
-
-
-    <%- include('../../../components/filters/index') %>
-
-    <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) || (Number(page) - 1) <= p && Number(page) + 1 >= p">
-                    <li>
-                        <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="(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>
-                </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 %>";
-    const query = <%- JSON.stringify(query) %>;
-</script>