#49 - Mise à jour d'une fiche

views/pages/composants.ejs

@@ -355,6 +355,7 @@
     <i class="icon-left-open">.icon-left-open</i>
     <i class="icon-right-open">.icon-right-open</i>
     <i class="icon-export">.icon-export</i>
+    <i class="icon-refresh">.icon-refresh</i>
     <i class="icon-share">.icon-share</i>
     <i class="icon-spin">.icon-spin</i>
     <i class="icon-sun">.icon-sun</i>

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

@@ -1,6 +1,10 @@
 <main class="layout-maxed ma-collection-details" id="app" v-cloak @keyup="changeImage">
 
-    <h1>{{item.artists_sort}} - {{item.title}}</h1>
+    <h1>
+        {{item.artists_sort}} - {{item.title}}
+        <i class="icon-trash" title="Supprimer cette fiche" @click="showConfirmDelete()"></i>
+        <i class="icon-refresh" title="Mettre à jour les données de cette fiche" @click="updateItem()"></i>
+    </h1>
     <div class="grid sm:grid-cols-3 gap-16">
         <div class="text-center">
             <img :src="item.thumb %>" :alt="`Miniature pour l'album ${item.title}`" />
@@ -153,6 +157,20 @@
             <img :src="preview" />
         </div>
     </div>
+
+    <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>
 </main>
 
 <script>
@@ -167,6 +185,7 @@
                 identifiersPreviewLength: 16,
                 preview: null,
                 index: null,
+                showModalDelete: false,
             }
         },
         created() {
@@ -277,6 +296,35 @@
 
                 document.querySelector('#identifiers').scrollIntoView({ behavior: 'smooth' });
             },
+            showConfirmDelete() {
+                this.toggleModal();
+            },
+            toggleModal() {
+                this.showModalDelete = !this.showModalDelete;
+            },
+            updateItem() {
+                showToastr("Mise à jour en cours…", true);
+                axios.patch(`/api/v1/albums/${this.item._id}`)
+                    .then( (res) => {
+                        showToastr("Mise à jour réalisée avec succès", true);
+                        this.item = res.data;
+                    })
+                    .catch((err) => {
+                        showToastr(err.response?.data?.message || "Impossible de mettre à jour cet album", false);
+                    });
+            },
+            deleteItem() {
+                axios.delete(`/api/v1/albums/${this.item._id}`)
+                    .then( () => {
+                        return locatiom.href = "/ma-collection";
+                    })
+                    .catch((err) => {
+                        showToastr(err.response?.data?.message || "Impossible de supprimer cet album");
+                    })
+                    .finally(() => {
+                        this.toggleModal();
+                    });
+            },
         },
     }).mount('#app');
 </script>