Added method for delete item in collection

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')