Added method for delete item in collection

sass/ma-collection.scss

@@ -34,6 +34,15 @@
         .title {
             font-weight: 800;
             font-size: 1.4rem;
+
+            .icon {
+                cursor: pointer;
+                color: #f14668;
+
+                &:hover {
+                    color: #f03a5f;
+                }
+            }
         }
 
         .grid {

src/middleware/Albums.js

@@ -2,70 +2,18 @@ import moment from "moment";
 
 import Pages from "./Pages";
 
-import { getAlbumDetails } from "../helpers";
-
 import AlbumsModel from "../models/albums";
+import ErrorEvent from "../libs/error";
 
 /**
  * Classe permettant la gestion des albums d'un utilisateur
  */
 class Albums extends Pages {
-    async getFormAddOne() {
-        const data = await getAlbumDetails(this.req.params.discogsId);
-
-        const {
-            id, // Integer
-            year, // - Integer
-            uri, // String
-            artists, // - Array<Object>
-            artists_sort, // String
-            labels, // - Array<Object>
-            series, // Array
-            companies, // - Array<Object>
-            formats, // - Array<Object>
-            title, // - String
-            country, // - String
-            released, // - Date
-            notes, // - String
-            identifiers, // - Array<Object>
-            videos, // - Array<Object>
-            genres, // - Array<String>
-            styles, // - Array<String>
-            tracklist, // - Array<Object>
-            extraartists, // - Array<Object>
-            images, // - Array<Object
-            thumb, // - String
-        } = data;
-
-        this.pageContent.page.values = "test";
-
-        this.setPageContent("values", {
-            id,
-            year,
-            uri,
-            artists,
-            artists_sort,
-            labels,
-            series,
-            companies,
-            formats,
-            title,
-            country,
-            released,
-            notes,
-            identifiers,
-            videos,
-            genres,
-            styles,
-            tracklist,
-            extraartists,
-            images,
-            thumb,
-        });
-
-        return true;
-    }
-
+    /**
+     * Méthode permettant d'ajouter un album dans une collection
+     * @param {Object} req
+     * @return {Object}
+     */
     static async postAddOne(req) {
         const { body, user } = req;
         const data = {
@@ -83,8 +31,14 @@ class Albums extends Pages {
         return album.save();
     }
 
+    /**
+     * Méthode permettant de récupérer les éléments distincts d'une collection
+     * @param {String} field
+     * @param {ObjectId} user
+     * @return {Array}
+     */
     static async getAllDistincts(field, user) {
-        const artists = await AlbumsModel.find(
+        const distincts = await AlbumsModel.find(
             {
                 user,
             },
@@ -96,9 +50,13 @@ class Albums extends Pages {
             }
         ).distinct(field);
 
-        return artists;
+        return distincts;
     }
 
+    /**
+     * Méthode permettant de récupérer la liste des albums d'une collection
+     * @return {Object}
+     */
     async getAll() {
         const {
             page = 1,
@@ -146,6 +104,26 @@ class Albums extends Pages {
         };
     }
 
+    /**
+     * Méthode permettant de supprimer un élément d'une collection
+     * @return {Boolean}
+     */
+    async deleteOne() {
+        const res = await AlbumsModel.findOneAndDelete({
+            user: this.req.user._id,
+            _id: this.req.params.itemId,
+        });
+
+        if (res) {
+            return true;
+        }
+
+        throw new ErrorEvent(404, "Impossible de trouver cet album");
+    }
+
+    /**
+     * Méthode permettant de créer la page "ma-collection"
+     */
     async loadMyCollection() {
         const artists = await Albums.getAllDistincts(
             "artists_sort",

src/routes/api/v1/albums.js

@@ -29,4 +29,17 @@ router
         }
     });
 
+router
+    .route("/:itemId")
+    .delete(ensureLoggedIn("/connexion"), async (req, res, next) => {
+        try {
+            const albums = new Albums(req);
+            const data = await albums.deleteOne();
+
+            sendResponse(req, res, data);
+        } catch (err) {
+            next(err);
+        }
+    });
+
 export default router;

views/pages/ajouter-un-album.ejs

@@ -3,7 +3,7 @@
         <div>
             <form @submit="search">
                 <div class="field has-addons">
-                    <input type="text" name="q" v-model="q" placeholder="Nom de l'album ou code barre (ex : Hybrid Theory)">
+                    <input type="text" name="q" v-model="q" placeholder="Nom de l'album ou code barre (ex : Hybrid Theory)" autofocus>
                     <button class="button is-link" :disabled="loading">
                         <span class="icon">
                             <i class="fas fa-search"></i>

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

@@ -37,7 +37,12 @@
         </div>
     </div>
     <div class="list" v-if="!loading" v-for="item in items">
-        <span class="title">{{ item.artists_sort }} {{ item.title }}</span>
+        <span class="title">
+            {{ item.artists_sort}} - {{ item.title }}
+            <span class="icon" @click="showConfirmDelete(item._id)">
+                <i class="fa-solid fa-trash"></i>
+            </span>
+        </span>
         <div class="grid grid-cols-2 md:grid-cols-4">
             <div>
                 <img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
@@ -57,13 +62,27 @@
     </div>
     <nav class="pagination" role="navigation" aria-label="pagination">
         <a class="pagination-previous" :class="{'is-disabled': page === 1}" @click="previous">Précédent</a>
-        <a class="pagination-next" :class="{'is-disabled': (page*limit) >= total}" @click="next">Suivant</a>
+        <a class="pagination-next" :class="{'is-disabled': !total || (page*limit) >= total}" @click="next">Suivant</a>
         <ul class="pagination-list">
             <li v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
                 <a class="pagination-link" :class="{'is-current': p === page}" @click="goTo(p)" aria-label="Goto page 1">{{ p }}</a>
             </li>
         </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>
 </section>
 
 <script>
@@ -81,6 +100,8 @@
                 sortOrder: 'artists_sort-asc',
                 sort: 'artists_sort',
                 order: 'asc',
+                itemId: null,
+                showModalDelete: false,
             }
         },
         created() {
@@ -144,6 +165,25 @@
                 this.page = 1;
 
                 this.fetch();
+            },
+            toggleModal() {
+                this.showModalDelete = !this.showModalDelete;
+            },
+            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();
+                    });
             }
         }
   }).mount('#app')